mdsumner · February 28, 2024 05:58
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <style>

 .background {
  fill: #a4bac7;
 }

 .foreground {
  fill: none;
  stroke: #333;
  stroke-width: 1.5px;
 }

 .graticule {
  fill: none;
  stroke: #fff;
  stroke-width: .5px;
 }

 .graticule:nth-child(2n) {
  stroke-dasharray: 2,2;
 }

 .land {
  fill: #d7c7ad;
  stroke: #766951;
 }

 .boundary {
  fill: none;
  stroke: #a5967e;
 }

 </style>
 <body>
 <script src="https://raw.github.com/jasondavies/d3/projection/d3.v2.min.js"></script>
 <script>

 var width = 960,
    height = 500;

 var projection = d3.geo.equirectangular().translate([width / 2 - .5, height / 2 - .5]).scale(150),
    path = d3.geo.path().projection(projection);

 var svg = d3.select("body").append("svg")
    .datum({x: 0, y: 0})
    .attr("width", width)
    .attr("height", height)
    .call(d3.behavior.drag()
      .origin(Object)
      .on("drag", function(d) {
        d.x = d3.event.x;
        d.y = d3.event.y;
        projection.rotate([d.x, -d.y, 0]);
        svg.selectAll("path").attr("d", path);
      }));

 svg.append("rect")
    .attr("class", "background")
    .attr("width", width)
    .attr("height", height);

 svg.selectAll(".graticule")
    .data(graticule)
  .enter().append("path")
    .attr("class", "graticule")
    .attr("d", path);

 d3.json("/d/3682676/readme-boundaries.json", function(collection) {
  svg.insert("g", ".graticule")
      .attr("class", "boundary")
    .selectAll("path")
      .data(collection.geometries)
    .enter().append("path")
      .attr("d", path);
    });

 d3.json("/d/3682676/readme-land.json", function(collection) {
  svg.insert("g", ".graticule,.boundary")
      .attr("class", "land")
    .selectAll("path")
      .data(collection.geometries)
    .enter().append("path")
      .attr("d", path);
 });

 function graticule() {
  var extent = [[-180, -90], [180, 90]],
      step = [22.5, 22.5],
      precision = [2, 2];

  var xSteps = d3.range(extent[0][0], extent[1][0] - precision[0] / 2, precision[0]).concat(extent[1][0]),
      ySteps = d3.range(extent[0][1], extent[1][1] - precision[1] / 2, precision[1]).concat(extent[1][1]),
      xLines = d3.range(Math.ceil(extent[0][0] / step[0]) * step[0], extent[1][0], step[0]).map(function(x) { return ySteps.map(function(y) { return [x, y]; }); }),
      yLines = d3.range(Math.ceil(extent[0][1] / step[1]) * step[1], extent[1][1], step[1]).map(function(y) { return xSteps.map(function(x) { return [x, y]; }); });
  return xLines.concat(yLines).map(function(coordinates) {
    return {
      type: "LineString",
      coordinates: coordinates
    };
  });
 }

 </script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.background {
	fill: #a4bac7;
	}

	.foreground {
	fill: none;
	stroke: #333;
	stroke-width: 1.5px;
	}

	.graticule {
	fill: none;
	stroke: #fff;
	stroke-width: .5px;
	}

	.graticule:nth-child(2n) {
	stroke-dasharray: 2,2;
	}

	.land {
	fill: #d7c7ad;
	stroke: #766951;
	}

	.boundary {
	fill: none;
	stroke: #a5967e;
	}

	</style>
	<body>
	<script src="https://raw.github.com/jasondavies/d3/projection/d3.v2.min.js"></script>
	<script>

	var width = 960,
	height = 500;

	var projection = d3.geo.equirectangular().translate([width / 2 - .5, height / 2 - .5]).scale(150),
	path = d3.geo.path().projection(projection);

	var svg = d3.select("body").append("svg")
	.datum({x: 0, y: 0})
	.attr("width", width)
	.attr("height", height)
	.call(d3.behavior.drag()
	.origin(Object)
	.on("drag", function(d) {
	d.x = d3.event.x;
	d.y = d3.event.y;
	projection.rotate([d.x, -d.y, 0]);
	svg.selectAll("path").attr("d", path);
	}));

	svg.append("rect")
	.attr("class", "background")
	.attr("width", width)
	.attr("height", height);

	svg.selectAll(".graticule")
	.data(graticule)
	.enter().append("path")
	.attr("class", "graticule")
	.attr("d", path);

	d3.json("/d/3682676/readme-boundaries.json", function(collection) {
	svg.insert("g", ".graticule")
	.attr("class", "boundary")
	.selectAll("path")
	.data(collection.geometries)
	.enter().append("path")
	.attr("d", path);
	});

	d3.json("/d/3682676/readme-land.json", function(collection) {
	svg.insert("g", ".graticule,.boundary")
	.attr("class", "land")
	.selectAll("path")
	.data(collection.geometries)
	.enter().append("path")
	.attr("d", path);
	});

	function graticule() {
	var extent = [[-180, -90], [180, 90]],
	step = [22.5, 22.5],
	precision = [2, 2];

	var xSteps = d3.range(extent[0][0], extent[1][0] - precision[0] / 2, precision[0]).concat(extent[1][0]),
	ySteps = d3.range(extent[0][1], extent[1][1] - precision[1] / 2, precision[1]).concat(extent[1][1]),
	xLines = d3.range(Math.ceil(extent[0][0] / step[0]) * step[0], extent[1][0], step[0]).map(function(x) { return ySteps.map(function(y) { return [x, y]; }); }),
	yLines = d3.range(Math.ceil(extent[0][1] / step[1]) * step[1], extent[1][1], step[1]).map(function(y) { return xSteps.map(function(x) { return [x, y]; }); });
	return xLines.concat(yLines).map(function(coordinates) {
	return {
	type: "LineString",
	coordinates: coordinates
	};
	});
	}

	</script>