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
9
900
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
149
16k
Matplotlib
eitanlees
8
1k
Altair Tutorial
eitanlees
4
1k
Scientific Visualization
eitanlees
6
760
Other Decks in Programming
See All in Programming
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
360
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
520
Devoxx BE - Local Development in the AI Era
kdubois
0
140
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
140
GC25 Recap: The Code You Reviewed is Not the Code You Built / #newt_gophercon_tour
mazrean
0
120
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
910
なんでRustの環境構築してないのにRust製のツールが動くの? / Why Do Rust-Based Tools Run Without a Rust Environment?
ssssota
14
46k
iOSでSVG画像を扱う
kishikawakatsumi
0
170
フロントエンド開発のためのブラウザ組み込みAI入門
masashi
7
3.6k
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
0
130
contribution to astral-sh/uv
shunsock
0
550
Leading Effective Engineering Teams in the AI Era
addyosmani
7
640
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
116
20k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
It's Worth the Effort
3n
187
28k
Context Engineering - Making Every Token Count
addyosmani
8
310
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Designing for Performance
lara
610
69k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
Automating Front-end Workflow
addyosmani
1371
200k
How STYLIGHT went responsive
nonsquared
100
5.9k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Balancing Empowerment & Direction
lara
5
700
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