Download as PDF, PPTX
![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](https://image.slidesharecdn.com/d37-140731100120-phpapp01/85/Intro-to-D3-Data-Driven-Documents-12-320.jpg)
![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]);!](https://image.slidesharecdn.com/d37-140731100120-phpapp01/85/Intro-to-D3-Data-Driven-Documents-23-320.jpg)
Uploaded byFlatiron School
Intro to D3: Data-Driven Documents
The document provides an introduction to D3.js, a JavaScript library for visualizing data through web-based documents. It outlines the prerequisites for getting started, basic usage, and examples of building visualizations. Additionally, it includes resources for further learning about D3.js.
More Related Content
Similar to Intro to D3: Data-Driven Documents
![Lect 1 Number systems and base conversions. [Autosaved].pptx](https://cdn.slidesharecdn.com/ss_thumbnails/lect1numbersystemsandbaseconversions-260111134109-67c2d865-thumbnail.jpg?width=640&height=640&fit=bounds)
Intro to D3: Data-Driven Documents
- 1. Data-Driven Documents Intro to EmilySimonton Mandy Yeung BK-001
- 2. Outline • What is D3? • GettingStarted • How D3 works • What we were able to build with D3 • Resources
- 3.
- 4. • Javascript Library formanipulating documents based on data • A (really awesome) tool used to visualize data • Created by Mike Bostock in 2011 What is D3?
- 5. Data - Providedby you Driven - d3 connects data to documents Documents- web-based documents What is D3?
- 6.
- 7.
- 8. <svg width="400" height="400">! <circlecx="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 2013Budget Proposal 60 years of names in France
- 10.
- 11. How D3 Works IncludingD3: <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 SettingUp 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 varsvg = d3.select("body")! .append("svg")! .attr("width", w)! .attr("height", h)! .attr("padding", p)! .style("border", "1px! solid black");!! .select( )
- 14.
- 15. How D3 Works .selectAll() svg.selectAll("circle")! .data(dataset)! .enter()! .append("circle")! ! ! ! ! ! ! !
- 16.
- 17.
- 18.
- 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.
- 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.
- 27. What we wereable to build with D3 Mandy Emily|
- 28.
- 29.
- 30.