Homework 3

From Protein Prediction 2 Winter Semester 2014
Revision as of 23:18, 5 November 2014 by Ppwikiuser (talk | contribs) (Due Nov. 6)


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
  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)

We are looking forward to your ideas!