Composing data visualizations in Ember

Transcript

1. Composing Data Visualizations in Ember Chris Henn · chnn/composing-graphics
2. How should we split a statistical graphic into parts?
3. • Lets us change one feature of the graphic at a time • Suggests the aspects of a plot that are possible to change • Encourages custom visualizations for every data situation
4. mpg cyl disp hp drat wt qsec vs am gear carb Mazda RX4 21.0 6 160.0 110 3.90 2.620 16.46 0 1 4 4 Mazda RX4 Wag 21.0 6 160.0 110 3.90 2.875 17.02 0 1 4 4 Datsun 710 22.8 4 108.0 93 3.85 2.320 18.61 1 1 4 1 Hornet 4 Drive 21.4 6 258.0 110 3.08 3.215 19.44 1 0 3 1 Hornet Sportabout 18.7 8 360.0 175 3.15 3.440 17.02 0 0 3 2 Valiant 18.1 6 225.0 105 2.76 3.460 20.22 1 0 3 1 …
5. [ {name: “Mazda RX4”, mpg: 21.0, wgt: 2.62, cyl: 6, …}, {name: “Mazda RX4 Wag”, mpg: 21.0, wgt: 2.875, cyl: 6, …}, {name: “Datsun 710”, mpg: 22.8, wgt: 2.32, cyl: 4, …}, … ]
6. Demo
7. Hadley Wickham’s Grammar of Graphics
8. A simple scatterplot
9. A simple scatterplot • Mappings from variables to aspects of the plot • In the grammar this is a data to aesthetic mapping • Every visualization has at least one (often more)
10. A simple scatterplot • Each Data to Aesthetic mapping has some mapping function • These are called scales
11. A simple scatterplot • We’ve chosen to represent these as points • This is called a geom (or geometry)
12. The Grammar of Graphics • Data to Aesthetic mappings • Scales: one per Data to Aesthetic mapping • Layers A. Geom B. Stat C. Optional Data to Aesthetic mapping • Coordinate System • Faceting
13. What does this look like using Ember?
14. Data to Aesthetic Mappings
15. {{my-scatterplot data=app.carData y="mpg" x="wt" color="cyl"}} Data to Aesthetic Mappings
16. Scales
17. // Some scale constructor var scale = linearScale([0, 10], [0, 300]); scale(5) // => 150 scale.invert(150) // => 5 Scales
18. var SomeComponent = Ember.Component.extend({ // Computed property that returns a scale function xScale: linearScaleMacro('data', 'x', ‘screenWidth'), // ... }); Scales
19. Layers Geometries, Stats, Optional Data to Aesthetic mappings
20. {{plot-points data=data x=x y=y xScale=xScale yScale=yScale}} Layers
21. <svg> <path d="{{pathString}}" /> </svg> Layers: Geometries
22. <svg> {{#each points as |point|}} <circle cx="{{point.x}}" cy=“{{point.y}}" /> {{/each}} </svg> Layers: Geometries
23. Further considerations • Interactivity • Animations and transitions • Performance • When is the grammar appropriate?
24. When is the Grammar of Graphics appropriate? General Purpose Plotting Library App with one visualization Your Ember App
25. Questions? chrishenn.net twitter: @cwhnn github: @chnn