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
Next.js App Router
quramy
13
2.2k
Productivity is Messing Around and Having Fun
hollycummins
1
140
ペパボOpenTelemetry革命
pyama86
2
200
Revisiting the Hotwire Landscape after Turbo 8 @ RailsConf 2024, Detroit
marcoroth
3
510
PHPコードの実行モデルを理解する / Understanding-the-PHP-Execution-Model
shin1x1
0
130
哲学史とモデリング
tanakahisateru
2
330
Compose-View Interop in Practice (mDevCamp 2024)
stewemetal
0
170
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
490
Webアプリをできるだけコードを手書きしないで作ってみる
tomokusaba
2
230
Build Apps for iOS, Android & Desktop in 100% Kotlin With Compose Multiplatform (mDevCamp 2024)
zsmb
0
490
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
2
130
Inner Source@DB: Eine Geschichte über Open-Source-Praktiken im DB Konzern
morl99
1
100
Featured
See All Featured
Ruby is Unlike a Banana
tanoku
96
10k
Practical Orchestrator
shlominoach
183
9.7k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Why Our Code Smells
bkeepers
PRO
331
56k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
21
1.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
Debugging Ruby Performance
tmm1
70
11k
Unsuck your backbone
ammeep
664
57k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
14
8.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
21
2k
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
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