I am generating a TopoJSON cartogram of Australia. I have successfully generated a GeoJSON map of Australia. I then converted that data to TopoJSON but cannot render the map.
Things to note:
- I can accurately project lat/long points of cities (i.e., their spatial relationship looks correct). Therefore, I believe the projection is fine.
- No paths are generated and the page is blank. But the data file looks correct when compared to successful online tutorials. Not sure why this is the case.
I've created a JSFiddle here: https://jsfiddle.net/6j8sz21L/
Thank you!
Here's the D3JS code for reference (also see the JSFiddle for more detail):
<!DOCTYPE html>
<html>
<head>
<title>Australia</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v2.min.js"></script>
<style type="text/css">
.pin {
border: 1px solid white;
}
svg {
background: lightblue;
}
</style>
</head>
<body>
<script type="text/javascript">
var width = 960,
height = 700;
var projection = d3.geo.mercator()
.center([131,25])
.scale(900)
.translate([400,-500]);
var path = d3.geo.path()
.projection(projection);
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
var places = [{ name: "Adelaide", location: { latitude: -34.93, longitude: 138.6 }, position: { dy: ".35em", dx: "-4.75em" } }, { name: "Brisbane", location: { latitude: -27.47, longitude: 153.02 }, position: { dy: ".35em", dx: ".75em" } }, { name: "Canberra", location: { latitude: -35.3, longitude: 149.13 }, position: { dy: ".35em", dx: ".75em" } }, { name: "Darwin", location: { latitude: -12.45, longitude: 130.83 }, position: { dy: ".35em", dx: "-4em" } }, { name: "Hobart", location: { latitude: -42.88, longitude: 147.32 }, position: { dy: ".35em", dx: ".75em" } }, { name: "Melbourne", location: { latitude: -37.82, longitude: 144.97 }, position: { dy: ".35em", dx: ".75em" } }, { name: "Perth", location: { latitude: -31.95, longitude: 115.85 }, position: { dy: ".35em", dx: "-3.25em" } }, { name: "Sydney", location: { latitude: -33.87, longitude: 151.2 }, position: { dy: ".35em", dx: ".75em" } }];
//Probably best practice to reverse these calls
d3.csv("/Australia/Data/ABS_Pop_15.csv", function(data) {
//Set up fill colours
var minimum = d3.min(data, function(d) { return d.Value; }),
maximum = d3.max(data, function(d) { return d.Value; });
var minimumColor = "#e5f5f9",
maximumColor = "#99d8c9";
var color = d3.scale
.linear()
.domain([minimum, maximum])
.range([minimumColor, maximumColor]);
//Clean data
var ValueById = {};
data.forEach(function(d) {
ValueById[d.id] = +d.Value;
});
d3.json("/Australia/Data/australia_adm4_topo_id.json", function(sa2) {
svg.append("path")
.data(topojson.feature(sa2, sa2.objects.australia_adm4.geometries))
.enter().append("path")
.attr("d", path);
console.log(sa2);
svg.selectAll(".label")
.data(places)
.enter().append("text", ".label")
.attr("transform", function(d) {
return "translate(" + projection([d.location.longitude, d.location.latitude]) + ")";
})
.style("font-family", "Arial, sans-serif")
.style("font-size", "12px")
.style("font-weight", "bold")
.style("stroke-width", "0px")
.style("stroke", "#fff")
.attr("dy", function(d) { return d.position.dy; })
.attr("dx", function(d) { return d.position.dx; })
.text(function(d) { return d.name; });
});
});
</script>
The code line that is giving you an issue is:
Use this instead (you can copy it directly over the line above in your fiddle):
I did a little rewrite based off a similar template I had to show this working:
Also, here is a useful blog article on how the
selectAllandappendfunctions operate on elements.