D3 & MeteorJS allows developers to rapidly prototype data-driven web applications by combining MeteorJS and D3. D3 allows binding of data to HTML documents to dynamically generate vector graphics like charts and maps. It handles common tasks like data binding, scaling, and transitions. While D3 provides control, it does not offer canned solutions and is not ideal for quick projects. Core D3 concepts involve selecting elements and binding data to them. Examples of bar charts and maps generated with D3 and MeteorJS are provided.

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