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