<!DOCTYPE HTML>
<html lang="en">
<head>
<title>cartogram</title>
<link rel="stylesheet" type="text/css" href="footprint.css"/>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://d3js.org/queue.v1.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script type="text/javascript" src="http://prag.ma/code/d3-cartogram/cartogram.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
var cartogram = d3.cartogram()
.projection(d3.geo.albersUsa())
.value(function(d) {
return Math.random() * 100;
});
d3.json("http://zhicongchen.github.io/newsmap/data/china_cities_topo.json", function(topology) {
var features = cartogram(topology, topology.objects.china_cities.geometries);
d3.select("svg").selectAll("path")
.data(features)
.enter()
.append("path")
.attr("d", cartogram.path);
});
</script>
</body>
</html>
We tried the toy code above to visualize the cartogram of China cities. However, we get a Uncaught TypeError: Cannot read property '0' of null. Any idea?