D3: Data Driven Documents

D3: Data Driven Documents

Michael Freeman

mfviz.com/info343

Today's outline

• Building blocks of charts
• D3 overview
• Appending elements onto the page
• Binding data to elements
• Example application

Building blocks of charts

What elements constitute a chart?

What elements constitute a chart?

All you have to do is learn how to arrange these elements into charts

Building blocks of charts

• Visual elements are part of the DOM
• These are wrapped in a Scalable Vector Graphic (SVG)

<!-- Container Div -->
<div>
	<!-- Container svg for visual elements -->
	<svg>
		<!-- Rectangle element -->
		<rect x="10" y="10" height="20" width="100"></rect>
	</svg>
</div>

Limitations

• Tedious
• Not scalable
• Not flexible
• Not dynamic

D3 Overview

What is D3?

• A JavaScript library that makes charts
• Not a charting library
• DOM manipulation library
• Binds data to visual elements
• Easily included in HTML

  <script src="http://d3js.org/d3.v3.min.js"></script>

So what can D3 do?

All you have to do is learn how to arrange these elements into charts

(and D3 can help)

Appending elements to the page

Appending elements to the page

• Select an element that's on the page

d3.select('#my-div')

d3.select('#my-div').append('svg')

d3.select('#my-div').append('svg')
	.attr('width', 100)
	.attr('height', 100)
	.style('border', '1px solid black')

Binding data

Example application

Let's make a map

• Maps are made of irregular shapes (paths)
• Paths are added to the DOM just like circles

// State paths
svg.selectAll("path")
    .data(stateShapes)
    .enter()
    .append('path')
    .attr("d", function(d) { return pathGenerator(d)}) // the "d" attribute defines the shape of the path

In which U.S. states were people born?

Remember

All you have to do is learn how to arrange elements into charts

Contact and Resources

Contact

Michael Freeman

mikefree@uw.edu

@mf_viz

mfviz.com

Additional resources

D3 website

S. Murray's Interactive Data Visualization

Reusable charts by NVD3