An example of d3-contour for density estimation.
forked from mbostock's block: Density Contours
xxxxxxxxxx
<style>
.domain {
display: none;
}
</style>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-contour.v1.min.js"></script>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
margin = {top: 20, right: 30, bottom: 30, left: 40};
var x = d3.scaleLinear()
.rangeRound([margin.left, width - margin.right]);
var y = d3.scaleLinear()
.rangeRound([height - margin.bottom, margin.top]);
d3.tsv("faithful.tsv", function(d) {
d.eruptions = +d.eruptions;
d.waiting = +d.waiting;
return d;
}, function(error, faithful) {
if (error) throw error;
x.domain(d3.extent(faithful, function(d) { return d.waiting; })).nice();
y.domain(d3.extent(faithful, function(d) { return d.eruptions; })).nice();
svg.insert("g", "g")
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-linejoin", "round")
.selectAll("path")
.data(d3.contourDensity()
.x(function(d) { return x(d.waiting); })
.y(function(d) { return y(d.eruptions); })
.size([width, height])
.bandwidth(40)
(faithful))
.enter().append("path")
.attr("d", d3.geoPath());
svg.append("g")
.attr("stroke", "white")
.selectAll("circle")
.data(faithful)
.enter().append("circle")
.attr("cx", function(d) { return x(d.waiting); })
.attr("cy", function(d) { return y(d.eruptions); })
.attr("r", 2);
svg.append("g")
.attr("transform", "translate(0," + (height - margin.bottom) + ")")
.call(d3.axisBottom(x))
.select(".tick:last-of-type text")
.select(function() { return this.parentNode.appendChild(this.cloneNode()); })
.attr("y", -3)
.attr("dy", null)
.attr("font-weight", "bold")
.text("Idle (min.)");
svg.append("g")
.attr("transform", "translate(" + margin.left + ",0)")
.call(d3.axisLeft(y))
.select(".tick:last-of-type text")
.select(function() { return this.parentNode.appendChild(this.cloneNode()); })
.attr("x", 3)
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text("Erupting (min.)");
});
</script>
https://d3js.org/d3.v4.min.js
https://d3js.org/d3-contour.v1.min.js