0
Data-Driven Documents
Intro 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 b...
Data - Provided by you
Driven - d3 connects data to documents
Documents- web-based documents
What is D3?
Getting Started
Getting Started
Prerequisites:
<svg width="400" height="400">!
<circle cx="100" cy="100" r="50"stroke="blue"!
stroke-width="10" fill="red" />!
</svg> !
S...
Getting Started
Examples:
Obama’s 2013 Budget Proposal 60 years of names in France
How D3 Works
How D3 Works
Including D3:
<html lang="en">!
<head>!
<meta charset="UTF-8">!
<title>D3 Examples</title>!
<script src="http...
How D3 Works
Setting Up Our Variables:
var dataset = [!
{x: 1, y: 50},!
{x: 20, y: 20},!
{x: 40, y: 10},!
{x: 60, y: 40},!...
How D3 Works
var svg = d3.select("body")!
.append("svg")!
.attr("width", w)!
.attr("height", h)!
.attr("padding", p)!
.sty...
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);!
})!
.a...
How D3 Works
How D3 Works
Styling
d3.selectAll("circle")!
.attr("fill", "red")!
.attr("stroke", "pink")!
.attr("stroke-width","3px");
How D3 Works
Styling
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...
How D3 Works
.axis( )
var xAxis = d3.svg.axis()!
.scale(x);!
!
var yAxis = d3.svg.axis()!
.scale(y)!
.ticks(5)!
.orient('l...
How D3 Works
.line( )
var drawLine = d3.svg.line()!
.x(function(d) {return x(d.x);})!
.y(function(d) {return y(d.y);});!
!...
How D3 Works
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://christophevia...
Thank You!
Upcoming SlideShare
Loading in...5
×

Intro to D3: Data-Driven Documents

952

Published on

Where do data visualizations come from? Flatiron students Emily Simonton and Mandy Yeung talk D3—a Javascript Library for manipulating documents based on data.

Published in: Software
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
952
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
29
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Intro to D3: Data-Driven Documents"

  1. 1. Data-Driven Documents Intro to Emily Simonton Mandy Yeung BK-001
  2. 2. Outline • What is D3? • Getting Started • How D3 works • What we were able to build with D3 • Resources
  3. 3. What is D3?
  4. 4. • 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?
  5. 5. Data - Provided by you Driven - d3 connects data to documents Documents- web-based documents What is D3?
  6. 6. Getting Started
  7. 7. Getting Started Prerequisites:
  8. 8. <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
  9. 9. Getting Started Examples: Obama’s 2013 Budget Proposal 60 years of names in France
  10. 10. How D3 Works
  11. 11. How D3 Works Including 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>!
  12. 12. How D3 Works Setting 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
  13. 13. 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( )
  14. 14. How D3 Works .select( )
  15. 15. How D3 Works .selectAll( ) svg.selectAll("circle")! .data(dataset)! .enter()! .append("circle")! ! ! ! ! ! ! !
  16. 16. svg.selectAll("circle")! .data(dataset)! .enter()! .append("circle")! ! ! ! ! ! ! ! How D3 Works .data( )
  17. 17. svg.selectAll("circle")! .data(dataset)! .enter()! .append("circle")! ! ! ! ! ! ! ! How D3 Works .enter( )
  18. 18. svg.selectAll("circle")! .data(dataset)! .enter()! .append("circle")! ! ! ! ! ! ! ! How D3 Works .append( )
  19. 19. 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")! ! ! ! ! ! ! !
  20. 20. How D3 Works
  21. 21. How D3 Works Styling d3.selectAll("circle")! .attr("fill", "red")! .attr("stroke", "pink")! .attr("stroke-width","3px");
  22. 22. How D3 Works Styling d3.selectAll("circle")! .attr("fill", "red")! .attr("stroke", "pink")! .attr("stroke-width","3px");
  23. 23. 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]);!
  24. 24. How D3 Works .axis( ) var xAxis = d3.svg.axis()! .scale(x);! ! var yAxis = d3.svg.axis()! .scale(y)! .ticks(5)! .orient('left');!
  25. 25. 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');!
  26. 26. How D3 Works
  27. 27. What we were able to build with D3 Mandy Emily|
  28. 28. Resources
  29. 29. 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
  30. 30. Thank You!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×