Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
  • Soyez le premier à commenter

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!

    Soyez le premier à commenter

    Identifiez-vous pour voir les commentaires

  • StephanieWills1

    Jul. 31, 2014
  • ylchern

    Nov. 3, 2014
  • liketaurus

    May. 13, 2016
  • huiwenhan

    Oct. 9, 2016
  • AmitMaharjan1

    Nov. 11, 2017

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

Vues

Nombre de vues

4 368

Sur Slideshare

0

À partir des intégrations

0

Nombre d'intégrations

473

Actions

Téléchargements

152

Partages

0

Commentaires

0

Mentions J'aime

5

×