-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
49 lines (47 loc) · 2.08 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="simplify lines on D3 charts, remove points minimising information loss">
<title>Line simplification</title>
<link rel="stylesheet" type="text/css" href="https://www.toffeemilkshake.co.uk/css/home.css">
<script type="text/javascript" src="examples/bundle.js"></script>
<style>
.original{
color:#ff2800;
}
input#tolerance-input{
width:50%;
}
.simplified key{
color:var(--garish-text-colour);
}
</style>
</head>
<body>
<article>
<h1>Line simplification</h1>
<p class="subtitle"><a href="http://www.toffeemilkshake.co.uk">Tom Pearson</a> November 2015</p>
<p class="simplified key">Simplified data</p> <p class="original key">Original data</p>
<section class="chart">
</section>
<section class="ui">
<p>Tolerance: <input type="range" min="0" max="5" step="0.1" value="3" name="tolerance" id="tolerance-input"> <span id="tolerance-value">3</span></p>
</section>
<section>
<p>A simplified path generator for D3. Remove points without losing much information. A drop in replacement for <a href="https://github.com/mbostock/d3/wiki/SVG-Shapes#line">d3.svg.line</a> with the added ability to specify a <i>tolerance</i>.</p>
<p>In the case above:</p>
<pre>
var simple = simplePath()
.tolerance(3)
.x(function(d){ return dateScale(d.date); })
.y(function(d){ return valueScale(d.value); })
</pre>
<p>Based on <a href="http://mourner.github.io/simplify-js/">Simplify.js</a> a tiny high-performance JavaScript polyline simplification library by Vladimir Agafonkin, extracted from Leaflet, a JS interactive maps library by the same author. </p>
<p>It uses a combination of <a href="https://en.wikipedia.org/wiki/Ramer–Douglas–Peucker_algorithm">Ramer-Douglas-Peucker</a> and <a href="http://psimpl.sourceforge.net/radial-distance.html">Radial Distance</a> algorithms.</p>
</section>
<section><a href="https://github.com/tomgp/simplify-line/">Source code is on GitHub</a></section>
</article>
</body>
</html>