markmarkoh / datamaps

Customizable SVG map visualizations for the web in a single Javascript file using D3.js
http://datamaps.github.io
MIT License
3.78k stars 1.01k forks source link

World map missing 70-80 countries #76

Closed Abrissirba closed 8 years ago

Abrissirba commented 10 years ago

The World Map bundled into Datamaps is missing around 70-80 countries. It would be great if all countries in Natural Earths shapefile could be included in the bundled World Map.

markmarkoh commented 10 years ago

Yep, this is a good issue. I've been working on build tooling to make it easier to go from shapefile to topojson.

magic890 commented 8 years ago

You can get shapefiles from here: http://thematicmapping.org/downloads/world_borders.php and convert them using: http://www.mapshaper.org

Another way could be use the CLI like in this post: http://blog.thematicmapping.org/2013/06/converting-shapefiles-to-topojson.html

npm install -g topojson

topojson --id-property NR -p name=NAVN -p name -o NO_Admin_UTM33.topojson NO_Fylker_pol.shp NO_Kommuner_pol.shp

magic890 commented 8 years ago

I've found that also Lonely Planet is using DataMaps on user profile trips / living countries (https://auth.lonelyplanet.com/profiles/wunderbart/trips).

Their map is more detailed than the default world implementation here (i.e. LIE is present in Lonely Planet version and it's missing from DataMaps world implementation). Here is the TopoJSON file: https://assets.staticlp.com/assets/world_by_iso_topo-e3d32348133833e5e7fea4b128ef5f92.json

To use that custom map I suggest this (partial) configuration:

var defaultOptions = {
    scope: "worldByIso",
    done: drawMapContents,
    setProjection: function(e, n) {
        var r, i, s = n.width || e.offsetWidth, o = n.height || e.offsetHeight;
        return r = d3.geo[n.projection]().scale((s + 1) / 2 / Math.PI).translate([s / 2, o / 1.45]), i = d3.geo.path().projection(r), {
            path: i,
            projection: r
        }
    },
    projection: "mercator",
    geographyConfig: {
        dataUrl: 'https://assets.staticlp.com/assets/world_by_iso_topo-e3d32348133833e5e7fea4b128ef5f92.json',
        borderWidth: 0.3,
        highlightBorderWidth: 0.5
    }
}
lucaspiller commented 8 years ago

The data from Thematic Mapping seems a bit outdated, for example South Sudan is completely missing from their dataset. I ended up generating my own TopoJSON based upon the NaturalEarth 10m dataset (the 50m and 110m datasets are missing some countries).

Here are instructions to generate and tweak your own, you need topojson tools installed.

  1. Download the ZIP of countries: http://naciscdn.org/naturalearth/10m/cultural/ne_10m_admin_0_countries.zip
  2. Convert it to TopoJSON for use with Datamaps as follows:
$ topojson --id-property=ISO_A3 -p name=NAME -o world.topo.json world=ne_10m_admin_0_countries.shp

Now on it's own this will produce pretty much the same as what is in #267, but you probably want to make a few tweaks. This will produce a 4mb file, versus 250kb for the default world file that's in Datamaps. You can reduce the size by simplifying it:

$ topojson --simplify-proportion 0.1 --id-property=ISO_A3 -p name=NAME -o world.topo.json world=ne_10m_admin_0_countries.shp

You can tweak the proportion to your needs. If you don't want to zoom in too much (say 5x max) this will be enough, if you don't want to zoom in at all you can reduce it even more.

This dataset will include self-governing and disputed territories that don't have an ISO country code (e.g. Somaliland, Western Sahara). Depending on what you want to do, one option is to merge them with their 'parent' as follows:

$ topojson --simplify-proportion 0.1 --id-property=ADM0_A3_IS -p name=NAME -o tmp.json world=ne_10m_admin_0_countries.shp
$ cat tmp.json | topojson-merge --io=world --oo=world -o world.topo.json -k "d.id"

If you want to see all the data in a SHP file, install GDAL (brew install gdal on OS X) then use this to output it to a CSV:

$ ogr2ogr -f CSV data.csv ne_10m_admin_0_countries.shp
magic890 commented 8 years ago

I'd suggest to provide two version of the world map, the first one with full details (~4MB) and a simplified one around ~500KB. @markmarkoh What do you think? @lucaspiller I'll have a look into your topojson file in the next day and if it's all ok I'll adjust my PR request. Thank you.

markmarkoh commented 8 years ago

@magic890 I'd really like there to be a sub-150kb world map, since most people don't need the detail for their maps.

However, I've been wanting to have a hi-res version of the world and US maps for a long time now. I think having an additional built version, like datamaps.world.hires.js would be fantastic, in addition to the very small low-res.

Any chance we can tweak the topojson command to drop that file size?

magic890 commented 8 years ago

@markmarkoh I'll work on this feature in the next week. I'll keep you updated.

magic890 commented 8 years ago

@markmarkoh you can close this issue now.