Concept Connect

an overview

a review

a new media design project by Shiraz Iqbal at NID GNpowered by Processing. 2012

There is a story of a place that was a haven for creative people to interact, connect and bond over a shared love of their work. The legend tells of a college campus in Ahmedabad where collaboration was an everyday thing and cross disciplinary projects were commonplace. As the institute expanded, schedules became tighter with new technology and much time passed, the early compartments of design disciplines that students were put into became rigid boxes that very few very even poke their heads out of throughout their time at the institute.

Yes, there is so much work, so little time and so many students across the three NID campuses that it can be daunting to set out to find a collaborator these days. It is just simpler to work alone or at most with others you see in class every day and finish off your work for the juries. But what if everytime you set out to work on a project there was somewhere at hand where you could find out what connected work was happening at your very own institute? Forget researching online databases, why shouldn’t you have an easy way to start out with the projects of the people around you? Enter Concept Connect.

the solutionConcept Connect is envisioned to be an online portal to which you can sign in using your NID student account either on a computer or a mobile device. It enables an easy alternative form of social networking within the NID community across all campuses.

In the interactive information visualization, the user encounters a mass of interactive life-buoy like objects bobbing about the screen. Each donut/buoy represents one project within the NID community. Connections between projects are represented as strings which stretch & cause connected projects to be dragged along as the user selects and moves his project of choice across the screen.

Projects are added in real time and each one is automatically categorized by knowledge taxonomy for ease of access from a rational scientific perspective. These knowledge categories have nothing to do with the traditional organisation by design discipline. Concept connect seeks to break down such barriers.

a visual database of all projects [...] that is easy and fun to explore. connections between projects [are exposed]. [It] seeks to break down the barriers of organization by design discipline

Fig 1. Cropped screenshot : [...] each donut/buoy represents one project... Connections between projects are represented as strings... Projects are added in real time, and [...] automatically categorized by knowledge taxonomy

one

overviewConcept connect is founded on user data sharing. Consequently the opening screen presents the user with three options : add Concept, Connect projects, Community engage. The first option takes you to an entry form where you can enter details about a project you’re working on to add it to Concept Connect, the second one takes you to the interactive data visualization that is at the heart of Concept Connect and the third one lets you interact with the virtual community of users.

Once a user inputs a project’s details via a form field, it is sent to the Alchemy API that uses a semantic text processing engine to extract keywords and concepts. Alchemy also returns a broad category to which the text belongs. Current support returns one of the following : arts & entertainment, business, computer & internet, culture & politics, gaming, health, law & crime, religion, recreation, science & technology, sports and weather.

Within the Processing environment, the results returned by each Alchemy query are stored in a project class and then appended to an XML file . Every time there is a new entry, processing reloads the contents of this XML file into a set of project details variables that corresponds to a parallel set of visual node variables.

Currently when the user hovers over a node, the concept summary of the project corresponding to that node is retrieved using a boolean search and displayed with minimal lag.

Fig 2. The area at the bottom of the screen where information about the selected project is displayed

SEE BY CATEGORY MY PROJECTS LOGOUTCHAT+COLLABORATE

Concept ConnectCOLLABORATIVE SOCIAL NETWORKS

project name conceptual links with other projectsdetailed conceptual information about the project as provided by the student along with the contact details of the student. this will be a scrollable text box with selectable text for easy copy pasting into a chat window for discussion masculinity

statusmachismo

bharatiya nari

traditionhopesex education UN

Dec

lara

tion

iden

titylove

Indian woman

WHO

child

ren swear wordsgender

violenceNG

O

Diagram 1. Revised layout to accomodate a large mass of projects + bring all connected options into the same screen space

reviewUpon review it seems superfluous the separation between the community, concept and connect screens. Instead, following login, the user is presented directly with the visualization screen albeit with some modifications. The layout of the screen is modified to the following structure with a list of experience management options above and a split information display at the bottom of the screen. This frees up a significant chunk of the screen for the project nodes.

