Cartogram Experiments

Automatic continuous area cartogram deformation of topojson layers in d3.carto.map using Shawn Allen's d3.cartogram.

This is available (as long as you call cartogram.js) with map.continuousCartogram(topojsonLayer, attributeAccessor). You can change the mode by clicking the buttons and re-run the cartogram by clicking cartogram.

The cartogram doesn't seem to work so well in mercator projection and if anyone knows why, I'd love to hear a reason.

This example uses yet another variation on d3.svg.legend.

<html xmlns="https://www.w3.org/1999/xhtml">
<head>
  <title>d3.carto - Automatic Continuous Area Cartogram</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 {
    stroke: lightgray;
    stroke-width: 1px;
  }
  
  .smallmap {
    width: 33%;
    float: left;
    border: 1px lightgray solid;
  }

#legend {
    position: absolute;
    left: 20px;
    bottom: 20px;
    width: 400px;
    height: 95px;
    background: white;
    z-index: 99;
  }
      #buttondiv {
    position: absolute;
    left: 120px;
    top: 20px;
    background: white;
    z-index: 99;
  }
</style>
<script>
    function makeSomeMaps() {

colorScale = d3.scale.linear().domain([0,1,100,1000,10000,16000]).range(["gray","blue","green","yellow","red","darkred"])
    
    legend = d3.svg.legend().unitLabel("billion")
    .unitTranslate([10,0])
    .formatter(d3.format(".0f"))
    .title("GDP")
    .scale(colorScale);
    
    d3.select("#legend").append("svg").style("width", "100%").style("height", "100%").append("g").attr("transform", "translate(20,35)").attr("class", "legend").call(legend);

map = d3.carto.map();
    d3.select("#map").call(map);

map.mode("projection");

countryLayer = d3.carto.layer.topojson();
    
    countryLayer.path("world.topojson")
    .label("Countries")
    .renderMode("svg")
    .cssClass("country")
    .on("load", runCarto);

map.addCartoLayer(countryLayer);
    
    function runCarto() {
      d3.selectAll("path").style("fill", function(d) {return colorScale(parseFloat(d.properties.gdp))})
      map.continuousCartogram(countryLayer, function(d) {return d.properties.gdp});
    }
    
    d3.select("#buttondiv").append("button").html("cartogram").on("click", runCarto);
    d3.select("#buttondiv").append("button").html("globe").on("click", function() {map.mode("globe")});
    d3.select("#buttondiv").append("button").html("mercator").on("click", function() {map.mode("transform")});
    d3.select("#buttondiv").append("button").html("equidistant").on("click", function() {map.mode("projection")});
  }
</script>
<body onload="makeSomeMaps()">
<div id="map"></div>
<div id="legend"></div>
<div id="buttondiv"></div>
<footer>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8" type="text/javascript"></script>
<script src="https://d3js.org/colorbrewer.v1.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>
<script src="cartogram.js" type="text/javascript">
</script>
<script src="legend.js" type="text/javascript">
</script>
</footer>
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/colorbrewer.v1.min.js to a secure url

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

Modified http://d3js.org/topojson.v1.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://d3js.org/colorbrewer.v1.min.js

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

https://d3js.org/topojson.v1.min.js