var cartogram = function (objects_key, scale_key) { var margin = {top: 20, right: 20, bottom: 20, left: 20}, width = 960, height = 500, proj = d3.geo.albers(), scale = d3.scale.linear(), zoom = d3.behavior.zoom().translate([0,300]).scale(0.7); function cartogram(selection) { selection.each(function (d) { var svg = d3.select(this).selectAll("svg").data([d]); var gEnter = svg.enter().append("svg") .attr("width", width) .attr("height", height); var path = d3.geo.path().projection(proj); var g = svg.append("g") .attr("transform", "translate(" + zoom.translate() + ")" + "scale(" + [zoom.scale(), zoom.scale()] + ")"); var land = g.append("path") .attr("class", "land") .datum(topojson.object(d, d.objects[objects_key])) .attr("d", path); var areas = g.selectAll(".area") .data(topojson.object(d, d.objects[objects_key]).geometries) .enter().append("path") .attr("class", "area") .attr("d", path) .attr("transform", function (d) { var centroid = path.centroid(d), x = centroid[0], y = centroid[1]; return "translate(" + x + "," + y + ")" + "scale(" + Math.sqrt(d.properties[scale_key] * 5 || 0) + ")" + "translate(" + -x + "," + -y + ")"; }) .style("stroke-width", function(d) { return 1 / Math.sqrt(d.properties[scale_key] * 5 || 1); });; }); } cartogram.width = function (value) { if (!arguments.length) return width; width = value; return cartogram; }; cartogram.height = function (value) { if (!arguments.length) return height; height = value; return cartogram; }; cartogram.zoom = function (value) { if (!arguments.length) return zoom; zoom = value; return cartogram; }; return cartogram; };