When the user hovers over a node, in addition to the concept summary, a keyword cloud is generated on the bottom right that lists concepts that are common between that project and all other projects on the screen. The stronger the link, the heavier the display font weight.

When any of the overhead options (along the top of the screen) is clicked, a translucent overlay menu is displayed on top of the visualization. The add project form is moved to within the “my projects” option.

Within this menu the user can select to add projects, actively link one of their projects to another user’s project (pending approval from that user so that once approval is received, the link is shown in the visualization as an active one) or give credit to another user who is collaborating with him/her.

Additionally it is suggested that the Processing.js environment for web based visualizations be used solely for visualizations in the beta testing version with all database functionality being moved to a mySQL database.

two

overviewIf a node is clicked, then the keyword list of that project is matched with that of all the other projects. A weighted list of projects which have the same keyword is then displayed. The more the number of matching keywords, the greater the correlation and then larger the font size in which the name of the related project is displayed. Also concept connect draws on-screen these links as threads which cause the connected projects to be dragged along with the selected project.

Using the broad category field that each project has been assigned by Alchemy (see the top of this page) the number of projects belonging to each category is graphed in a bar graph on the right of the screen.

three

Fig 3. The projects that have links to the selected one displayed showing the strength of correlation

Fig 4 .

reviewIf a node is clicked, then the names of the projects that are linked with that project are displayed in the bottom right hand of the screen, along with the visual links being displayed in the visualization. The project names and nodes are coloured as per their knowledge taxonomy on selection.

The very first management option on the top left, “see by category” is where the prominent bar graph from the first iteration of concept connect has been moved to. On selecting this option, the knowledge taxonomies are revealed. These are selectable to allow visual differentiation as shown below.

Significant changes have come about in the proposed layout. The system of knowledge taxonomy has been revised to the Dewey decimal system which is used in standard library classification. Additionally next to each category is a tick box which turns on and off the selective colouring of those projects so they can be easily visually investigated.

SEE BY CATEGORY MY PROJECTS LOGOUTCHAT+COLLABORATE

Concept ConnectCOLLABORATIVE SOCIAL NETWORKS

‘project name’ linked to :detailed conceptual information about the project as provided by the student along with the contact details of the student. this will be a scrollable text box with selectable text for easy copy pasting into a chat window for discussion

How to Become a Woman?

Web-Based Design Education: A New Media Perspective

Against the Dying of the Light: Sustaining Live Social Games

How to Become a Woman?

Web-Based Design Education: A New Media PerspectiveAcross Boundaries: Idealising HomeAgainst the Dying of the Light: Sustaining Live Social Games

Diagram 2. Once a project is dragged, the other projects it could be linked to are shown, along with a weighted display of the names of those projects. Weightage is by the strength of the conceptual link determined by Concept Connect.

SEE BY CATEGORY MY PROJECTS LOGOUTCHAT+COLLABORATE

Concept ConnectCOLLABORATIVE SOCIAL NETWORKS

project name conceptual links with other projectsdetailed conceptual information about the project as provided by the student along with the contact details of the student. this will be a scrollable text box with selectable text for easy copy pasting into a chat window for discussion masculinity

statusmachismo

bharatiya nari

traditionhopesex education U

N D

ecla

ratio

n

iden

titylove

Indian woman

WHO

child

ren swear wordsgender

violenceNG

O

Diagram 3. Knowledge taxonomy bar graph within the “see by category” option.

Computer science, information & general worksPhilosophy and psychologyReligionSocial sciencesLanguageScienceTechnologyArts & recreationLiteratureHistory & geography

SHOW CATEGORICAL LANDSCAPE

SHOW SUB-CATEGORIES

overviewAs this is the secondary form of interaction with the data., each category line on the graph is interactive. If clicked, Concept Connect highlights all the projects in that category for easy access.

The prototype offers a Community Engage option in the opening screen prior to entering the visualzation which is an avatar management center. (this feature has not been implemented in the prototype) Each student creates a virtual character that can gain experience points for collaboration & contributions to others' projects. Here, students can forge new project links, acknowledge a contribution made to their project by others and select avatar (personal) attributes that he/she wants to work on developing. These could be anything viz. graphic design skills, electronics, hacking skills etc.

