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

476 Views Asked by At

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;
     });

});
};
});
1

There are 1 best solutions below

0
On BEST ANSWER

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.