Data Visualization with Vega-Lite and Altair With many - - PowerPoint PPT Presentation

▶
data visualization with vega lite and altair
SMART_READER_LITE
LIVE PREVIEW

Data Visualization with Vega-Lite and Altair With many - - PowerPoint PPT Presentation

Sep 16, 2022 615 likes •824 views

Data Visualization with Vega-Lite and Altair With many collaborators: Dominik Moritz @domoritz Kanit Wongsuphasawat Arvind Satyanarayan Jeffrey Heer Interactive Data Lab @uwdata Jake VanderPlas University of Washington and many more

slide-1
SLIDE 1

Data Visualization with
 Vega-Lite and Altair

Dominik Moritz @domoritz

  • 1

Interactive Data Lab @uwdata University of Washington

With many collaborators: Kanit Wongsuphasawat Arvind Satyanarayan Jeffrey Heer Jake VanderPlas

… and many more

slide-2
SLIDE 2

2

Visualization concepts should map directly to visualization implementation

slide-3
SLIDE 3

3

Visualization concepts should map directly to visualization implementation

(specify the what, now the how)

Declarative building blocks

slide-4
SLIDE 4
  • 4

Declarative building blocks

Imperative "Put a red circle here and a blue circle there." Declarative "Map <foo> to a position and <bar> to a color."

slide-5
SLIDE 5
  • 4

Declarative building blocks

Imperative "Put a red circle here and a blue circle there." Declarative "Map <foo> to a position and <bar> to a color."

Declarative visualization lets you think about data and relationships rather than implementation details.

slide-6
SLIDE 6
  • 5

Vega-Lite

{. "data": {"url": "data/iris.json"}, "mark": "point", "encoding": { "x": { "field": "petalLength", "type": "quantitative"}, "y": { "field": "sepalWidth", "type": "quantitative"}, "color": { "field": "species", "type": "nominal"} } . } .

slide-7
SLIDE 7
  • 6

Vega-Lite

{. "data": {"url": "data/iris.json"}, "mark": "point", "encoding": { "x": { "field": "petalLength", "type": "quantitative"}, "y": { "field": "sepalWidth", "type": "quantitative"}, "color": { "field": "species", "type": "nominal"} } . } .

slide-8
SLIDE 8
  • 7

Vega-Lite

{. "data": {"url": "data/iris.json"}, "mark": "point", "encoding": { "x": { "field": "petalLength", "type": "quantitative"}, "y": { "field": "sepalWidth", "type": "quantitative"}, "color": { "field": "species", "type": "nominal"} } . } .

slide-9
SLIDE 9
  • 8

Vega-Lite

{. "data": {"url": "data/iris.json"}, "mark": "point", "encoding": { "x": { "field": "petalLength", "type": "quantitative"}, "y": { "field": "sepalWidth", "type": "quantitative"}, "color": { "field": "species", "type": "nominal"} } . } .

slide-10
SLIDE 10

Statistical

Histogram Multi-series Line Chart Stripplot Slope Graph Binned Scatterplot Area Chart

  • 9
  • 9

Graphics

slide-11
SLIDE 11

Multi-View Graphics

  • 10
  • 10

Scatterplot Matrix Concatenated & Layered View Faceted View

slide-12
SLIDE 12
  • 11
  • 11

Multi-View Graphics Interactive

Indexed Chart Focus+Context Cross-filtering

slide-13
SLIDE 13
  • 11
  • 11

Multi-View Graphics Interactive

Indexed Chart Focus+Context Cross-filtering

slide-14
SLIDE 14
  • 12

Altair: Vega-Lite in Python

import altair as alt from vega_datasets import data

slide-15
SLIDE 15
  • 12

Altair: Vega-Lite in Python

import altair as alt from vega_datasets import data iris = data.iris()

slide-16
SLIDE 16
  • 12

Altair: Vega-Lite in Python

import altair as alt from vega_datasets import data iris = data.iris() alt.Chart(iris).mark_point().encode( x='petalLength', y='sepalLength', color='species' )

slide-17
SLIDE 17
  • 13

Altair: Vega-Lite in Python

import altair as alt from vega_datasets import data iris = data.iris() alt.Chart(iris).mark_point().encode( x='petalLength', y='sepalLength', color='species', row='species' )

slide-18
SLIDE 18
  • 14

Altair: Vega-Lite in Python

import altair as alt from vega_datasets import data iris = data.iris() alt.Chart(iris).mark_point().encode( x='petalLength', y='sepalLength', color='species' ).interactive()

slide-19
SLIDE 19
  • 14

Altair: Vega-Lite in Python

import altair as alt from vega_datasets import data iris = data.iris() alt.Chart(iris).mark_point().encode( x='petalLength', y='sepalLength', color='species' ).interactive()

slide-20
SLIDE 20
  • 15

Learn more at
 vega.github.io/vega-lite/
 and altair-viz.github.io

And many others… used by