Following the model of systems like Chore Wars “ [which] lets you claim experience points for household chores. By getting other people in your house or workplace to sign up to the site, you can assign experience point rewards to individual tasks and chores, and see how quickly each of you levels up. ”

“... it's completely up to you what you do with the data. You could use it just for a few weeks, to get a sample reading of your [gameworld and players]..” (which is the most immediate functionality that Concept Connect affords)

“... or award treats for levelling up, or allow them to 'spend' in-game gold pieces on toys and games in the real world“ (Communally decided rewards)

Once the community figures out universally acceptable systems of exchange and recognition for services rendered, it is expected that a tool such as this will optimise the time spent acquiring skill sets, and contribute to higher quality of finished projects in the college. The community of students then becomes a game world.

four review

If the “Show sub-categories” option is selected, the visualization is suppressed to avoid overcrowding and the user gets to select just what kinds of Philosophy projects for example they would like to see highlighted.

This is in accordance with Tidwell’s assertion that “an interface must provide a fluid environment for reflective cognition and higher order thought” (Tidwell)

The second button provided within this menu, “Show Categorical Landscape” maps a “kind of conceptual grocery store” (Lin 1992 & Card 1999) on screen. The concept nodes re-arrange themselves so that related ones are spatially near and form a map (since one project may be conceptually close to multiple knowledge categories)

The options made available under “my projects” and “chat

SEE BY CATEGORY MY PROJECTS LOGOUTCHAT+COLLABORATE

COLLABORATIVE SOCIAL NETWORKS

project name conceptual links with other projectsdetailed conceptual information about the project as provided by the student along with the contact details of the student. this will be a scrollable text box with selectable text for easy copy pasting into a chat window for discussion masculinity

statusmachismo

bharatiya nari

traditionhopesex education U

N D

ecla

ratio

n

iden

titylove

Indian woman

WHO

child

ren swear wordsgender

violenceNG

O

Diagram 4. Knowledge taxonomy list opens on clicking the show sub-categories option, allowing the user to narrow his/her search. Clicking the Concept Connect logo takes you back to the main visualization, alternatively unselecting the show sub-categories option will take you back to the overlay view shown on the previous page

SHOW CATEGORICAL LANDSCAPE

SHOW SUB-CATEGORIES

Concept Connect

Computer science, information & general worksPhilosophy and psychologyReligionSocial sciencesLanguageScienceTechnologyArts & recreationLiteratureHistory & geography

Metaphysics

Ontology

Cosmology (Philosophy of nature)

Space

Time

Change

Structure

Force and energy

Number and quantity

PhilosopyMetaphysicsEpistemologyParapsychology & OccultismPhilosophical Schools of ThoughtPsychologyLogicEthicsAncient, medieval, and Eastern philosophyModern Western Philosophy

PROJECT INSPIRED BY discussions with Dr. Jignesh Khakhar & Girish KrishnanBUILT ON D Davis's 2010 sketch 'Directed Graph', Dynamic RelaxationINTERFACE DEVELOPED ON the ControlP5 library by Andreas Schlegel, 2012PROTOTYPE CODED BY Shiraz Iqbal January 2013.

SEE BY CATEGORY MY PROJECTS LOGOUTCHAT+COLLABORATE

Concept ConnectCOLLABORATIVE SOCIAL NETWORKS

detailed conceptual information about the project as provided by the student along with the contact details of the student. this will be a scrollable text box with selectable text for easy copy pasting into a chat window for discussion masculinity

statusmachismo

bharatiya nari

traditionhopesex education U

N D

ecla

ratio

n

iden

titylove

Indian woman

WHO

child

ren swear wordsgender

violenceNG

O

SHOW CATEGORICAL LANDSCAPE

conceptual links with other projectsproject name

Diagram 5. The conceptual grocery store

Computer science, information & general works

Philosophy and psychology

Religion

Social sciences

Language

Science Technology

Arts & recreation

Literature

