Skip to content

Commit b516f5c

Browse files
domoritzdomoritz
committed
Fix and improve layout and style
1 parent 71da2d1 commit b516f5c

File tree

5 files changed

+96
-124
lines changed

5 files changed

+96
-124
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,5 @@ This [page](https://makingdatavisual.github.io) and project contain a live copy
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+
{:.clear}
1112
The an illustrated list of all figures, with interactive code, is at [FigureList](figurelist.html).

‎_config.yml‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
1-
theme: jekyll-theme-tactile
2-
1+
title: Executable Examples
2+
description: Executable Examples for Making Data Visual
3+
show_downloads: false
4+
theme: jekyll-theme-cayman

‎_layouts/examplepage.html‎

Lines changed: 19 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,28 @@
11
---
2+
layout: default
23
---
3-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
4-
<html lang="en">
54

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.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>
5+
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega/3.0.9/vega.js"></script>
6+
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/2.0.4/vega-lite.js"></script>
7+
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/3.0.0-rc7/vega-embed.js"></script>
188

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 );
9+
<!--<script src="node_modules/vega/build/vega.js"></script>
10+
<script src="node_modules/vega-lite/build/vega-lite.js"></script>
11+
<script src="node_modules/vega-embed/vega-embed.js"></script>-->
2512

26-
</script>
13+
<script>
14+
name = "{{ page.spec }}"
15+
vegaEmbed('#view', '/spec/' + name, {renderer: 'svg'}).then(function(res) {
16+
view = res.view;
17+
current = name;
18+
}).catch( console.error );
2719

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>
20+
</script>
5021

22+
<a href="../figurelist.html">◀ Back to List of Figures</a>
5123

24+
<p>
25+
{{ page.description }}
26+
</p>
5227

28+
<div id="view"></div>

‎localstyles.css‎ renamed to ‎assets/css/style.scss‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
---
2+
---
3+
4+
@import "{{ site.theme }}";
5+
16
img.figure {
27
width: 200px;
38
float:left;
@@ -22,5 +27,18 @@ h2 {
2227
}
2328

2429
.vega-actions a {
25-
margin: 0.3em;
30+
margin-right: 0.6em;
31+
}
32+
33+
.clear {
34+
clear: both;
35+
}
36+
37+
.vega-bind > * {
38+
margin-right: .6em;
39+
}
40+
41+
.vega-bind label {
42+
margin-right: .6em;
43+
margin-left: .2em;
2644
}

‎figurelist.html‎

Lines changed: 53 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,61 @@
11
---
2+
layout: default
3+
title: Executable Examples for Making Data Visual
24
---
35

4-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
5-
<html lang="en">
6+
<a href="./">◀ Back to Homepage</a>
67

7-
<head>
8-
<meta http-equiv="content-type" content="text/html; charset=utf-8">
9-
<link href="https://fonts.googleapis.com/css?family=Chivo:900" rel="stylesheet" type="text/css">
10-
<link rel="stylesheet" href="/assets/css/style.css">
11-
<link rel="stylesheet" type="text/css" href="/assets/css/print.css" media="print">
12-
<link rel="stylesheet" type="text/css" href="localstyles.css">
13-
<title>Making Data Visual</title>
14-
</head>
8+
<h2>List of Figures</h2>
159

16-
<body>
17-
<div id="container">
18-
<div class="inner">
19-
<header>
20-
<h1>makingdatavisual.github.io</h1>
21-
<h2>Executable Examples for Making Data Visual
22-
</header>
23-
<section id="main_content">
24-
25-
<h2>
26-
List of figures
27-
</h2>
28-
{% for group in site.data.figures %}
29-
<a href="#{{group.name}}"><div class="group"> {{ group.group }}:</a>
30-
{{ group.children | map: "title" | join: ", " }}
10+
{% for group in site.data.figures %}
11+
<a href="#{{group.name}}"><div class="group"> {{ group.group }}:</a>
12+
{{ group.children | map: "title" | join: ", " }}
3113
<!-- {% for figure in group.children %}
32-
{% if figure.number %}
33-
<span>{{ figure.title }} </span>
34-
{% endif %}
35-
{% endfor %}
14+
{% if figure.number %}
15+
<span>{{ figure.title }} </span>
16+
{% endif %}
17+
{% endfor %}
3618
!-->
37-
{% endfor %}
38-
39-
{% for group in site.data.figures %}
40-
<a name="{{group.name}}"></a>
41-
<h1>{{ group.group }}</h1>
42-
43-
{% for figure in group.children %}
44-
{% if figure.number %}
45-
{% if figure.variable %}
46-
<h2> {{ figure.number }}: {{ figure.title}} ({{ figure.variable }}) </h2>
47-
{% else %}
48-
<h2> {{ figure.number }}: {{ figure.title}} </h2>
49-
{% endif %}
50-
{% else %}
51-
<h2>{{ figure.spec }}</h2>
52-
{% endif %}
19+
{% endfor %}
20+
21+
{% for group in site.data.figures %}
22+
<a name="{{group.name}}"></a>
23+
<h2>{{ group.group }}</h2>
24+
25+
{% for figure in group.children %}
26+
<div>
27+
{% if figure.number %}
28+
{% if figure.variable %}
29+
<h3> {{ figure.number }}: {{ figure.title}} ({{ figure.variable }}) </h3>
30+
{% else %}
31+
<h3> {{ figure.number }}: {{ figure.title}} </h3>
32+
{% endif %}
33+
{% else %}
34+
<h3>{{ figure.spec }}</h3>
35+
{% endif %}
36+
37+
<a name="{{figure.spec}}"></a>
38+
39+
{% assign name = figure.spec | remove:".vl.json" | remove:".vg.json" %} {% assign imgurl = name | append: ".png" | prepend: "img/" %}
40+
41+
<a href="/examples/{{name}}">
42+
<img class="figure" src="{{imgurl}}" />
43+
</a>
44+
45+
<p class="caption">{{ figure.caption }}</p>
46+
47+
<a href="/examples/{{name}}">
48+
{% if figure.spec contains ".vl."%}
49+
(Vega-Lite demo)
50+
{% else %}
51+
(Vega demo)
52+
{% endif %}
53+
</a>
5354

54-
<a name="{{figure.spec}}"></a>
55-
56-
{% assign name = figure.spec | remove:".vl.json" | remove:".vg.json" %} {% assign imgurl = name | append: ".png" | prepend: "img/" %}
57-
58-
<a href="/examples/{{name}}">
59-
<img class="figure" src="{{imgurl}}" />
60-
</a>
61-
<p class="caption">{{ figure.caption }}</p>
62-
<a href="/examples/{{name}}">
63-
{% if figure.spec contains ".vl."%}
64-
(Vega-Lite demo)
65-
{% else %}
66-
(Vega demo)
67-
{% endif %}
68-
</a>
69-
70-
71-
{% if figure.note %}
72-
<p class="note">Note: {{figure.note}}</p>
73-
{% endif %}
74-
{% endfor %}
75-
{% endfor %}
76-
</section>
77-
</div>
78-
</div>
79-
</body>
80-
81-
</html>
82-
83-
<!-
84-
85-
86-
!->
55+
{% if figure.note %}
56+
<p class="note">Note: {{figure.note}}</p>
57+
{% endif %}
58+
<div class="clear"></span>
59+
</div>
60+
{% endfor %}
61+
{% endfor %}

0 commit comments

Comments
 (0)