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
560
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
660
Altair Tutorial
eitanlees
3
770
Scientific Visualization
eitanlees
5
440
Other Decks in Programming
See All in Programming
PHPコードの実行モデルを理解する / Understanding-the-PHP-Execution-Model
shin1x1
0
1.1k
哲学史とモデリング
tanakahisateru
3
440
AppRouter Panel Talk
yosuke_furukawa
PRO
1
530
TypeScriptから始める VR生活
tamagokakeg
2
140
GNU Makeの使い方 / How to use GNU Make
kaityo256
PRO
13
4.4k
TypeScript Custom GitHub Action Development Tips
peaceiris
5
850
An adventure of Happy Eyeballs
coe401_
1
300
教えて!スクラムコーチ品質とスピードのバランスはどうすりゃいいの?
pinboro
0
160
『WordPressコミュニティで学ぶ』OSS貢献の多様性
ippey
0
290
Slackワークフローで感謝を伝える機能/WiFi 自動接続/Figma to React Component/障害レポート君 Team3@NOT A HOTEL
nakaohiroshi
0
210
Effectで作る堅牢でスケーラブルなAPIゲートウェイ / Robust and Scalable API Gateway Built on Effect
yasaichi
7
1.2k
TypeScriptで使いやすいOpenAPIの書き方
yukimochi_dwango
1
960
Featured
See All Featured
Unsuck your backbone
ammeep
664
57k
Building Effective Engineering Teams - LeadDev
addyosmani
33
1.9k
Learning to Love Humans: Emotional Interface Design
aarron
268
39k
Making Projects Easy
brettharned
109
5.5k
In The Pink: A Labor of Love
frogandcode
138
21k
Music & Morning Musume
bryan
41
5.6k
BBQ
matthewcrist
80
8.8k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
21
2k
Documentation Writing (for coders)
carmenintech
60
4k
Agile that works and the tools we love
rasmusluckow
325
20k
Build The Right Thing And Hit Your Dates
maggiecrowley
25
2k
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