Visualization Grammar

Transcript

1. Data
   Mark
   Encoding
   Transform
   Scale
   Guide
   Visualization
   Grammar
   

   View Slide

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

   View Slide

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
   

   View Slide

4. Data
   Mark
   Encoding
   Transform
   Scale
   Guide
   B
   A
   A
   A
   C
   C
   C
   B
   B
   and many more ...
   Text
   Circle
   Bar
   Line
   

   View Slide

5. Data
   Mark
   Encoding
   Transform
   Scale
   Guide
   X Position
   Y Position
   Size
   Color
   ⠇
   Channel
   A
   B
   C
   D
   ⠇
   Variable
   

   View Slide

6. Data
   Mark
   Encoding
   Transform
   Scale
   Guide
   Calculate Fold
   Filter Aggregate
   and many more ...
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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
    ⠇
    

    View Slide

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

    View Slide

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
    

    View Slide

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')
    )
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide