CODEWITHSUNDEEP
javascriptd3.jsgeojson
Ashy
Ashy

Reputation: 71

Displaying cities on an Australian map using topojson and d3js

I'm trying to make a map exactly like this example ( http://bost.ocks.org/mike/map/ ) except focused on Australia and New Zealand. I've followed the instructions but the dots for the places don't render on my map.

This is how I'm generating my data:

ogr2ogr -f GeoJSON -where "adm0_a3 IN ('AUS', 'NZL')" subunits.json ne_10m_admin_0_map_subunits.shp

ogr2ogr -f GeoJSON -where "(iso_a2 = 'AU' OR iso_a2 = 'NZ') AND SCALERANK < 8" places.json ne_10m_populated_places.shp

topojson --id-property su_a3 -p name=NAME -p name -o aus.json subunits.json places.json

Here is the code I've got so far: http://bashsolutions.com.au/australia.html

The map shows up but the dots for the cities are not displaying. What am I doing wrong?

EDIT: So this isn't very clear just with the big long error so here's the actual code:

<script>

var width = 960,
    height = 1160;


//var subunits = topojson.object(aus, aus.objects.subunitsAUS);

var projection = d3.geo.mercator()
  //.center([0,0])
  .center([180,-40])
  .scale(400)
  //.translate([width / 2, height / 2])
  .precision(.1);

var path = d3.geo.path()
  .projection(projection)
  .pointRadius(2);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

d3.json("aus.json", function(error, aus) {
  svg.selectAll(".subunit")
    .data(topojson.object(aus, aus.objects.subunits).geometries)
    .enter().append("path")
    .attr("class", function(d) { return "subunit " + d.id; })
    .attr("d", path);

  svg.append("path")
    .datum(topojson.mesh(aus, aus.objects.subunits, function(a,b) { return a !== b; }))
    .attr("d", path)
    .attr("class", "subunit-boundary");

  svg.append("path")
    .datum(topojson.mesh(aus, aus.objects.subunits, function(a,b) { return a == b; }))
    .attr("d", path)
    .attr("class", "subunit-boundary External");

/* This is the failing bit */
  svg.append("path")
      .datum(topojson.object(aus, aus.objects.places))
      .attr("class", "place")
      .attr("d", path);
/* End of failing bit */

/*
  svg.selectAll(".place-label")
      .data(topojson.object(aus, aus.objects.places).geometries)
    .enter().append("text")
      .attr("class", "place-label")
      .attr("transform", function(d) { return "translate(" + projection(d.coordinates) + ")"; })
      .attr("x", function(d) { return d.coordinates[0] > -1 ? 6 : -6; })
      .attr("dy", ".35em")
      .style("text-anchor", function(d) { return d.coordinates[0] > -1 ? "start" : "end"; })
      .text(function(d) { return d.properties.name; });
*/

});

Upvotes: 0

Views: 3243

Answers (2)

minikomi
minikomi

Reputation: 8503

When you plot the outline you need to remove the TKL (Tokelau) data points.

   svg.append("path")
      .datum(topojson.mesh(aus, aus.objects.subunits, function(a, b) {
           return a === b && a.id !=="TKL" }))
      .attr("d", path)
      .attr("class", "subunit-boundary External");

I'm still researching why this creates the error, but adding that condition to the mesh function filter seems to fix things.

Upvotes: 1

Ashy
Ashy

Reputation: 71

I found away around this issue that solves the problem but it still doesn't explain why it was failing in the first place.

Here is the fix: http://bashsolutions.com.au/australia2.html

This chunk of code replaces the failing bit above:

svg.selectAll(".place")
  .data(topojson.object(aus, aus.objects.places).geometries)
.enter().append("circle")
  .attr("d", path)
  .attr("transform", function(d) { return "translate(" + projection(d.coordinates) + ")"; })
  .attr("r", 2)
  .attr("class", "place");

So this gets around it by doing something similar to the labels bit (which is commented out above) but drawing a circle instead of text.

But I'm still not sure what was wrong with the above bit considering it's the same as Mike Bostock's example (apart from the data).

Upvotes: 0

Related Questions