Difference between revisions of "Venn Project"

From Protein Prediction 2 Winter Semester 2014
Line 74: Line 74:
[[File:inputs.png | 170px | venn.lists]]
[[File:inputs.png | 170px | venn.lists]]
*Creating a circle for each given list.
*Creating a circle for each given list.
[[File:circles.png | 170px | venn.lists]]
[[File:circles.png | 470px | venn.lists]]
=== Next ===
=== Next ===

Revision as of 02:03, 8 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


  • 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.


  • 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


First Phase


  • Read papers on Gene List Visualizations, from other projects.
  • Tried a skeleton work on drawing circles of lists.
  • Creating text areas to take inputs(list name + list values). Three lists for now.


  • Creating a circle for each given list.



  • Further study on jVenn and other similar projects
  • structure code similar to biojs components
  • come up with a better approach, on displaying list circles
  • Start list based intersection and union


Source Code