Embed Size (px)
Citation preview
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
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?
Find out what we are doing right, what needs improvement
http://bit.ly/nep-dev-survey
Questions?
