Skip to content

Instantly share code, notes, and snippets.

@timelyportfolio
Last active January 11, 2018 03:52
Show Gist options
  • Save timelyportfolio/8054b507faa94c89a09a379b605b0c7b to your computer and use it in GitHub Desktop.
Save timelyportfolio/8054b507faa94c89a09a379b605b0c7b to your computer and use it in GitHub Desktop.
d3 kde using simple-statistics
license: mit

Built with blockbuilder.org

Working on a d3v3 project where a density plot might be helpful. There are other examples out there. I wanted to try with the fantastic simple-statistics.

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/simple-statistics@5.2.1/dist/simple-statistics.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<script>
var width = 960, height = 500
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(100,0)")
// from http://bl.ocks.org/mbostock/4349187
// Sample from a normal distribution with mean 0, stddev 1.
function normal() {
var x = 0,
y = 0,
rds, c;
do {
x = Math.random() * 2 - 1;
y = Math.random() * 2 - 1;
rds = x * x + y * y;
} while (rds == 0 || rds > 1);
c = Math.sqrt(-2 * Math.log(rds) / rds); // Box-Muller transform
return x * c; // throw away extra sample y * c
}
var data = []
for(var i = 0; i < 10000; i++) {
data.push(normal())
}
var kde = ss.kernelDensityEstimation(data)
var breaks = ss.equalIntervalBreaks(data, 100)
var sc_x = d3.scale.linear()
.range([0, width - 100])
var sc_y = d3.scale.linear()
.range([0, height])
.domain(d3.extent(breaks))
var path = svg.append("path")
.attr("d", d3.svg.line().interpolate("basis")(
breaks.map(function(d) {
return [sc_x(kde(d)), sc_y(d)]
})
))
.style("fill", "none")
.style("stroke", "black")
svg.append("g")
.call(d3.svg.axis().orient("left").scale(sc_y))
.selectAll("line,path")
.style("fill", "none")
.style("stroke", "black")
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment