hungvietdo

Node-link Diagram

I added a new attribute to the dataset which is region.

In the node-link diagram, states in the same region likely stick together as they have links in between.

States in region which has less number of links spread out in the diagram. For example: look at the light-green color (South Atlantic), Florida is far apart with those states (DC, Maryland, Virginia, West Viginia, Delaware).

Thus, although the dataset is non-spatial, users can explore the relationship of nodes by looking the distance or number of hops in between.

hungvietdo

hungvietdo

Rule of thumb

Overview first, zoom and filter, details on demand

Problem:

• It is hard to display all details at the same time.
• Problem: http://bl.ocks.org/hungvietdo/raw/64b015914153b85419ce

Solution:

• Just give an overview of information (positions of Starbucks).
• Users can get detail information by hovering mouse to the point of data.

hungvietdo

Rule of thumb

Overview first, zoom and filter, details on demand

Problem:

• It is hard to display all details at the same time.
• Problem: http://bl.ocks.org/hungvietdo/raw/64b015914153b85419ce

Solution:

• Just give an overview of information (positions of Starbucks).
• Users can get detail information by hovering mouse to the point of data.

hungvietdo

  var testData = [
    {times: [{"starting_time": 1355752800000, "ending_time": 1355759900000}, {"starting_time": 1355769900000, "ending_time": 1355774400000}]},
    {times: [{"starting_time": 1355752800000, "ending_time": 1355761900000}, {"starting_time": 1355767500000, "ending_time": 1355774400000}]},
    {times: [{"starting_time": 1355752800000, "ending_time": 1355763910000}]},
  ];
	var width = 500;
	var chart = d3.timeline().showAxisTop().stack();
	var svg = d3.select("#header1").append("svg").attr("width", width)
		.datum(testData).call(chart);
 

hungvietdo

Student

• Hung Do; CS725:Information Visualization; Spring 2016;
• Computer Science; Old Dominion University

My notes:

Three things from D3:

• Know how to use domain() and range() to scale.
• Transition(), duration() make the visualization interactively.
• D3 interacts with dataset very easily.

hungvietdo

Built with blockbuilder.org

hungvietdo

Built with blockbuilder.org

hungvietdo

Scott Murray Tutorial

Jerome Cukier's Tutorial

hungvietdo

---

Team Members: Srinivas Havanur Erika Siregar Hung Do Assignment: ICW2: Football data analysis

Course: Information Visualization

Semester: Spring 2016