Old school D3 from simpler times

All examples By author By category About

allardw

Full window Github gist

Voroni & Chromatic Scale

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>

https://d3js.org/d3.v4.0.0-rc.2.min.js

https://d3js.org/d3-color.v0.5.min.js

https://d3js.org/d3-interpolate.v0.9.min.js

https://d3js.org/d3-scale-chromatic.v0.3.min.js