3

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?

1

All that rocketscript garbage is not really part of the code. Those are modifications by a CDN, so it can load the scripts asynchronously. What it means for you is that the d3 scripts are not being loaded.

If you delete all that garbage (the rocketscript script tags) and replace it with 2 normal script tags (one for d3.v3.min.js and one for d3.geo.projection.min.js), it should work.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.