Skip to content

Instantly share code, notes, and snippets.

@markmarkoh
Created June 21, 2012 23:54
Show Gist options
  • Save markmarkoh/2969316 to your computer and use it in GitHub Desktop.
Save markmarkoh/2969316 to your computer and use it in GitHub Desktop.
World Map with D3.js
(function(window) {
var data,
xy = d3
.geo
.equirectangular()
.scale($('#map_container').width())
.translate([$('#map_container').width() / 2, $('#map_container').height() / 2]),
path = d3
.geo
.path()
.projection(xy),
svg = d3
.select('#map_container')
.append('svg:svg'),
countries = svg
.append('svg:g')
.attr('id', 'countries');
/* World Map */
countries.selectAll('path')
.data(window.countries_data.features) // get the data here: https://gist.github.com/2969317
.enter()
.append('svg:path')
.attr('d', path)
.attr('fill', 'rgba(29,91,85,1)')
.attr('stroke', 'rgba(29,91,85,1)')
.attr('stroke-width', 1);
}(this);
@warrendunlop
Copy link

Just came to double up @mittenchops request. Having a tough time comparing this to the D3 albers or mercator examples, especially in the case of the json this is using. Hoping for some more context.

@emonidi
Copy link

emonidi commented Dec 18, 2014

You could optimize a little bit the script by reducing number of dom queries and assigning $('#map-container') to a local variable so you querythe DOM only once instead of 3 times.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment