Intro to D3: Data-Driven Documents

of 30 /30
Data-Driven Documents Intro to Emily Simonton Mandy Yeung BK-001

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.

Transcript of Intro to D3: Data-Driven Documents

Page 1: Intro to D3: Data-Driven Documents

Data-Driven DocumentsIntro to

Emily Simonton Mandy Yeung

BK-001

Page 2: Intro to D3: Data-Driven Documents

Outline• What is D3?

• Getting Started

• How D3 works

• What we were able to build with D3

• Resources

Page 3: Intro to D3: Data-Driven Documents

What is D3?

Page 4: Intro to D3: Data-Driven Documents

• 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?

Page 5: Intro to D3: Data-Driven Documents

Data - Provided by you

Driven - d3 connects data to documents

Documents - web-based documents

What is D3?

Page 6: Intro to D3: Data-Driven Documents

Getting Started

Page 7: Intro to D3: Data-Driven Documents

Getting StartedPrerequisites:

Page 8: Intro to D3: Data-Driven Documents

<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

Page 9: Intro to D3: Data-Driven Documents

Getting StartedExamples:

Obama’s 2013 Budget Proposal 60 years of names in France

Page 10: Intro to D3: Data-Driven Documents

How D3 Works

Page 11: Intro to D3: Data-Driven Documents

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>!

Page 12: Intro to D3: Data-Driven Documents

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

Page 13: Intro to D3: Data-Driven Documents

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( )

Page 14: Intro to D3: Data-Driven Documents

How D3 Works.select( )

Page 15: Intro to D3: Data-Driven Documents

How D3 Works.selectAll( )

svg.selectAll("circle")! .data(dataset)! .enter()! .append("circle")! !!!!!!!

Page 16: Intro to D3: Data-Driven Documents

svg.selectAll("circle")! .data(dataset)! .enter()! .append("circle")! !!!!!!!

How D3 Works.data( )

Page 17: Intro to D3: Data-Driven Documents

svg.selectAll("circle")! .data(dataset)! .enter()! .append("circle")! !!!!!!!

How D3 Works.enter( )

Page 18: Intro to D3: Data-Driven Documents

svg.selectAll("circle")! .data(dataset)! .enter()! .append("circle")! !!!!!!!

How D3 Works.append( )

Page 19: Intro to D3: Data-Driven Documents

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")! !!!!!!!

Page 20: Intro to D3: Data-Driven Documents

How D3 Works

Page 21: Intro to D3: Data-Driven Documents

How D3 WorksStyling

d3.selectAll("circle")! .attr("fill", "red")! .attr("stroke", "pink")! .attr("stroke-width","3px");

Page 22: Intro to D3: Data-Driven Documents

How D3 WorksStyling

d3.selectAll("circle")! .attr("fill", "red")! .attr("stroke", "pink")! .attr("stroke-width","3px");

Page 23: Intro to D3: Data-Driven Documents

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]);!!

Page 24: Intro to D3: Data-Driven Documents

How D3 Works.axis( )

var xAxis = d3.svg.axis()! .scale(x);!! var yAxis = d3.svg.axis()! .scale(y)! .ticks(5)! .orient('left');!

Page 25: Intro to D3: Data-Driven Documents

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');!

Page 27: Intro to D3: Data-Driven Documents

What we were able to build with D3

Mandy Emily |

Page 28: Intro to D3: Data-Driven Documents

Resources

Page 29: Intro to D3: Data-Driven Documents

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

Page 30: Intro to D3: Data-Driven Documents

Thank You!