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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="dark light">
<link rel="icon" href="data:,">
<title>CSS Slope Graphs</title>
<link href="/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" />
<link href="/rss.xml" type="application/rss+xml" rel="alternate" title="RSS feed for blog posts" />
<style>*{box-sizing:border-box;}body{font-family:sans-serif;line-height:1.33;margin:0 auto;max-width:650px;padding:1rem;}blockquote{background:rgba(0,0,0,0.1);border-left:4px solid;padding-left:5px;}img{max-width:100%;}pre{border:1px solid;overflow:auto;padding:5px;}table{text-align:left;width:100%;}.footnotes{font-size:90%;}</style>
</head>
<nav>
<a href="#menu">Menu ↓</a>
</nav>
<main>
<h1 id="css-slope-graphs">CSS Slope Graphs</h1>
<p>2021-06-07</p>
<p><em>I am a huge sucker for simplistic and beautifully designed visual data on the web</em>. Most data tends to be graphed via line or bar systems - which is fine - but I think slope graphs are highly underrated. Let’s change that, shall we?</p>
<h2 id="the-demo">The Demo</h2>
<p>I’m basing this demo off the design patterns found in <a href="https://www.edwardtufte.com/tufte/books_vdqi">Edward Tufte’s visualization work</a>, specifically his slope graph designs:</p>
<p><a href="https://codepen.io/bradleytaunt/pen/jOBzXMe">Live CodePen Example</a></p>
<h2 id="the-html">The HTML</h2>
<p>For this concept we will actually be building this graph out of <code>tables</code> - crazy, right? The greatest benefit of rendering all the data inside of a <code>table</code> element is the ability to easily support smaller screens and mobile devices. Larger viewports will get to see the pretty slope graph, while those below a certain threshold will view a simple table.</p>
<p>(But more on that in the CSS section)</p>
<pre><code><p>Sales of the leading frozen pizza brands of the United States from 2011 to 2017 (in million US dollars) <br><em>Source: Statisa 2018</em></p>
<table>
<thead>
<tr>
<th>Pizza Brand</th>
<th>2011</th>
<th>2017</th>
</tr>
</thead>
<tbody>
<tr>
<td data-set="677.0">DiGiorno</td>
<td><span>677.0</span></td>
<td data-name="DiGiorno">1014.6</td>
</tr>
<tr>
<td data-set="294.8">Private Label</td>
<td><span>294.8</span></td>
<td data-name="Private Label">524.8</td>
</tr>
<tr>
<td data-set="286.1">Red Baron</td>
<td><span>286.1</span></td>
<td data-name="Red Baron">572.3</td>
</tr>
<tr>
<td data-set="257.9">Tombstone</td>
<td><span>257.9</span></td>
<td data-name="Tombstone">270.6</td>
</tr>
<tr>
<td data-set="164.5">Totino's Party Pizza</td>
<td><span>164.5</span></td>
<td data-name="Totino's Party Pizza">347.2</td>
</tr>
</tbody>
</table>
</code></pre>
<p>As you can see, nothing too fancy is happpening here. Pay close attention to the <code>data-set</code> and <code>data-name</code> variables though - those will be important for the CSS portion of this design, mainly the rendering of the line elements.</p>
<h2 id="the-css">The CSS</h2>
<p>To avoid overwhelming your brain all-at-once, let’s break the CSS down into bite-sized chunks, starting with the base styling:</p>
<pre><code>@import url('https://opentype.netlify.com/et-book/index.css');
* {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
background: #fffff8;
font-family: "et-book", serif;
height: 100%;
margin: 0 auto;
max-width: 800px;
padding: 0 0.5rem;
}
p {
font-size: 18px;
margin: 4rem 0 6rem;
}
table {
border-collapse: collapse;
text-align: left;
width: 100%;
}
</code></pre>
<p>Pretty basic stuff.</p>
<p>Now we need to design how our slope graph will look on larger screens / desktops. For this instance, we will target these larger devices with a <code>min-width</code> media query of <code>800px</code>. The rest of the CSS might look a little confusing but I assure you it is quite simple.</p>
<ol>
<li><p>On larger devices we hide the first <code>thead tr th</code> element with <code>display: none</code></p></li>
<li><p>The first and second <code>td</code> elements inside each <code>tbody</code> row need to be set as <code>position: absolute</code> to avoid duplicate content</p></li>
<li><p>The inner <code>span</code> that we include in our HTML inside the second <code>tbody tr td</code> also needs to be <code>display: none</code></p></li>
<li><p>Remember that <code>data-set</code> variable? We now use that for our <code>:before</code> pseudo element for <code>table tbody tr td:nth-of-type(1)</code></p></li>
<li><p>Remember that <code>data-name</code> variable? We now use that for our <code>:before</code> pseudo element for <code>table tbody tr td:nth-of-type(3)</code></p></li>
<li><p>After that, you can see the simple customization we include to render the angle / position of the slope lines and the corresponding labels</p>
<p>@media(min-width:800px) {
table {
display: block;
position: relative;
margin-bottom: 25rem;
}</p>
<pre><code>table thead th {
border-bottom: 1px solid lightgrey;
font-size: 24px;
position: absolute;
top: -50px;
width: 45%;
}
table thead th:nth-child(1){ display: none; }
table thead th:nth-child(2){ left: 0; }
table thead th:nth-child(3){ right: 0; text-align: right; }
table tbody tr td:nth-of-type(1),
table tbody tr td:nth-of-type(2) { position: absolute;}
table tbody tr td:nth-of-type(2) span { display: none; }
table tbody tr td:nth-of-type(1):before {
content: attr(data-set);
margin-right: 10px;
position: relative;
}
table tbody tr td:nth-of-type(2) { padding-left: 10px; }
table tbody tr td:nth-of-type(3) {
position: absolute;
right: 0;
}
table tbody tr td:nth-of-type(3):before {
content: attr(data-name);
margin-right: 10px;
position: relative;
}
/* Custom individual slopes -- Left */
tbody tr:nth-child(1) td:nth-child(1),
tbody tr:nth-child(1) td:nth-child(2) { top: 60px; }
tbody tr:nth-child(2) td:nth-child(1),
tbody tr:nth-child(2) td:nth-child(2) { top: 140px; }
tbody tr:nth-child(3) td:nth-child(1),
tbody tr:nth-child(3) td:nth-child(2) { top: 165px; }
tbody tr:nth-child(4) td:nth-child(1),
tbody tr:nth-child(4) td:nth-child(2) { top: 220px; }
tbody tr:nth-child(5) td:nth-child(1),
tbody tr:nth-child(5) td:nth-child(2) { top: 270px; }
/* Custom individual slopes -- Right */
[data-name="DiGiorno"] { top: 0; }
[data-name="Red Baron"] { top: 65px; }
[data-name="Private Label"] { top: 100px; }
[data-name="Tombstone"] { top: 180px; }
[data-name="Totino's Party Pizza"] { top: 150px; }
/* The custom visual lines */
tbody tr:after {
background: black;
content: '';
height: 1px;
left: 14.5%;
position: absolute;
width: 70%;
}
tbody tr:nth-child(1):after {
top: 40px;
transform: rotate(-6deg);
}
tbody tr:nth-child(2):after {
left: 17.5%;
top: 130px;
transform: rotate(-4deg);
width: 65%;
}
tbody tr:nth-child(3):after {
left: 15%;
top: 125px;
transform: rotate(-10.25deg);
width: 70%;
}
tbody tr:nth-child(4):after {
left: 16%;
top: 210px;
transform: rotate(-4deg);
width: 68%;
}
tbody tr:nth-child(5):after {
left: 22%;
top: 222px;
transform: rotate(-16deg);
width: 56%;
}
</code></pre>
<p>}</p></li>
</ol>
<p>All that’s left are some minor styles to make everything look nice on mobile:</p>
<pre><code>@media(max-width:800px) {
p {
margin: 2rem 0;
}
table td, table th {
border-bottom: 1px solid grey;
padding: 10px;
}
table td:last-of-type, table th:last-of-type {
text-align: right;
}
}
</code></pre>
<h2 id="not-the-most-practical">Not the most practical</h2>
<p>This slope graph concept is far from perfect for use in real-world situations. The fact that you need to manually render each point of data yourself makes this implementation quite annoying for more in-depth projects.</p>
<p>But it was fun to mess around with and create, so who cares!</p>
<footer role="contentinfo">
<h2>Menu Navigation</h2>
<ul id="menu">
<li><a href="/">Home</a></li>
<li><a href="/projects">Projects</a></li>
<li><a href="/uses">Uses</a></li>
<li><a href="/wiki">Wiki</a></li>
<li><a href="/resume">Resume</a></li>
<li><a href="/colophon">Colophon</a></li>
<li><a href="/now">Now</a></li>
<li><a href="/donate">Donate</a></li>
<li><a href="/atom.xml">RSS</a></li>
<li><a href="#top">↑ Top of the page</a></li>
</ul>
<small>
Built with <a href="https://git.sr.ht/~bt/barf">barf</a>. <br>
Maintained with ♥ for the web. <br>
Proud supporter of <a href="https://usefathom.com/ref/DKHJVX">Fathom</a> & <a href="https://nextdns.io/?from=74d3p3h8">NextDNS</a>. <br>
The content for this site is <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.<br> The <a href="https://git.sr.ht/~bt/bt.ht">code for this site</a> is <a href="https://git.sr.ht/~bt/bt.ht/tree/master/item/LICENSE">MIT</a>.
</small>
</footer>
|
