Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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
×

of

Intro to D3: Data-Driven Documents Slide 1 Intro to D3: Data-Driven Documents Slide 2 Intro to D3: Data-Driven Documents Slide 3 Intro to D3: Data-Driven Documents Slide 4 Intro to D3: Data-Driven Documents Slide 5 Intro to D3: Data-Driven Documents Slide 6 Intro to D3: Data-Driven Documents Slide 7 Intro to D3: Data-Driven Documents Slide 8 Intro to D3: Data-Driven Documents Slide 9 Intro to D3: Data-Driven Documents Slide 10 Intro to D3: Data-Driven Documents Slide 11 Intro to D3: Data-Driven Documents Slide 12 Intro to D3: Data-Driven Documents Slide 13 Intro to D3: Data-Driven Documents Slide 14 Intro to D3: Data-Driven Documents Slide 15 Intro to D3: Data-Driven Documents Slide 16 Intro to D3: Data-Driven Documents Slide 17 Intro to D3: Data-Driven Documents Slide 18 Intro to D3: Data-Driven Documents Slide 19 Intro to D3: Data-Driven Documents Slide 20 Intro to D3: Data-Driven Documents Slide 21 Intro to D3: Data-Driven Documents Slide 22 Intro to D3: Data-Driven Documents Slide 23 Intro to D3: Data-Driven Documents Slide 24 Intro to D3: Data-Driven Documents Slide 25 Intro to D3: Data-Driven Documents Slide 26 Intro to D3: Data-Driven Documents Slide 27 Intro to D3: Data-Driven Documents Slide 28 Intro to D3: Data-Driven Documents Slide 29 Intro to D3: Data-Driven Documents Slide 30
Upcoming SlideShare
Tools & Resources for Data Visualisation
Next
Download to read offline and view in fullscreen.

6 Likes

Share

Download to read offline

Intro to D3: Data-Driven Documents

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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

    Nov. 27, 2021
  • AmitMaharjan1

    Nov. 11, 2017
  • huiwenhan

    Oct. 9, 2016
  • liketaurus

    May. 13, 2016
  • ylchern

    Nov. 3, 2014
  • StephanieWills1

    Jul. 31, 2014

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

Views

Total views

4,485

On Slideshare

0

From embeds

0

Number of embeds

474

Actions

Downloads

153

Shares

0

Comments

0

Likes

6

×