visualizing data with d3

Vizualising Data With D3

Punit Jajodia

Co-founder, adhuro.com

Why data viz?

Apple today announced financial results for its fiscal 2014 firstquarter ended December 28, 2013. The Company postedrecord quarterly revenue of $57.6 billion and quarterly netprofit of $13.1 billion, or $14.50 per diluted share. These

results compare to revenue of $54.5 billion and net profit of$13.1 billion, or $13.81 per diluted share, in the year-agoquarter. Gross margin was 37.9 percent compared to 38.6

percent in the year-ago quarter. International sales accountedfor 63 percent of the quarter’s revenue.

I get it, times are good

What is D3?

• Javascript Library for manipulating documents based on data

• A (really awesome) tool used to visualize data• Created by Mike Bostock in 2011

Pre-requisites

Understanding Entry and Exit

D3 basic – Enter and Exitvar dataset = [5, 10, 20, 15, 18];d3.select(“svg") .attr(‘id’,”abc”) .selectAll(“circle”) .data(dataset) .enter() .append(“circle”)

D3 basic – Enter and Exitvar dataset = [5, 10, 20, 15, 18];d3.select(“svg") .attr(‘id’,”abc”) . selectAll(“circle”) .data(dataset) .enter() .append(“circle”)

Empty Selection

D3 basic – Enter and Exitvar dataset = [5, 10, 20, 15, 18];d3.select(“svg") .attr(‘id’,”abc”) . selectAll(“circle”) .data(dataset) .enter() .append(“circle”)

D3 basic – Enter and Exitvar dataset = [5, 10, 20, 15, 18];d3.select(“svg") .attr(‘id’,”abc”) . selectAll(“circle”) .data(dataset) .enter() .append(“circle”)

D3 basic – Enter and Exit

d3.select(“svg") .attr(‘id’,”abc”) . selectAll(“circle”) .data(dataset) .enter() .append(“circle”)

var dataset = [5, 10, 20, 15, 18];

D3 scales

The power of D3

Where do we go from here?

OpenNepal

Humanitarian Data Exchange

data.un.org

Find out what we are doing right, what needs improvement

http://bit.ly/nep-dev-survey

Questions?