d3fc-sample
Version:
A data subsampler that chooses representative data points using a largest triangle or mode-median approach.
91 lines (89 loc) • 3.42 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>d3fc-sample demo</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" type="text/css"/>
<style>
path {
fill: none;
stroke-width: 2;
}
.subsampled {
stroke: hotpink;
}
.raw {
stroke: rgb(128, 128, 128);
stroke-width: 0.5;
}
svg {
border: 1px solid rgb(192, 192, 192);
margin-left: auto;
margin-right: auto;
display: block;
}
.row {
margin-top: 10px;
}
.jumbotron {
padding: 1em 0;
}
input[type=text] {
width: 60px ;
}
.form-group, .row #statistics {
margin-left: 10px;
border-left: 1px solid rgb(192, 192, 192);
padding-left: 10px;
}
g.label circle {
display: none;
}
</style>
</head>
<body class="container">
<div class="jumbotron row">
<h2>d3fc-sample demo</h2>
<p>View the code on <a href="https://github.com/d3fc/d3fc-sample">GitHub</a>.</p>
</div>
<p class="row">
This page allows you to experiment with the various data subsampling algorithms.
</p>
<form class="form-inline row" id="strategy-form">
<h4>Strategy:</h4>
<div class="form-group">
<label for="strategy-selector">Strategy</label>
<select class="form-control" id="strategy-selector">
<option value="modeMedian">Mode Median</option>
<option value="largestTriangleOneBucket">Largest Triangle One Bucket</option>
<option value="largestTriangleThreeBucket">Largest Triangle Three Bucket</option>
</select>
</div>
<div class="form-group">
<label for="bucket-size">Bucket Size</label>
<input type="range" class="form-control" id="bucket-size" value="10" min="1" max="100" />
<label for="bucket-size" id="bucket-size-text">10</label>
</div>
</form>
<form class="form-inline row" id="data-form">
<h4>Random Data:</h4>
<div class="form-group">
<label for="data-count">Data Count</label>
<input type="text" class="form-control" id="data-count" value="2000">
<button class="btn btn-default" name="chart">Generate chart</button>
<button class="btn btn-default" name="circle">Generate circle</button>
<button class="btn btn-default" name="map">Generate map</button>
</div>
</form>
<div class="row">
<h4>Statistics:</h4>
<p id="statistics"></p>
</div>
<div class="row">
<svg></svg>
</div>
<script src="lib/bundle.js"></script>
</body>
</html>