Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Composing data visualizations in Ember

Composing data visualizations in Ember

6d383df9872f21a0c9f0b272722c8d98?s=128

Chris Henn

March 03, 2015
Tweet

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