Last active
February 10, 2016 21:08
-
-
Save daluu/6930fa129bffea638189 to your computer and use it in GitHub Desktop.
Histogram with CDF line overlaid using nvd3.js
We can make this file beautiful and searchable if this error is corrected: No commas found in this CSV file in line 0.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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