Intro to D3: Data-Driven Documents
•
6 j'aime•4,664 vues
Where do data visualizations come from? Flatiron students Emily Simonton and Mandy Yeung talk D3—a Javascript Library for manipulating documents based on data.
Recommandé
Contenu connexe
Similaire à Intro to D3: Data-Driven Documents
Similaire à Intro to D3: Data-Driven Documents (20)
Plus de Flatiron School
Plus de Flatiron School (13)
Dernier
Dernier (20)
Intro to D3: Data-Driven Documents
- 1. Data-Driven Documents Intro to Emily Simonton Mandy Yeung BK-001
- 2. Outline • What is D3? • Getting Started • How D3 works • What we were able to build with D3 • Resources
- 3. What is D3?
- 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. Data - Provided by you Driven - d3 connects data to documents Documents- web-based documents What is D3?
- 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. Getting Started Examples: Obama’s 2013 Budget Proposal 60 years of names in France
- 10. How D3 Works
- 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. 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. 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. How D3 Works .select( )
- 15. How D3 Works .selectAll( ) svg.selectAll("circle")! .data(dataset)! .enter()! .append("circle")! ! ! ! ! ! ! !
- 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. How D3 Works
- 21. How D3 Works Styling d3.selectAll("circle")! .attr("fill", "red")! .attr("stroke", "pink")! .attr("stroke-width","3px");
- 22. How D3 Works Styling d3.selectAll("circle")! .attr("fill", "red")! .attr("stroke", "pink")! .attr("stroke-width","3px");
- 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. How D3 Works .axis( ) var xAxis = d3.svg.axis()! .scale(x);! ! var yAxis = d3.svg.axis()! .scale(y)! .ticks(5)! .orient('left');!
- 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. How D3 Works
- 27. What we were able to build with D3 Mandy Emily|
- 28. Resources
- 30. Thank You!