Venn Project

From Protein Prediction 2 Winter Semester 2014
Revision as of 01:31, 7 January 2015 by Ppwikiuser (talk | contribs) (Fifth Phase)

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


Completed Tasks

First Phase


Second Phase

  • Creating intersecting circles for given lists.


Third Phase

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


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


  • Calculate the intersection for two lists or more and show the number of intersected items between the corresponding circles. Additionally the intersected Areas are highlighted once the mouse cursor moves over it and show the intersected items in a textbox.


Fourth Phase

  • Now the user can enter up to four lists, and they are drawn as ellipses instead of circles. Also intersections are calculated for all lists (2 lists or more).


Fifth Phase

  1. We made the drawings colors more brighter so the user can distinguish between them more easily.
  2. User can enter up to seven lists and calculate intersection for them.
  1. A "Load Sample" button has been added which loads a fixed sample, so the user can see how the diagram looks like with seven lists.
  1. We added a text area to show the common elements of intersected lists or the elements inside a list once the user clicks on the the corresponding of intersection or list.

Sixth Phase

  1. We added "Upload File" button which allows the user to upload any json file with a specific format for parsing the file and loads it into the diagram.venn.lists
  2. Json file formats should have be similar to this : (The user is only allowed to change the items inside the lists s1,s2,s3,s4,s5,s6 and s7, Or remove the list itself)
  1. Now the user can toggle the visibility of list textbox.
  1. We added a "Clear" button for each list so the user can clear them right away by one click.

What to do next ?

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


Source Code