Automated Voronoi Layer - d3.carto

Automatic voronoi generation in d3.carto.map allows for the creation of regions from point data.

The map.createVoronoiLayer function takes two variable: a point d3.carto.layer (either CSV or XY Array) and a margin (in degrees). It creates a feature carto layer that splits the area of the points into regions.

This will have issues if you pass point data that has more than one point at the same XY location.

<html xmlns="https://www.w3.org/1999/xhtml">
<head>
  <title>d3.carto - Automatic Voronoi</title>
  <meta charset="utf-8" />
    <link type="text/css" rel="stylesheet" href="d3map.css" />
    <link type="text/css" rel="stylesheet" href="https://raw.githubusercontent.com/emeeks/d3-carto-map/master/examples/example.css" />
</head>
<style>
  html,body {
    height: 100%;
    width: 100%;
    margin: 0;
  }

#map {
    height: 100%;
    width: 100%;
    position: absolute;
  }
  
  .voronoi {
    fill-opacity: .3;
    stroke: black;
    stroke-width: 2;
  }

</style>
<script>
      function makeSomeMaps() {
    map = d3.carto.map();

d3.select("#map").call(map);
    
    tileLayer = d3.carto.layer();
    tileLayer
    .type("tile")
    .path("elijahmeeks.map-azn21pbi")
    .label("Base")
    
    csvLayer = d3.carto.layer.csv();
    csvLayer
    .path("sample_points.csv")
    .label("CSV Points")
    .cssClass("pinkcircle")
    .renderMode("canvas")
    .markerColor("black")
    .markerSize(1)
    .x("x")
    .y("y")
    .on("load", makeVoronoi)
    
    map.addCartoLayer(tileLayer).addCartoLayer(csvLayer);
    map.setScale(3);
    
    function makeVoronoi() {
      voronoiLayer = map.createVoronoiLayer(csvLayer, .5);

voronoiLayer
      .label("Voronoi")
      .cssClass("voronoi")
      .on("load", colorVoronoi);
      
      map.addCartoLayer(voronoiLayer);
      
      function colorVoronoi() {
      var colorScale = d3.scale.linear().domain([60,80,100]).range(["green","yellow","red"])
        voronoiLayer.g().selectAll("path")
        .style("fill", function(d) {return colorScale(d.properties.node.rank)});
      }
      
    }

}
</script>
<body onload="makeSomeMaps()">
<div id="map"></div>
<footer>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8" type="text/javascript"></script>
<script src="https://d3js.org/topojson.v1.min.js" type="text/javascript">
</script>
<script src="https://d3js.org/d3.geo.projection.v0.min.js" type="text/javascript">
</script>
<script src="/emeeks/f3105fda25ff785dc5ed/example/tile.js" type="text/javascript">
</script>
<script src="/emeeks/f3105fda25ff785dc5ed/example/d3.quadtiles.js" type="text/javascript">
</script>
<script src="/emeeks/f3105fda25ff785dc5ed/example/d3.geo.raster.js" type="text/javascript">
</script>
<script src="https://cdn.jsdelivr.net/gh/emeeks/d3-carto-map/d3.carto.map.js" type="text/javascript">
</script>
</footer>
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

Modified http://d3js.org/d3.geo.projection.v0.min.js to a secure url

Updated missing url http://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/tile.js to /emeeks/f3105fda25ff785dc5ed/example/tile.js

Updated missing url http://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/d3.quadtiles.js to /emeeks/f3105fda25ff785dc5ed/example/d3.quadtiles.js

Updated missing url http://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/d3.geo.raster.js to /emeeks/f3105fda25ff785dc5ed/example/d3.geo.raster.js

Updated missing url https://rawgit.com/emeeks/d3-carto-map/master/d3.carto.map.js to https://cdn.jsdelivr.net/gh/emeeks/d3-carto-map/d3.carto.map.js

https://d3js.org/d3.v3.min.js

https://d3js.org/topojson.v1.min.js

https://d3js.org/d3.geo.projection.v0.min.js

https://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/tile.js

https://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/d3.quadtiles.js

https://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/d3.geo.raster.js

https://rawgit.com/emeeks/d3-carto-map/master/d3.carto.map.js