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.

D3 & MeteorJS


Published on

Introduction to D3 and some examples of usage with MeteorJS

  • Be the first to comment

  • Be the first to like this

D3 & MeteorJS

  1. 1. D3 & MeteorJS Data Visualizations and Reactive Graphs
  2. 2. Who are we? • Arroyo Labs o Andy Armstrong o John Arroyo
  3. 3. Why give this talk? • MeteorJS allows us to rapidly prototype data driven web applications • The Web is mostly a graphic medium o We need meaningful and ‘pretty’ ways to display the data in our data driven web apps • We are all lazy o Making our web apps show stuff as easy as possible is the whole point • We wanted to learn more about D3
  4. 4. What is D3? • "D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document.”
  5. 5. What makes D3 worth using? ● Making dynamic vector graphics with standard stuff ○ HTML, JS, CSS, SVG ● Simplifying math no one wants to do ○ Chart Scaling ○ Transitions ● Lots of control ○ More than other libs ● More than just charts ○ Create SVG graphics dynamically ○ Animations
  6. 6. What is D3 not good for? ● Quick starts and short attention spans ● Hiding your data ● Sends all data to the front end ○ Why bother making a graph? ● Solving every visualization problem ○ No canned solutions ● IE’s below 9 ○ Use non-SVG heavy framework
  7. 7. MeteorJS D3 Installation • Simply available as a meteorite package mrt add d3 • Available only as for client side stuff
  8. 8. Core D3 Concepts: Selects • D3 selections are just arrays of DOM o Select doc body elements to attach stuff to o Select elements you are going to create • Iterate through these arrays to do stuff"body").selectAll("p")
  9. 9. Core D3 Concepts: Data Binding ● Map data to selected elements, loop ○ D3 handles many data types: arrays, dictionaries data = [1, 2, 3, 4];"body").selectAll("p") .data(data) .enter() .append("p") .text("Paragraph Tag"); • Creates 4 new <p>Paragraph Tag</p>
  10. 10. Bar Charts Examples ● ● ● ●
  11. 11. Map (SVG) Examples ● ● ● ● ●
  12. 12. Reactive Bar Charts ●
  13. 13. Thank You We will be posting the slides and some of the code very soon. follow us @arroyolabs @saarmstrong @djfingers