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|
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)
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/
- Your Task till Nov 13
- 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)
We are looking forward to your ideas!