Hung Do 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.

Built with blockbuilder.org

Scott Murray Tutorial

Jerome Cukier's Tutorial

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

Course: Information Visualization

Semester: Spring 2016

Student

Hung Do; CS725:Information Visualization; Spring 2016;

Computer Science; Old Dominion University

My notes:

Two comments from tableau:

It is helpful to follow a tutorial about tableau. I found one from Lynda.com (ODU students can access at no cost).

There is no coding involved in Tableau but there are a lot of functions to visualize data.

Three comments from D3:

My notes

Using Nathan's Hot Dog Contest datafile from flowingdata.com
Changing tsv to csv to read in datafile w/o modification

Edit of mbostock's DRY Bar Chart

A variation of the example bar chart using a slightly more D.R.Y. style. The visual encoding is represented by two functions and their composition:

The value accessor returns the value (or property) to encode for a given data object.

The scale maps this value to a visual display encoding, such as a pixel position.

Student

Hung Do; CS725:Information Visualization; Spring 2016;

Computer Science; Old Dominion University

My notes:

Two comments from tableau:

It is helpful to follow a tutorial about tableau. I found one from Lynda.com (ODU students can access at no cost).

There is no coding involved in Tableau but there are a lot of functions to visualize data.

Three comments from D3:

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

Built with blockbuilder.org

Working through the examples from Scott Murray's tutorial at http://alignedleft.com/tutorials/d3/

R image that using a dataset generated by D3 example. I use console.log(dataset) to get data.

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