D3 Examples - Cartogram Experiments

xxxxxxxxxx
 
<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>
    