interactive pages

MakingDataVisual · Jan 7, 2018 · 474a861 · 474a861
1 parent f254b12
commit 474a861
Show file tree

Hide file tree

Showing 87 changed files with 634 additions and 135 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,14 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "Launch Program",
+            "program": "${workspaceFolder}\\scripts\\siteprep.js"
+        }
+    ]
+}
diff --git a/README.md b/README.md
@@ -8,5 +8,4 @@ This page and project contain a live copy of the figures for the book ["Making D
 
 The figures are written in [Vega and Vega-Lite](http://vega.github.io), a JSON-based web-based language for creating sophisticated data visualizations.
 
-Check out the interactive selector at the [Examples](examples.html) page.
-There is an illustrated list of all figures at [FigureList](figurelist.html). 
+The an illustrated list of all figures, with interactive code, is at [FigureList](figurelist.html). 
diff --git a/_layouts/page.html b/_layouts/page.html
@@ -0,0 +1,52 @@
+---
+---
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html lang="en">
+
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <link href="https://fonts.googleapis.com/css?family=Chivo:900" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" href="/assets/css/style.css">
+    <link rel="stylesheet" type="text/css" href="/assets/css/print.css" media="print">
+    <link rel="stylesheet" type="text/css" href="/localstyles.css">
+    <title>{{page.number}} {{page.name}} from Making Data Visual</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/vega/3.0.8/vega.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/2.0.3/vega-lite.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/3.0.0-rc7/vega-embed.js"></script>
+
+    <script>
+        name = "{{ page.spec }}"
+        vegaEmbed('#view', '/spec/' + name, {renderer: 'svg'}).then(function(res) {
+          view = res.view;
+          current = name;
+        }).catch( console.error );
+
+    </script>
+
+  </head>
+
+<body>
+    <div id="container">
+        <div class="inner">
+            <header>
+            <h1>makingdatavisual.github.io</h1>
+            {% if page.title %}
+          <h2>{{page.number}} {{page.title}}</h2>
+          {% endif %}
+        </header>
+            <section id="main_content">
+
+        <!--<script src="node_modules/vega/build/vega.js"></script>
+        <script src="node_modules/vega-lite/build/vega-lite.js"></script>
+        <script src="node_modules/vega-embed/vega-embed.js"></script>-->
+
+              {{ page.description }}
+
+        <div id="view"></div>
+    </body>
+</html>
+
+
+
diff --git a/examples.html → dropdown.html b/examples.html → dropdown.html
diff --git a/example.js b/example.js
@@ -0,0 +1,10 @@
+var container = document.querySelector('#view'),
+    loader = vega.loader(),
+    renderType = 'svg',
+    runtime = null,
+    spec = null,
+    view = null,
+    current = null;
+
+function load(name) {
+}
diff --git a/examples/5_11_density-cont.md b/examples/5_11_density-cont.md
@@ -0,0 +1,11 @@
+---
+layout: page
+menu: examples
+description: The joint distribution of efficiency, as measured in MPG, against the weight of the car.
+title: Continuous Density Plot
+permalink: /examples/5_11_density-cont.html
+image: /img/5_11_density-cont.png
+number: 5-11
+spec: 5_11_density-cont.vl.json
+---
+The joint distribution of efficiency, as measured in MPG, against the weight of the car.
diff --git a/examples/5_12_bar-chart.md b/examples/5_12_bar-chart.md
@@ -0,0 +1,11 @@
+---
+layout: page
+menu: examples
+description: Bar length shows the average efficiency by body style using the same data as in Figure 5-9.
+title: Bar Chart
+permalink: /examples/5_12_bar-chart.html
+image: /img/5_12_bar-chart.png
+number: 5-12
+spec: 5_12_bar-chart.vl.json
+---
+Bar length shows the average efficiency by body style using the same data as in Figure 5-9.
diff --git a/examples/5_13a_clustered-bar-chart.md b/examples/5_13a_clustered-bar-chart.md
@@ -0,0 +1,11 @@
+---
+layout: page
+menu: examples
+description: Efficiency by body style is now divided into diesel versus gas cars.
+title: Paired (or Multiple) Series Bar Chart
+permalink: /examples/5_13a_clustered-bar-chart.html
+image: /img/5_13a_clustered-bar-chart.png
+number: 5-13
+spec: 5_13a_clustered-bar-chart.vg.json
+---
+Efficiency by body style is now divided into diesel versus gas cars.
diff --git a/examples/5_14_justone_pie.md b/examples/5_14_justone_pie.md
@@ -0,0 +1,11 @@
+---
+layout: page
+menu: examples
+description:  The CFPB data shows the ways that complaints have been closed.
+title: Pie (or Doughnut) Chart
+permalink: /examples/5_14_justone_pie.html
+image: /img/5_14_justone_pie.png
+number: 5-14
+spec: 5_14_justone_pie.vg.json
+---
+ The CFPB data shows the ways that complaints have been closed.
diff --git a/examples/5_15_heatmap.md b/examples/5_15_heatmap.md
@@ -0,0 +1,11 @@
+---
+layout: page
+menu: examples
+description: The CFPB data shows the ways that complaints have been closed, broken out by month and year.
+title: Heatmap
+permalink: /examples/5_15_heatmap.html
+image: /img/5_15_heatmap.png
+number: 5.15
+spec: 5_15_heatmap.vl.json
+---
+The CFPB data shows the ways that complaints have been closed, broken out by month and year.
diff --git a/examples/5_16_scatterplot.md b/examples/5_16_scatterplot.md
@@ -0,0 +1,11 @@
+---
+layout: page
+menu: examples
+description: The relation between curb weight and MPG for five different styles of car.
+title: Scatterplot
+permalink: /examples/5_16_scatterplot.html
+image: /img/5_16_scatterplot.png
+number: 5-16
+spec: 5_16_scatterplot.vl.json
+---
+The relation between curb weight and MPG for five different styles of car.
diff --git a/examples/5_17_line.md b/examples/5_17_line.md
@@ -0,0 +1,11 @@
+---
+layout: page
+menu: examples
+description: Count of consumer complaints by year and month for the CFPB data.
+title: Line Chart
+permalink: /examples/5_17_line.html
+image: /img/5_17_line.png
+number: 5-17
+spec: 5_17_line.vl.json
+---
+Count of consumer complaints by year and month for the CFPB data.
diff --git a/examples/5_18_area-stacked.md b/examples/5_18_area-stacked.md
@@ -0,0 +1,11 @@
+---
+layout: page
+menu: examples
+description: Count of consumer complaints, like Figure 5-17, broken out by product. Mortgages stabilized while credit reporting grew. This shows the same data as Figure 5-15.
+title: Stacked Area Chart
+permalink: /examples/5_18_area-stacked.html
+image: /img/5_18_area-stacked.png
+number: 5-18
+spec: 5_18_area-stacked.vl.json
+---
+Count of consumer complaints, like Figure 5-17, broken out by product. Mortgages stabilized while credit reporting grew. This shows the same data as Figure 5-15.
diff --git a/examples/5_19_force.md b/examples/5_19_force.md
@@ -0,0 +1,11 @@
+---
+layout: page
+menu: examples
+description: This data from the Les Miserables dataset shows coappearance in the novel between characters. The network has been truncated to 40 nodes for legibility. Colors are mapped to groups of characters
+title: Node-Link View (Force-Directed Layout)
+permalink: /examples/5_19_force.html
+image: /img/5_19_force.png
+number: 5-19
+spec: 5_19_force.vg.json
+---
+This data from the Les Miserables dataset shows coappearance in the novel between characters. The network has been truncated to 40 nodes for legibility. Colors are mapped to groups of characters
diff --git a/examples/5_1_scatter.md b/examples/5_1_scatter.md
@@ -0,0 +1,11 @@
+---
+layout: page
+menu: examples
+description: A scatterplot emphasizes the relationship between cases that received relief and those that did not for five different products.
+title: Scatterplot
+permalink: /examples/5_1_scatter.html
+image: /img/5_1_scatter.png
+number: 5-1
+spec: 5_1_scatter.vl.json
+---
+A scatterplot emphasizes the relationship between cases that received relief and those that did not for five different products.
diff --git a/examples/5_20_circular.md b/examples/5_20_circular.md
@@ -0,0 +1,11 @@
+---
+layout: page
+menu: examples
+description: This data from the Les Miserables dataset shows coappearance in the novel between characters. The network has been truncated to 40 nodes for legibility. Colors are mapped to groups of characters
+title: Circular Network Layout
+permalink: /examples/5_20_circular.html
+image: /img/5_20_circular.png
+number: 5-20
+spec: 5_20_circular.vg.json
+---
+This data from the Les Miserables dataset shows coappearance in the novel between characters. The network has been truncated to 40 nodes for legibility. Colors are mapped to groups of characters
diff --git a/examples/5_21_adjancency.md b/examples/5_21_adjancency.md
@@ -0,0 +1,11 @@
+---
+layout: page
+menu: examples
+description: Shows the same data as Figures 5-19 and 5-20
+title: Adjacency Matrix
+permalink: /examples/5_21_adjancency.html
+image: /img/5_21_adjancency.png
+number: 5-21
+spec: 5_21_adjancency.vg.json
+---
+Shows the same data as Figures 5-19 and 5-20
diff --git a/examples/5_22_treeview.md b/examples/5_22_treeview.md
@@ -0,0 +1,11 @@
+---
+layout: page
+menu: examples
+description: This is a hierarchy of the types of complaints to the CFPB and the percentage of them that received relief. The second layer of the tree corresponds to the values in Figures 5-1 through 5-4.
+title: Tree View
+permalink: /examples/5_22_treeview.html
+image: /img/5_22_treeview.png
+number: 5-22
+spec: 5_22_treeview.vg.json
+---
+This is a hierarchy of the types of complaints to the CFPB and the percentage of them that received relief. The second layer of the tree corresponds to the values in Figures 5-1 through 5-4.
diff --git a/examples/5_23_treemap.md b/examples/5_23_treemap.md
@@ -0,0 +1,11 @@
+---
+layout: page
+menu: examples
+description: Represents the same data as Figure 5-22 but adds a second dimension for size: the number of complaints.
+title: Treemap
+permalink: /examples/5_23_treemap.html
+image: /img/5_23_treemap.png
+number: 5-23
+spec: 5_23_treemap.vg.json
+---
+Represents the same data as Figure 5-22 but adds a second dimension for size: the number of complaints.
diff --git a/examples/5_24_sunburst.md b/examples/5_24_sunburst.md
@@ -0,0 +1,11 @@
+---
+layout: page
+menu: examples
+description: Represents the same data as Figure 5-23.
+title: Sunburst plot
+permalink: /examples/5_24_sunburst.html
+image: /img/5_24_sunburst.png
+number: 5-24
+spec: 5_24_sunburst.vg.json
+---
+Represents the same data as Figure 5-23.
diff --git a/examples/5_25_map.md b/examples/5_25_map.md
@@ -0,0 +1,11 @@
+---
+layout: page
+menu: examples
+description: Values correspond to regions, such as states or counties. This chart uses census data to look at the percentage of the population with income over $200,000.
+title: Choropleth
+permalink: /examples/5_25_map.html
+image: /img/5_25_map.png
+number: 5-25
+spec: 5_25_map.vg.json
+---
+Values correspond to regions, such as states or counties. This chart uses census data to look at the percentage of the population with income over $200,000.
diff --git a/examples/5_26_zip.md b/examples/5_26_zip.md
@@ -0,0 +1,11 @@
+---
+layout: page
+menu: examples
+description: A scatterplot, where the x- and y-axes are geographical (or a list of geographical points); additional dimensions for size, color, or shape. Dots are located at the centroid of each zip code; the first digit encodes color.
+title: Dotplot map
+permalink: /examples/5_26_zip.html
+image: /img/5_26_zip.png
+number: 5-26
+spec: 5_26_zip.vg.json
+---
+A scatterplot, where the x- and y-axes are geographical (or a list of geographical points); additional dimensions for size, color, or shape. Dots are located at the centroid of each zip code; the first digit encodes color.
diff --git a/examples/5_27_wordcloud.md b/examples/5_27_wordcloud.md
@@ -0,0 +1,11 @@
+---
+layout: page
+menu: examples
+description: The text of the Preface to this book, sized by number of uses of the word. Color in this chart is arbitrary.
+title: Word Cloud
+permalink: /examples/5_27_wordcloud.html
+image: /img/5_27_wordcloud.png
+number: 5-27
+spec: 5_27_wordcloud.vg.json
+---
+The text of the Preface to this book, sized by number of uses of the word. Color in this chart is arbitrary.
diff --git a/examples/5_2_clustered-bar.md b/examples/5_2_clustered-bar.md
@@ -0,0 +1,11 @@
+---
+layout: page
+menu: examples
+description: A different clustering emphasizes the different sizes of the populations who didn’t receive relief (and the similarity of those who did).
+title: Clustered Barchart
+permalink: /examples/5_2_clustered-bar.html
+image: /img/5_2_clustered-bar.png
+number: 5-3
+spec: 5_2_clustered-bar.vl.json
+---
+A different clustering emphasizes the different sizes of the populations who didn’t receive relief (and the similarity of those who did).
diff --git a/examples/5_3_clustered-bar-2.md b/examples/5_3_clustered-bar-2.md
@@ -0,0 +1,11 @@
+---
+layout: page
+menu: examples
+description: A clustered bar chart emphasizes the contrast between the number of people who requested relief and those who attained it.
+title: Clustered Barchart
+permalink: /examples/5_3_clustered-bar-2.html
+image: /img/5_3_clustered-bar-2.png
+number: 5-2
+spec: 5_3_clustered-bar-2.vl.json
+---
+A clustered bar chart emphasizes the contrast between the number of people who requested relief and those who attained it.
diff --git a/examples/5_4_stacked.md b/examples/5_4_stacked.md
@@ -0,0 +1,11 @@
+---
+layout: page
+menu: examples
+description: A stacked bar chart emphasizes the total number of complaints.
+title: Stacked Barchart
+permalink: /examples/5_4_stacked.html
+image: /img/5_4_stacked.png
+number: 5-4
+spec: 5_4_stacked.vl.json
+---
+A stacked bar chart emphasizes the total number of complaints.
diff --git a/examples/5_6_hist-cat.md b/examples/5_6_hist-cat.md
@@ -0,0 +1,11 @@
+---
+layout: page
+menu: examples
+description: The distribution of car styles in the cars dataset.
+title: Categorical Histogram
+permalink: /examples/5_6_hist-cat.html
+image: /img/5_6_hist-cat.png
+number: 5-6
+spec: 5_6_hist-cat.vl.json
+---
+The distribution of car styles in the cars dataset.
diff --git a/examples/5_7_hist-quant.md b/examples/5_7_hist-quant.md
@@ -0,0 +1,11 @@
+---
+layout: page
+menu: examples
+description: A kernel density estimate of the city-mpg field of the cars dataset. Smoothed with a narrow bandwidth, the dataset shows sharp peaks. Smoothed with a wider bandwidth, the dataset shows a gaussian-like distribution.
+title: Quantitative Histogram
+permalink: /examples/5_7_hist-quant.html
+image: /img/5_7_hist-quant.png
+number: 5-7
+spec: 5_7_hist-quant.vl.json
+---
+A kernel density estimate of the city-mpg field of the cars dataset. Smoothed with a narrow bandwidth, the dataset shows sharp peaks. Smoothed with a wider bandwidth, the dataset shows a gaussian-like distribution.
diff --git a/examples/5_8_fixed_smoothed.md b/examples/5_8_fixed_smoothed.md
@@ -0,0 +1,11 @@
+---
+layout: page
+menu: examples
+description: The distribution of car ratings for the city-mpg field.
+title: Smoothed Histogram
+permalink: /examples/5_8_fixed_smoothed.html
+image: /img/5_8_fixed_smoothed.png
+number: 5-8
+spec: 5_8_fixed_smoothed.vg.json
+---
+The distribution of car ratings for the city-mpg field.
diff --git a/examples/5_9_box-plot.md b/examples/5_9_box-plot.md
@@ -0,0 +1,11 @@
+---
+layout: page
+menu: examples
+description: The distribution of car ratings for the city-mpg field.
+title: Box Plot
+permalink: /examples/5_9_box-plot.html
+image: /img/5_9_box-plot.png
+number: 5-9
+spec: 5_9_box-plot.vl.json
+---
+The distribution of car ratings for the city-mpg field.