D3 Examples - Small Maptiples

xxxxxxxxxx
 
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
  <title>d3.carto - Small Multiples with Maps</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;
  }
  
  .country {
    fill: none;
    stroke: lightgray;
    stroke-width: 1px;
  }
  
  .smallmap {
    width: 33%;
    float: left;
    border: 1px lightgray solid;
  }
​
</style>
<script>
    function makeSomeMaps() {
​
    mapImageArray = [];
    map = d3.carto.map();
    d3.select("#map").call(map);
​
    map.setScale(1)
​
    countryLayer = d3.carto.layer.topojson();
    
    countryLayer.path("world.topojson")
    .label("Countries")
    .renderMode("canvas")
    .cssClass("country");
​
    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", smallMaptiples)
​
    map.addCartoLayer(countryLayer).addCartoLayer(csvLayer);
    
    function smallMaptiples() {
    var cityAtts = ["aq", "ar", "arid", "capacity", "de", "delivery", "pop", "qu","region"];
    var cityData = csvLayer.features()
​
    for (var att in cityAtts) {
      
    var attExtent = d3.extent(cityData, function(d) {return parseFloat(d[cityAtts[att]])});
    var colorScale = d3.scale.linear().domain([attExtent[0],(attExtent[0] + attExtent[1])/2,attExtent[1]]).range(["green","yellow","red"])
​
    csvLayer
    .markerColor(function(d) {return colorScale(d[cityAtts[att]])})
    .strokeColor(function(d) {return colorScale(d[cityAtts[att]])})
​
    map.refresh();
    mapImageArray.push(d3.select("canvas").node().toDataURL());
​
    }
    
    window.onresize(null);
    d3.select("#map").remove();
    d3.select("body").append("div").selectAll("img").data(mapImageArray).enter().append("img").attr("class", "smallmap").attr("src", function(d) {return d})
    }
  }
</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://cdn.jsdelivr.net/gh/emeeks/d3-carto-map/d3.carto.map.js" type="text/javascript">
</script>
<script src="https://d3js.org/topojson.v1.min.js" type="text/javascript">
</script>
</footer>
</body>
</html>
    
Small Maptiples - d3.carto

hello world
