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>
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
Notes de l'éditeur
"The quality that makes you go to great effort to reduce overall energy expenditure.” - Larry Wall, Perl dude