Skip to content

Instantly share code, notes, and snippets.

@natemiller

natemiller/SampleData.csv Secret

Last active December 14, 2015 22:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save natemiller/76fed84e8d8c2f6632f6 to your computer and use it in GitHub Desktop.
Save natemiller/76fed84e8d8c2f6632f6 to your computer and use it in GitHub Desktop.
Download ZIP
Selectable ScatterPlot 2
Raw
index.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1">
<title>Data visualisation demo</title>
<style>
body
{
background-color: #ffffff;
font-family: sans-serif;
color: #7c7273;
font-size: 10px;
}
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
div
{
float: left;
width: 200px;
}
.axis text
{
fill: #7c7273;
}
.axis .domain
{
opacity: 0;
}
.tick
{
stroke: #7c7273;
}
</style>
</head>
<body>
<h1>Visualising Data</h1>
<svg id="visualisation" width="800" height="600"></svg>
<form id="controls">
<div>
<h2>X axis</h2>
<ul id="x-axis">
<li><label><input checked="checked" type="radio" name="x-axis" value="rate">Metabolic Rate</label></li>
<li><label><input type="radio" name="x-axis" value="pH">pH Values</label></li>
<li><label><input type="radio" name="x-axis" value="treatment">Treatment</label></li>
<li><label><input type="radio" name="x-axis" value="temp">Measurement Temperature</label></li>
<li><label><input type="radio" name="x-axis" value="exposure">Exposure</label></li>
<li><label><input type="radio" name="x-axis" value="trial">Experimental Trial</label></li>
</ul>
</div>
<div>
<h2>Y axis</h2>
<ul id="y-axis">
<li><label><input checked="checked" type="radio" name="y-axis" value="rate">Metabolic Rate</label></li>
<li><label><input type="radio" name="y-axis" value="pH">pH Values</label></li>
<li><label><input checked="checked" name="y-axis" type="radio" value="treatment">Treatment</label></li>
<li><label><input type="radio" name="y-axis" value="temp">Measurement Temperature</label></li>
<li><label><input type="radio" name="y-axis" value="exposure">Exposure</label></li>
<li><label><input type="radio" name="y-axis" value="trial">Experimental Trial</label></li>
</ul>
</div>
<div>
<h2>Color</h2>
<ul id="color-axis">
<li><label><input checked="checked" type="radio" name="color-axis" value="rate">Metabolic Rate</label></li>
<li><label><input checked="checked" type="radio" name="color-axis" value="pH">pH Values</label></li>
<li><label><input type="radio" name="color-axis" value="treatment">Treatment</label></li>
<li><label><input type="radio" name="color-axis" value="temp">Measurement Temperature</label></li>
<li><label><input type="radio" name="color-axis" value="exposure">Exposure</label></li>
<li><label><input type="radio" name="color-axis" value="trial">Experimental Trial</label></li>
</ul>
</div>
<div>
<h2>Temperature Data</h2>
<ul id="temp">
<li><label><input type="checkbox" checked="checked" value="11">11 ºC Data</label></li>
<li><label><input type="checkbox" checked="checked" value="18">18 ºC Data</label></li>
</ul>
</div>
<div>
<h2>Dataset</h2>
<ul>
<li>
<select id="dataset">
<option value="SampleData">Raw MO2 Data</option>
</select>
</li>
</ul>
</div>
</form>
</body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="testAdam.js"></script>
</html>
Raw
SampleData.csv
rate temp treatment pH exposure trial
18.20651224 11 6 7.6 2 1
21.0809958 11 6 7.6 2 1
40.18514456 11 6 7.6 2 1
42.23135192 11 6 7.6 2 1
20.48855041 11 6 7.6 2 1
37.34098462 11 6 7.6 2 1
21.66768927 18 6 7.6 2 1
32.0015229 18 6 7.6 2 1
80.45225715 18 6 7.6 2 1
45.49893856 18 6 7.6 2 1
34.73752944 18 6 7.6 2 1
45.64871525 18 6 7.6 2 1
18.74266306 11 5 8.1 2 1
17.38712792 11 5 8.1 2 1
30.93518756 11 5 8.1 2 1
18.4462943 11 5 8.1 2 1
15.61986589 11 5 8.1 2 1
26.63216945 11 5 8.1 2 1
46.00715449 18 5 8.1 2 1
35.82354045 18 5 8.1 2 1
47.52526535 18 5 8.1 2 1
51.21731348 18 5 8.1 2 1
30.39472316 18 5 8.1 2 1
44.08203085 18 5 8.1 2 1
25.71423383 11 4 7.6 3 1
23.23410266 11 4 7.6 3 1
20.13501611 11 4 7.6 3 1
22.89557404 11 4 7.6 3 1
28.72770987 11 4 7.6 3 1
24.72296877 11 4 7.6 3 1
57.1206765 18 4 7.6 3 1
26.57852278 18 4 7.6 3 1
30.25291488 18 4 7.6 3 1
33.97392726 18 4 7.6 3 1
37.75298278 18 4 7.6 3 1
26.62348348 18 4 7.6 3 1
13.00285563 11 3 8.1 3 1
33.41928435 11 3 8.1 3 1
33.36797595 11 3 8.1 3 1
29.07925109 11 3 8.1 3 1
29.95608227 11 3 8.1 3 1
28.66141051 11 3 8.1 3 1
16.77363242 18 3 8.1 3 1
35.55206657 18 3 8.1 3 1
64.59688845 18 3 8.1 3 1
27.72396893 18 3 8.1 3 1
32.57833013 18 3 8.1 3 1
40.08891188 18 3 8.1 3 1
33.45838162 11 2 7.6 1 1
26.00165478 11 2 7.6 1 1
37.96996094 11 2 7.6 1 1
25.08993658 11 2 7.6 1 1
27.18059511 11 2 7.6 1 1
29.20419499 11 2 7.6 1 1
42.04361605 18 2 7.6 1 1
42.38559873 18 2 7.6 1 1
50.14360199 18 2 7.6 1 1
39.96413413 18 2 7.6 1 1
34.34129355 18 2 7.6 1 1
58.2354431 18 2 7.6 1 1
26.32763847 11 1 8.1 1 1
24.38579883 11 1 8.1 1 1
16.95025866 11 1 8.1 1 1
32.39623509 11 1 8.1 1 1
36.1376245 11 1 8.1 1 1
23.65376135 11 1 8.1 1 1
51.72444321 18 1 8.1 1 1
37.89803233 18 1 8.1 1 1
28.21343519 18 1 8.1 1 1
37.09894517 18 1 8.1 1 1
35.2789999 18 1 8.1 1 1
35.21343519 18 1 8.1 1 1
28.84795677 11 6 7.6 2 2
26.80767418 11 6 7.6 2 2
20.27347443 11 6 7.6 2 2
22.86061649 11 6 7.6 2 2
28.73532279 11 6 7.6 2 2
15.7452949 11 6 7.6 2 2
37.6413244 18 6 7.6 2 2
56.16644329 18 6 7.6 2 2
36.34112802 18 6 7.6 2 2
29.40843009 18 6 7.6 2 2
50.30653782 18 6 7.6 2 2
29.29967902 18 6 7.6 2 2
18.5554152 11 5 8.1 2 2
23.55841846 11 5 8.1 2 2
18.80342184 11 5 8.1 2 2
20.20861042 11 5 8.1 2 2
22.00049044 11 5 8.1 2 2
20.78342291 11 5 8.1 2 2
33.85542648 18 5 8.1 2 2
43.56512507 18 5 8.1 2 2
28.78399712 18 5 8.1 2 2
31.62049424 18 5 8.1 2 2
43.74781964 18 5 8.1 2 2
34.50492855 18 5 8.1 2 2
17.4830169 11 4 7.6 3 2
21.61547324 11 4 7.6 3 2
24.74363257 11 4 7.6 3 2
24.08622536 11 4 7.6 3 2
17.51860352 11 4 7.6 3 2
17.737025 11 4 7.6 3 2
32.54356165 18 4 7.6 3 2
24.57117304 18 4 7.6 3 2
51.43107348 18 4 7.6 3 2
54.40537954 18 4 7.6 3 2
33.255364 18 4 7.6 3 2
49.33493876 18 4 7.6 3 2
22.52674936 11 3 8.1 3 2
55.40434947 11 3 8.1 3 2
36.61555107 11 3 8.1 3 2
13.32063657 11 3 8.1 3 2
17.58409535 11 3 8.1 3 2
18.05277588 11 3 8.1 3 2
39.33915472 18 3 8.1 3 2
91.66696603 18 3 8.1 3 2
33.46974096 18 3 8.1 3 2
35.0758816 18 3 8.1 3 2
31.15525133 18 3 8.1 3 2
36.32858888 18 3 8.1 3 2
32.43670843 11 2 7.6 1 2
23.58561547 11 2 7.6 1 2
19.1141755 11 2 7.6 1 2
35.24309551 11 2 7.6 1 2
46.19465956 11 2 7.6 1 2
24.86459699 11 2 7.6 1 2
48.16983808 18 2 7.6 1 2
35.28863985 18 2 7.6 1 2
31.37201772 18 2 7.6 1 2
60.78613436 18 2 7.6 1 2
56.75304628 18 2 7.6 1 2
41.07250531 18 2 7.6 1 2
35.6655414 11 1 8.1 1 2
20.8894773 11 1 8.1 1 2
29.43495025 11 1 8.1 1 2
45.51274263 11 1 8.1 1 2
29.50149202 11 1 8.1 1 2
25.32805169 11 1 8.1 1 2
34.20843704 18 1 8.1 1 2
38.39251368 18 1 8.1 1 2
48.74686257 18 1 8.1 1 2
39.59505623 18 1 8.1 1 2
47.82594409 18 1 8.1 1 2
42.65405922 18 1 8.1 1 2
59.36257793 11 6 7.15 2 3
29.74963126 11 6 7.15 2 3
29.98950922 11 6 7.15 2 3
23.06164366 11 6 7.15 2 3
24.22597563 11 6 7.15 2 3
41.88392704 11 6 7.15 2 3
104.3236883 18 6 7.15 2 3
53.95790342 18 6 7.15 2 3
55.63108207 18 6 7.15 2 3
28.56904434 18 6 7.15 2 3
43.10551632 18 6 7.15 2 3
67.67002291 18 6 7.15 2 3
29.6309312 11 5 8.1 2 3
45.31033961 11 5 8.1 2 3
27.68074443 11 5 8.1 2 3
17.57614896 11 5 8.1 2 3
36.38679839 11 5 8.1 2 3
52.53588703 11 5 8.1 2 3
30.89935008 18 5 8.1 2 3
115.7430026 18 5 8.1 2 3
27.63666852 18 5 8.1 2 3
26.55753367 18 5 8.1 2 3
46.84280831 18 5 8.1 2 3
61.87362624 18 5 8.1 2 3
19.32827002 11 4 8.1 4 3
17.30656217 11 4 7.15 4 3
15.96661803 11 4 7.15 4 3
64.85882079 11 4 7.15 4 3
31.06930718 11 4 7.15 4 3
25.03268499 11 4 7.15 4 3
34.29496852 18 4 7.15 4 3
29.37507756 18 4 7.15 4 3
31.0787278 18 4 7.15 4 3
74.07201981 18 4 7.15 4 3
17.37116163 18 4 7.15 4 3
30.17318622 18 4 7.15 4 3
29.4899827 11 3 8.1 4 3
22.47044443 11 3 8.1 4 3
18.3075544 11 3 8.1 4 3
27.74335169 11 3 8.1 4 3
29.78829276 11 3 8.1 4 3
28.47735646 11 3 8.1 4 3
35.79275778 18 3 8.1 4 3
28.68216879 18 3 8.1 4 3
32.18374956 18 3 8.1 4 3
50.93810786 18 3 8.1 4 3
33.09777759 18 3 8.1 4 3
48.7664744 18 3 8.1 4 3
26.76220604 11 2 7.15 1 3
38.69991599 11 2 7.15 1 3
15.94386559 11 2 7.15 1 3
26.54690148 11 2 7.15 1 3
36.15955614 11 2 7.15 1 3
44.74047133 18 2 7.15 1 3
100.8416206 18 2 7.15 1 3
30.34892821 18 2 7.15 1 3
31.44760595 18 2 7.15 1 3
28.53609561 18 2 7.15 1 3
27.8482264 11 1 8.1 1 3
24.44953777 11 1 8.1 1 3
46.18390305 11 1 8.1 1 3
28.24196319 11 1 8.1 1 3
14.89777928 11 1 8.1 1 3
12.64828175 11 1 8.1 1 3
67.60957899 11 1 8.1 1 3
65.31535059 18 1 8.1 1 3
41.15674919 18 1 8.1 1 3
132.8519191 18 1 8.1 1 3
23.19651271 18 1 8.1 1 3
58.66540614 18 1 8.1 1 3
11.57044854 18 1 8.1 1 3
39.21228064 18 1 8.1 1 3
28.84795677 11 6 7.15 2 4
26.80767418 11 6 7.15 2 4
20.27347443 11 6 7.15 2 4
22.86061649 11 6 7.15 2 4
28.73532279 11 6 7.15 2 4
15.7452949 11 6 7.15 2 4
37.6413244 18 6 7.15 2 4
56.16644329 18 6 7.15 2 4
36.34112802 18 6 7.15 2 4
29.40843009 18 6 7.15 2 4
50.30653782 18 6 7.15 2 4
29.29967902 18 6 7.15 2 4
18.5554152 11 5 8.1 2 4
23.55841846 11 5 8.1 2 4
18.80342184 11 5 8.1 2 4
20.20861042 11 5 8.1 2 4
22.00049044 11 5 8.1 2 4
20.78342291 11 5 8.1 2 4
33.85542648 18 5 8.1 2 4
43.56512507 18 5 8.1 2 4
28.78399712 18 5 8.1 2 4
31.62049424 18 5 8.1 2 4
43.74781964 18 5 8.1 2 4
34.50492855 18 5 8.1 2 4
17.4830169 11 4 7.15 3 4
21.61547324 11 4 7.15 3 4
24.74363257 11 4 7.15 3 4
24.08622536 11 4 7.15 3 4
17.51860352 11 4 7.15 3 4
17.737025 11 4 7.15 3 4
32.54356165 18 4 7.15 3 4
24.57117304 18 4 7.15 3 4
51.43107348 18 4 7.15 3 4
54.40537954 18 4 7.15 3 4
33.255364 18 4 7.15 3 4
49.33493876 18 4 7.15 3 4
22.52674936 11 3 8.1 3 4
55.40434947 11 3 8.1 3 4
36.61555107 11 3 8.1 3 4
13.32063657 11 3 8.1 3 4
17.58409535 11 3 8.1 3 4
18.05277588 11 3 8.1 3 4
39.33915472 18 3 8.1 3 4
91.66696603 18 3 8.1 3 4
33.46974096 18 3 8.1 3 4
35.0758816 18 3 8.1 3 4
31.15525133 18 3 8.1 3 4
36.32858888 18 3 8.1 3 4
32.43670843 11 2 7.15 1 4
23.58561547 11 2 7.15 1 4
19.1141755 11 2 7.15 1 4
35.24309551 11 2 7.15 1 4
46.19465956 11 2 7.15 1 4
24.86459699 11 2 7.15 1 4
48.16983808 18 2 7.15 1 4
35.28863985 18 2 7.15 1 4
31.37201772 18 2 7.15 1 4
60.78613436 18 2 7.15 1 4
56.75304628 18 2 7.15 1 4
41.07250531 18 2 7.15 1 4
35.6655414 11 1 8.1 1 4
20.8894773 11 1 8.1 1 4
29.43495025 11 1 8.1 1 4
45.51274263 11 1 8.1 1 4
29.50149202 11 1 8.1 1 4
25.32805169 11 1 8.1 1 4
34.20843704 18 1 8.1 1 4
38.39251368 18 1 8.1 1 4
48.74686257 18 1 8.1 1 4
39.59505623 18 1 8.1 1 4
47.82594409 18 1 8.1 1 4
42.65405922 18 1 8.1 1 4
Raw
testAdam.js
var WIDTH = 800, // width of the graph
HEIGHT = 550, // height of the graph
MARGINS = {top: 20, right: 20, bottom: 20, left: 60}, // margins around the graph
xRange = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]), // x range function
yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]), // y range function
colorRange = d3.scale.category10(),
currentDataset,// name of the current data set. Used to track when the dataset changes
data,
xAxis = d3.svg.axis().scale(xRange).tickSize(16).tickSubdivide(true), // x axis function
yAxis = d3.svg.axis().scale(yRange).tickSize(10).orient("right").tickSubdivide(true), // y axis function
vis; // visualisation selection
// runs once when the visualisation loads
function init () {
vis = d3.select("#visualisation");
// add in the x axis
vis.append("g") // container element
.attr("class", "x axis") // so we can style it with CSS
.attr("transform", "translate(0," + HEIGHT + ")") // move into position
.call(xAxis); // add to the visualisation
// add in the y axis
vis.append("g") // container element
.attr("class", "y axis") // so we can style it with CSS
.call(yAxis); // add to the visualisation
// load data, process it and draw it
d3.csv("SampleData.csv", function(data) {
rawData = data;
currentDataset = dataset;
redraw();
});
}
// this redraws the graph based on the data in the drawingData variable
function redraw () {
var plot = vis.selectAll ("circle").data(rawData), // select the data points and set their data
axes = getAxes (); // object containing the axes we'd like to use (duration, inversions, etc.)
// add new points if they're needed
plot.enter()
.insert("circle")
.attr("cx", function (d) { return xRange (d[axes.xAxis]); })
.attr("cy", function (d) { return yRange (d[axes.yAxis]); })
.attr("r", 5)
.style("opacity", .5)
.style("fill", function (d) { return colorRange(d[axes.colorAxis]); }); // set fill colour
// the data domains or desired axes might have changed, so update them all
xRange.domain([
d3.min(rawData, function (d) { return +d[axes.xAxis]; }),
d3.max(rawData, function (d) { return +d[axes.xAxis]; })
]);
yRange.domain([
d3.min(rawData, function (d) { return +d[axes.yAxis]; }),
d3.max(rawData, function (d) { return +d[axes.yAxis]; })
]);
colorRange.domain([
d3.min(rawData, function (d) { return +d[axes.colorAxis]; }),
d3.max(rawData, function (d) { return +d[axes.colorAxis]; })
]);
// transition function for the axes
var t = vis.transition().duration(1500).ease("exp-in-out");
t.select(".x.axis").call(xAxis);
t.select(".y.axis").call(yAxis);
// transition the points
plot.transition().duration(1500).ease("exp-in-out")
.style("opacity", 0.5)
.style("fill", function (d) { return colorRange(d[axes.colorAxis]); }) // set fill colour
.attr("r", 5)
.attr("cx", function (d) { return xRange (d[axes.xAxis]); })
.attr("cy", function (d) { return yRange (d[axes.yAxis]); });
// remove points if we don't need them anymore
plot.exit()
.transition().duration(1500).ease("exp-in-out")
.attr("cx", function (d) { return xRange (d[axes.xAxis]); })
.attr("cy", function (d) { return yRange (d[axes.yAxis]); })
.style("opacity", 0.5)
.attr("r", 0)
.remove();
}
// let's kick it all off!
init ();
////////////////////
// helper functions//
/////////////////////
// return the name of the dataset which is currently selected
function getChosenDataset () {
var select = document.getElementById("dataset");
return select.options[select.selectedIndex].value;
}
// return an object containing the currently selected axis choices
function getAxes () {
var x = document.querySelector("#x-axis input:checked").value,
y = document.querySelector("#y-axis input:checked").value,
col = document.querySelector("#color-axis input:checked").value;
return {
xAxis: x,
yAxis: y,
colorAxis: col
};
}
// called every time a form field has changed
function update () {
var dataset = getChosenDataset(), // filename of the chosen dataset csv
rawData; // the data while will be visualised
// if the dataset has changed from last time, load the new csv file
if (dataset != currentDataset) {
d3.csv("SampleData.csv", function (data) {
// process new data and store it in the appropriate variables
currentDataset = dataset;
rawData = data;
redraw();
});
} else {
// process data based on the form fields and store it in the appropriate variables
rawData = data;
redraw();
}
}
// listen to the form fields changing
document.getElementById("dataset").addEventListener ("change", update, false);
document.getElementById("controls").addEventListener ("click", update, false);
document.getElementById("controls").addEventListener ("keyup", update, false);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment