Introduction to D3.js

Resources can be found at https://github.com/philipcdavis/intro-to-d3

Transcript

1. Introduction to D3 P H I L I P D A V I S
2. Outline  Web Standards  Getting setup with the library  Binding data to documents  Data loading  Mini project  Resources
3. Web Standards JS [BEHAVIOR] HTML [CONTENT] CSS [STYLE] SVG [ SHAPES & VECTORS ]
4. The Library “D3 solves the crux of the problem: efficient manipulation of documents based on data. This avoids proprietary representation and affords extraordinary flexibility” Mike Bostock
5. Binding Data to Documents Selections d3.select(“#element”) d3.selectAll(“element”) .data([1,2,3,4]) Data Joins
6. Enter, Update, and Exit .enter().append(“circle”); Only 3 possible scenarios.  ENTER: Data elements > SVG elements  EXIT: Data elements < SVG elements  UPDATE: Data elements = SVG elements .exit().remove();
7. Attributes Your rendered elements should reflect the data in some way.  Color  Position  Size  Stroke  CSS classes .attr(“fill”, “#FF0000”) .attr(“x”, 20) .attr(“width”, 100) .attr(“stroke”, “red”) .attr(“class”, “.red”)
8. Putting it Together var circle = svg.selectAll("circle") .data([1,2,3]) .enter() .append("circle") .attr("r", 10) .attr("cx", 10) .attr("cy", 10) .attr("fill", "green");
9. Demos
10. Resources Free Book List of Examples Today’s Code