-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
46 lines (37 loc) · 1.67 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
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>Responsive Data Vis</title>
<script src="lib/d3.min.js"></script>
<script src="lib/d3.tip.v0.6.3.js"></script>
<script src="lib/underscore-min.js"></script>
<script src="js/slider.js"></script>
<script src="js/rdv.js"></script>
<script src="js/scatterplot.js"></script>
<script src="js/barchart.js"></script>
<link href="css/slider.css" media="screen" rel="stylesheet" type="text/css">
<link href="css/styles.css" media="screen" rel="stylesheet" type="text/css">
</head>
<body>
<a href="http://github.com/nrabinowitz/rdv" class="contribute">
<img src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub">
</a>
<h1>Responsive Data Visualization</h1>
<p>This is a small prototype of an approach to responsive data visualiation, using
<a href="https://github.com/mbostock/d3">D3.js</a> and a mini-library called
<a href="js/rdv.js">rdv</a>. The basic concept is to construct a visualization
as a collection of features, then turn those features on and off based on the
ratio of points to pixels. Questions, comments, or pull requests welcome at
<a href="mailto:nick@clearstorydata.com">nick@clearstorydata.com</a>.</p>
<h2 class="ppp"><span id="ppp"></span> points per pixel</h2>
<div id="features"></div>
<p>
<a href="?scatterplot">Scatterplot</a> | <a href="?barchart">Bar Chart</a>
<h2>Visualization Size</h2>
<div id="size-slider"></div>
<h2>Data Size</h2>
<div id="data-slider"></div>
<h2>Output</h2>
<div id="vis"></div>
<script src="js/init.js"></script>
</body>