Automated Convex Hulls - d3.carto

Automated convex hull layers in d3.carto.map.

map.createHullLayer takes a d3.carto.layer and an accessor function that identifies the categorical attributes of the features in that carto layer from which to create hulls. In this example, hulls are created based on the "ccode" attribute of a feature.

<html xmlns="https://www.w3.org/1999/xhtml">
<head>
  <title>d3.carto - Automated Convex Hulls</title>
  <meta charset="utf-8" />
    <link type="text/css" rel="stylesheet" href="d3map.css" />
</head>
<style>
  html,body {
    height: 100%;
    width: 100%;
    margin: 0;
  }

#map {
    height: 100%;
    width: 100%;
    position: absolute;
  }
  .cityhull {
    fill: purple;
    fill-opacity: .5;
    stroke: black;
    stroke-width: 1px;
  }
  
  .point {
    fill: darkred;
    stroke: black;
    stroke-width: 1px;
  }

</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("all_sites.csv")
    .label("CSV Points")
    .cssClass("point")
    .renderMode("canvas")
    .markerSize(1)
    .x("xcoord")
    .y("ycoord")
    .on("load", makeHull)
    .clickableFeatures(true);

map.addCartoLayer(tileLayer)
    .addCartoLayer(csvLayer);
    map.centerOn([-115,40],"latlong").setScale(2);

}
  
</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="/emeeks/f3105fda25ff785dc5ed/example/tile.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

Updated missing url http://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/tile.js to /emeeks/f3105fda25ff785dc5ed/example/tile.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://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/tile.js

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