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
810
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
146
16k
Matplotlib
eitanlees
8
930
Altair Tutorial
eitanlees
4
960
Scientific Visualization
eitanlees
6
710
Other Decks in Programming
See All in Programming
PicoRuby on Rails
makicamel
3
150
NPOでのDevinの活用
codeforeveryone
0
910
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
4
600
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
8.8k
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
2
22k
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
7.2k
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
1k
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
740
PHPカンファレンス関西2025 基調講演
sugimotokei
4
620
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
240
Porting a visionOS App to Android XR
akkeylab
0
820
PHPUnitの限界をPlaywrightで補完するテストアプローチ
yuzneri
0
210
Featured
See All Featured
Building Adaptive Systems
keathley
43
2.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
A Tale of Four Properties
chriscoyier
160
23k
The World Runs on Bad Software
bkeepers
PRO
70
11k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Building Applications with DynamoDB
mza
95
6.5k
Become a Pro
speakerdeck
PRO
29
5.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
282
13k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
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