History & geography

five

reviewand collaborate” are shown in the diagrams below :

Gamification has been hinted at in this redesign of the interface. with the introduction of credits received for contributions and acknowledgement given for contributions. However, prior to developing the game world further, the interface described in the review needs to be prototyped and tested.

reviewreview

SEE BY CATEGORY MY PROJECTS LOGOUTCHAT+COLLABORATE

Concept ConnectCOLLABORATIVE SOCIAL NETWORKS

project name conceptual links with other projectsdetailed conceptual information about the project as provided by the student along with the contact details of the student. this will be a scrollable text box with selectable text for easy copy pasting into a chat window for discussion masculinity

statusmachismo

bharatiya nari

traditionhopesex education U

N D

ecla

ratio

n

iden

titylove

Indian woman

WHO

child

ren swear wordsgender

violenceNG

O

Diagram 6. The options available under “My Projects” option

EDIT PROJECTS

CONFIRM A SUGGESTED LINK

ACKNOWLEDGE CONTRIBUTIONS

ADD A PROJECT

SEE BY CATEGORY MY PROJECTS LOGOUTCHAT+COLLABORATE

Concept ConnectCOLLABORATIVE SOCIAL NETWORKS

project name conceptual links with other projectsdetailed conceptual information about the project as provided by the student along with the contact details of the student. this will be a scrollable text box with selectable text for easy copy pasting into a chat window for discussion masculinity

statusmachismo

bharatiya nari

traditionhopesex education U

N D

ecla

ratio

n

iden

titylove

Indian woman

WHO

child

ren swear wordsgender

violenceNG

O

Diagram 6. The options available under “My Projects” option

6UNREAD CHATS

CAPTURE SCREENSHOT

SHARE ATTACHMENT

2CREDIT RECEIVED

SHARE SCREENSHOT

CHAT LIST

Me so I think I can help you with the graphics on this project

PrateekAlright specifically i think your logo design project was excellent and I’d like some input in

that direction

hmm... do you mean _

Prateekshankar Dixit

Girish Krishnan

May Pillai

Suganth Chellamuthu

Suyog Patel

Jignesh Khakhar

Tania Jain

references

Card, Stuart K., Jock D. Mackinlay, and Ben Shneiderman. Readings in information visualization: using vision to think. Morgan Kaufmann, 1999. Lin, Xia. "Visualization for the document space." Visualization, 1992. Visualization'92, Proceedings., IEEE Conference on. IEEE, 1992.

Tidwell, Jenifer. Designing interfaces. O'Reilly Media, Incorporated, 2010.

APPENDICES follow where each of the diagrams presented in the review section have been reproduced at a larger size so details are visible.

appendixSEE BY CATEGORY MY PROJECTS LOGOUTCHAT+COLLABORATE

Concept ConnectCOLLABORATIVE SOCIAL NETWORKS

project name conceptual links with other projectsdetailed conceptual information about the project as provided by the student along with the contact details of the student. this will be a scrollable text box with selectable text for easy copy pasting into a chat window for discussion masculinity

statusmachismo

bharatiya nari

traditionhopesex education

UN

Dec

lara

tion

iden

titylove

Indian woman

WHO

child

ren swear wordsgender

violenceNG

O

Diagram 1 & Diagram 2

six

SEE BY CATEGORY MY PROJECTS LOGOUTCHAT+COLLABORATE

Concept ConnectCOLLABORATIVE SOCIAL NETWORKS

‘project name’ linked to :detailed conceptual information about the project as provided by the student along with the contact details of the student. this will be a scrollable text box with selectable text for easy copy pasting into a chat window for discussion

How to Become a Woman?

Web-Based Design Education: A New Media Perspective

Against the Dying of the Light: Sustaining Live Social Games

How to Become a Woman?

Web-Based Design Education: A New Media PerspectiveAcross Boundaries: Idealising HomeAgainst the Dying of the Light: Sustaining Live Social Games

appendixSEE BY CATEGORY MY PROJECTS LOGOUTCHAT+COLLABORATE

