-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathslopegraph.html
executable file
·42 lines (42 loc) · 1.84 KB
/
slopegraph.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
<!DOCTYPE html><html>
<head>
<title>Slope Graph example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="raphael.js"></script>
<script src="slopegraph.js"></script> </head>
<body>
<h1>Slope Graph example</h1>
Charlie Park wrote <a href="http://charliepark.org/slopegraphs/">an essay</a> explaining
<a href="http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0003nk&topic_id=1">Edward Tufte's
Slope Graph</a> idea. However, as he says, Canvas is not great for doing subtle hairlines.<p>
Interested in the idea, I hacked this up using the lovely <a href="http://raphaeljs.com">Raphaël library</a>
that generates SVG.<p>
The code is on <a href="https://github.com/kevinmarks/slopegraph" >GitHub as slopegraph</a>
<p><a href="http://kevinmarks.com" rel="author">Kevin Marks</a>, July 13th 2011
<h2>A generated example, based on Tufte's data</h2>
<h3>Current Receipts of Government as a Percentage of Gross Domestic Product, 1970 and 1979</h3>
<table id="data">
<thead><tr><td>country<td>1970<td>1979</tr></thead>
<tbody>
<tr><td>Sweden <td>46.9<td>57.4</tr>
<tr><td>Netherlands <td>44.0<td>55.8</tr>
<tr><td>Norway <td>43.5<td>52.2</tr>
<tr><td>Britain <td>40.7<td>39.0</tr>
<tr><td>France <td>39.0<td>43.4</tr>
<tr><td>Germany <td>37.5<td>42.9</tr>
<tr><td>Belgium <td>35.2<td>43.2</tr>
<tr><td>Canada <td>35.2<td>35.8</tr>
<tr><td>Finland <td>34.9<td>38.2</tr>
<tr><td>Italy <td>30.4<td>35.7</tr>
<tr><td>United States<td>30.3<td>32.5</tr>
<tr><td>Greece <td>26.8<td>30.6</tr>
<tr><td>Switzerland <td>26.5<td>33.2</tr>
<tr><td>Spain <td>22.5<td>27.1</tr>
<tr><td>Japan <td>20.7<td>26.6</tr>
</tbody>
</table>
<div id="holder"></div>
<h3>Tufte's original image from print, for comparison</h3>
<img src="slopegraph.gif" />
</body>
</html>