Old school D3 from simpler times

All examples By author By category About

emeeks

Full window Github gist

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);

function makeHull() {
          hullLayer = map.createHullLayer(csvLayer, function(d) {return d.ccode});
          hullLayer.markerSize(1).cssClass("cityhull")
          .on("load", recolorHulls)
          map.addCartoLayer(hullLayer);
          
          function recolorHulls() {
            var hullColor = d3.scale.category20b();
              hullLayer.g()
              .selectAll("path")
              .style("fill", function(d,i) {return hullColor(i%20)});
          }
    }

}
  
</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>

xxxxxxxxxx
 
<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);
​
        function makeHull() {
          hullLayer = map.createHullLayer(csvLayer, function(d) {return d.ccode});
          hullLayer.markerSize(1).cssClass("cityhull")
          .on("load", recolorHulls)
          map.addCartoLayer(hullLayer);
          
          function recolorHulls() {
            var hullColor = d3.scale.category20b();
              hullLayer.g()
              .selectAll("path")
              .style("fill", function(d,i) {return hullColor(i%20)});
          }
    }
​
  }
  
</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