1

I'm basically following the Let's Make a Map tutorial http://bost.ocks.org/mike/map/ with a world map. I would like to differentiate between coastlines and terrestrial boundaries as in the tutorial and also add the country code(s) as a class for each boundary — so that when a country is highlighted both the fill and stroke colour are changed. Because it's a world map, there are too many countries to do this manually, but I can't figure out how to do this dynamically.

The relevant parts of my code are:

var countryPaths = svg.append("g")
.attr("class", "countryPaths");

var countries = topojson.feature(world, world.objects.countries);

// add individual country paths
countryPaths.selectAll(".countries")
.data(countries.features)
.enter()
.append("path")
.attr("class", function(d) {return "country " + d.properties.adm0_a3; } )
.attr("d", path)

// add coastline
countryPaths.append("path")
.datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a == b }))
.attr("d", path)
.attr("class","coastLine");

// add terrestrial borders
countryPaths.append("path")
.datum(topojson.mesh(world, world.objects.countries, function(a, b) { return (a !== b)}))
.attr("d", path)
.attr("class", "country-boundary");
});

When I do this, however, the coastline (and terrestrial boundaries) are created as a single path so it's not possible to change for example the coastline for Japan to a different colour. Any ideas how I can achieve this?

4
  • In the case of Japan coastline and boundary would be the same, so you could set the color for the boundary. Jan 7, 2014 at 12:13
  • why don't you use an if statement on the fill to differentiate between the coastline and country lines? if they have classes it should be pretty straight-forward
    – tomtomtom
    Jan 7, 2014 at 12:16
  • 2
    @lars-kotthoff : not sure if I misunderstood your comment but my problem isn't with distinguishing between coastline and terrestrial borders. I'd like to add each country border, terrestrial or costal, to have the class of the country to which it belongs. Japan was just an example. Thanks for looking at my question though.
    – pingin
    Jan 7, 2014 at 12:33
  • @tomtomtom I think my initial example was probably confusing as it just had the code for the coastal borders. I've added the code for the terrestrial (or shared borders) now too. My problem isn't with distinguishing between the coastal and terrestrial borers, which is handled by topojson.mesh, it's with distinguishing between borders for different countries. At the moment the coastline borders are a single path, as are the terrestrial borders.
    – pingin
    Jan 7, 2014 at 12:39

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.