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

Visualization Grammar

Visualization Grammar

A brief tour of the Vega/Vega-Lite visualization grammar used in Altair

Eitan Lees

March 03, 2020
Tweet

More Decks by Eitan Lees

Other Decks in Programming

Transcript

  1. Data Mark Encoding Transform Scale Guide Visualization Grammar

  2. Data Mark Encoding Transform Scale Guide A B C &

    Variables Observations Tabular Data A B C
  3. Data Mark Encoding Transform Scale Guide A,B,C,D,E 4,6,4,4,3 4,4,8,4,3 7,5,5,0,1

    5,9,3,0,5 0,1,2,4,2 [ { "A":4, "B":6, "C":4, "D":4, "E":3 }, { "A":4, "B":4, "C":8, "D":4, "E":3 }, { "A":7, "B":5, "C":5, "D":0, "E":1 }, { "A":5, "B":9, "C":3, "D":0, "E":5 }, { "A":0, "B":1, "C":2, "D":4, "E":2 } ] https://eitanlees.com/ABC.csv
  4. Data Mark Encoding Transform Scale Guide B A A A

    C C C B B and many more ... Text Circle Bar Line
  5. Data Mark Encoding Transform Scale Guide X Position Y Position

    Size Color ⠇ Channel A B C D ⠇ Variable
  6. Data Mark Encoding Transform Scale Guide Calculate Fold Filter Aggregate

    and many more ...
  7. Data Mark Encoding Transform Scale Guide f(domain) → range

  8. Data Mark Encoding Transform Scale Guide A B C Legend

  9. Data Mark Encoding Transform Scale Guide Let’s make a chart

  10. Data Mark Encoding Transform Scale Guide import altair as alt

    from vega_datasets import data iris = data.iris() sepalLength sepalWidth PetalLength PetalWidth species 5.1 3.5 1.4 0.2 setosa 4.9 3.0 1.4 0.2 setosa 4.7 3.2 1.3 0.2 setosa 4.6 3.1 1.5 0.2 setosa ⠇
  11. Data Mark Encoding Transform Scale Guide import altair as alt

    from vega_datasets import data iris = data.iris() alt.Chart(iris).mark_circle()
  12. Data Mark Encoding Transform Scale Guide import altair as alt

    from vega_datasets import data iris = data.iris() alt.Chart(iris).mark_circle() Without an encoding our chart is not very interesting
  13. Data Mark Encoding Transform Scale Guide import altair as alt

    from vega_datasets import data iris = data.iris() alt.Chart(iris).mark_circle().encode( alt.X('petalLength'), alt.Y('petalWidth') )
  14. Data Mark Encoding Transform import altair as alt from vega_datasets

    import data iris = data.iris() alt.Chart(iris).mark_circle().encode( alt.X('petalLength'), alt.Y('petalWidth'), alt.Color('species') ) Scale Guide
  15. Data Mark Encoding Transform import altair as alt from vega_datasets

    import data iris = data.iris() alt.Chart(iris).mark_circle().encode( alt.X('petalLength'), alt.Y('petalWidth'), alt.Color('species') ) Scale Guide Note that the guides and scales are automatically generated for us
  16. Data Mark Encoding Transform import altair as alt from vega_datasets

    import data iris = data.iris() alt.Chart(iris).mark_circle().encode( alt.X('petalLength'), alt.Y('petalWidth'), alt.Color('species') ).transform_filter( alt.datum.sepalWidth < 3 ) Scale Guide