Skip to content

Instantly share code, notes, and snippets.

@markmarkoh

markmarkoh/gist:2969316

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.
Download ZIP
World Map with D3.js
Raw
gistfile1.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);
@mittenchops
Copy link

Can I ask for some pointers into turning this into a minimal working example for plotting a "you are here" point on a map in D3? I'm trying to make a "Hello world" equivalent on the GIS stack exchange (http://gis.stackexchange.com/questions/45549/hello-world-introduction-for-ubuntugis).

I'm creating an index.html file as follows and putting it into a directory with your gist data file (https://gist.github.com/2969317), named "countries_data.js." Here's what I have, but I'm afraid I don't understand how to apply the function to the document object.

<!DOCTYPE html>
<meta charset="utf-8">
<style>

/* CSS goes here. */

</style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
<script src="countries_data.js" type="text/javascript"></script>

<body>
<div id="map_container">
</div>
</body>

<script>

/* JavaScript goes here. */

(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));

</script>

@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