Difference between revisions of "Venn Project"

From Protein Prediction 2 Winter Semester 2014
(Third Phase)
(Third Phase)
Line 84: Line 84:
   
 
*Show the items name for each list once the mouse cursor is over the corresponding circle and highlighting it.
 
*Show the items name for each list once the mouse cursor is over the corresponding circle and highlighting it.
[[File:tooltib1.png | 400px | venn.lists]][[File:tooltib2.png | 400px| venn.lists]]
+
[[File:tooltib2.png | 300px| venn.lists]]
   
*Calculate the intersection between every two lists and show the number of intersected items between the corresponding circles.
+
*Calculate the intersection between every two lists and show the number of intersected items between the corresponding circles.[[File:tooltib1.png | 600px | venn.lists]]
 
*Highlight the area of intersection once the mouse cursor moves over it and show the intersected items in a textbox.
 
*Highlight the area of intersection once the mouse cursor moves over it and show the intersected items in a textbox.
   

Revision as of 01:50, 30 December 2014

This project is Venn diagrams visualization tool development to display list comparison for showing and visualizing gene list differences and relations. The development plans to use a JavaScript library d3js and other important tools/frameworks. It also takes into consideration various other open source Venn diagram projects as code base or experience assessments. One of this projects recommended by our mentors is the jvenn project.

Features and Mockups

The project plans to provide important features and functionalities to enable users interested in gene list comparison and visualization with clear set of requirements possible. The following sections list and illustrate (with mockups and use cases) important user experience (visuals, information structure, and interaction), functionalities and features of the project work.


User Experience (UXD)

The project aims to provide a single page application structure, high interaction, better data input and output support, and better data visualization for a good user experience and satisfaction possible.

The work plans to understand users’ value for accessibility and list comparison requirements to achieve good usability. It aims to maintain as well clear visual interaction possible by a minimum sets of simple and less loaded page.

Visuals and Interaction

venn.project mockup

Information Structure (data, presentation...)

venn.project arch

Functionality

  • Program takes the lists as input. Normally having the same characteristic, the items on the same list are put in the one set.
  • Find out the elements which are in the intersection of sets.
  • The Venn diagram with at most 6 different groups.
  • Can highlight a specific set. Show all the elements in the highlighted group.
  • Calculate area of the set (including overlapping area). The group which has more elements should occupy more area.
  • Show and hide specific set in Venn diagram.
  • Save the result diagram as image file.

Features

  • Take input with different format. Beside read the input form user interface, the program can be fed with file. So far CVS and JSON are on the top of the list. This feature is useful when the input data is huge.
  • Searching the element
  • Represent the classic Venn diagram. Maybe Edwards’ also if we have the time.

venn.project mockup,venn.project mockup

  • Can use bar chart as supporting graph.
  • Customize diagram color.
  • May have a 3D Venn diagram. However, this may not be a good idea in some cases. For example, spheres Venn diagram may be a bad visualization way when there are too many sets.

Application Design/Tools and Technologies

Expected Technical Challenges

  • Creating circles having the ability to adapt and change in shape with respect to lists size and intersections between them. Specially when complexity increases.

venn.project mockup,venn.project mockupvenn.project mockup,venn.project mockup

  • Calculating the intersection between 2 or more of the given lists. An example of the different levels of intersection is shown in the next figure.

venn.project mockup

  • Highlighting the complete intersected shapes according to the user cursor position.

venn.project mockup

Libraries and Frameworks

At the moment we are thinking of using d3, other than that it is clear we will use others frameworks and libraries as needed.

Data Source

Input data consists of up to 6 lists of genee list items to be compared. Lists can be empty or filled according to the input items. Additionally, Lists can be loaded from external file, like JSON, CSV ...

Project Roadmap

  • 27/11 Can show circles with different size according to number of element contain without overlapping. Find out the element in the same group.
  • 04/12 At least can show 4 different groups properly in one Venn diagram with overlapping, start working on a simple GUI
  • 11/12 Start working on file parser. Working on interactive visualization, for example, highlighting the specific set.
  • 17/12 The basic Venn diagram should be finished. Start to work on different mode. (Edwards’) Adding the supporting bar chart.
  • 24/12 Customize color. Show and hiding specific set. Start working on more impress effect. (3D Venn diagram)
  • 1/1 Review and documentation
  • 8/1 Submit

Status

Completed Tasks

First Phase

venn.listsse

Second Phase

  • Creating intersecting circles for given lists.

venn.lists

Third Phase

  • Show the number of items for each list on the corresponding circle.

venn.lists

  • Show the items name for each list once the mouse cursor is over the corresponding circle and highlighting it.

venn.lists

  • Calculate the intersection between every two lists and show the number of intersected items between the corresponding circles.venn.lists
  • Highlight the area of intersection once the mouse cursor moves over it and show the intersected items in a textbox.

What to do next ?

  • Trying to draw eclipses once the user enters four lists up to six lists.
  • Calculate intersection for more six lists.
  • Enhance the visualization.

People

Source Code