pnavarrc/Makefile

## 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>Polar Azimutal Equal Area Projection</title>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
</head>
<body>

  <style>

  body {
    margin: 0;
  }

  .sphere {
    fill: #A7DBD8;
    stroke: #ACAF9F;
    stroke-width: 2px;
  }

  .land {
    fill: #E0E4CC;
    stroke: #ACAF9F;
    stroke-width: 1;
  }

  .graticule {
    fill: none;
    stroke: #79A09E;
    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.append('svg');

    // Set the size of the SVG element
    svg.attr('width', width).attr('height', height);

    // Create and configure a geographic projection
    var projection = d3.geo.azimuthalEqualArea()
      .scale(180)
      .clipAngle(180 - 1e2)
      .rotate([0, -90])
      .translate([width / 2, height / 2]);

    // Create and configure a path generator
    var pathGenerator = d3.geo.path()
      .projection(projection);

    // Create and configure the graticule
    var graticule = d3.geo.graticule();

    // Retrieve the geographic data asynchronously
    d3.json('land.geojson', function(err, data) {

      // Throw errors on getting or parsing the file
      if (err) { throw err; }

      // Sphere outline
      var sphere = svg.selectAll('path.sphere').data([{type: 'Sphere'}]);

      sphere.enter().append('path').classed('sphere', true);
      sphere.attr('d', pathGenerator);
      sphere.exit().remove();

      // Graticule lines (behind the land)
      var lines = svg.selectAll('path.graticule').data([graticule()]);

      lines.enter().append('path').classed('graticule', true);
      lines.attr('d', pathGenerator);
      lines.exit().remove();

      // Land
      var land = svg.selectAll('path.land').data([data]);

      land.enter().append('path').classed('land', true);
      land.attr('d', pathGenerator);
      land.exit().remove();

    });
  </script>

</body>
</html>

## land.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              land.geojson
            
          
        Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## 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*

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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>Polar Azimutal Equal Area Projection</title>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
	</head>
	<body>

	<style>

	body {
	margin: 0;
	}

	.sphere {
	fill: #A7DBD8;
	stroke: #ACAF9F;
	stroke-width: 2px;
	}

	.land {
	fill: #E0E4CC;
	stroke: #ACAF9F;
	stroke-width: 1;
	}

	.graticule {
	fill: none;
	stroke: #79A09E;
	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.append('svg');

	// Set the size of the SVG element
	svg.attr('width', width).attr('height', height);

	// Create and configure a geographic projection
	var projection = d3.geo.azimuthalEqualArea()
	.scale(180)
	.clipAngle(180 - 1e2)
	.rotate([0, -90])
	.translate([width / 2, height / 2]);

	// Create and configure a path generator
	var pathGenerator = d3.geo.path()
	.projection(projection);

	// Create and configure the graticule
	var graticule = d3.geo.graticule();

	// Retrieve the geographic data asynchronously
	d3.json('land.geojson', function(err, data) {

	// Throw errors on getting or parsing the file
	if (err) { throw err; }

	// Sphere outline
	var sphere = svg.selectAll('path.sphere').data([{type: 'Sphere'}]);

	sphere.enter().append('path').classed('sphere', true);
	sphere.attr('d', pathGenerator);
	sphere.exit().remove();

	// Graticule lines (behind the land)
	var lines = svg.selectAll('path.graticule').data([graticule()]);

	lines.enter().append('path').classed('graticule', true);
	lines.attr('d', pathGenerator);
	lines.exit().remove();

	// Land
	var land = svg.selectAll('path.land').data([data]);

	land.enter().append('path').classed('land', true);
	land.attr('d', pathGenerator);
	land.exit().remove();

	});
	</script>

	</body>
	</html>
	# 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*