Concept ConnectCOLLABORATIVE SOCIAL NETWORKS

project name conceptual links with other projectsdetailed conceptual information about the project as provided by the student along with the contact details of the student. this will be a scrollable text box with selectable text for easy copy pasting into a chat window for discussion masculinity

statusmachismo

bharatiya nari

traditionhopesex education

UN

Dec

lara

tion

iden

titylove

Indian woman

WHO

child

ren swear wordsgender

violenceNG

O

Diagram 3 & Diagram 4

sevenSEE BY CATEGORY MY PROJECTS LOGOUTCHAT+COLLABORATE

Concept ConnectCOLLABORATIVE SOCIAL NETWORKS

project name conceptual links with other projectsdetailed conceptual information about the project as provided by the student along with the contact details of the student. this will be a scrollable text box with selectable text for easy copy pasting into a chat window for discussion masculinity

statusmachismo

bharatiya nari

traditionhopesex education

UN

Dec

lara

tion

iden

titylove

Indian woman

WHO

child

ren swear wordsgender

violenceNG

O

Computer science, information & general worksPhilosophy and psychologyReligionSocial sciencesLanguageScienceTechnologyArts & recreationLiteratureHistory & geography

SHOW CATEGORICAL LANDSCAPE

SHOW SUB-CATEGORIES

SEE BY CATEGORY MY PROJECTS LOGOUTCHAT+COLLABORATE

COLLABORATIVE SOCIAL NETWORKS

project name conceptual links with other projectsdetailed conceptual information about the project as provided by the student along with the contact details of the student. this will be a scrollable text box with selectable text for easy copy pasting into a chat window for discussion masculinity

statusmachismo

bharatiya nari

traditionhopesex education

UN

Dec

lara

tion

iden

titylove

Indian woman

WHO

child

ren swear wordsgender

violenceNG

O

SHOW CATEGORICAL LANDSCAPE

SHOW SUB-CATEGORIES

Concept Connect

Computer science, information & general worksPhilosophy and psychologyReligionSocial sciencesLanguageScienceTechnologyArts & recreationLiteratureHistory & geography

Metaphysics

Ontology

Cosmology (Philosophy of nature)

Space

Time

Change

Structure

Force and energy

Number and quantity

PhilosopyMetaphysicsEpistemologyParapsychology & OccultismPhilosophical Schools of ThoughtPsychologyLogicEthicsAncient, medieval, and Eastern philosophyModern Western Philosophy

appendixSEE BY CATEGORY MY PROJECTS LOGOUTCHAT+COLLABORATE

Concept ConnectCOLLABORATIVE SOCIAL NETWORKS

project name conceptual links with other projectsdetailed conceptual information about the project as provided by the student along with the contact details of the student. this will be a scrollable text box with selectable text for easy copy pasting into a chat window for discussion masculinity

statusmachismo

bharatiya nari

traditionhopesex education

UN

Dec

lara

tion

iden

titylove

Indian woman

WHO

child

ren swear wordsgender

violenceNG

O

Diagram 5 & Diagram 6

eightSEE BY CATEGORY MY PROJECTS LOGOUTCHAT+COLLABORATE

Concept ConnectCOLLABORATIVE SOCIAL NETWORKS

project name conceptual links with other projectsdetailed conceptual information about the project as provided by the student along with the contact details of the student. this will be a scrollable text box with selectable text for easy copy pasting into a chat window for discussion masculinity

statusmachismo

bharatiya nari

traditionhopesex education

UN

Dec

lara

tion

iden

titylove

Indian woman

WHO

child

ren swear wordsgender

violenceNG

O

Computer science, information & general worksPhilosophy and psychologyReligionSocial sciencesLanguageScienceTechnologyArts & recreationLiteratureHistory & geography

SHOW CATEGORICAL LANDSCAPE

SHOW SUB-CATEGORIES

SEE BY CATEGORY MY PROJECTS LOGOUTCHAT+COLLABORATE

Concept ConnectCOLLABORATIVE SOCIAL NETWORKS

