180 likes | 325 Views
Data-Driven Documents. Visualizations for the web. Baltimore Number of Murders Per Year. By Shane Knudsen http://userpages.umbc.edu/~shaknu1/bar-chart/. Map Projections. B y Mike Bostock http://bl.ocks.org/mbostock/3711652. Polar Clock. By Mike Bostock
E N D
Data-DrivenDocuments Visualizations for the web
Baltimore Number of Murders Per Year By Shane Knudsen http://userpages.umbc.edu/~shaknu1/bar-chart/
Map Projections By Mike Bostock http://bl.ocks.org/mbostock/3711652
Polar Clock By Mike Bostock http://bl.ocks.org/mbostock/1096355
512 Paths to the White House By Mike Bostock and Shan Carter (New York Times) http://www.nytimes.com/interactive/2012/11/02/us/politics/paths-to-the-white-house.html?_r=0
Wind History By Daedalus Bits Llc. http://windhistory.com/map.html#7.00/39.313/-76.993
Violence and guns in best-selling video games By Guardian US interactive team http://www.theguardian.com/world/interactive/2013/apr/30/violence-guns-best-selling-video-games
What Is D3? JavaScript library Uses existing web technologies Generates graphics by binding data to objects
D3 Uses Existing Web Technology HTML CSS Scalable Vector Graphics (SVG) Canvas
SVG Example drawing: <svg height="100" width="200"> <circle cx="10" cy="50" r="10" style="fill: steelblue;"></circle> <circle cx="30" cy="20" r="10" style="fill: steelblue;"></circle> <circle cx="20" cy="80" r="10" style="fill: steelblue;"></circle> <circle cx="50" cy="60" r="10" style="fill: steelblue;"></circle> <circle cx="70" cy="90" r="10" style="fill: steelblue;"></circle> <text x="10" y="50" text-anchor="middle" dominant-baseline="central" style="fill: white;">1</text> <text x="30" y="20" text-anchor="middle" dominant-baseline="central" style="fill: white;">2</text> <text x="20" y="80" text-anchor="middle" dominant-baseline="central" style="fill: white;">3</text> <text x="50" y="60" text-anchor="middle" dominant-baseline="central" style="fill: white;">4</text> <text x="70" y="90" text-anchor="middle" dominant-baseline="central" style="fill: white;">5</text> </svg>
SVG Same drawing styled by CSS: <svg height="100" width="200"> <circle cx="10" cy="50" r="10"></circle> <circle cx="30" cy="20" r="10“></circle> <circle cx="20" cy="80" r="10"></circle> <circle cx="50" cy="60" r="10"></circle> <circle cx="70" cy="90" r="10"></circle> <text x="10" y="50" text-anchor="middle" dominant-baseline="central">1</text> <text x="30" y="20" text-anchor="middle" dominant-baseline="central">2</text> <text x="20" y="80" text-anchor="middle" dominant-baseline="central">3</text> <text x="50" y="60" text-anchor="middle" dominant-baseline="central">4</text> <text x="70" y="90" text-anchor="middle" dominant-baseline="central">5</text> </svg> circle { fill: “steelblue”; } text { fill: “white”; }
Data Sources JavaScript Object Notation (JSON) CSV/TSV XML Structure Arrays (flat lists) Matrices (tables) Hierarchical
Data Joins Data is bound to SVG objects The data literally becomes part of the DOM var data = [ “1”, ”2”, “3”, “4”, “5” ]; SVG SVG 4 1 3 5 2
Basic Code Pattern – Define SVG Element vardataArray = [ {val:1,x:10,y:50}, {val:2,x:30,y:80}, {val:3,x:20,y:20}, {val:4,x:50,y:40}, {val:5,x:70,y:10} ]; var height = 200; var width = 200; varsvg = d3.select(“body”).append(“svg”) .attr(“width”, width) .attr(“height”, width);
Basic Code Pattern – Add Circles svg.selectAll(“circle”) .data(dataArray) .enter() .append(“circle”) .attr(“cx”, function(d) { return d.x; }) .attr(“cy”, function(d) { return height - d.y; }) .attr(“r”, 10);
Basic Code Pattern – Add Text svg.selectAll(“text”) .data(dataArray) .enter() .append(“text”) .text(function(d) { return d.val; }) .attr("x", function(d) { return d.x; }) .attr("y", function(d) { return height - d.y; }) .attr("text-anchor", "middle") .attr("dominant-baseline", "central");
What Next? Examples for inspiration https://github.com/mbostock/d3/wiki/Gallery Recommended Tutorials Thinking With Joins http://bost.ocks.org/mike/join/ General Update Pattern I, II, III http://bl.ocks.org/mbostock/3808218 http://bl.ocks.org/mbostock/3808221 http://bl.ocks.org/mbostock/3808234 Other Tutorials https://github.com/mbostock/d3/wiki/Tutorials API Reference https://github.com/mbostock/d3/wiki/API-Reference