Introduction to D3 and some examples of usage with MeteorJS

1. D3 & MeteorJS
Data Visualizations and Reactive Graphs
arroyolabs.com

2. Who are we?
• Arroyo Labs
o Andy Armstrong
o John Arroyo

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. 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. 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. 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. MeteorJS D3 Installation
• Simply available as a meteorite package
mrt add d3
• Available only as for client side stuff

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. 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. Bar Charts Examples
● http://d3demo.meteor.com/bars1
● http://d3demo.meteor.com/bars2
● http://d3demo.meteor.com/bars3
● http://d3demo.meteor.com/bars4

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. Reactive Bar Charts
● http://d3demo.meteor.com/reactivebars

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