javascriptangularjsd3.jscartogram

Cartogram using angularjs and d3 TypeError: undefined is not a function


I am creating a cartogram of srilanka using d3.js and angularJS. I have a controller and a function to create it. It returns an error saying TypeError: undefined is not a function

HTML:

<div  ng-controller="CartoGramctrl"  class="box-content" ng-init="createCartogram()">                
    <svg id="map"></svg>
</div>

app.JS:

routerApp.controller('CartoGramctrl',function($scope) {
   $scope.createCartogram = function() {
   var color = d3.scale.category10();
   var map = d3.select("#map");
   var munics = map.append("g").attr("id","states").selectAll("path");
   var width = 1280 , height =620, centered;
   var proj = d3.geo.albers()
            .center([3, 8])
            .rotate([-80, 0])
            .scale(1900 *5)
            .translate([width / 2, height / 2]);
   var topology,geometrics,carto_features;
   var vote_data = d3.map();
   var carto = d3.cartogram().projection(proj).properties(function (d){
     return d.properties;
   });
    d3.csv("data/sri-lanka.csv", function (data) {
            data.forEach(function (d) {
                vote_data.set(d.DISTRICT, [d.POPULATION, d.COLOR]);
            })
        });
   d3.json("data/sri-lanka.json",function (data){
    topology = data;
    geometrics = topology.objects.states.geometrics;
    var neighbors = topojson.neibhours(topology.objects.states.geometrics);
    var features = carto.features(topology,geometrics),
    path = d3.geo.path().projection(proj);
     munics = munics.data(features).enter().append("path").attr("class","states").attr("id",function (d){
        return d.properties.name;
     }).style("fill",function(d,i) { return color(d.color = d3.max(neighbors[i], function(n) { return features[n].color; }) + 1 | 0); })
     .attr("d",path);
     munics.append("title").text(function (d){
        return d.properties.name;
     });

});
};
});

Solution

  • For d3.cartogram to work, one needs to include both cartogram.js and topoJSON.js.

    cartogram.js must be included after D3, but before your code is run and topoJSON should be included before cartogram.js.