I have 2 GEOJSON files - 1st contains map of indian states ('India-simple.GEOJSON'), and the second is cartogram based on Gross State Domestic Product of that state ('India-cartogram.GEOJSON'). I tried to transition the normal map to cartogram based on http://metrocosm.com/how-to-make-cartograms-with-animation/ blog by Max Galka -
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<script type="text/javascript">
//<![CDATA[
try{if (!window.CloudFlare) {var CloudFlare=[{verbose:0,p:0,byc:0,owlid:"cf",bag2:1,mirage2:0,oracle:0,paths:{cloudflare:"/cdn-cgi/nexp/dok3v=1613a3a185/"},atok:"a098c04a5388e57588bbd1e6d0499d0f",petok:"225f354af101947ea9756023771c4624bffcb637-1468222727-1800",zone:"metrocosm.com",rocket:"a",apps:{},sha2test:0}];document.write('<script type="text/javascript" src="//ajax.cloudflare.com/cdn-cgi/nexp/dok3v=e982913d31/cloudflare.min.js"><'+'\/script>');}}catch(e){};
//]]>
</script>
<style></style>
</head>
<body>
<script data-rocketsrc="http://metrocosm.com/js/d3.v3.min.js" type="text/rocketscript"></script>
<script data-rocketsrc="http://metrocosm.com/js/d3.geo.projection.min.js" type="text/rocketscript"></script>
<script type="text/rocketscript">
var svg = d3.select("body").append("svg") //create the SVG panel
.attr("width", 300)
.attr("height", 200);
d3.json("http://metrocosm.com/india-simple.geojson", function(usa) {
d3.json("http://metrocosm.com/india-cartogram.geojson", function(usa2) {
var projection = d3.geo.albersUsa()
.scale(300);
var path = d3.geo.path().projection(projection);
var map = svg.selectAll("path")
.data(usa.features)
.enter()
.append("path")
.attr("d", path)
.style("stroke", "rgb(50,50,50)")
.style("stroke-width", 0.6)
.style("fill", "rgb(200,200,200)")
.attr("transform", "translate(-320,-140)");
setInterval(function(){
map
.data(usa2.features)
.transition()
.duration(3000)
.attr("d", path);
setTimeout(function(){
map
.data(usa.features)
.transition()
.duration(3000)
.attr("d", path);
}, 3000)
}, 6000);
});
});
</script>
</body>
Unfortunately, the above html script doesnt do anything, and there are no errors either. How can i achieve the required transition?
