Data Driven Documents

(d3.js)

Origins

• External Tools (Flash, etc.)
• 2005 - ProtoViz
• 2011 - d3.js

SVG Review

• XML based vector format
• Scales appropropriately
• 3 Parts: shapes, filters, gradients

SVGs Two Ways

Just HTML:

<svg> 

        <rect width="100" height="100" style="fill", "red">

</svg>

 

With d3:

d3.select("body").append("svg").append("rect").attr("width", 100).attr("height", 100).style("fill", "blue");

D3 Principles

1. Selecting
2. Appending
3. Styling

 

Drawing with Data

1. Selecting
2. Appending
3. Styling