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>Zoom Behavior</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;
  }

  .sphere {
    fill: none;
    stroke: #79A09E;
  }

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

  .graticule {
    fill: none;
    stroke: #79A09E;
    stroke-width: 1;
    stroke-dasharray: 1,2;
  }

  .overlay {
    fill-opacity: 0;
  }
  </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.equirectangular()
      .translate([width / 2, height / 2]);

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

    // Create and configure the graticule generator (one line every 20 degrees)
    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; }

      // Create a group to hold the map-related features
      var grp = svg.selectAll('g.container').data([data]);

      grp.enter().append('g').classed('container', true);
      grp.exit().remove();

      // Shpere (map boundaries)
      var sphere = grp.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 = grp.selectAll('path.graticule').data([graticule()]);

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

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

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

      var strokeScale = d3.scale.linear()
        .domain([1, 8])
        .range([1, 1/8]);

      // Create and configure the zoom behaviour
      var zoomBehavior = d3.behavior.zoom()
        .scaleExtent([1, 8])
        .on('zoom', function() {

          // Get the zoom event scale and translate vector
          var scale = d3.event.scale,
              translate = d3.event.translate;

          // Translate and scale the group
          grp.attr('transform', function() {

            var s = 'scale(' + scale + ')',
                t = 'translate(' + translate + ')';

            return t + s;
          });

          // Adapts the stroke width to the zoom level
          svg.selectAll('path')
            .style('stroke-width', strokeScale(scale));
        });

      // Bind the zoom behaviour to the SVG container
      svg.call(zoomBehavior);

    });
  </script>

</body>
</html>

## land.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              land.geojson
            
          
      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>Zoom Behavior</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;
	}

	.sphere {
	fill: none;
	stroke: #79A09E;
	}

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

	.graticule {
	fill: none;
	stroke: #79A09E;
	stroke-width: 1;
	stroke-dasharray: 1,2;
	}

	.overlay {
	fill-opacity: 0;
	}
	</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.equirectangular()
	.translate([width / 2, height / 2]);

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

	// Create and configure the graticule generator (one line every 20 degrees)
	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; }

	// Create a group to hold the map-related features
	var grp = svg.selectAll('g.container').data([data]);

	grp.enter().append('g').classed('container', true);
	grp.exit().remove();

	// Shpere (map boundaries)
	var sphere = grp.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 = grp.selectAll('path.graticule').data([graticule()]);

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

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

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

	var strokeScale = d3.scale.linear()
	.domain([1, 8])
	.range([1, 1/8]);

	// Create and configure the zoom behaviour
	var zoomBehavior = d3.behavior.zoom()
	.scaleExtent([1, 8])
	.on('zoom', function() {

	// Get the zoom event scale and translate vector
	var scale = d3.event.scale,
	translate = d3.event.translate;

	// Translate and scale the group
	grp.attr('transform', function() {

	var s = 'scale(' + scale + ')',
	t = 'translate(' + translate + ')';

	return t + s;
	});

	// Adapts the stroke width to the zoom level
	svg.selectAll('path')
	.style('stroke-width', strokeScale(scale));
	});

	// Bind the zoom behaviour to the SVG container
	svg.call(zoomBehavior);

	});
	</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*