block by pnavarrc 0f23bd4806fba266159f

Simple Map with D3

Full Screen

Simple Map with D3

Creating a simple map with D3.

Learn more:

index.html

<!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>

Makefile

# 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*