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
Data Visualizations and Reactive Graphs
arroyolabs.com
Who are we?
• Arroyo Labs
o Andy Armstrong
o John Arroyo
Why give this talk?
• MeteorJS allows us to rapidly prototype data driven web
applications
• The Web is mostly a graphic m...
What is D3?
• "D3 allows you to bind arbitrary data
to a Document Object Model (DOM),
and then apply data-driven
transform...
What makes D3 worth using?
● Making dynamic vector graphics with standard stuff
○ HTML, JS, CSS, SVG
● Simplifying math no...
What is D3 not good for?
● Quick starts and short attention spans
● Hiding your data
● Sends all data to the front end
○ W...
MeteorJS D3 Installation
• Simply available as a meteorite package
mrt add d3
• Available only as for client side stuff
Core D3 Concepts: Selects
• D3 selections are just arrays of DOM
o Select doc body elements to attach stuff to
o Select el...
Core D3 Concepts: Data Binding
● Map data to selected elements, loop
○ D3 handles many data types: arrays, dictionaries
da...
Bar Charts Examples
● http://d3demo.meteor.com/bars1
● http://d3demo.meteor.com/bars2
● http://d3demo.meteor.com/bars3
● h...
Map (SVG) Examples
● http://d3demo.meteor.com/maps1
● http://d3demo.meteor.com/maps2
● http://d3demo.meteor.com/maps3
● ht...
Reactive Bar Charts
● http://d3demo.meteor.com/reactivebars
Thank You
We will be posting the slides and some of the
code very soon.
https://github.com/ArroyoLabs/meetups
follow us @a...
Upcoming SlideShare
Loading in …5
×

D3 & MeteorJS

Intro to D3 and a brief example using MeteorJS

  • Login to see the comments

D3 & MeteorJS

  1. 1. D3 & MeteorJS Data Visualizations and Reactive Graphs arroyolabs.com
  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 d3.select("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]; d3.select("body").selectAll("p") .data(data) .enter() .append("p") .text("Paragraph Tag"); • Creates 4 new <p>Paragraph Tag</p>
  10. 10. Bar Charts Examples ● http://d3demo.meteor.com/bars1 ● http://d3demo.meteor.com/bars2 ● http://d3demo.meteor.com/bars3 ● http://d3demo.meteor.com/bars4
  11. 11. Map (SVG) Examples ● http://d3demo.meteor.com/maps1 ● http://d3demo.meteor.com/maps2 ● http://d3demo.meteor.com/maps3 ● http://d3demo.meteor.com/maps4 ● http://d3demo.meteor.com/maps5
  12. 12. Reactive Bar Charts ● http://d3demo.meteor.com/reactivebars
  13. 13. Thank You We will be posting the slides and some of the code very soon. https://github.com/ArroyoLabs/meetups follow us @arroyolabs @saarmstrong @djfingers arroyolabs.com

×