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
AI駆動で0→1をやって見えた光と伸びしろ
passion0102
1
840
技術的負債の正体を知って向き合う
irof
0
250
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
rizap_tech
0
7.7k
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
nakita628
0
320
Developer Joy - The New Paradigm
hollycummins
1
370
O Que É e Como Funciona o PHP-FPM?
marcelgsantos
0
200
Introduce Hono CLI
yusukebe
6
3.1k
開発組織の戦略的な役割と 設計スキル向上の効果
masuda220
PRO
9
1.5k
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
1.2k
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
290
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
330
CSC509 Lecture 06
javiergs
PRO
0
270
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
Six Lessons from altMBA
skipperchong
29
4k
Product Roadmaps are Hard
iamctodd
PRO
55
11k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Statistics for Hackers
jakevdp
799
220k
Rails Girls Zürich Keynote
gr2m
95
14k
The Language of Interfaces
destraynor
162
25k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
GitHub's CSS Performance
jonrohan
1032
470k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
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