D3 Examples - Game of Thrones

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<title>Non-Contiguous Cartogram</title>
<style>
​
.land {
  fill: #fff;
  stroke: #ccc;
}
​
.state {
  fill: #ccc;
  stroke: #666;
}
​
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>
​
// Game of Thrones Interest According to Google
​
var valueById = [NaN,
  3.25437420288967,
  4.75882124513785,
  NaN,
  3.97490162749475,
  3.18993327611618,
  5.05309031656387,
  NaN,
  4.57222519514216,
  5.2593108444469,
  4.39294568091876,
  6.82095846929075,
  3.81904350536634,
  3.52542148736538,
  NaN,
  4.48168907033806,
  3.00416602394643,
  4.95303242439511,
  3.52542148736538,
  3.32011692273655,
  3.38718773362133,
  3.89619330179521,
  3.74342137726086,
  4.05519996684467,
  5.69734342267199,
  7.38905609893065,
  3.89619330179521,
  4.39294568091876,
  2.7731947639643,
  3.66929666761924,
  3.59663972556928,
  3.45561346476268,
  3.81904350536634,
  4.75882124513785,
  6.17185844988355,
  3.32011692273655,
  6.04964746441295,
  3.45561346476268,
  3.66929666761924,
  3.52542148736538,
  3.81904350536634,
  3.81904350536634,
  5.15516951223468,
  NaN,
  5.4739473917272,
  3.12676836518616,
  3.064854203293,
  3.38718773362133,
  3.89619330179521,
  3.59663972556928,
  4.30595952834521,
  4.85495581123743,
  NaN,
  4.85495581123743,
  3.59663972556928,
  3.66929666761924,
  2.94467955106552,
  NaN
    ];
  
  
  
  
var path = d3.geo.path();
​
var svg = d3.select("body").append("svg")
    .attr("width", 960)
    .attr("height", 500);
​
d3.json("us.json", function(error, us) {
  if (error) throw error;
​
  svg.append("path")
      .datum(topojson.feature(us, us.objects.land))
      .attr("class", "land")
      .attr("d", path);
​
  svg.selectAll(".state")
      .data(topojson.feature(us, us.objects.states).features)
    .enter().append("path")
      .attr("class", "state")
      .attr("d", path)
      .attr("transform", function(d) {
        var centroid = path.centroid(d),
            x = centroid[0],
            y = centroid[1];
        return "translate(" + x + "," + y + ")"
            + "scale(" + Math.sqrt(valueById[d.id] * 0.2 || 2) + ")"
            + "translate(" + -x + "," + -y + ")";
      })
      .style("stroke-width", function(d) {
        return 1 / Math.sqrt(valueById[d.id] * 5 || 1);
      });
});
​
</script>
​
    