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
750
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
870
Altair Tutorial
eitanlees
4
940
Scientific Visualization
eitanlees
6
660
Other Decks in Programming
See All in Programming
イベントソーシングとAIの親和性ー物語とLLMに理解できるデータ
tomohisa
0
150
バリデーションライブラリ徹底比較
nayuta999999
1
200
Storybookの情報をMCPサーバー化する
shota_tech
3
1.6k
マイコンでもRustのtestがしたい/KernelVM Kansai 11
tnishinaga
1
990
TypeScript エンジニアが Android 開発の世界に飛び込んだ話
yuisakamoto
6
710
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
180
“技術カンファレンスで何か変わる?” ──RubyKaigi後の自分とチームを振り返る
ssagara00
0
190
リアーキテクチャの現場で向き合う 既存サービスの読み解きと設計判断
ymiyamu
1
160
生成AI時代のフルスタック開発
kenn
9
1.8k
プロダクトエンジニアのしごと 〜 受託 × 高難度を乗り越えるOptium開発 〜
algoartis
1
290
ドメイン駆動設計とXPで支える子どもの未来 / Domain-Driven Design and XP Supporting Children's Future
nrslib
0
340
2025年のz-index設計を考える
tak_dcxi
13
5.1k
Featured
See All Featured
Six Lessons from altMBA
skipperchong
28
3.8k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Fontdeck: Realign not Redesign
paulrobertlloyd
84
5.5k
What's in a price? How to price your products and services
michaelherold
245
12k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
14
1.5k
Making Projects Easy
brettharned
116
6.2k
Statistics for Hackers
jakevdp
799
220k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Raft: Consensus for Rubyists
vanstee
137
6.9k
It's Worth the Effort
3n
184
28k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.6k
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