Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Visualization Grammar
Search
Eitan Lees
March 03, 2020
Programming
8
550
Visualization Grammar
A brief tour of the Vega/Vega-Lite visualization grammar used in Altair
Eitan Lees
March 03, 2020
Tweet
Share
More Decks by Eitan Lees
See All by Eitan Lees
Visualization
eitanlees
137
14k
Matplotlib
eitanlees
7
650
Altair Tutorial
eitanlees
3
770
Scientific Visualization
eitanlees
5
440
Other Decks in Programming
See All in Programming
Revisiting the Hotwire Landscape after Turbo 8 @ RailsConf 2024, Detroit
marcoroth
1
410
Scalable Customer Journey Orchestration (CJO)
lewuathe
0
460
Anthropic Cookbook のおすすめレシピ
schroneko
7
1.4k
ts-morphを使ってコードリプレイスとASTへのハードルを下げる!
nyawach
2
140
Ruby GitHub Packages
bkuhlmann
0
650
GNU Makeの使い方 / How to use GNU Make
kaityo256
PRO
12
4.3k
ServerAction で Progressive Enhancement はどこまで頑張れるか? / progressive-enhancement-with-server-action
takefumiyoshii
6
480
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
690
Productivity is Messing Around and Having Fun
hollycummins
1
120
Going beyond Apache Parquet's default settings
xhochy
0
140
Try creating your own orderedmap
kazamori
1
270
AmperとFleetを使ったAndroidアプリ
yoppie
0
290
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
How GitHub (no longer) Works
holman
305
140k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
26
2.3k
It's Worth the Effort
3n
180
27k
The Language of Interfaces
destraynor
151
23k
Agile that works and the tools we love
rasmusluckow
325
20k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
Build The Right Thing And Hit Your Dates
maggiecrowley
25
2k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Designing for Performance
lara
601
67k
Design by the Numbers
sachag
274
18k
Transcript
Data Mark Encoding Transform Scale Guide Visualization Grammar
Data Mark Encoding Transform Scale Guide A B C &
Variables Observations Tabular Data A B C
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
Data Mark Encoding Transform Scale Guide B A A A
C C C B B and many more ... Text Circle Bar Line
Data Mark Encoding Transform Scale Guide X Position Y Position
Size Color ⠇ Channel A B C D ⠇ Variable
Data Mark Encoding Transform Scale Guide Calculate Fold Filter Aggregate
and many more ...
Data Mark Encoding Transform Scale Guide f(domain) → range
Data Mark Encoding Transform Scale Guide A B C Legend
Data Mark Encoding Transform Scale Guide Let’s make a chart
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 ⠇
Data Mark Encoding Transform Scale Guide import altair as alt
from vega_datasets import data iris = data.iris() alt.Chart(iris).mark_circle()
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
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') )
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
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
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