detailed conceptual information about the project as provided by the student along with the contact details of the student. this will be a scrollable text box with selectable text for easy copy pasting into a chat window for discussion masculinity

statusmachismo

bharatiya nari

traditionhopesex education

UN

Dec

lara

tion

iden

titylove

Indian woman

WHO

child

ren swear wordsgender

violenceNG

O

SHOW CATEGORICAL LANDSCAPE

conceptual links with other projectsproject name

Computer science, information & general works

Philosophy and psychology

Religion

Social sciences

Language

Science Technology

Arts & recreation

Literature

History & geography

SEE BY CATEGORY MY PROJECTS LOGOUTCHAT+COLLABORATE

Concept ConnectCOLLABORATIVE SOCIAL NETWORKS

project name conceptual links with other projectsdetailed conceptual information about the project as provided by the student along with the contact details of the student. this will be a scrollable text box with selectable text for easy copy pasting into a chat window for discussion masculinity

statusmachismo

bharatiya nari

traditionhopesex education

UN

Dec

lara

tion

iden

titylove

Indian woman

WHO

child

ren swear wordsgender

violenceNG

O

EDIT PROJECTS

CONFIRM A SUGGESTED LINK

ACKNOWLEDGE CONTRIBUTIONS

ADD A PROJECT

appendixSEE BY CATEGORY MY PROJECTS LOGOUTCHAT+COLLABORATE

Concept ConnectCOLLABORATIVE SOCIAL NETWORKS

project name conceptual links with other projectsdetailed conceptual information about the project as provided by the student along with the contact details of the student. this will be a scrollable text box with selectable text for easy copy pasting into a chat window for discussion masculinity

statusmachismo

bharatiya nari

traditionhopesex education

UN

Dec

lara

tion

iden

titylove

Indian woman

WHO

child

ren swear wordsgender

violenceNG

O

Diagram 7

nineSEE BY CATEGORY MY PROJECTS LOGOUTCHAT+COLLABORATE

Concept ConnectCOLLABORATIVE SOCIAL NETWORKS

project name conceptual links with other projectsdetailed conceptual information about the project as provided by the student along with the contact details of the student. this will be a scrollable text box with selectable text for easy copy pasting into a chat window for discussion masculinity

statusmachismo

bharatiya nari

traditionhopesex education

UN

Dec

lara

tion

iden

titylove

Indian woman

WHO

child

ren swear wordsgender

violenceNG

O

Computer science, information & general worksPhilosophy and psychologyReligionSocial sciencesLanguageScienceTechnologyArts & recreationLiteratureHistory & geography

SHOW CATEGORICAL LANDSCAPE

SHOW SUB-CATEGORIES

reviewand collaborate” are shown in the diagrams below :

Gamification has been hinted at in this redesign of the interface. with the introduction of credits received for contributions and acknowledgement given for contributions. However, prior to developing the game world further, the interface described in the review needs to be prototyped and tested.

SEE BY CATEGORY MY PROJECTS LOGOUTCHAT+COLLABORATE

Concept ConnectCOLLABORATIVE SOCIAL NETWORKS

project name conceptual links with other projectsdetailed conceptual information about the project as provided by the student along with the contact details of the student. this will be a scrollable text box with selectable text for easy copy pasting into a chat window for discussion masculinity

statusmachismo

bharatiya nari

traditionhopesex education

UN

Dec

lara

tion

iden

titylove

Indian woman

WHO

child

ren swear wordsgender

violenceNG

O

6UNREAD CHATS

CAPTURE SCREENSHOT

SHARE ATTACHMENT

2CREDIT RECEIVED

SHARE SCREENSHOT

CHAT LIST

fin.

Concept Connect

discussions with Dr. Jignesh Khakhar & Girish KrishnanProject Inspired by :

Daniel Davis's 2010 sketch 'Directed Graph', Dynamic RelaxationVisualization built on :

the ControlP5 library by Andreas Schlegel, 2012Interface developed on :

Shiraz Iqbal January 2013. Prototype coded by :

an alternative social space forcross disciplinary design collaboration