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="//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="//d3js.org/d3.v3.min.js" charset="utf-8" type="text/javascript"></script>
<script src="//d3js.org/topojson.v1.min.js" type="text/javascript">
</script>
<script src="//bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/tile.js" type="text/javascript">
</script>
<script src="https://rawgit.com/emeeks/d3-carto-map/master/d3.carto.map.js" type="text/javascript">
</script>
</footer>
</body>
</html>
path,circle,rect,polygon,ellipse,line {
vector-effect: non-scaling-stroke;
}
svg, canvas {
top: 0;
}
#d3MapZoomBox {
position: absolute;
z-index: 10;
height: 100px;
width: 25px;
top: 10px;
right: 50px;
}
#d3MapZoomBox > button {
height:25px;
width: 25px;
line-height: 25px;
}
.d3MapControlsBox > button {
font-size:22px;
font-weight:900;
border: none;
height:25px;
width:25px;
background: rgba(35,31,32,.85);
color: white;
padding: 0;
cursor: pointer;
}
.d3MapControlsBox > button:hover {
background: black;
}
#d3MapPanBox {
position: absolute;
z-index: 10;
height: 100px;
width: 25px;
top: 60px;
right: 50px;
}
#d3MapPanBox > button {
height:25px;
width: 25px;
line-height: 25px;
}
#d3MapPanBox > button#left {
position: absolute;
left: -25px;
top: 10px;
}
#d3MapPanBox > button#right {
position: absolute;
right: -25px;
top: 10px;
}
#d3MapLayerBox {
position: relative;
z-index: 10;
height: 100px;
width: 120px;
top: 10px;
left: 10px;
overflow: auto;
color: white;
background: rgba(35,31,32,.85);
}
#d3MapLayerBox > div {
margin: 5px;
border: none;
}
#d3MapLayerBox ul {
list-style: none;
padding: 0;
margin: 0;
cursor: pointer;
}
#d3MapLayerBox li {
list-style: none;
padding: 0;
}
#d3MapLayerBox li:hover {
font-weight:700;
}
#d3MapLayerBox li input {
cursor: pointer;
}
div.d3MapModal {
position: absolute;
z-index: 11;
background: rgba(35,31,32,.90);
top: 50px;
left: 50px;
color: white;
max-width: 400px;
}
div.d3MapModalContent {
width:100%;
height: 100%;
overflow: auto;
}
div.d3MapModalContent > p {
padding: 0px 20px;
margin: 5px 0;
}
div.d3MapModalContent > h1 {
padding: 0px 20px;
font-size: 20px;
}
div.d3MapModalArrow {
content: "";
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid rgba(35,31,32,.90);
position: absolute;
bottom: -20px;
left: 33px;
}
#d3MapSVG {
}
rect.minimap-extent {
fill: rgba(200,255,255,0.35);
stroke: black;
stroke-width: 2px;
stroke-dasharray: 5 5;
}
circle.newpoints {
fill: black;
stroke: red;
stroke-width: 2px;
}
path.newfeatures {
fill: steelblue;
fill-opacity: .5;
stroke: pink;
stroke-width: 2px;
}