Creates a d3-voronoi diagram for a couple of random coordinates. The color of the polygons is defined by a continuous color scheme based on ColorBrewer using d3-scale-chromatic.
Example in D3 v4.0
Creates a d3-voronoi diagram for a couple of random coordinates. The color of the polygons is defined by a continuous color scheme based on ColorBrewer using d3-scale-chromatic.
Example in D3 v4.0
<script src="https://d3js.org/d3.v4.0.0-rc.2.min.js"></script> | |
<script src="https://d3js.org/d3-color.v0.5.min.js"></script> | |
<script src="https://d3js.org/d3-interpolate.v0.9.min.js"></script> | |
<script src="https://d3js.org/d3-scale-chromatic.v0.3.min.js"></script> | |
<div id="viz"></div> | |
<script> | |
var width = 960, | |
height = 500; | |
var svg = d3.select('#viz').append('svg') | |
.attr('width',width) | |
.attr('height',height); | |
var n = 2000; | |
var data = d3.range(n).map(function() { return d3.range(2).map(Math.random) }); | |
var voronoi = d3.voronoi() | |
.x(function(d) {return d[0]*width}) | |
.y(function(d) {return d[1]*height}) | |
.size([width, height]); | |
var pointareas = svg.selectAll('areas') | |
.data(voronoi.polygons(data)) | |
.enter().append('path') | |
.attr('d', function(d) { return "M" + d.join("L") + "Z"; }) | |
.style('fill', function(d) { | |
return d3.interpolateRdYlBu(d.data[0])}); | |
pointareas.on("mouseover", function(d,i ) { | |
pointareas | |
.style('fill', function(p) { | |
dist = Math.sqrt(Math.pow((d.data[0] - p.data [0]),2) + Math.pow((d.data[1] - p.data [1]),2)) | |
return d3.interpolateRdYlBu(dist) | |
}); | |
}) | |
</script> |