Difference between revisions of "Main Page/VisualizationiAnnEvents"

From Protein Prediction 2 Winter Semester 2014
(Functionality)
(Week 8(9.1.2015 - 24.1.2015))
 
(80 intermediate revisions by the same user not shown)
Line 2: Line 2:
   
 
[[File:IAnn_workflow.png]]
 
[[File:IAnn_workflow.png]]
  +
  +
= Git Repository =
  +
  +
*iAnnPro[https://github.com/iannpro]
  +
  +
{| border="1" class="wikitable"
  +
|+ Project progress
  +
! Week number
  +
! Completed tasks
  +
! Status
  +
  +
|-
  +
! Week 1
  +
|
  +
* Collecting ideas for possible visualization components that can be incorporated in iAnn viewer.
  +
* Understanding the working of iAnn viewer.
  +
* Underwent a tutorial on D3 javascript.
  +
* Vreatinga GitHub Repository.
  +
|[[File:check.jpg|center|50px|50px]]
  +
|-
  +
! Week 2
  +
|
  +
* Finalizing the ideas.
  +
* Developing the word cloud based on Host, Keyword, Provider and Country.
  +
* Integrating the word cloud with iAnn Viewer.
  +
* Initial Project setup for 3D Globe.
  +
|[[File:check.jpg|center|50px|50px]]
  +
|-
  +
! Week 3
  +
|
  +
* Enhancing the word cloud.
  +
* Bringing 3D Globe into a working condition.
  +
* Initial project setup for Partition Layout .
  +
|[[File:check.jpg|center|50px|50px]]
  +
|-
  +
  +
! Week 4
  +
|
  +
* Word Cloud Completion.
  +
* Adding tooltip and list of events to each country.
  +
* Adding Markers for 3D Globe.
  +
|[[File:check.jpg|center|50px|50px]]
  +
|-
  +
  +
! Week 5
  +
|
  +
* Incorporating 2 options : Ortho(3D) and Equirectangular(2D) for better user interface.
  +
* Automatic Zoom in.
  +
* Stabilizing the 3D to 2D transition.
  +
* Completion of 3D Globe.
  +
|[[File:check.jpg|center|50px|50px]]
  +
|-
  +
! Week 6
  +
|
  +
* Finalizing the Hierarchy level for partition layout.
  +
* Completion of Treemap and bilevel Partition.
  +
|[[File:check.jpg|center|50px|50px]]
  +
|-
  +
! Week 7
  +
|
  +
* Fixes in 3D globe.
  +
* All components integrated with iAnn.
  +
* Publishing in GitHub.
  +
|[[File:check.jpg|center|50px|50px]]
  +
|-
  +
! Week 8
  +
|
  +
* Publishing into BioJs
  +
|[[File:check.jpg|center|50px|50px]]
  +
|-
  +
|}
   
 
=== 1. GUI mockups ===
 
=== 1. GUI mockups ===
Line 45: Line 116:
 
{| class="wikitable" border="1"
 
{| class="wikitable" border="1"
 
|-
 
|-
|<!--column1-->[[File:Vis1.PNG|265px]]
+
|<!--column1-->[[File:Vis1.png|265px]]
|<!--column2-->[[File:Vis2.PNG‎|265px]]
+
|<!--column2-->[[File:Vis2.png‎|265px]]
 
|-
 
|-
|<!--column1-->BiLevel Partition
+
|<!--column1-->Zoomable Partition
|<!--column2-->Zoomable Partition
+
|<!--column2-->BiLevel Partition
 
|}<!--end wikitable-->
 
|}<!--end wikitable-->
   
Line 74: Line 145:
 
====Fancy libraries you plan to use====
 
====Fancy libraries you plan to use====
 
* D3.js
 
* D3.js
  +
* Ajaxsolr
* Angular.js
 
* Three.js <br/>
+
<br/>
   
 
=== 3. Data Format ===
 
=== 3. Data Format ===
Line 89: Line 160:
 
* Developing all the required and accepted visualization components.
 
* Developing all the required and accepted visualization components.
 
* Finally Integrating into widget and upload to BioJs
 
* Finally Integrating into widget and upload to BioJs
  +
  +
  +
  +
== Week 1(21.11.2014 - 27.11.2014) ==
  +
  +
"Mentors are happy with our proposed ideas"
  +
  +
After the discussion with our mentors we were able to finalize our task.
  +
  +
Below you can find the list of tasks based on the priority
  +
* Word Cloud
  +
* 3D Globe
  +
* Bilevel Partition (if time permits)
  +
* Configurating Tomcat server instead of Jetty, due to security concerns (if time permits)
  +
* Preparing endpoints for our visualisation widgets (if time permits)
  +
  +
=== Challenges ===
  +
  +
* Understanding the working of Ajax Solr.
  +
* Integrating the new components with the existing widget.
  +
  +
  +
=== Status ===
  +
  +
* Setup of repositories, working directories and shared documents
  +
* Go through some basic tutorials of Ajax Solr.
  +
* We were successfully able to design a word cloud using D3 for one of the filter options "Host", but need to work on size and onclick events.
  +
  +
  +
=== Plans for Week 2 ===
  +
  +
* Implement the word cloud for rest of the filter options.
  +
* And also to include the onclick events.
  +
* Initial setup for 3D Globe
  +
* Deliver proposal (document) for changes in a Solr schema and discuss them with project sponsors.
  +
  +
== Week 2(28.11.2014 - 4.12.2014) ==
  +
  +
===Word Cloud===
  +
* Implementation of Word Cloud for advanced filter options is done, waiting for the feedback.
  +
** Greater the size of word, the more popular it is.
  +
==== Screenshots ====
  +
[[File:Wordcloud.JPG]]
  +
==== GitHub Repository ====
  +
GitHub : [https://github.com/iannpro/biojs-vis-iann-word-cloud iANN_WORD_CLOUD]
  +
  +
===3D Globe===
  +
* Initial setup for 3D Globe is done.
  +
Note : Currently there is a problem in running with chrome due to queue library for asynchronous request, it is advised to view either in '''Mozilla firefox''' or '''safari'''
  +
  +
* In addition filter based on country is also included.
  +
** List of all countries are available in dropdown for user selection.
  +
==== Screenshots ====
  +
[[File:3dglobe initial.JPG|800px]]
  +
* Rotate function is also incorporated.
  +
** Based on the country selection, the globe rotates and points to a specific location.
  +
  +
==== Screenshots ====
  +
[[File:3dglobe rotate.JPG|800px]]
  +
* Transformation of 3D to 2D(Orthographic to Equirectangular) is also completed.
  +
** By clicking on specific country on the globe, the 3D to 2D transformation happens and the selection area remains highlighted.
  +
** The reverse process i.e 2D to 3D can be achieved by clicking again on the layout.
  +
  +
==== Screenshots ====
  +
[[File:3dglobe trans.JPG|800px]]
  +
  +
====GitHub Repository====
  +
GitHub : [https://github.com/iannpro/biojs-vis-iann-3d-globe iANN_3D_GLOBE]
  +
  +
  +
== Week 3(5.12.2014 - 11.12.2014) ==
  +
  +
  +
===Word Cloud===
  +
* We have improved our word cloud look compared to our previous week.
  +
* Also we had an issue in bringing all the words in to cloud and now this is also solved.
  +
[[File:Wordcloudv2.0.PNG|400px]]
  +
  +
===3D Globe===
  +
* We tried with adding markups in the Globe, but we had an issue while converting to 2D map, as you can imagine the markup positions varies for each country with respect to 3D and 2D view, that transition we can't able to achieve with the markup.
  +
* We even tried with adding colors for each country, but it doesn't looks good.
  +
  +
===Partition Layout===
  +
* We have developed the Tree map with respect to keywords.
  +
* Currently it's not interactive, we are working on it.
  +
* Once we are done with Tree map, we will also do the BiLevel Partition which is one of the visualization our mentors are very much interested.
  +
[[File:Treemap.PNG|300px]]
  +
  +
== Week 4(12.12.2014 - 18.12.2014) ==
  +
  +
===Word Cloud===
  +
* With the addition of links and hover functionality word cloud comes to an end.
  +
* When you move the cursor over the word cloud the words gets zoom out a bit to show the user that it is clickable.
  +
[[File:Wordcloudv3.0.gif]]
  +
* Now in the word cloud, each word is incorporated with search functionality. For example : if United Kingdom is clicked the remaining three fields will display the words related to it.
  +
[[File:Wordcloudv4.0.gif]]
  +
  +
=== 3D Globe===
  +
* Finally we were able to solve the challenge of adding markers to the 3D rotating Globe.
  +
* Markers are also incorporated for 2D view.
  +
* Tooltip is included as a mouse over event, so that it displays the country name according the movement of cursor.
  +
  +
[[File:3dglobe markers.gif]]
  +
  +
===Partition Layout===
  +
* Finalizing the hierarchy structure to be used in the partition layout.
  +
* Working on the input data inorder to convert it into JSON format.
  +
  +
== Week 5(19.12.2014 - 25.12.2014) ==
  +
  +
===3D Globe===
  +
* Integrated with iAnn viewer.
  +
* Initially the transition happens when we double click on all the country, now we have made sure that the transitions happens only for the country which has the events.
  +
* Automatic '''zoom in''' functionality is added in the 2D view. i.e Once when the user clicks the interested country on globe the transition happens followed by that selected country alone gets zoomed in automatically.
  +
  +
[[File:3dglobe zoom.gif]]
  +
  +
* When the selected country gets zoomed in, only the markers pertaining to that country will be displayed.
  +
* Following that '''List of all events''' w.r.t selected country will get displayed at the bottom.
  +
  +
[[File:3dglobe event.gif]]
  +
  +
* In order to make it flexible for non-savvy users the option of selecting 3D or 2D view is provided.
  +
  +
[[File:3dglobe option.gif]]
  +
  +
* Stabilizing the transition between 3D and 2D view.
  +
  +
== Week 6(26.12.2014 - 1.1.2015) ==
  +
  +
===Bilevel/TreeMap Partition===
  +
* The Hierarchy for partition was finalized such that : Country->City->Events.
  +
* Both Bilevel and Treemap depicts the same concept, but anyways we have implemented both.
  +
* In Treemap, all hierarchy will be visible in the beginning, but on click of each cell, the selected area will get zoomed in and displays only the cells related to it.
  +
[[File:Treemap.gif]]
  +
* In Bilevel also same concept is applied, on click of each area detailed view can be obtained.
  +
[[File:Bilevel.gif]]
  +
  +
== Week 7(2.1.2015 - 8.1.2015) ==
  +
  +
===Enhancements and Fixes in 3D Globe===
  +
* The Rotation speed of the globe is increased.
  +
* In 3D view, when the country gets selected from dropdown, the corresponding place gets highlighted and '''zoomed in''' automatically, previously it was happening only in 2D.
  +
* Some features were missing in 2D, but now we have make sure that both 2D and 3D view has same features in a way which is convenient for all users.
  +
* Work in progress for making it as individual and reusable compenet for BioJs.
  +
  +
== Week 8(9.1.2015 - 24.1.2015) ==
  +
* Worked on the feedback given after the final presentation.
  +
* Now the Bilevel partition will have the text in each arc along with the tooltip.
  +
[[File:Bievelv3.png | 500 px]]
  +
  +
* Now all our components : 3D Globe, Treemap and Bilevel partition are available in BioJs within 2 days we have got more than 100 downloads :)

Latest revision as of 00:30, 25 January 2015

iAnn is an open source community-driven platform for dissemination of life science announcements, such as courses, conferences and workshops.Announcements are curated into a centralised registry through an editor. The information from the registry is exposed to the users through web services. And on top of the web services a javascript application is build to visualize the content using different views (list, maps and calendar).

IAnn workflow.png

Git Repository

Project progress
Week number Completed tasks Status
Week 1
  • Collecting ideas for possible visualization components that can be incorporated in iAnn viewer.
  • Understanding the working of iAnn viewer.
  • Underwent a tutorial on D3 javascript.
  • Vreatinga GitHub Repository.
Check.jpg
Week 2
  • Finalizing the ideas.
  • Developing the word cloud based on Host, Keyword, Provider and Country.
  • Integrating the word cloud with iAnn Viewer.
  • Initial Project setup for 3D Globe.
Check.jpg
Week 3
  • Enhancing the word cloud.
  • Bringing 3D Globe into a working condition.
  • Initial project setup for Partition Layout .
Check.jpg
Week 4
  • Word Cloud Completion.
  • Adding tooltip and list of events to each country.
  • Adding Markers for 3D Globe.
Check.jpg
Week 5
  • Incorporating 2 options : Ortho(3D) and Equirectangular(2D) for better user interface.
  • Automatic Zoom in.
  • Stabilizing the 3D to 2D transition.
  • Completion of 3D Globe.
Check.jpg
Week 6
  • Finalizing the Hierarchy level for partition layout.
  • Completion of Treemap and bilevel Partition.
Check.jpg
Week 7
  • Fixes in 3D globe.
  • All components integrated with iAnn.
  • Publishing in GitHub.
Check.jpg
Week 8
  • Publishing into BioJs
Check.jpg

1. GUI mockups

User experience

  • Currently the user interface looks like this

Ui1.PNG

Ui2.PNG

How we are going to improve it ?

By incorporating the following visualizations

  • 3D Globe for Maps
  • Word Cloud for filtering.
  • Bilevel/Zoomable Partition Layout for Events.

3D Globe for maps

Functionality
  • Can able to Rotate the map.
  • Able to view information of each events, here we plan to implement this module using the technique Orthographic to Equirectangular.
  • Along with the event information corresponding url will also be embedded.
3dglobe.PNG Orthographic to Equirectangular.gif
3D Globe Orthographic_to_Equirectangular

Features

  • User can filter the events based on country and date.
  • Interconnected lines between the countries which are likely to have events happening on same date.

BiLevel/Zoomable Partition Layout for Events

Functionality
  • Navigation through events, with an emphasis on usability.
Vis1.png Vis2.png
Zoomable Partition BiLevel Partition
Features
  • Each inner circle is representing root category, i.e. country, which expands on click and displays details, i.e. events in a selected country.

Word Cloud for Keywords

Functionality
  • Visualization of the most used keywords in iAnn search.
Features
  • Based on popularity, the size of each word varies.

2. Application design

Expected technical difficulties

  • Implementing Orthographic to Equirectangular on each marker points(countries).
  • Interconnecting lines between the countries when the events from different countries likely to happen on same date, because we need latitude and longitude points to map.

Fancy libraries you plan to use

  • D3.js
  • Ajaxsolr


3. Data Format

Remarks

  • Input is likely to be in json format with events,location and date, etc.
  • With the above information it’s difficult to map the exact location in map, we need the latitude and longitude points to overcome it.

4. Roadmap

  • Finalize our proposed ideas.
  • Refactor the existing code of widget to make sure that object oriented approach is followed, so that it’s easy to combine with javascript events.
  • Developing all the required and accepted visualization components.
  • Finally Integrating into widget and upload to BioJs


Week 1(21.11.2014 - 27.11.2014)

"Mentors are happy with our proposed ideas"

After the discussion with our mentors we were able to finalize our task.

Below you can find the list of tasks based on the priority

  • Word Cloud
  • 3D Globe
  • Bilevel Partition (if time permits)
  • Configurating Tomcat server instead of Jetty, due to security concerns (if time permits)
  • Preparing endpoints for our visualisation widgets (if time permits)

Challenges

  • Understanding the working of Ajax Solr.
  • Integrating the new components with the existing widget.


Status

  • Setup of repositories, working directories and shared documents
  • Go through some basic tutorials of Ajax Solr.
  • We were successfully able to design a word cloud using D3 for one of the filter options "Host", but need to work on size and onclick events.


Plans for Week 2

  • Implement the word cloud for rest of the filter options.
  • And also to include the onclick events.
  • Initial setup for 3D Globe
  • Deliver proposal (document) for changes in a Solr schema and discuss them with project sponsors.

Week 2(28.11.2014 - 4.12.2014)

Word Cloud

  • Implementation of Word Cloud for advanced filter options is done, waiting for the feedback.
    • Greater the size of word, the more popular it is.

Screenshots

Wordcloud.JPG

GitHub Repository

GitHub : iANN_WORD_CLOUD

3D Globe

  • Initial setup for 3D Globe is done.
 Note : Currently there is a problem in running with chrome due to queue library for asynchronous request, it is advised to view either in Mozilla firefox or safari
  • In addition filter based on country is also included.
    • List of all countries are available in dropdown for user selection.

Screenshots

3dglobe initial.JPG

  • Rotate function is also incorporated.
    • Based on the country selection, the globe rotates and points to a specific location.

Screenshots

3dglobe rotate.JPG

  • Transformation of 3D to 2D(Orthographic to Equirectangular) is also completed.
    • By clicking on specific country on the globe, the 3D to 2D transformation happens and the selection area remains highlighted.
    • The reverse process i.e 2D to 3D can be achieved by clicking again on the layout.

Screenshots

3dglobe trans.JPG

GitHub Repository

GitHub : iANN_3D_GLOBE


Week 3(5.12.2014 - 11.12.2014)

Word Cloud

  • We have improved our word cloud look compared to our previous week.
  • Also we had an issue in bringing all the words in to cloud and now this is also solved.

Wordcloudv2.0.PNG

3D Globe

  • We tried with adding markups in the Globe, but we had an issue while converting to 2D map, as you can imagine the markup positions varies for each country with respect to 3D and 2D view, that transition we can't able to achieve with the markup.
  • We even tried with adding colors for each country, but it doesn't looks good.

Partition Layout

  • We have developed the Tree map with respect to keywords.
  • Currently it's not interactive, we are working on it.
  • Once we are done with Tree map, we will also do the BiLevel Partition which is one of the visualization our mentors are very much interested.

Treemap.PNG

Week 4(12.12.2014 - 18.12.2014)

Word Cloud

  • With the addition of links and hover functionality word cloud comes to an end.
  • When you move the cursor over the word cloud the words gets zoom out a bit to show the user that it is clickable.

Wordcloudv3.0.gif

  • Now in the word cloud, each word is incorporated with search functionality. For example : if United Kingdom is clicked the remaining three fields will display the words related to it.

Wordcloudv4.0.gif

3D Globe

  • Finally we were able to solve the challenge of adding markers to the 3D rotating Globe.
  • Markers are also incorporated for 2D view.
  • Tooltip is included as a mouse over event, so that it displays the country name according the movement of cursor.

3dglobe markers.gif

Partition Layout

  • Finalizing the hierarchy structure to be used in the partition layout.
  • Working on the input data inorder to convert it into JSON format.

Week 5(19.12.2014 - 25.12.2014)

3D Globe

  • Integrated with iAnn viewer.
  • Initially the transition happens when we double click on all the country, now we have made sure that the transitions happens only for the country which has the events.
  • Automatic zoom in functionality is added in the 2D view. i.e Once when the user clicks the interested country on globe the transition happens followed by that selected country alone gets zoomed in automatically.

3dglobe zoom.gif

  • When the selected country gets zoomed in, only the markers pertaining to that country will be displayed.
  • Following that List of all events w.r.t selected country will get displayed at the bottom.

3dglobe event.gif

  • In order to make it flexible for non-savvy users the option of selecting 3D or 2D view is provided.

3dglobe option.gif

  • Stabilizing the transition between 3D and 2D view.

Week 6(26.12.2014 - 1.1.2015)

Bilevel/TreeMap Partition

  • The Hierarchy for partition was finalized such that : Country->City->Events.
  • Both Bilevel and Treemap depicts the same concept, but anyways we have implemented both.
  • In Treemap, all hierarchy will be visible in the beginning, but on click of each cell, the selected area will get zoomed in and displays only the cells related to it.

Treemap.gif

  • In Bilevel also same concept is applied, on click of each area detailed view can be obtained.

Bilevel.gif

Week 7(2.1.2015 - 8.1.2015)

Enhancements and Fixes in 3D Globe

  • The Rotation speed of the globe is increased.
  • In 3D view, when the country gets selected from dropdown, the corresponding place gets highlighted and zoomed in automatically, previously it was happening only in 2D.
  • Some features were missing in 2D, but now we have make sure that both 2D and 3D view has same features in a way which is convenient for all users.
  • Work in progress for making it as individual and reusable compenet for BioJs.

Week 8(9.1.2015 - 24.1.2015)

  • Worked on the feedback given after the final presentation.
  • Now the Bilevel partition will have the text in each arc along with the tooltip.

Bievelv3.png

  • Now all our components : 3D Globe, Treemap and Bilevel partition are available in BioJs within 2 days we have got more than 100 downloads :)