Building blocks of charts

D3 overview

Appending elements, binding data

Example chart

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

Visual elements are part of the DOM

Elements are wrapped in a Scalable Vector Graphic (SVG)

Tedious

Not scalable

Not flexible

Not dynamic

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>

(and D3 can help!)

Select element

d3.select('#my-div')

Append an element to your selection

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

Assign attributes and styles

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

Binding data

mySvg.selectAll('circle')
    .data([1,2,3]) // binds data to selection

Enter elements

mySvg.selectAll('circle')
    .data([1,2,3])
    .enter() // returns elements in data not on page

Exit elements

mySvg.selectAll('circle')
    .data([1,2,3])
    .exit() // returns elements on page not in data

Write a function to do your positioning

var circleFunc = function(circle) {
    circle.attr('r', 15)
          .attr('fill', 'blue')
          .attr('x', function(d) {d * 50})
          .attr('class', 'shape')
}

Pass elements to your positioning function

var circles = d3.selectAll('circle').data(myData)

circles.enter().append('circle')
      .call(circleFunc) 
      // Passes each circle to your function

var draw = function(data) {
    // Bind data you pass in
    var circles = svg.selectAll('circle').data(data)
	
    // Enter new elements
    circles.enter().append('circle').call(circleFunc)
	
    // Exit elements that may have left
    circles.exit().remove()
	
    // Transition all circles to new position
    svg.selectAll('circle').transition()
        .duration(1500).call(circleFunc)  
}

Translate from an input domain to an output range

var scale = d3.scale.linear()
                 .domain([0,10])
                 .range([0, 100])

scale(5) // returns 50

Use built in d3.min and d3.max functions

d3.min([1,2,3]) // returns 1
var data = [{x:1, y:1},{x:2, y:2},{x:3, y:5}]
d3.max(data, function(d) {return d.y}) // returns 5

Fork my repo

Clone in desktop

Start your local server

cd "d3-demo"
python -m SimpleHTTPServer 8080

Project proposals (due before next class)