-
Notifications
You must be signed in to change notification settings - Fork 27
/
index.html
157 lines (134 loc) · 6.72 KB
/
index.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
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
<!DOCTYPE html>
<html>
<head>
<title>Sparky</title>
<script type="text/javascript" src="lib/raphael/raphael-min.js"></script>
<script type="text/javascript" src="src/sparky.js"></script>
<style type="text/css">
@import url(style/screen.css);
</style>
</head>
<body>
<div id="intro">
<h1>Sparky</h1>
<p><a class="fw">Sparklines</a> are intense, simple, word-sized graphics.
Sparky is a JavaScript library for drawing them dynamically in
your web browser. In the words of
<a href="http://www.edwardtufte.com">Edward Tufte</a>,
who coined the term:</p>
<blockquote>
Sparklines mean that graphics are no longer cartoonish special
occasions with captions and boxes, but rather a sparkline graphic
can be everywhere a word or number can be: embedded in a sentence,
table, headline, map, spreadsheet, graphic.
</blockquote>
<p>You can read more about sparklines and their many uses on
<a href="http://en.wikipedia.org/wiki/Sparkline">Wikipedia</a>,
<a href="http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001OR">Tufte's site</a>,
or in his book, <a href="http://www.edwardtufte.com/tufte/books_be"><i>Beautiful Evidence</i></a>.</p>
</div>
<div id="examples">
<h2>Examples</h2>
<div class="example">
<p><span class="sparkline"
data-points="145,136,145,136,127,136,145,136,136,172,127,136,127,127,172,172,181,172,200,127,136,118,109,100,128"
data-preset="hilite-last"></span>
<label>glucose</label> <var>128</var></p>
<p><span class="sparkline"
data-points="20,19,20,20,20,20,20,20,25,25,18,14,14,18,18,20,20,20,18,18,16,16"
data-range_min="16"
data-range_max="20"
data-preset="hilite-last"></span>
<label>respiration</label> <var>16</var></p>
<p><span class="sparkline"
data-points="-1,-2,-2,-4,-3,-1,1,1,2,3,5,3,2,3,4"
data-baseline="0"
data-preset="zero-bars"></span></td>
<label>some bars</label></p>
<p><span class="sparkline"
data-points="10,12,11,16,28,29,27,24,22,15,10,9,10,10,26,35,32,28,24,23,21,20"
data-preset="gray-area"></span></td>
<label>an elevation profile</label></p>
<p><span class="sparkline"
data-points="1,1,0,1,0,0,0,1,.5,0,1,1,0,1,0,1,0,0,1,.5,1,1,1,1,0,0,1,1,0,1,0,0,1,0,0,.5,1"
data-preset="binary"></span></td>
<label>binary data</label></p>
</div>
</div>
<div id="features">
<h2>Features</h2>
<h3>What it do</h3>
<p>Sparky supports line
<span class="sparkline" data-preset="hilite-last" data-points="5,6,8,7,5,3,2,3,8,7"></span>,
bar <span class="sparkline" data-preset="zero-bars" data-points="5,6,8,7,5,3,2,3,8,7"></span>, and
area <span class="sparkline" data-preset="gray-area" data-points="5,6,8,7,5,3,2,3,8,7"></span>
charts. Line and area charts can include variably colored and sized dots
<span class="sparkline" data-preset="rainbow" data-points="5,6,8,7,5,3,2,3,8,7"></span>.
Both dot and bar colors can be defined either as a single value
for the entire data set, or as functions to be evaluated once per
data point.</p>
<p>Sparky can also render larger time series graphics:</p>
<div class="sparkline"
data-preset="big"
data-points="9.1,9.0,8.9,9.0,9.0,9.1,9.1,9.1,9.0,8.9,8.7,8.5">
<p class="caption">2011 Unemployment rate for persons 16 and over, from the <a href="http://data.bls.gov/timeseries/LNS14000000">Bureau of Labor Statistics</a></p>
</div>
<h3>What it don’t</h3>
<p>Sparky does not support chart axes (or any other form of
labeling), or the rendering of multiple data series in a single
graphic.</p>
</div>
<div id="about">
<h2>About</h2>
<p>Sparky is a project by <a href="http://stamen.com/studio/shawn">Shawn Allen</a>,
Design Director at <a href="http://stamen.com">Stamen</a>.</p>
<h3>Open Source</h3>
<p>Sparky is open source and free for the taking. Feel free to
<a href="http://github.com/shawnbot/sparky">fork the code on Github</a>,
and please <a href="http://github.com/shawnbot/sparky/issues">file a bug report</a>
if you find a problem.</p>
<h3>Dependencies</h3>
<p>Sparky depends on <a href="http://raphaeljs.com/">Raphaël</a>
for cross-browser vector rendering. It plays nicely with (and uses,
if possible) <a href="http://mbostock.github.com/d3/">d3.js</a> for
scales and general data munging.</p>
</div>
<script type="text/javascript" defer>
sparky.presets.set("big", {
width: 450,
height: 100,
padding: 10,
line_stroke: "red",
line_stroke_width: 2,
dot_radius: function(d, i) {
return this.last ? 5 : 0;
},
dot_fill: "red",
dot_stroke: "white",
dot_stroke_width: 1
});
sparky.presets.set("rainbow", {
padding: 5,
line_stroke: "none",
dot_radius: function() {
return 1.5 + Math.random() * 3.5;
},
dot_fill: function() {
var r = (~~(Math.random() * 16)).toString(16),
g = (~~(Math.random() * 16)).toString(16),
b = (~~(Math.random() * 16)).toString(16);
return ["#", r, g, b].join("");
}
});
var sparks = document.querySelectorAll(".sparkline"),
len = sparks.length;
for (var i = 0; i < len; i++) {
var el = sparks[i],
data = sparky.parse.numbers(el.getAttribute("data-points")),
preset = sparky.presets.get(el.getAttribute("data-preset")),
options = sparky.util.getElementOptions(el, preset);
sparky.sparkline(el, data, options);
}
</script>
</body>
</html>