Skip to content

Commit 474a861

Browse files
author
Danyel Fisher
committed
interactive pages
1 parent f254b12 commit 474a861

File tree

87 files changed

+634
-135
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

87 files changed

+634
-135
lines changed

‎.vscode/launch.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
// Use IntelliSense to learn about possible attributes.
3+
// Hover to view descriptions of existing attributes.
4+
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
5+
"version": "0.2.0",
6+
"configurations": [
7+
{
8+
"type": "node",
9+
"request": "launch",
10+
"name": "Launch Program",
11+
"program": "${workspaceFolder}\\scripts\\siteprep.js"
12+
}
13+
]
14+
}

‎README.md‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,4 @@ This page and project contain a live copy of the figures for the book ["Making D
88

99
The figures are written in [Vega and Vega-Lite](http://vega.github.io), a JSON-based web-based language for creating sophisticated data visualizations.
1010

11-
Check out the interactive selector at the [Examples](examples.html) page.
12-
There is an illustrated list of all figures at [FigureList](figurelist.html).
11+
The an illustrated list of all figures, with interactive code, is at [FigureList](figurelist.html).

‎_layouts/page.html‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
---
2+
---
3+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
4+
<html lang="en">
5+
6+
<head>
7+
<meta http-equiv="content-type" content="text/html; charset=utf-8">
8+
<link href="https://fonts.googleapis.com/css?family=Chivo:900" rel="stylesheet" type="text/css">
9+
<link rel="stylesheet" href="/assets/css/style.css">
10+
<link rel="stylesheet" type="text/css" href="/assets/css/print.css" media="print">
11+
<link rel="stylesheet" type="text/css" href="/localstyles.css">
12+
<title>{{page.number}} {{page.name}} from Making Data Visual</title>
13+
<meta charset="UTF-8">
14+
<meta name="viewport" content="width=device-width, initial-scale=1">
15+
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega/3.0.8/vega.js"></script>
16+
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/2.0.3/vega-lite.js"></script>
17+
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/3.0.0-rc7/vega-embed.js"></script>
18+
19+
<script>
20+
name = "{{ page.spec }}"
21+
vegaEmbed('#view', '/spec/' + name, {renderer: 'svg'}).then(function(res) {
22+
view = res.view;
23+
current = name;
24+
}).catch( console.error );
25+
26+
</script>
27+
28+
</head>
29+
30+
<body>
31+
<div id="container">
32+
<div class="inner">
33+
<header>
34+
<h1>makingdatavisual.github.io</h1>
35+
{% if page.title %}
36+
<h2>{{page.number}} {{page.title}}</h2>
37+
{% endif %}
38+
</header>
39+
<section id="main_content">
40+
41+
<!--<script src="node_modules/vega/build/vega.js"></script>
42+
<script src="node_modules/vega-lite/build/vega-lite.js"></script>
43+
<script src="node_modules/vega-embed/vega-embed.js"></script>-->
44+
45+
{{ page.description }}
46+
47+
<div id="view"></div>
48+
</body>
49+
</html>
50+
51+
52+

‎examples.html‎ renamed to ‎dropdown.html‎

File renamed without changes.

‎example.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
var container = document.querySelector('#view'),
2+
loader = vega.loader(),
3+
renderType = 'svg',
4+
runtime = null,
5+
spec = null,
6+
view = null,
7+
current = null;
8+
9+
function load(name) {
10+
}

‎examples/5_11_density-cont.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
layout: page
3+
menu: examples
4+
description: The joint distribution of efficiency, as measured in MPG, against the weight of the car.
5+
title: Continuous Density Plot
6+
permalink: /examples/5_11_density-cont.html
7+
image: /img/5_11_density-cont.png
8+
number: 5-11
9+
spec: 5_11_density-cont.vl.json
10+
---
11+
The joint distribution of efficiency, as measured in MPG, against the weight of the car.

‎examples/5_12_bar-chart.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
layout: page
3+
menu: examples
4+
description: Bar length shows the average efficiency by body style using the same data as in Figure 5-9.
5+
title: Bar Chart
6+
permalink: /examples/5_12_bar-chart.html
7+
image: /img/5_12_bar-chart.png
8+
number: 5-12
9+
spec: 5_12_bar-chart.vl.json
10+
---
11+
Bar length shows the average efficiency by body style using the same data as in Figure 5-9.

‎examples/5_13a_clustered-bar-chart.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
layout: page
3+
menu: examples
4+
description: Efficiency by body style is now divided into diesel versus gas cars.
5+
title: Paired (or Multiple) Series Bar Chart
6+
permalink: /examples/5_13a_clustered-bar-chart.html
7+
image: /img/5_13a_clustered-bar-chart.png
8+
number: 5-13
9+
spec: 5_13a_clustered-bar-chart.vg.json
10+
---
11+
Efficiency by body style is now divided into diesel versus gas cars.

‎examples/5_14_justone_pie.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
layout: page
3+
menu: examples
4+
description: The CFPB data shows the ways that complaints have been closed.
5+
title: Pie (or Doughnut) Chart
6+
permalink: /examples/5_14_justone_pie.html
7+
image: /img/5_14_justone_pie.png
8+
number: 5-14
9+
spec: 5_14_justone_pie.vg.json
10+
---
11+
The CFPB data shows the ways that complaints have been closed.

‎examples/5_15_heatmap.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
layout: page
3+
menu: examples
4+
description: The CFPB data shows the ways that complaints have been closed, broken out by month and year.
5+
title: Heatmap
6+
permalink: /examples/5_15_heatmap.html
7+
image: /img/5_15_heatmap.png
8+
number: 5.15
9+
spec: 5_15_heatmap.vl.json
10+
---
11+
The CFPB data shows the ways that complaints have been closed, broken out by month and year.

0 commit comments

Comments
 (0)