1 / 18

Data-Driven Documents

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

cheyenne-fuentes
Download Presentation

Data-Driven Documents

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Data-DrivenDocuments Visualizations for the web

  2. Baltimore Number of Murders Per Year By Shane Knudsen http://userpages.umbc.edu/~shaknu1/bar-chart/

  3. Map Projections By Mike Bostock http://bl.ocks.org/mbostock/3711652

  4. Polar Clock By Mike Bostock http://bl.ocks.org/mbostock/1096355

  5. 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

  6. Wind History By Daedalus Bits Llc. http://windhistory.com/map.html#7.00/39.313/-76.993

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

  8. What Is D3? JavaScript library Uses existing web technologies Generates graphics by binding data to objects

  9. D3 Uses Existing Web Technology HTML CSS Scalable Vector Graphics (SVG) Canvas

  10. 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>

  11. 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”; }

  12. Data Sources JavaScript Object Notation (JSON) CSV/TSV XML Structure Arrays (flat lists) Matrices (tables) Hierarchical

  13. 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

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

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

  16. 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");

  17. Result

  18. 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

More Related