Skip to content

Instantly share code, notes, and snippets.

@daluu

daluu/dataset.csv

Last active February 10, 2016 21:08
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 daluu/6930fa129bffea638189 to your computer and use it in GitHub Desktop.
Save daluu/6930fa129bffea638189 to your computer and use it in GitHub Desktop.
Download ZIP
Histogram with CDF line overlaid using nvd3.js
Raw
dataset.csv
We can make this file beautiful and searchable if this error is corrected: No commas found in this CSV file in line 0.
Distance
2.4059769174850905
2.7600000000000002
3.8217080187144488
2.3899284588203313
3.7264403738739054
7.63
3.16
3.1600000000000006
3.160000000000001
2.06
1.9728802107932477
1.7180599494369857
1.747203022782844
2.39
2.06
2.06
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
#chart svg {
height: 400px;
width: 800px;
}
</style>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css">
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.min.js"></script>
<script src="//cdn.jsdelivr.net/jstat/1.5.2/jstat.min.js"></script>
<body>
<div id="chart">
<svg></svg>
</div>
<script>
//based off http://nvd3.org/examples/linePlusBar.html and http://bl.ocks.org/daluu/f58884c24ff893186416
//tweaked with help from http://stackoverflow.com/questions/35264069/adapting-nvd3-lineplusbarchart-to-a-histogram-with-cumulative-percentage-line
var finalDataset = null; //for debugging in JS console
//define margins for chart, histogram bin size, and the x scale for the bins
var m = {top: 30, right: 60, bottom: 50, left: 70}
, h = 400 - m.top - m.bottom
, w = 400 - m.left - m.right
, numBins = 10;
var x = d3.scale.linear().domain([0, 10]).range([0, w]);
var dataset = [2.4059769174850905,
2.7600000000000002,
3.8217080187144488,
2.3899284588203313,
3.7264403738739054,
7.63,
3.16,
3.1600000000000006,
3.160000000000001,
2.06,
1.9728802107932477,
1.7180599494369857,
1.747203022782844,
2.39,
2.06,
2.06];
//in case we want to deal with the unaltered data
//generate the histogram bin'd dataset using d3 histogram methods (which should use x scale defined above?)
//and generate the CDF values using jStat - https://github.com/jstat/jstat
var jstat = this.jStat(dataset);
binData = d3.layout.histogram().bins(x.ticks(numBins))(dataset);
var convertedData = [];
var countObj = {'key': 'Count', 'bar': true, 'color': '#ccf', 'values': []};
var cdfObj = {'key': 'CDF', 'color': '#333', 'values': []};
for(var i = 0; i < binData.length; i++){
countObj.values.push([binData[i].x,binData[i].y]);
cdfObj.values.push([binData[i].x,jstat.normal(jstat.mean(), jstat.stdev()).cdf(binData[i].x)]);
}
convertedData.push(countObj);
convertedData.push(cdfObj);
data = convertedData;
finalDataset = data;
nv.addGraph(function() {
var chart = nv.models.linePlusBarChart()
.margin({top: m.top, right: m.right, bottom: m.bottom, left: m.left})
.width(500)
//We can set x data accessor to use index. Reason? So the bars all appear evenly spaced.
.x(function(d,i) { return i })
.y(function(d,i) {return d[1] })
.focusEnable(false)
;
chart.xAxis.tickFormat(function(d) {
return d
});
chart.xAxis.ticks(data[0].values.length)
chart.y1Axis
.tickFormat(d3.format(',f'));
chart.y2Axis
.tickFormat(function(d) { return d3.format('%')(d) });
chart.bars.forceY([0]);
d3.select('#chart svg')
.datum(data)
.transition()
.duration(0)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment