pnavarrc · September 26, 2015 14:38
diff --git a/index.html b/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>
diff --git a/land.geojson b/land.geojson
diff --git a/Makefile b/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*
diff --git a/thumbnail.png b/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*