-
Notifications
You must be signed in to change notification settings - Fork 19
/
Copy path01-01-altair-intro.html
60 lines (49 loc) · 39.8 KB
/
01-01-altair-intro.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html><html lang="en"><head><title>Week 1 Introduction. MIDS W209 Information Visualization Slides</title><meta charset="utf-8"><meta name="author" content="Andy Reagan"><meta name="description" content="Week 1: Introduction to Altair. MIDS W209 Information Visualization Slides. "><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fjalla+One|Raleway|PT+Sans+Narrow"><link rel="stylesheet" href="https://use.typekit.net/yjc0afr.css"><link rel="stylesheet" href="../plugin/highlight/monokai.css" id="highlight-theme"><link href="../css/reveal.css" rel="stylesheet"><link href="../css/theme/white.css" rel="stylesheet" id="theme"><link href="../css/style.css" rel="stylesheet"></head><body><div class="reveal"><div class="slides"><section><h1 class="title">Introduction to Altair<br><small>MIDS W209: Information Visualization</small></h1><div class="r-stretch"></div><div class="tiny"><a href="https://andyreagan.com/" target="_blank"><strong> Andy Reagan</strong></a><span> | andy[at]andyreagan.com</span><a href="https://twitter.com/andyreagan"> | @andyreagan</a><br><a href="https://john-guerra.github.io/MIDS_W209_Information_Visualization_Slides/01_Introduction/altair.html" target="_blank">https://john-guerra.github.io/MIDS_W209_Information_Visualization_Slides/01_Introduction/altair.html</a></div><div class="logo"><a href="https://datascience.berkeley.edu/"><img class="logo" src="../shared_images/UC_Berkeley_wordmark_cal_gold.png" alt="University Of California at Berkeley logo"></a></div><div class="tiny">Partially based on <a href="https://www.youtube.com/watch?v=ms29ZPUKxbU&ab_channel=PyCon2018">slides from Jake VanderPlas</a></div></section><section id="idea"><section><h1>Core idea </h1></section><section><img src="../shared_images/altair-01-01.png"></section><section> <img src="../shared_images/altair-01-02.png"></section></section><section id="matplotlib"><section><h1>Familiar tool: </h1><a href="https://matplotlib.org/"> <img src="https://matplotlib.org/_static/logo2_compressed.svg"></a></section><section><h2>Plotting with matplotlib</h2><div class="flex"><div class="half"> <pre class="python" style="font-size: 18px;"><code>import matplotlib.pyplot as plt
import numpy as np
x = np.random.randn(1000)
y = np.random.randn(1000)
color = np.arange(1000)
plt.scatter(x, y, c=color)
plt.colorbar()</code></pre></div><div class="half"> <img src="../shared_images/altair-01-03.png"></div></div></section><section><h2>Plotting with matplotlib: strengths</h2></section><section><h3>Designed like MatLab: switching was/is easy</h3><img src="../shared_images/altair-01-04.png"></section><section><h3>Many rendering backends</h3><img src="../shared_images/altair-01-05.png"></section><section><h3>Can reproduce just about any plot (with a bit of effort)</h3><img src="../shared_images/altair-01-06.png"></section><section><h3>Well-tested, standard tool for 15 years</h3><img src="../shared_images/altair-01-07.png"></section><section><h3>Gallery</h3><img src="../shared_images/altair-01-08.png"></section><section><h2>Plotting with matplotlib: weaknesses</h2></section><section><h3>Designed like MatLab</h3></section><section><h3>API is imperative and often overly verbose</h3></section><section><h3>Poor/no support for interactive/web graphs</h3></section><section><h2>Plotting with matplotlib</h2><div class="flex"><div class="half"> <pre class="python" style="font-size: 18px;"><code>import matplotlib.pyplot as plt
import numpy as np
x = np.random.randn(1000)
y = np.random.randn(1000)
color = np.arange(1000)
plt.scatter(x, y, c=color)
plt.colorbar()</code></pre></div><div class="half"> <img src="../shared_images/altair-01-03.png"></div></div></section><section><h2>Statistical Visualization</h2><div class="flex"><div><pre class="python" style="font-size: 18px;"><code>from vega_datsets import data
iris = data('iris')
iris.head()</code></pre></div><div> <img src="../shared_images/altair-01-09.png"></div><div>Data in column-oriented format; i.e. rows are samples, columns are features</div></div></section><section><h2>Statistical Visualization: Grouping</h2><div class="flex"><div class="half"><pre class="python" style="font-size: 18px;"><code>color_map = dict(zip(iris.species.unique(),
['blue', 'green', 'red']))
for species, group in iris.groupby('species'):
plt.scatter(group['petalLength'], group['sepalWidth'],
color=color_map[species],
alpha=0.3, edgecolor=None, label=species)
plt.legend(frameon=True, title='species')
plt.xlabel('petalLength')
plt.ylabel('sepalLength')</code></pre></div><div class="half"> <img src="../shared_images/altair-01-10.png"></div></div></section><section><ol><li>Data?</li><li>Transformation? </li><li>Marks?</li><li>Encoding?</li><li>Scale?</li><li>Guides?</li></ol></section><section><h2>Statistical Visualization: Faceting</h2><div class="flex"><div><pre class="python" style="font-size: 18px;"><code>color_map = dict(zip(iris.species.unique(),
['blue', 'green', 'red']))
n_panels = len(color_map)
fig, ax = plt.subplots(1, n_panels, figsize=(n_panels * 5, 3),
sharex=True, sharey=True)
for i, (species, group) in enumerate(iris.groupby('species')):
ax[i].scatter(group['petalLength'], group['sepalWidth'],
color=color_map[species], alpha=0.3,
edgecolor=None, label=species)
ax[i].legend(frameon=True, title='species')
plt.xlabel('petalLength')
plt.ylabel('sepalLength')</code></pre></div><div><img src="../shared_images/altair-01-11.png"></div></div></section><section><h2>Problem</h2><h3>We’re mixing the what with the how</h3></section><section> <h2>Toward a well-motivated <i>Declarative Visualization</i></h2><div class="flex"><div class="half">Imperative<ul><li>Specify How something should be done.</li><li>Specification and Execution intertwined.</li><li>“Put a red circle here, and a blue circle here”.</li></ul></div><div class="half">Declarative<ul><li>Specify What should be done.</li><li>Separates Specification from Execution.</li><li>“Map <x> to a position, and <y> to a color".</li></ul></div><p>Declarative visualization lets you think about data and relationships, rather than incidental details.</p></div></section></section><section id="altair"> <section> <img src="../shared_images/altair-logo.png"><h3>Declarative visualization in Python</h3><Based>on the <a href="">Vega</a> and <a href="">Vega-Lite</a> grammars.</Based></section><section> <div><a href="https://altair-viz.github.io/gallery/simple_bar_chart.html"><img src="https://altair-viz.github.io/_static/simple_bar_chart-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/simple_bar_chart.html"><img src="https://altair-viz.github.io/_static/simple_bar_chart-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/simple_heatmap.html"><img src="https://altair-viz.github.io/_static/simple_heatmap-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/simple_histogram.html"><img src="https://altair-viz.github.io/_static/simple_histogram-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/simple_line_chart.html"><img src="https://altair-viz.github.io/_static/simple_line_chart-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/scatter_tooltips.html"><img src="https://altair-viz.github.io/_static/scatter_tooltips-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/simple_stacked_area_chart.html"><img src="https://altair-viz.github.io/_static/simple_stacked_area_chart-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/strip_plot.html"><img src="https://altair-viz.github.io/_static/strip_plot-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/bar_chart_with_highlighted_bar.html"><img src="https://altair-viz.github.io/_static/bar_chart_with_highlighted_bar-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/bar_chart_with_labels.html"><img src="https://altair-viz.github.io/_static/bar_chart_with_labels-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/bar_chart_with_mean_line.html"><img src="https://altair-viz.github.io/_static/bar_chart_with_mean_line-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/bar_and_line_with_dual_axis.html"><img src="https://altair-viz.github.io/_static/bar_and_line_with_dual_axis-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/bar_chart_with_negatives.html"><img src="https://altair-viz.github.io/_static/bar_chart_with_negatives-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/bar_rounded.html"><img src="https://altair-viz.github.io/_static/bar_rounded-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/layered_chart_bar_mark.html"><img src="https://altair-viz.github.io/_static/layered_chart_bar_mark-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/percentage_of_total.html"><img src="https://altair-viz.github.io/_static/percentage_of_total-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/diverging_stacked_bar_chart.html"><img src="https://altair-viz.github.io/_static/diverging_stacked_bar_chart-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/grouped_bar_chart.html"><img src="https://altair-viz.github.io/_static/grouped_bar_chart-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/grouped_bar_chart_with_error_bars.html"><img src="https://altair-viz.github.io/_static/grouped_bar_chart_with_error_bars-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/bar_chart_horizontal.html"><img src="https://altair-viz.github.io/_static/bar_chart_horizontal-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/grouped_bar_chart_horizontal.html"><img src="https://altair-viz.github.io/_static/grouped_bar_chart_horizontal-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/horizontal_stacked_bar_chart.html"><img src="https://altair-viz.github.io/_static/horizontal_stacked_bar_chart-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/layered_bar_chart.html"><img src="https://altair-viz.github.io/_static/layered_bar_chart-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/normalized_stacked_bar_chart.html"><img src="https://altair-viz.github.io/_static/normalized_stacked_bar_chart-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/bar_chart_sorted.html"><img src="https://altair-viz.github.io/_static/bar_chart_sorted-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/stacked_bar_chart.html"><img src="https://altair-viz.github.io/_static/stacked_bar_chart-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/stacked_bar_chart_sorted_segments.html"><img src="https://altair-viz.github.io/_static/stacked_bar_chart_sorted_segments-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/stacked_bar_chart_with_text.html"><img src="https://altair-viz.github.io/_static/stacked_bar_chart_with_text-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/trellis_stacked_bar_chart.html"><img src="https://altair-viz.github.io/_static/trellis_stacked_bar_chart-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/filled_step_chart.html"><img src="https://altair-viz.github.io/_static/filled_step_chart-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/line_with_ci.html"><img src="https://altair-viz.github.io/_static/line_with_ci-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/layer_line_color_rule.html"><img src="https://altair-viz.github.io/_static/layer_line_color_rule-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/line_percent.html"><img src="https://altair-viz.github.io/_static/line_percent-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/line_chart_with_points.html"><img src="https://altair-viz.github.io/_static/line_chart_with_points-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/line_chart_with_generator.html"><img src="https://altair-viz.github.io/_static/line_chart_with_generator-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/trail_marker.html"><img src="https://altair-viz.github.io/_static/trail_marker-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/multi_series_line.html"><img src="https://altair-viz.github.io/_static/multi_series_line-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/slope_graph.html"><img src="https://altair-viz.github.io/_static/slope_graph-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/step_chart.html"><img src="https://altair-viz.github.io/_static/step_chart-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/area_chart_gradient.html"><img src="https://altair-viz.github.io/_static/area_chart_gradient-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/cumulative_count_chart.html"><img src="https://altair-viz.github.io/_static/cumulative_count_chart-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/density_facet.html"><img src="https://altair-viz.github.io/_static/density_facet-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/horizon_graph.html"><img src="https://altair-viz.github.io/_static/horizon_graph-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/interval_selection.html"><img src="https://altair-viz.github.io/_static/interval_selection-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/layered_area_chart.html"><img src="https://altair-viz.github.io/_static/layered_area_chart-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/normalized_stacked_area_chart.html"><img src="https://altair-viz.github.io/_static/normalized_stacked_area_chart-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/density_stack.html"><img src="https://altair-viz.github.io/_static/density_stack-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/streamgraph.html"><img src="https://altair-viz.github.io/_static/streamgraph-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/trellis_area.html"><img src="https://altair-viz.github.io/_static/trellis_area-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/trellis_area_sort_array.html"><img src="https://altair-viz.github.io/_static/trellis_area_sort_array-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/binned_scatterplot.html"><img src="https://altair-viz.github.io/_static/binned_scatterplot-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/scatter_linked_table.html"><img src="https://altair-viz.github.io/_static/scatter_linked_table-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/bubble_plot.html"><img src="https://altair-viz.github.io/_static/bubble_plot-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/connected_scatterplot.html"><img src="https://altair-viz.github.io/_static/connected_scatterplot-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/dot_dash_plot.html"><img src="https://altair-viz.github.io/_static/dot_dash_plot-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/multifeature_scatter_plot.html"><img src="https://altair-viz.github.io/_static/multifeature_scatter_plot-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/poly_fit_regression.html"><img src="https://altair-viz.github.io/_static/poly_fit_regression-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/scatter_qq.html"><img src="https://altair-viz.github.io/_static/scatter_qq-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/scatter_matrix.html"><img src="https://altair-viz.github.io/_static/scatter_matrix-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/scatter_href.html"><img src="https://altair-viz.github.io/_static/scatter_href-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/scatter_with_loess.html"><img src="https://altair-viz.github.io/_static/scatter_with_loess-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/scatter_with_minimap.html"><img src="https://altair-viz.github.io/_static/scatter_with_minimap-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/scatter_with_rolling_mean.html"><img src="https://altair-viz.github.io/_static/scatter_with_rolling_mean-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/simple_scatter_with_errorbars.html"><img src="https://altair-viz.github.io/_static/simple_scatter_with_errorbars-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/scatter_with_labels.html"><img src="https://altair-viz.github.io/_static/scatter_with_labels-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/stripplot.html"><img src="https://altair-viz.github.io/_static/stripplot-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/table_bubble_plot_github.html"><img src="https://altair-viz.github.io/_static/table_bubble_plot_github-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/trellis_scatter_plot.html"><img src="https://altair-viz.github.io/_static/trellis_scatter_plot-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/histogram_responsive.html"><img src="https://altair-viz.github.io/_static/histogram_responsive-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/histogram_with_a_global_mean_overlay.html"><img src="https://altair-viz.github.io/_static/histogram_with_a_global_mean_overlay-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/layered_histogram.html"><img src="https://altair-viz.github.io/_static/layered_histogram-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/trellis_histogram.html"><img src="https://altair-viz.github.io/_static/trellis_histogram-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/choropleth.html"><img src="https://altair-viz.github.io/_static/choropleth-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/airports_count.html"><img src="https://altair-viz.github.io/_static/airports_count-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/choropleth_repeat.html"><img src="https://altair-viz.github.io/_static/choropleth_repeat-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/us_incomebrackets_by_state_facet.html"><img src="https://altair-viz.github.io/_static/us_incomebrackets_by_state_facet-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/world_map.html"><img src="https://altair-viz.github.io/_static/world_map-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/world_projections.html"><img src="https://altair-viz.github.io/_static/world_projections-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/selection_layer_bar_month.html"><img src="https://altair-viz.github.io/_static/selection_layer_bar_month-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/interactive_cross_highlight.html"><img src="https://altair-viz.github.io/_static/interactive_cross_highlight-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/interactive_layered_crossfilter.html"><img src="https://altair-viz.github.io/_static/interactive_layered_crossfilter-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/interactive_legend.html"><img src="https://altair-viz.github.io/_static/interactive_legend-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/interactive_brush.html"><img src="https://altair-viz.github.io/_static/interactive_brush-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/scatter_with_layered_histogram.html"><img src="https://altair-viz.github.io/_static/scatter_with_layered_histogram-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/multiline_highlight.html"><img src="https://altair-viz.github.io/_static/multiline_highlight-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/multiline_tooltip.html"><img src="https://altair-viz.github.io/_static/multiline_tooltip-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/scatter_linked_brush.html"><img src="https://altair-viz.github.io/_static/scatter_linked_brush-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/multiple_interactions.html"><img src="https://altair-viz.github.io/_static/multiple_interactions-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/scatter_with_histogram.html"><img src="https://altair-viz.github.io/_static/scatter_with_histogram-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/select_detail.html"><img src="https://altair-viz.github.io/_static/select_detail-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/selection_histogram.html"><img src="https://altair-viz.github.io/_static/selection_histogram-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/interactive_scatter_plot.html"><img src="https://altair-viz.github.io/_static/interactive_scatter_plot-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/select_mark_area.html"><img src="https://altair-viz.github.io/_static/select_mark_area-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/anscombe_plot.html"><img src="https://altair-viz.github.io/_static/anscombe_plot-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/co2_concentration.html"><img src="https://altair-viz.github.io/_static/co2_concentration-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/beckers_barley_trellis_plot.html"><img src="https://altair-viz.github.io/_static/beckers_barley_trellis_plot-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/airport_connections.html"><img src="https://altair-viz.github.io/_static/airport_connections-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/cumulative_wiki_donations.html"><img src="https://altair-viz.github.io/_static/cumulative_wiki_donations-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/falkensee.html"><img src="https://altair-viz.github.io/_static/falkensee-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/gapminder_bubble_plot.html"><img src="https://altair-viz.github.io/_static/gapminder_bubble_plot-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/iowa_electricity.html"><img src="https://altair-viz.github.io/_static/iowa_electricity-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/isotype.html"><img src="https://altair-viz.github.io/_static/isotype-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/isotype_emoji.html"><img src="https://altair-viz.github.io/_static/isotype_emoji-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/airports.html"><img src="https://altair-viz.github.io/_static/airports-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/london_tube.html"><img src="https://altair-viz.github.io/_static/london_tube-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/natural_disasters.html"><img src="https://altair-viz.github.io/_static/natural_disasters-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/one_dot_per_zipcode.html"><img src="https://altair-viz.github.io/_static/one_dot_per_zipcode-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/weather_heatmap.html"><img src="https://altair-viz.github.io/_static/weather_heatmap-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/seattle_weather_interactive.html"><img src="https://altair-viz.github.io/_static/seattle_weather_interactive-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/us_employment.html"><img src="https://altair-viz.github.io/_static/us_employment-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/top_k_items.html"><img src="https://altair-viz.github.io/_static/top_k_items-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/top_k_letters.html"><img src="https://altair-viz.github.io/_static/top_k_letters-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/top_k_with_others.html"><img src="https://altair-viz.github.io/_static/top_k_with_others-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/us_state_capitals.html"><img src="https://altair-viz.github.io/_static/us_state_capitals-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/us_population_over_time.html"><img src="https://altair-viz.github.io/_static/us_population_over_time-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/us_population_pyramid_over_time.html"><img src="https://altair-viz.github.io/_static/us_population_pyramid_over_time-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/us_population_over_time_facet.html"><img src="https://altair-viz.github.io/_static/us_population_over_time_facet-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/wheat_wages.html"><img src="https://altair-viz.github.io/_static/wheat_wages-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/window_rank.html"><img src="https://altair-viz.github.io/_static/window_rank-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/bar_chart_with_highlighted_segment.html"><img src="https://altair-viz.github.io/_static/bar_chart_with_highlighted_segment-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/beckers_barley_wrapped_facet.html"><img src="https://altair-viz.github.io/_static/beckers_barley_wrapped_facet-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/binned_heatmap.html"><img src="https://altair-viz.github.io/_static/binned_heatmap-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/boxplot.html"><img src="https://altair-viz.github.io/_static/boxplot-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/candlestick_chart.html"><img src="https://altair-viz.github.io/_static/candlestick_chart-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/errorbars_with_std.html"><img src="https://altair-viz.github.io/_static/errorbars_with_std-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/errorbars_with_ci.html"><img src="https://altair-viz.github.io/_static/errorbars_with_ci-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/scatter_marginal_hist.html"><img src="https://altair-viz.github.io/_static/scatter_marginal_hist-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/gantt_chart.html"><img src="https://altair-viz.github.io/_static/gantt_chart-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/isotype_grid.html"><img src="https://altair-viz.github.io/_static/isotype_grid-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/layered_chart_with_dual_axis.html"><img src="https://altair-viz.github.io/_static/layered_chart_with_dual_axis-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/multiple_marks.html"><img src="https://altair-viz.github.io/_static/multiple_marks-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/normed_parallel_coordinates.html"><img src="https://altair-viz.github.io/_static/normed_parallel_coordinates-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/parallel_coordinates.html"><img src="https://altair-viz.github.io/_static/parallel_coordinates-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/ranged_dot_plot.html"><img src="https://altair-viz.github.io/_static/ranged_dot_plot-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/ridgeline_plot.html"><img src="https://altair-viz.github.io/_static/ridgeline_plot-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/sorted_error_bars_with_ci.html"><img src="https://altair-viz.github.io/_static/sorted_error_bars_with_ci-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/stem_and_leaf.html"><img src="https://altair-viz.github.io/_static/stem_and_leaf-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/layered_heatmap_text.html"><img src="https://altair-viz.github.io/_static/layered_heatmap_text-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/violin_plot.html"><img src="https://altair-viz.github.io/_static/violin_plot-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a><a href="https://altair-viz.github.io/gallery/wilkinson-dot-plot.html"><img src="https://altair-viz.github.io/_static/wilkinson-dot-plot-thumb.png" style="max-width: 60px; margin: 0; padding: 0; max-height: 60px;"></a></div></section><section><img style="max-width: 900px;" src="../shared_images/altair-01-13.png"></section><section><img style="max-width: 900px;" src="../shared_images/altair-01-14.png"></section><section><img style="max-width: 900px;" src="../shared_images/altair-01-15.png"></section><section><img style="max-width: 900px;" src="../shared_images/altair-01-16.png"></section><section><img style="max-width: 900px;" src="../shared_images/altair-01-17.png"></section><section><img style="max-width: 900px;" src="../shared_images/altair-01-18.png"></section><section><img style="max-width: 900px;" src="../shared_images/altair-01-19.png"></section><section><img style="max-width: 900px;" src="../shared_images/altair-01-20.png"></section><section><img style="max-width: 900px;" src="../shared_images/altair-01-21.png"></section><section><img style="max-width: 900px;" src="../shared_images/altair-01-22.png"></section><section><img style="max-width: 900px;" src="../shared_images/altair-01-23.png"></section><section><img style="max-width: 900px;" src="../shared_images/altair-01-24.png"></section><section><img style="max-width: 900px;" src="../shared_images/altair-01-25.png"></section><section><img style="max-width: 900px;" src="../shared_images/altair-01-26.png"></section><section><img style="max-width: 900px;" src="../shared_images/altair-01-27.png"></section><section><img style="max-width: 900px;" src="../shared_images/altair-01-28.png"></section></section><section><section><h2>D3 is the go-to vis libary</h2></section><section><img style="max-width: 900px;" src="../shared_images/altair-01-29.png"></section><section> <h2>But working with D3 can be hard </h2></section><section><img style="max-width: 900px;" src="../shared_images/altair-01-30.png"></section><section><img style="max-width: 900px;" src="../shared_images/altair-01-31.png"></section><section><img style="max-width: 900px;" src="../shared_images/altair-01-32.png"></section><section><img style="max-width: 900px;" src="../shared_images/altair-01-33.png"></section></section></div></div><script src="../js/reveal.js"></script><script src="../plugin/zoom/zoom.js"></script><script src="../plugin/notes/notes.js"></script><script src="../plugin/search/search.js"></script><script src="../plugin/markdown/markdown.js"></script><script src="../plugin/highlight/highlight.js"></script><script>Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
hash: true,
//- transition: "convex",
//- width: "90%",
//- height: "100%",
plugins: [ RevealZoom, RevealNotes, RevealSearch, RevealMarkdown, RevealHighlight ]
});</script><script>(function(i,s,o,g,r,a,m){i["GoogleAnalyticsObject"]=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,"script","https://www.google-analytics.com/analytics.js","ga");
ga("create", "UA-72531610-1", "auto");
ga("send", "pageview");</script></body></html>