block by emeeks 80dc1e4c11586c47a266

Simple Choropleth - d3.carto.map

Full Screen

A simple choropleth map made with d3.carto.map.

After adding a topojson layer, you can access the features either by using map.layers() or the layer if assigned to a variable or via d3.selectAll.data() on the appropriate elements. You can then style the features based on their properties. In this case, the size of the ward.

Some hover behavior can also be defined using D3.

index.html

<html xmlns="//www.w3.org/1999/xhtml">
<head>
  <title>d3.carto.map - Simple Chloropleth</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;
  }
.wards {
    fill: gray;
    stroke: gray;
    stroke-width: 1px;
}
</style>
<script>
  function makeSomeMaps() {
    map = d3.carto.map();

    d3.select("#map").call(map);
    
    map.mode("projection");

    var projection = d3.geo.conicEquidistant()
    .center([-0.0275,51.307])
    .scale(84000)
    .translate(map.zoom().translate())
    .precision(.1);

    map.projection(projection);
    map.refresh();
    
    topojsonLayer = d3.carto.layer();
    topojsonLayer
    .type("topojson")
    .path("glondon.topojson")
    .label("London Wards")
    .cssClass("wards")
    .renderMode("svg")
    .on("load", colorBySize);

    map.addCartoLayer(topojsonLayer);
    
// Function is called on load because it won't have anything to apply to until the layer is loaded
    function colorBySize() {
    var featureData = topojsonLayer.features();
    var sizeExtent = d3.extent(featureData, function (d) {return d.properties.w_size})
    var sizeScale = d3.scale.quantile().domain(sizeExtent).range(colorbrewer.Greens[5]);

      d3.selectAll("path.wards")
      .style("fill", function (d) {return sizeScale(d.properties.w_size)})
    
    //Some simple hover behavior
    d3.selectAll("path.wards").style("pointer-events", "auto").on("mouseover", wardOver).on("mouseout", wardOut);
    
    function wardOver(d,i) {
      d3.selectAll("path.wards").style("stroke-width", function (p) {return p.properties.region == d.properties.region ? 0 : 1})
    }

    function wardOut(d,i) {
      d3.selectAll("path.wards").style("stroke-width", "1px")
    }

    }

  }
</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="//d3js.org/d3.geo.projection.v0.min.js" type="text/javascript">
</script>
<script src="//d3js.org/colorbrewer.v1.min.js"></script>
<script src="//bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/tile.js" type="text/javascript">
</script>
<script src="//bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/d3.quadtiles.js" type="text/javascript">
</script>
<script src="//bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/d3.geo.raster.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>

d3map.css

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