View source for Venn Project

From Protein Prediction 2 Winter Semester 2014

← Venn Project

You do not have permission to edit this page, for the following reason:

---

You can view and copy the source of this page.

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 [http://bioinfo.genotoul.fr/jvenn/index.html 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), functionality 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 == [[File:VennProjectMockup.png | 800px | center | venn.project mockup]] == Information Structure (data, presentation...) == [[File:VennProjectInfoSt.png | 800px | center | 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. [[File:3.png | 300px | venn.project mockup]],[[File:5.png | 300px | 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. [[File:1.png | 300px | venn.project mockup]],[[File:2.png | 300px | venn.project mockup]][[File:3.png | 300px | venn.project mockup]],[[File:4.png | 300px | 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. [[File:3.png | 300px | venn.project mockup]] * Highlighting the complete intersected shapes according to the user cursor position. [[File:6.png | 300px | 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== *Read papers on Gene List Visualizations, from other projects. ** jVenn - http://bioinfo.genotoul.fr/jvenn/ - paper - http://www.ncbi.nlm.nih.gov/pubmed/25176396 ** Venny - http://bioinfogp.cnb.csic.es/tools/venny/index.html *Tried a skeleton work on drawing circles of lists. *Creating text areas to take inputs(list name + list values). Three lists for now. :: [[File:inputs.png | 110px | venn.lists]] ==Second Phase== *Creating intersecting circles for given lists. :: [[File:circles.png | 670px | venn.lists]] ==Third Phase== *Show the number of items for each list on the corresponding circle. :: [[File:circleswithnumbers.png | 500px| venn.lists]] *Show the items name for each list once the mouse cursor is over the corresponding circle and highlighting it. :: [[File:tooltib1.png | 600px | venn.lists]][[File:tooltib2.png | 375px| venn.lists]] *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. :: [[File:intersect1.png | 530px| venn.lists]][[File:intersect2.png | 350px| venn.lists]] ==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). :: [[File:intersect3.png | 500px| venn.lists]][[File:intersect4.png | 500px | venn.lists]] ==Fifth Phase== * We made the drawings colors more brighter so the user can distinguish between them more easily. * User can enter up to seven lists and calculate intersection for them. :: [[File:5ellipses.png | 350px| venn.lists]][[File:6triangles.png | 350px | venn.lists]][[File:7ellipses.png | 350px | venn.lists]] * 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. :: [[File:Load .png | 600px| venn.lists]] * 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 area of intersection or list. :: [[File:descriptionarea.png | 500px| venn.lists]] ==Sixth Phase== *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. :: [[File:upload.png | 600px| venn.lists | display text]] ** Json file formats should be similar to this : (The user can only change the items inside the lists s1,s2,s3,s4,s5,s6 and s7, Or remove the list itself) :: [[File:format1.png | 600px| venn.lists]] :::or :: [[File:format 2.png | 600px| venn.lists]] *Now the user can toggle the visibility of list textboxes. :: [[File:toggle1.png | 250px | venn.lists]][[File:toggle2.png | 250px | venn.lists]] *We added a "Clear" button for each list so the user can clear them right away by one click. :: [[File:clearbutton.png | 250px | venn.lists]] = Feedback Phase (Jan 8th) = *It is possible for a user to define any name of a list in the JSON file and the name will be reflected list name and the overlaps of the lists. E.g. if a user provides two lists named ‘control’ and ‘disease’, then list1 on the left side will be called ‘control’ and list2 ‘disease’. If a user clicks with the mouse at their intersection, then the intersection will be called ‘Common elements in control and disease’ (we didn't show it once the user hovers over the intersection due to the limited size of the tooltip and if we increase the size it will not look very good for the user). Also the user Can change the name of the lists freely if he wants. [[File:listsnameschange.png | 600px | venn.lists]] [[File:filenew.png | 600px | venn.lists]] *Since for many lists it is often not easy to click with the mouse at the intersection, we implemented a functionality that would allow the user to download a text file with the results of all intersections for the current Diagram using the "Export file" button. [[File:site.png | 550px | venn.lists]][[File:fileexport.png | 550px | venn.lists]] *We provided a functionality to export the visualization in png to just make a screenshot. [[File:exportedimage.png | 550px | venn.lists]] [[File:exportedimage2.png | 550px | venn.lists]] *User can export file for the intersected area of interest once he defines it by clicking on the area of interest and then click on Export selected button which is under the description area. [[File: Exportselected.png | 550px | venn.lists]] *There is a page now for the about. [[File:DevAbout.png | 550px | venn.lists]] *There is a page for the Documentation. [[File:DevDocs.png | 550px | venn.lists]] = What to do next ? = *Submission to BioJS 2.0. = People = * [mailto:ms.yazeed@yahoo.com Mohamed Ahmed] * [mailto:habtom@habtom.org Habtom Kahsay Gidey] = Source Code = *Source code : [https://github.com/habtom/biojs-vis-genvenn Venn Diagram Source code on Github] *Live example : [http://habtom.github.io/biojs-vis-genvenn/examples/ Venn Diagram live example]

Return to Venn Project.