Intro to D3: Data-Driven Documents
Upcoming SlideShare
Loading in...5
×
 

Intro to D3: Data-Driven Documents

on

  • 628 views

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

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

Statistics

Views

Total Views
628
Views on SlideShare
385
Embed Views
243

Actions

Likes
1
Downloads
5
Comments
0

9 Embeds 243

http://visualoop.com 146
https://twitter.com 31
http://feedly.com 27
https://gitter.im 18
http://www.inoreader.com 8
http://feeds.feedburner.com 8
http://www.slideee.com 2
http://soci-all.com 2
http://news.google.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Intro to D3: Data-Driven Documents Intro to D3: Data-Driven Documents Presentation Transcript

  • 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 by Mike Bostock in 2011 What is D3?
  • 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> ! SVG - Scalable Vector Graphics Getting Started
  • 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://d3js.org/d3.v3.min.js"> </script>! </head>! <body>! </body>! </html>!
  • 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
  • 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( )
  • 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);! })! .attr("cy", function(d){! return y(d.y);! })! .attr("r", 10);! ! ! How D3 Works .selectAll( ) svg.selectAll("circle")! .data(dataset)! .enter()! .append("circle")! ! ! ! ! ! ! !
  • 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]);! var y = d3.scale.linear()! .domain([0, d3.max(dataset, function(d) { return d.y;})])! .range([h - p, p]);!
  • How D3 Works .axis( ) var xAxis = d3.svg.axis()! .scale(x);! ! var yAxis = d3.svg.axis()! .scale(y)! .ticks(5)! .orient('left');!
  • 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');!
  • 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://christopheviau.com/d3_tutorial/ • http://chimera.labs.oreilly.com/books/1230000000345
  • Thank You!