Difference between revisions of "Homework 3"

From Protein Prediction 2 Winter Semester 2014
(Due Nov. 6)
(Due Nov. 6)
 
(8 intermediate revisions by 4 users not shown)
Line 37: Line 37:
 
|-
 
|-
 
| Yue Xie || Ying Li || Gantt Chart || http://bl.ocks.org/dk8996/5538271
 
| Yue Xie || Ying Li || Gantt Chart || http://bl.ocks.org/dk8996/5538271
|
+
|-
  +
| Iris Shih || David Dao || Collision Detection || http://bl.ocks.org/mbostock/3231298
}
 
  +
|-
  +
| Agon Lohaj || Bardh Lohaj || Voronoi Tessellation || http://bl.ocks.org/mbostock/4060366
  +
|}
  +
 
</div>
 
</div>
 
===Due Nov. 13===
 
For this exercise, please fork [https://github.com/pp2-ex/homework-3 https://github.com/pp2-ex/homework-3] (More information about git in the next exercise or at [https://try.github.io/levels/1/challenges/1 try.github.io])
 
 
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)
 
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/]
 
 
;Your Task till Nov 13
 
<ol>
 
<li> 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?
 
<li> Replace this code with your own ideas (for example: posts and scores can be represented as barchart which automatically updates itself)
 
</ol>
 
 
We are looking forward to your ideas!
 

Latest revision as of 03:07, 18 November 2014

Tasks

Due Nov. 6

1. Examples of good and bad visualization practices

Find on the web two examples of a) a good visualization practice and b) a bad one. For example, this is a good and this is a bad one. Make screenshots of your examples and add them to this Google drive.
Name the files good_yourlastname.png(or jpg) and bad_yourlastname.png(or jpg). In the exercise next week we'll have a slide show of good and bad practices and a discussion.

2. Presentation of a favorite D3 component

Pick a D3 component of your choice to present it together with its code in the exercise (max. 3 mins presentation). For example, you could present Voronoi Tessellation and tell what does it present and what functions and logic it uses by scrolling down to its index.html code. To have everyone presenting a different component, please extend the table below with your name and the component you chose. Note, maximum two people are allowed to form a group and present one component.

Student 1 Student 2 D3 Component name Link to the component
Matheus Raszl Diana Papyan Choropleth http://bl.ocks.org/mbostock/4060606
Prapaporn Dangnoy Maribel Guzman Radial Reingold–Tilford Tree http://bl.ocks.org/mbostock/4063550
Akshit Malhotra Vinod Rajendran Bilevel Partition http://bl.ocks.org/mbostock/5944371
Madhura Kumaraswamy Sai Kiran Krishnamurthy Rounded Rectangles http://bl.ocks.org/mbostock/1123639
Kommanapalli Vasantha Kumari Ahsan Ziaullah Directed Graph Editor http://bl.ocks.org/rkirsling/5001347
Anuradha Ganapathi Rathnachalam Sequences Sunburst http://bl.ocks.org/kerryrodden/7090426
Irman Abdić Habtom Kahsay Gidey Clustered Force Layout http://bl.ocks.org/mbostock/1748247
Benedikt Rauscher Sven Punga Mobile Patent Suits http://bl.ocks.org/mbostock/1153292
Enrico Gigantiello Carlo Di Domenico Histogram http://bl.ocks.org/mbostock/3048450
Yue Xie Ying Li Gantt Chart http://bl.ocks.org/dk8996/5538271
Iris Shih David Dao Collision Detection http://bl.ocks.org/mbostock/3231298
Agon Lohaj Bardh Lohaj Voronoi Tessellation http://bl.ocks.org/mbostock/4060366