-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
203 lines (181 loc) · 7.6 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
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
<!DOCTYPE html>
<html>
<head>
<title>Examples | tufte.js</title>
<link rel="stylesheet" href="tufte.css"/>
</head>
<body>
<article>
<h1>tufte.js</h1>
<p class="subtitle">Tufte style minimal plots for the browser.</p>
<p>
Tufte style plots for the browser. Inspired by <a href="http://motioninsocial.com/tufte/">Tufte
in R</a>. The plots here are not exhaustive and more plots will be added
as I feel need for them.
</p>
<p>
The idea is to create an ultra minimal library for simple
visualizations. At places, I have relied on the possibility of
interactiveness to deviate from the <em>usual</em> Tufte style which helps in
removing more <em>ink</em>. In case some of the <em>required</em> data ink
is missing, its because either they are in plan or I have actually
missed them or they are better suited to a visualization apt for
<em>small data</em>, like a table.
</p>
<p>
<em>
This project is not associated with Edward Tufte and is purely an
opinionated take on his visual style.
</em>
</p>
<section>
<h2>Getting started</h2>
<p>
<code>tufte.js</code> is a <a href="https://d3js.org/">D3</a> based
library. To use it, download the source
<a href="https://github.com/lepisma/tufte.js">from here</a> and include
the following snippet in your html document. Its also available on npm
<a href="https://www.npmjs.com/package/tufte">here</a>.
</p>
<pre class="code"><script src="https://d3js.org/d3.v4.min.js"></script>
<script type="text/javascript" src="./dist/tufte.js"><script></pre>
<p>
The API is simple and most of the charts need 3 arguments, in the
following order:
<ul>
<li><em>target</em><br>CSS selector of the target div, e.g. <code>'#plotTarget'</code></li>
<li><em>data</em><br>Numerical data in the following form (unless noted otherwise),
<code>[{x: 1, y: 3.4}, {x: 2.3, y: 13} ...]</code></li>
<li><em>config [optional]</em><br>Optional configuration, explained in
examples and in the end.</li>
</ul>
</p>
</section>
<section>
<h2>Line plot</h2>
<p>
A basic line chart can be plotted using the following snippet
</p>
<pre class="code">new tufte.LinePlot('#target-div', data)</pre>
<p>
In case of less data points, the <em>y-axis</em> is skipped and
circles with on hover tooltip are displayed for plotted points.
</p>
<figure>
<label for="mn-line-plot" class="margin-toggle">⊕</label>
<input type="checkbox" id="mn-line-plot" class="margin-toggle"/>
<span class="marginnote">
A simple line plot with on hover tooltips for points. This uses
extra config parameter <code>{label: {x: 'text'}}</code> for setting
the x axis label.
</span>
<div id="line-plot"></div>
</figure>
<p>
When there are lots of points, the circles are not drawn and y axis is
displayed.
</p>
<figure>
<label for="mn-line-plot-more" class="margin-toggle">⊕</label>
<input type="checkbox" id="mn-line-plot-more" class="margin-toggle"/>
<span class="marginnote">
Optional parameter <code>{smoothing: true}</code> is set by default in
this case.
</span>
<div id="line-plot-more-points"></div>
</figure>
</section>
<section>
<h2>Scatter plot</h2>
<p>
Scatter plot has similar API
</p>
<pre class="code">new tufte.ScatterPlot('#target-div', data)</pre>
<figure>
<label for="mn-line-scatter-plot" class="margin-toggle">⊕</label>
<input type="checkbox" id="mn-line-scatter-plot" class="margin-toggle"/>
<span class="marginnote">
Optional parameter <code>{tickType: {x: 'quartile', y: 'quartile'}}</code>
provides quartile tick labels on both axes here.
</span>
<div id="scatter-plot"></div>
</figure>
<p>
A more useful way to plot scatter is to set <code>marginal = true</code> in
config. This plots the marginal values along the axes ticks.
</p>
<figure>
<label for="mn-line-scatter-plot-marginal" class="margin-toggle">⊕</label>
<input type="checkbox" id="mn-line-scatter-plot-marginal" class="margin-toggle"/>
<span class="marginnote">
Optional parameter <code>{marginal: true}</code> is set here.
</span>
<div id="scatter-plot-with-marginal"></div>
</figure>
</section>
<section>
<h2>Chart Options</h2>
<p>
Optional parameters specified below can be overridden by passing to
the plot constructor.
</p>
<dl>
<dt><code>width</code>, <code>height (integer)</code></dt>
<dd>Width and height for the plot.</dd>
<br>
<dt><code>margin.[top|bottom|left|right|axis] (integer)</code></dt>
<dd>Margins. The <code>axis</code> margin is between drawing area and
axis</dd>
<br>
<dt><code>dotLinePlot (boolean)</code></dt>
<dd>Whether to draw circles on line plot</dd>
<br>
<dt><code>label.[x|y] (string)</code></dt>
<dd>Label for the axis</dd>
<br>
<dt><code>scaleType.[x|y] (string)</code></dt>
<dd>Scale type for axis. <code>"linear"</code> (default),
<code>"log"</code> or <code>"time"</code>. <code>"time"</code>
disables <code>"tickType"</code> property.</dd>
<br>
<dt><code>tickType.[x|y] (string)</code></dt>
<dd>Type of ticks to show. <code>"plain"</code> (default) or
<code>"quartile"</code></dd>
<br>
<dt><code>marginal (boolean)</code></dt>
<dd>Whether to show marginal values in scatter plots. False
by default.</dd>
</dl>
</section>
</article>
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
<script type="text/javascript" src="./dist/tufte.js"></script>
<script type="text/javascript">
function* perlinGen() {
let state = Math.random()
while(true) {
state += 2 * (Math.random() - 0.5)
yield state
}
}
let pgen = perlinGen()
let pgen2 = perlinGen()
// Plain ol' chart with lesser number of points
new tufte.LinePlot('#line-plot', [...Array(10).keys()].map(d => {
return { x: d, y: pgen.next().value }
}), { label: { x: 'Number vs random number' }})
// Same line plot but with much more points
new tufte.LinePlot('#line-plot-more-points', [...Array(200).keys()].map(d => {
return { x: d, y: pgen.next().value }
}), { smoothing: true })
// Simple scatter plot
new tufte.ScatterPlot('#scatter-plot', [...Array(200).keys()].map(d => {
return { x: pgen.next().value, y: pgen2.next().value }
}), { label: { x: 'Also randoms', y: 'Randoms' }, tickType: { x: 'quartile', y: 'quartile' }})
// Scatter plot with marginal
new tufte.ScatterPlot('#scatter-plot-with-marginal', [...Array(200).keys()].map(d => {
return { x: pgen.next().value, y: pgen2.next().value }
}), { marginal: true, tickType: { x: 'quartile', y: 'quartile' }})
</script>
</body>
</html>