Skip to content

Instantly share code, notes, and snippets.

@Prinzhorn

Prinzhorn/README.md

Forked from weiglemc/.block
Last active August 29, 2015 14:06
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 Prinzhorn/e1828ab8114ba69445f2 to your computer and use it in GitHub Desktop.
Save Prinzhorn/e1828ab8114ba69445f2 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
README.md
Raw
cereal.csv
timestamp velocity
1410965471098 51.21527777777778
1410965471111 48.654513888888886
1410965471127 46.221788194444436
1410965471144 43.910698784722214
1410965471160 41.7151638454861
1410965471176 39.6294056532118
1410965471193 37.64793537055121
1410965471209 35.765538602023646
1410965471225 33.97726167192246
1410965471242 32.27839858832634
1410965471259 30.66447865891002
1410965471275 29.131254725964517
1410965471291 27.67469198966629
1410965471308 26.290957390182975
1410965471324 24.976409520673826
1410965471341 23.727589044640133
1410965471357 22.541209592408126
1410965471379 21.41414911278772
1410965471394 20.343441657148333
1410965471411 19.326269574290915
1410965471429 18.35995609557637
1410965471441 17.44195829079755
1410965471464 16.569860376257672
1410965471475 15.741367357444789
1410965471493 14.954298989572548
1410965471508 14.20658404009392
1410965471526 13.496254838089223
1410965471543 12.82144209618476
1410965471559 12.180369991375523
1410965471575 11.571351491806746
1410965471592 10.992783917216409
1410965471610 10.443144721355587
1410965471624 9.920987485287807
1410965471641 9.424938111023415
1410965471658 8.953691205472245
1410965471677 8.506006645198632
1410965471690 8.0807063129387
1410965471704 7.676670997291764
1410965471723 7.292837447427176
1410965471739 6.928195575055817
1410965471754 6.581785796303025
1410965471774 6.252696506487874
1410965471789 5.94006168116348
1410965471805 5.643058597105306
1410965471821 5.360905667250041
1410965471839 5.092860383887539
1410965471856 4.838217364693161
1410965471870 4.596306496458503
1410965471887 4.366491171635578
1410965471902 4.148166613053799
1410965471920 3.9407582824011085
1410965471934 3.743720368281053
1410965471952 3.556534349867
1410965471970 3.37870763237365
1410965471988 3.209772250754967
1410965472000 3.0492836382172186
1410965472018 2.8968194563063574
1410965472038 2.7519784834910395
1410965472049 2.6143795593164874
1410965472065 2.4836605813506627
1410965472087 2.3594775522831295
1410965472100 2.241503674668973
1410965472119 2.129428490935524
1410965472135 2.0229570663887477
1410965472150 1.9218092130693103
1410965472165 1.8257187524158447
1410965472183 1.7344328147950523
1410965472198 1.6477111740552997
1410965472216 1.5653256153525346
1410965472231 1.4870593345849077
1410965472248 1.4127063678556622
1410965472266 1.342071049462879
1410965472279 1.2749674969897349
1410965472297 1.2112191221402482
1410965472317 1.1506581660332358
1410965472330 1.093125257731574
1410965472345 1.0384689948449952
1410965472364 0.9865455451027454
1410965472382 0.9372182678476081
1410965472397 0.8903573544552277
1410965472411 0.8458394867324662
1410965472432 0.8035475123958429
1410965472447 0.7633701367760507
1410965472461 0.7252016299372481
1410965472478 0.6889415484403857
1410965472495 0.6544944710183663
1410965472513 0.621769747467448
1410965472529 0.5906812600940755
1410965472543 0.5611471970893717
1410965472561 0.5330898372349031
1410965472577 0.5064353453731579
1410965472593 0.4811135781045
1410965472608 0.457057899199275
1410965472626 0.4342050042393112
1410965472643 0.4124947540273456
1410965472661 0.3918700163259783
1410965472673 0.37227651550967933
1410965472693 0.35366268973419535
1410965472707 0.3359795552474856
1410965472724 0.3191805774851113
1410965472739 0.3032215486108557
1410965472762 0.2880604711803129
1410965472774 0.27365744762129723
1410965472788 0.2599745752402324
1410965472806 0.24697584647822074
1410965472823 0.2346270541543097
1410965472840 0.2228957014465942
1410965472859 0.2117509163742645
1410965472871 0.20116337055555125
1410965472892 0.19110520202777367
1410965472904 0.181549941926385
1410965472926 0.17247244483006574
1410965472939 0.16384882258856245
1410965472955 0.15565638145913432
1410965472969 0.1478735623861776
1410965472990 0.14047988426686872
1410965473004 0.1334558900535253
1410965473019 0.12678309555084902
1410965473036 0.12044394077330656
1410965473057 0.11442174373464123
1410965473069 0.10870065654790917
1410965473084 0.1032656237205137
Raw
index.html
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<!-- Example based on http://bl.ocks.org/mbostock/3887118 -->
<!-- Tooltip example from http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html -->
<style>
body {
font: 11px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.dot {
stroke: #000;
}
.tooltip {
position: absolute;
width: 200px;
height: 28px;
pointer-events: none;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
/*
* value accessor - returns the value to encode for a given data object.
* scale - maps value to a visual display encoding, such as a pixel position.
* map function - maps from data value to display value
* axis - sets up axis
*/
// setup x
var xValue = function(d) { return d.Calories;}, // data -> value
xScale = d3.scale.linear().range([0, width]), // value -> display
xMap = function(d) { return xScale(xValue(d));}, // data -> display
xAxis = d3.svg.axis().scale(xScale).orient("bottom");
// setup y
var yValue = function(d) { return d["Protein (g)"];}, // data -> value
yScale = d3.scale.linear().range([height, 0]), // value -> display
yMap = function(d) { return yScale(yValue(d));}, // data -> display
yAxis = d3.svg.axis().scale(yScale).orient("left");
// setup fill color
var cValue = function(d) { return d.Manufacturer;},
color = d3.scale.category10();
// add the graph canvas to the body of the webpage
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// add the tooltip area to the webpage
var tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
// load data
d3.csv("cereal.csv", function(error, data) {
// change string (from CSV) into number format
data.forEach(function(d) {
d.timestamp = +d.timestamp;
d.velocity = +d.velocity;
});
// don't want dots overlapping axis, so add in buffer to data domain
xScale.domain([d3.min(data, xValue)-1, d3.max(data, xValue)+1]);
yScale.domain([d3.min(data, yValue)-1, d3.max(data, yValue)+1]);
// x-axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("class", "label")
.attr("x", width)
.attr("y", -6)
.style("text-anchor", "end");
// y-axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("class", "label")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end");
// draw dots
svg.selectAll(".dot")
.data(data)
.enter().append("circle")
.attr("class", "dot")
.attr("r", 3.5)
.attr("cx", xMap)
.attr("cy", yMap)
.style("fill", function(d) { return color(cValue(d));});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment