Intro to D3.js

Chris Uehlinger

What is D3?

• Data Driven Documents
• Built by Mike Bostock
• It can draw using:
  • HTML elements (<div>'s, <span>'s, <ul>'s, <li>'s)
  • SVG elements (<g>'s, <circle>'s, <rect>'s, <text>'s)
  • Canvas (using the browser's Canvas API)

Topics

• How to Learn D3
• Bar Chart Tutorial:
  • Selectors
  • Data Joins
  • Scales
  • Transitions

Let's make a bar chart

var data = [
	4, 
	8, 
	15, 
	16, 
	23, 
	42
];
                        

d3.select(".chart")
  .selectAll("div")
    .data(data)
  .enter().append("div")
    .text(function(d) { return d; });
                        

D3 Resources

• Slack: d3js.slack.com
• Mike Bostock's Blocks: bl.ocks.org/mbostock
• The D3 Wiki: github.com/mbostock/d3/wiki
• Mike Bostock's tutorials:
  • Let's Make a Bar Chart: bost.ocks.org/mike/bar/
  • Let's Make a Map: bost.ocks.org/mike/map/
  • Let's Make a Bubble Map: bost.ocks.org/mike/bubble-map/

Thanks for watching!

@Uehreka