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
WinActorの勉強を継続する方法
tamai_63
0
130
TypeScriptでもLLMアプリケーション開発 / LLM Application In Typescript
rkaga
5
1.4k
The World is a Network (and We Are Just Nodes)
whatyouhide
0
110
[RubyKaigi 2024] Ruby Mixology 101: adding shots of PHP, Elixir, and more
palkan
0
160
Effectで作る堅牢でスケーラブルなAPIゲートウェイ / Robust and Scalable API Gateway Built on Effect
yasaichi
7
1.2k
哲学史とモデリング
tanakahisateru
3
440
Direct Style Effect Systems The Print[A] ExampleA Comprehension Aid
philipschwarz
PRO
0
420
スタックトレース始めてみた
kuro_kurorrr
5
1.2k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
1
140
チーム立ち上げにAWSを活用したらClaudeさんに褒められた話
mkdev10
3
230
The grand strategy of Ruby Parser
yui_knk
5
500
Porting mruby/c for the SNES (Super Famicom) - RubyKaigi 2024
gedorinku
0
940
Featured
See All Featured
Navigating Team Friction
lara
179
13k
Mobile First: as difficult as doing things right
swwweet
217
8.6k
KATA
mclloyd
16
12k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
14
8.4k
Statistics for Hackers
jakevdp
790
220k
The Brand Is Dead. Long Live the Brand.
mthomps
49
31k
Building a Modern Day E-commerce SEO Strategy
aleyda
22
6.5k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
What's in a price? How to price your products and services
michaelherold
238
11k
Practical Orchestrator
shlominoach
183
9.8k
We Have a Design System, Now What?
morganepeng
43
6.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