Embed Size (px)
DESCRIPTION
Where do data visualizations come from? Flatiron students Emily Simonton and Mandy Yeung talk D3—a Javascript Library for manipulating documents based on data.
Citation preview
Data-Driven DocumentsIntro to
Emily Simonton Mandy Yeung
BK-001
Outline• What is D3?
• Getting Started
• How D3 works
• What we were able to build with D3
• Resources
What is D3?
• Javascript Library for manipulating documents based on data
• A (really awesome) tool used to visualize data
• Created by Mike Bostock in 2011
What is D3?
Data - Provided by you
Driven - d3 connects data to documents
Documents - web-based documents
What is D3?
Getting Started
Getting StartedPrerequisites:
<svg width="400" height="400">! <circle cx="100" cy="100" r="50"stroke="blue"!stroke-width="10" fill="red" />!
</svg> !
SVG - Scalable Vector Graphics
Getting Started
Getting StartedExamples:
Obama’s 2013 Budget Proposal 60 years of names in France
How D3 Works
How D3 WorksIncluding D3:
<html lang="en">!<head>! <meta charset="UTF-8">! <title>D3 Examples</title>! <script src="http://d3js.org/d3.v3.min.js"> ! </script>!</head>!<body>!</body>!</html>!
How D3 WorksSetting Up Our Variables:
var dataset = [! {x: 1, y: 50},! {x: 20, y: 20},! {x: 40, y: 10},! {x: 60, y: 40},! {x: 80, y: 5},! {x: 100, y: 30}! ];!!var h = 300; //height!var w = 700; //width!var p = 30; //padding
How D3 Works
var svg = d3.select("body")! .append("svg")! .attr("width", w)! .attr("height", h)! .attr("padding", p)! .style("border", "1px! solid black");!!
.select( )
How D3 Works.select( )
How D3 Works.selectAll( )
svg.selectAll("circle")! .data(dataset)! .enter()! .append("circle")! !!!!!!!
svg.selectAll("circle")! .data(dataset)! .enter()! .append("circle")! !!!!!!!
How D3 Works.data( )
svg.selectAll("circle")! .data(dataset)! .enter()! .append("circle")! !!!!!!!
How D3 Works.enter( )
svg.selectAll("circle")! .data(dataset)! .enter()! .append("circle")! !!!!!!!
How D3 Works.append( )
svg.selectAll("circle")! .data(dataset)! .enter()! .append("circle")!! .attr("cx", function(d,i){! return x(d.x);! })! .attr("cy", function(d){! return y(d.y);! })! .attr("r", 10);! ! !
How D3 Works.selectAll( )
svg.selectAll("circle")! .data(dataset)! .enter()! .append("circle")! !!!!!!!
How D3 Works
How D3 WorksStyling
d3.selectAll("circle")! .attr("fill", "red")! .attr("stroke", "pink")! .attr("stroke-width","3px");
How D3 WorksStyling
d3.selectAll("circle")! .attr("fill", "red")! .attr("stroke", "pink")! .attr("stroke-width","3px");
How D3 Works.scale( )
! var x = d3.scale.linear()! .domain([0, d3.max(dataset, function(d) {return d.x;})])! .range([p, w-p]);!! var y = d3.scale.linear()! .domain([0, d3.max(dataset, function(d) { return d.y;})])! .range([h - p, p]);!!
How D3 Works.axis( )
var xAxis = d3.svg.axis()! .scale(x);!! var yAxis = d3.svg.axis()! .scale(y)! .ticks(5)! .orient('left');!
How D3 Works.line( )
var drawLine = d3.svg.line()! .x(function(d) {return x(d.x);})! .y(function(d) {return y(d.y);});!! var path = svg.append('path')! .attr('d', drawLine(dataset))! .attr('stroke', 'red')! .attr('stroke-width', 3)! .attr('fill', 'none');!
What we were able to build with D3
Mandy Emily |
Resources
Resources
• http://d3js.org/
• https://github.com/mbostock/d3
• http://alignedleft.com/tutorials/d3
• http://christopheviau.com/d3_tutorial/
• http://chimera.labs.oreilly.com/books/1230000000345
Thank You!
