Skip to content

Instantly share code, notes, and snippets.

@pnavarrc
Last active September 25, 2015 23:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pnavarrc/0f23bd4806fba266159f to your computer and use it in GitHub Desktop.
Save pnavarrc/0f23bd4806fba266159f to your computer and use it in GitHub Desktop.
Simple Map with D3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simple Map with D3</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
</head>
<body>
<style>
body {
margin: 0;
}
svg {
background-color: #A7DBD8;
}
.land {
fill: #E0E4CC;
stroke: #ACAF9F;
stroke-width: 1;
}
</style>
<div id="map-container"></div>
<script>
// Set the dimensions of the map
var width = 960,
height = 480;
// Create a selection for the container div and append the svg element
var div = d3.select('#map-container'),
svg = div.selectAll('svg.map').data([0]);
svg.enter().append('svg')
.classed('map', true);
// Set the size of the SVG element
svg
.attr('width', width)
.attr('height', height);
svg.exit().remove();
// Retrieve the geographic data asynchronously
d3.json('land.geojson', function(err, data) {
// Throw errors on getting or parsing the file
if (err) { throw err; }
// Create and configure a geographic projection
var projection = d3.geo.equirectangular()
.translate([width / 2, height / 2])
.scale(width / (2 * Math.PI));
// Create and configure a path generator
var pathGenerator = d3.geo.path()
.projection(projection);
// Create a selection for the path elements and bind the
// geographic data to the selection
var land = svg.selectAll('path.land').data([data]);
// Append the path element on enter and set its class
land.enter().append('path')
.classed('land', true);
// Use the path generator to convert from GeoJSON to SVG string
land.attr('d', function(d) { return pathGenerator(d); });
// Remove the path element on exit
land.exit().remove();
});
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
# Download and Transform the 1:50m Country Shapefiles from Natural Earth
# http://www.naturalearthdata.com/downloads/110m-physical-vectors/
URL = http://www.naturalearthdata.com/http//www.naturalearthdata.com/download/110m/physical/ne_110m_land.zip
# Download the zip file from the Natural Earth server
ne_110m_land.zip:
curl -LO $(URL)
# Unzip the shapefiles
ne_110m_land.shp: ne_110m_land.zip
unzip ne_110m_land.zip
touch ne_110m_land.shp
# Convert the shapefiles to GeoJSON
land.geojson: ne_110m_land.shp
ogr2ogr -f GeoJSON land.geojson ne_110m_land.shp
# Convert the GeoJSON file to TopoJSON
land.topojson: countries.json
topojson -p -o land.topojson land.geojson
# Remove source and temporary files
clean:
rm ne_110m_land*
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment