Difference between revisions of "Homework 4"

From Protein Prediction 2 Winter Semester 2014
(Due Nov. 13)
(Due Nov. 13)
 
(25 intermediate revisions by 3 users not shown)
Line 9: Line 9:
 
:'''score''' which is the current score of this post
 
:'''score''' which is the current score of this post
 
:'''diff''' which is the current score - the previous score (2 seconds ago)
 
:'''diff''' which is the current score - the previous score (2 seconds ago)
  +
  +
:(if you like you can inspect the data for even more attributes :) )
  +
 
Currently the standard visualization is listing those entries as SVG text tags in an SVG tag called "redditsvg".
 
Currently the standard visualization is listing those entries as SVG text tags in an SVG tag called "redditsvg".
 
The visualization uses d3js. Have a look at [http://pp2-ex.github.io/homework-3/ http://pp2-ex.github.io/homework-3/]
 
The visualization uses d3js. Have a look at [http://pp2-ex.github.io/homework-3/ http://pp2-ex.github.io/homework-3/]
Line 15: Line 18:
   
 
# Understand the current implementation of the function runvis() in vis.js. What does it do? How does the code handles d3 entry, update and exit?
 
# Understand the current implementation of the function runvis() in vis.js. What does it do? How does the code handles d3 entry, update and exit?
# Replace this code with your own ideas (for example: posts and scores can be represented as barchart which automatically updates itself) and present those in our next calss on Nov 14th.
+
# Replace this code with your own ideas (for example: posts and scores can be represented as barchart which automatically updates itself) and present those in our next class on Nov 14th.
# Publish your results to [https://help.github.com/articles/creating-project-pages-manually/ Github pages] (=special git branch named <code>gh-pages</code>)
+
# Publish your results to [https://help.github.com/articles/creating-project-pages-manually/ Github pages] (=special git branch named <code>gh-pages</code>) (Optional)
# Add your github page to the table below
+
# Add your github page to the table below (Optional)
   
 
We are looking forward to your ideas!
 
We are looking forward to your ideas!
Line 24: Line 27:
 
{| class="wikitable"
 
{| class="wikitable"
 
|-
 
|-
! scope="col" width="15%" | Name !! scope="col" width="15%" | Link to Github pages !! scope="col" width="20%" | Description (opt.)
+
! scope="col" width="15%" | Name !! scope="col" width="15%" | Link to Github pages (opt.) !! scope="col" width="20%" | Description (opt.)
 
|-
 
|-
 
| Default || https://pp2-ex.github.io/homework-3 ||
 
| Default || https://pp2-ex.github.io/homework-3 ||
 
|-
 
|-
  +
| Ahsan Ziaullah / Vasantha Kumari Kommanapalli || http://ahsanzia.github.io/homework-3/ http://ahsanzia.github.io/homework3b/ || Visualization
| Name || link || description
 
  +
|-
  +
| Matheus Raszl / Diana Papyan || https://github.com/rasmath/homework4_Raszl_Papyan || Dynamic Circles with Tooltip
  +
|-
  +
| Vinod Rajendran || https://vinodrajendran001.github.io/homework-3 || Bar chart
  +
|-
  +
| Habtom Kahsay Gidey || http://habtom.github.io/homework-3/|| Rect Bars
  +
|-
  +
| Akshit Malhotra || https://github.com/Akshit-/homework-3 || Histogram
  +
|-
  +
| Irman A. || http://www.ezum.net/pp2-h3/ || -
  +
|-
  +
| Sai kiran Krishna murthy || http://kiran002.github.io/homework-3/ || -
  +
|-
  +
|Iris Shih || http://iriscshih.github.io/homework-3/ || Dynamic Circles with shorted text
  +
|-
  +
| Agon Lohaj / Bardh Lohaj || http://agonlohaj.github.io/homework-3/ || Used dynamic bubbles, colors and hover implementation
 
|}
 
|}
 
</div>
 
</div>
 
   
 
== Pitfalls ==
 
== Pitfalls ==
   
* the <code>gh-pages</code> branch is used for Github pages
+
* you have to use <code>gh-pages</code> branch for Github pages
 
* if you access the github pages with https, you need to request the reddit data via https
 
* if you access the github pages with https, you need to request the reddit data via https

Latest revision as of 03:54, 18 November 2014

Due Nov. 13

For this exercise, please fork https://github.com/pp2-ex/homework-3 (More information about git in the next exercise or at try.github.io, or at this successful git branching model)

We provided a live parser for reddit.com for you for this exercise! It fetches and parses every two seconds the 26 highest ranked posts in reddit.com. The data has following attributes:

id which is a unique id for this post
title which is the post title
score which is the current score of this post
diff which is the current score - the previous score (2 seconds ago)
(if you like you can inspect the data for even more attributes :) )

Currently the standard visualization is listing those entries as SVG text tags in an SVG tag called "redditsvg". The visualization uses d3js. Have a look at http://pp2-ex.github.io/homework-3/

Your Task till Nov 13
  1. Understand the current implementation of the function runvis() in vis.js. What does it do? How does the code handles d3 entry, update and exit?
  2. Replace this code with your own ideas (for example: posts and scores can be represented as barchart which automatically updates itself) and present those in our next class on Nov 14th.
  3. Publish your results to Github pages (=special git branch named gh-pages) (Optional)
  4. Add your github page to the table below (Optional)

We are looking forward to your ideas!

Name Link to Github pages (opt.) Description (opt.)
Default https://pp2-ex.github.io/homework-3
Ahsan Ziaullah / Vasantha Kumari Kommanapalli http://ahsanzia.github.io/homework-3/ http://ahsanzia.github.io/homework3b/ Visualization
Matheus Raszl / Diana Papyan https://github.com/rasmath/homework4_Raszl_Papyan Dynamic Circles with Tooltip
Vinod Rajendran https://vinodrajendran001.github.io/homework-3 Bar chart
Habtom Kahsay Gidey http://habtom.github.io/homework-3/ Rect Bars
Akshit Malhotra https://github.com/Akshit-/homework-3 Histogram
Irman A. http://www.ezum.net/pp2-h3/ -
Sai kiran Krishna murthy http://kiran002.github.io/homework-3/ -
Iris Shih http://iriscshih.github.io/homework-3/ Dynamic Circles with shorted text
Agon Lohaj / Bardh Lohaj http://agonlohaj.github.io/homework-3/ Used dynamic bubbles, colors and hover implementation

Pitfalls

  • you have to use gh-pages branch for Github pages
  • if you access the github pages with https, you need to request the reddit data via https