mdsumner · February 28, 2024 05:58 · Oct 26, 2012 · Oct 12, 2012 · Sep 28, 2012 · Sep 26, 2012
diff --git a/index.html b/index.html
@@ -38,7 +38,7 @@
 
 </style>
 <p id="precision-wrapper">Precision: <span id="precision">200px</span>
-<script src="https://raw.github.com/jasondavies/d3/projection/d3.min.js"></script>
+<script src="http://d3js.org/d3.v3.min.js"></script>
 <script>
 
 var width = 960,

diff --git a/index.html b/index.html
@@ -38,7 +38,7 @@
 
 </style>
 <p id="precision-wrapper">Precision: <span id="precision">200px</span>
-<script src="https://raw.github.com/jasondavies/d3/projection/d3.v2.min.js"></script>
+<script src="https://raw.github.com/jasondavies/d3/projection/d3.min.js"></script>
 <script>
 
 var width = 960,

diff --git a/README.md b/README.md
@@ -1,2 +1,4 @@
 D3 2.11’s projections will adaptively resample to reduce local distortion of
 lines. Move the mouse to change the precision, and drag to change the aspect.
+
+*Update*: Mike has made some awesome [improvements](http://bl.ocks.org/3795544)!
diff --git a/index.html b/index.html
@@ -22,7 +22,7 @@
 
 .graticule {
   fill: none;
-  stroke: #999;
+  stroke: #000;
   stroke-width: .5px;
 }
 

diff --git a/index.html b/index.html
@@ -43,7 +43,12 @@
 
 var width = 960,
     height = 500,
-    x = d3.scale.linear().domain([0, width]).range([200, 1]);
+    x = d3.scale.linear().domain([0, width]).range([200, 1]),
+    initial = [-71, 42, 0],
+    rotate = initial.slice(),
+    transitioning = false,
+    velocity = [.010, -.002],
+    t0 = Date.now();
 
 var projection = d3.geo.equirectangular()
       .rotate([0, 30, 0])
@@ -60,12 +65,18 @@
     .attr("width", width)
     .attr("height", height)
     .call(d3.behavior.drag()
-      .origin(Object)
+      .origin(function() { return {x: rotate[0], y: -rotate[1]}; })
+      .on("dragstart", function() { transitioning = true; })
       .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);
+        rotate[0] = d3.event.x;
+        rotate[1] = -d3.event.y;
+        projection.rotate(rotate);
+        svg.selectAll(".geometry, .graticule").attr("d", path);
+      })
+      .on("dragend", function() {
+        transitioning = false;
+        t0 = Date.now();
+        initial = rotate.slice();
       }))
     .on("mousemove", function() {
       var px = x(d3.mouse(this)[0]);
@@ -89,4 +100,13 @@
     .attr("class", "graticule")
     .attr("d", path);
 
+d3.timer(function() {
+  if (transitioning) return;
+  var t = Date.now() - t0;
+  rotate[0] = initial[0] + velocity[0] * t;
+  rotate[1] = initial[1] + velocity[1] * t;
+  projection.rotate(rotate);
+  svg.selectAll("path").attr("d", path);
+});
+
 </script>
diff --git a/index.html b/index.html
@@ -22,7 +22,7 @@
 
 .graticule {
   fill: none;
-  stroke: #666;
+  stroke: #999;
   stroke-width: .5px;
 }
 
@@ -46,7 +46,7 @@
     x = d3.scale.linear().domain([0, width]).range([200, 1]);
 
 var projection = d3.geo.equirectangular()
-      .rotate([0, 45, 0])
+      .rotate([0, 30, 0])
       .translate([width / 2 - .5, height / 2 - .5])
       .scale(150)
       .precision(x.range()[0]),

diff --git a/index.html b/index.html
@@ -45,10 +45,10 @@
     height = 500,
     x = d3.scale.linear().domain([0, width]).range([200, 1]);
 
-var projection = d3.geo.mercator()
+var projection = d3.geo.equirectangular()
       .rotate([0, 45, 0])
       .translate([width / 2 - .5, height / 2 - .5])
-      .scale(400)
+      .scale(150)
       .precision(x.range()[0]),
     path = d3.geo.path().projection(projection),
     graticule = d3.geo.graticule(),

diff --git a/README.md b/README.md
@@ -1,3 +1,2 @@
 D3 2.11’s projections will adaptively resample to reduce local distortion of
-lines. Move the mouse to change the precision, and drag the world to change the
-aspect.
+lines. Move the mouse to change the precision, and drag to change the aspect.
diff --git a/index.html b/index.html
@@ -37,7 +37,7 @@
 }
 
 </style>
-<p id="precision-wrapper">Precision: <span id="precision"></span>
+<p id="precision-wrapper">Precision: <span id="precision">200px</span>
 <script src="https://raw.github.com/jasondavies/d3/projection/d3.v2.min.js"></script>
 <script>
 

diff --git a/README.md b/README.md
@@ -1,2 +1,3 @@
-D3 2.11’s `d3.geo.path` will automatically cut features for any aspect. Try
-dragging to rotate the world and see a new aspect.
+D3 2.11’s projections will adaptively resample to reduce local distortion of
+lines. Move the mouse to change the precision, and drag the world to change the
+aspect.
diff --git a/index.html b/index.html
@@ -46,6 +46,7 @@
     x = d3.scale.linear().domain([0, width]).range([200, 1]);
 
 var projection = d3.geo.mercator()
+      .rotate([0, 45, 0])
       .translate([width / 2 - .5, height / 2 - .5])
       .scale(400)
       .precision(x.range()[0]),
@@ -55,7 +56,7 @@
     precision = d3.select("#precision");
 
 var svg = d3.select("body").append("svg")
-    .datum({x: 0, y: 0})
+    .datum({x: 0, y: -45})
     .attr("width", width)
     .attr("height", height)
     .call(d3.behavior.drag()

diff --git a/index.html b/index.html
@@ -2,51 +2,57 @@
 <meta charset="utf-8">
 <style>
 
-.background {
-  fill: #a4bac7;
+body {
+  font-family: sans-serif;
 }
 
-.foreground {
+#precision-wrapper {
+  position: absolute;
+  top: 5px;
+  left: 5px;
+}
+
+svg {
+  cursor: move;
+}
+
+rect {
   fill: none;
-  stroke: #333;
-  stroke-width: 1.5px;
 }
 
 .graticule {
   fill: none;
-  stroke: #fff;
+  stroke: #666;
   stroke-width: .5px;
 }
 
 .graticule:nth-child(2n) {
   stroke-dasharray: 2,2;
 }
 
-.land {
-  fill: #d7c7ad;
-  stroke: #766951;
-}
-
-.boundary {
+path.resample {
+  stroke: #f00;
+  stroke-width: 2.5px;
   fill: none;
-  stroke: #a5967e;
-}
-
-svg {
-  cursor: move;
 }
 
 </style>
-<body>
+<p id="precision-wrapper">Precision: <span id="precision"></span>
 <script src="https://raw.github.com/jasondavies/d3/projection/d3.v2.min.js"></script>
 <script>
 
 var width = 960,
-    height = 500;
+    height = 500,
+    x = d3.scale.linear().domain([0, width]).range([200, 1]);
 
-var projection = d3.geo.albers().translate([width / 2 - .5, height / 1.75 - .5]).scale(120),
+var projection = d3.geo.mercator()
+      .translate([width / 2 - .5, height / 2 - .5])
+      .scale(400)
+      .precision(x.range()[0]),
     path = d3.geo.path().projection(projection),
-    graticule = d3.geo.graticule();
+    graticule = d3.geo.graticule(),
+    format = d3.format(",.2f"),
+    precision = d3.select("#precision");
 
 var svg = d3.select("body").append("svg")
     .datum({x: 0, y: 0})
@@ -59,35 +65,27 @@
         d.y = d3.event.y;
         projection.rotate([d.x, -d.y, 0]);
         svg.selectAll("path").attr("d", path);
-      }));
+      }))
+    .on("mousemove", function() {
+      var px = x(d3.mouse(this)[0]);
+      projection.precision(px);
+      precision.text(format(px) + "px");
+      svg.selectAll("path").attr("d", path);
+    });
 
 svg.append("rect")
-    .attr("class", "background")
     .attr("width", width)
     .attr("height", height);
 
+svg.append("path")
+    .attr("class", "resample")
+    .datum({type: "LineString", coordinates: [[-180, 0], [-90, 0], [0, 0], [90, 0], [180, 0]]})
+    .attr("d", path);
+
 svg.selectAll(".graticule")
     .data(graticule.lines)
   .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);
-});
-
 </script>
diff --git a/index.html b/index.html
@@ -44,7 +44,7 @@
 var width = 960,
     height = 500;
 
-var projection = d3.geo.equirectangular().translate([width / 2 - .5, height / 2 - .5]).scale(150),
+var projection = d3.geo.albers().translate([width / 2 - .5, height / 1.75 - .5]).scale(120),
     path = d3.geo.path().projection(projection),
     graticule = d3.geo.graticule();
 

diff --git a/index.html b/index.html
@@ -45,7 +45,8 @@
     height = 500;
 
 var projection = d3.geo.equirectangular().translate([width / 2 - .5, height / 2 - .5]).scale(150),
-    path = d3.geo.path().projection(projection);
+    path = d3.geo.path().projection(projection),
+    graticule = d3.geo.graticule();
 
 var svg = d3.select("body").append("svg")
     .datum({x: 0, y: 0})
@@ -66,7 +67,7 @@
     .attr("height", height);
 
 svg.selectAll(".graticule")
-    .data(graticule)
+    .data(graticule.lines)
   .enter().append("path")
     .attr("class", "graticule")
     .attr("d", path);
@@ -89,21 +90,4 @@
       .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>
diff --git a/README.md b/README.md
@@ -0,0 +1,2 @@
+D3 2.11’s `d3.geo.path` will automatically cut features for any aspect. Try
+dragging to rotate the world and see a new aspect.
diff --git a/index.html b/index.html
@@ -32,6 +32,10 @@
   stroke: #a5967e;
 }
 
+svg {
+  cursor: move;
+}
+
 </style>
 <body>
 <script src="https://raw.github.com/jasondavies/d3/projection/d3.v2.min.js"></script>

diff --git a/index.html b/index.html
@@ -67,6 +67,24 @@
     .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],

diff --git a/README.md b/README.md
@@ -1,3 +0,0 @@
-Testing the new projection API.
-
-The [Orthographic projection](http://en.wikipedia.org/wiki/Orthographic_projection_%28cartography%29) is available as `d3.geo.orthographic` in the [geo.projection D3 plugin](https://github.com/d3/d3-plugins/tree/clip/geo/projection).

diff --git a/index.html b/index.html
@@ -40,11 +40,9 @@
 var width = 960,
     height = 500;
 
-var projection = d3.geo.equirectangular().translate([width / 2 - .5, height / 2 - .5]),
+var projection = d3.geo.equirectangular().translate([width / 2 - .5, height / 2 - .5]).scale(150),
     path = d3.geo.path().projection(projection);
 
-var graticule = d3.geo.graticule();
-
 var svg = d3.select("body").append("svg")
     .datum({x: 0, y: 0})
     .attr("width", width)
@@ -64,27 +62,26 @@
     .attr("height", height);
 
 svg.selectAll(".graticule")
-    .data(graticule.lines)
+    .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>
diff --git a/index.html b/index.html
@@ -58,22 +58,17 @@
         svg.selectAll("path").attr("d", path);
       }));
 
-svg.append("circle")
+svg.append("rect")
     .attr("class", "background")
-    .attr("transform", "translate(" + projection.translate() + ")")
-    .attr("r", projection.scale());
+    .attr("width", width)
+    .attr("height", height);
 
 svg.selectAll(".graticule")
     .data(graticule.lines)
   .enter().append("path")
     .attr("class", "graticule")
     .attr("d", path);
 
-svg.append("circle")
-    .attr("class", "foreground")
-    .attr("transform", "translate(" + projection.translate() + ")")
-    .attr("r", projection.scale());
-
 d3.json("/d/3682676/readme-boundaries.json", function(collection) {
   svg.insert("g", ".graticule")
       .attr("class", "boundary")

diff --git a/index.html b/index.html
@@ -34,15 +34,14 @@
 
 </style>
 <body>
-<script src="http://d3js.org/d3.v2.min.js"></script>
-<script src="https://raw.github.com/d3/d3-plugins/clip/geo/projection/projection.js"></script>
+<script src="https://raw.github.com/jasondavies/d3/projection/d3.v2.min.js"></script>
 <script>
 
 var width = 960,
     height = 500;
 
-var projection = d3.geo.orthographic().translate([width / 2 - .5, height / 2 - .5]),
-    path = d3.geo.projection.path().projection(projection);
+var projection = d3.geo.equirectangular().translate([width / 2 - .5, height / 2 - .5]),
+    path = d3.geo.path().projection(projection);
 
 var graticule = d3.geo.graticule();
 
@@ -55,7 +54,7 @@
       .on("drag", function(d) {
         d.x = d3.event.x;
         d.y = d3.event.y;
-        projection.rotate([d.x, -d.y]);
+        projection.rotate([d.x, -d.y, 0]);
         svg.selectAll("path").attr("d", path);
       }));
 

diff --git a/index.html b/index.html
@@ -46,9 +46,7 @@
 
 var graticule = d3.geo.graticule();
 
-var svg = d3.select("body").selectAll("svg")
-    .data([0, 180])
-  .enter().append("svg")
+var svg = d3.select("body").append("svg")
     .datum({x: 0, y: 0})
     .attr("width", width)
     .attr("height", height)

diff --git a/index.html b/index.html
@@ -41,11 +41,8 @@
 var width = 960,
     height = 500;
 
-var projection = d3.geo.orthographic()
-      .rotate([0, 0, 45])
-      .translate([width / 2 - .5, height / 2 - .5]),
-    path = d3.geo.projection.path()
-      .projection(projection);
+var projection = d3.geo.orthographic().translate([width / 2 - .5, height / 2 - .5]),
+    path = d3.geo.projection.path().projection(projection);
 
 var graticule = d3.geo.graticule();
 

diff --git a/README.md b/README.md
@@ -1 +1,3 @@
-The [Orthographic projection](http://en.wikipedia.org/wiki/Orthographic_projection_%28cartography%29) is available as `d3.geo.orthographic` in the [geo.projection D3 plugin](https://github.com/d3/d3-plugins/tree/clip/geo/projection).
+Testing the new projection API.
+
+The [Orthographic projection](http://en.wikipedia.org/wiki/Orthographic_projection_%28cartography%29) is available as `d3.geo.orthographic` in the [geo.projection D3 plugin](https://github.com/d3/d3-plugins/tree/clip/geo/projection).
diff --git a/index.html b/index.html
@@ -36,49 +36,57 @@
 <body>
 <script src="http://d3js.org/d3.v2.min.js"></script>
 <script src="https://raw.github.com/d3/d3-plugins/clip/geo/projection/projection.js"></script>
-<script src="https://raw.github.com/d3/d3-plugins/clip/geo/clip/clip.js"></script>
 <script>
 
 var width = 960,
     height = 500;
 
-var path = d3.geo.path()
-    .projection(d3.geo.orthographic()
-      .translate([width / 2 - .5, height / 2 - .5]));
-
-var clip = d3.geo.clip();
+var projection = d3.geo.orthographic()
+      .rotate([0, 0, 45])
+      .translate([width / 2 - .5, height / 2 - .5]),
+    path = d3.geo.projection.path()
+      .projection(projection);
 
 var graticule = d3.geo.graticule();
 
 var svg = d3.select("body").selectAll("svg")
     .data([0, 180])
   .enter().append("svg")
+    .datum({x: 0, y: 0})
     .attr("width", width)
-    .attr("height", height);
-
-svg.append("path")
-    .datum(graticule.outline)
+    .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]);
+        svg.selectAll("path").attr("d", path);
+      }));
+
+svg.append("circle")
     .attr("class", "background")
-    .attr("d", clipPath);
+    .attr("transform", "translate(" + projection.translate() + ")")
+    .attr("r", projection.scale());
 
 svg.selectAll(".graticule")
     .data(graticule.lines)
   .enter().append("path")
     .attr("class", "graticule")
-    .attr("d", clipPath);
+    .attr("d", path);
 
-svg.append("path")
-    .datum(graticule.outline)
+svg.append("circle")
     .attr("class", "foreground")
-    .attr("d", clipPath);
+    .attr("transform", "translate(" + projection.translate() + ")")
+    .attr("r", projection.scale());
 
 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", clipPath);
+      .attr("d", path);
 });
 
 d3.json("/d/3682676/readme-land.json", function(collection) {
@@ -87,15 +95,7 @@
     .selectAll("path")
       .data(collection.geometries)
     .enter().append("path")
-      .attr("d", clipPath);
+      .attr("d", path);
 });
 
-function rotate(f) {
-  return function(rotate) {
-    return rotate(f());
-  };
-}
-
-function clipPath(d) { return path(clip(d)); }
-
 </script>
diff --git a/index.html b/index.html
@@ -48,10 +48,11 @@
 
 var clip = d3.geo.clip();
 
-var graticule = d3.geo.graticule()
-    .extent([[-90, -90], [90, 90]]);
+var graticule = d3.geo.graticule();
 
-var svg = d3.select("body").append("svg")
+var svg = d3.select("body").selectAll("svg")
+    .data([0, 180])
+  .enter().append("svg")
     .attr("width", width)
     .attr("height", height);
 
@@ -75,7 +76,7 @@
   svg.insert("g", ".graticule")
       .attr("class", "boundary")
     .selectAll("path")
-      .data(collection.features)
+      .data(collection.geometries)
     .enter().append("path")
       .attr("d", clipPath);
 });
@@ -84,11 +85,17 @@
   svg.insert("g", ".graticule,.boundary")
       .attr("class", "land")
     .selectAll("path")
-      .data(collection.features)
+      .data(collection.geometries)
     .enter().append("path")
       .attr("d", clipPath);
 });
 
+function rotate(f) {
+  return function(rotate) {
+    return rotate(f());
+  };
+}
+
 function clipPath(d) { return path(clip(d)); }
 
-</script>
+</script>
diff --git a/index.html b/index.html
@@ -48,7 +48,8 @@
 
 var clip = d3.geo.clip();
 
-var graticule = d3.geo.graticule();
+var graticule = d3.geo.graticule()
+    .extent([[-90, -90], [90, 90]]);
 
 var svg = d3.select("body").append("svg")
     .attr("width", width)

diff --git a/index.html b/index.html
@@ -36,6 +36,7 @@
 <body>
 <script src="http://d3js.org/d3.v2.min.js"></script>
 <script src="https://raw.github.com/d3/d3-plugins/clip/geo/projection/projection.js"></script>
+<script src="https://raw.github.com/d3/d3-plugins/clip/geo/clip/clip.js"></script>
 <script>
 
 var width = 960,
@@ -45,6 +46,8 @@
     .projection(d3.geo.orthographic()
       .translate([width / 2 - .5, height / 2 - .5]));
 
+var clip = d3.geo.clip();
+
 var graticule = d3.geo.graticule();
 
 var svg = d3.select("body").append("svg")
@@ -54,26 +57,26 @@
 svg.append("path")
     .datum(graticule.outline)
     .attr("class", "background")
-    .attr("d", path);
+    .attr("d", clipPath);
 
 svg.selectAll(".graticule")
     .data(graticule.lines)
   .enter().append("path")
     .attr("class", "graticule")
-    .attr("d", path);
+    .attr("d", clipPath);
 
 svg.append("path")
     .datum(graticule.outline)
     .attr("class", "foreground")
-    .attr("d", path);
+    .attr("d", clipPath);
 
 d3.json("/d/3682676/readme-boundaries.json", function(collection) {
   svg.insert("g", ".graticule")
       .attr("class", "boundary")
     .selectAll("path")
       .data(collection.features)
     .enter().append("path")
-      .attr("d", path);
+      .attr("d", clipPath);
 });
 
 d3.json("/d/3682676/readme-land.json", function(collection) {
@@ -82,7 +85,9 @@
     .selectAll("path")
       .data(collection.features)
     .enter().append("path")
-      .attr("d", path);
+      .attr("d", clipPath);
 });
 
-</script>
+function clipPath(d) { return path(clip(d)); }
+
+</script>
diff --git a/README.md b/README.md
@@ -1 +1 @@
-The [Orthographic projection](http://en.wikipedia.org/wiki/Orthographic_projection_(cartography%29) is available as `d3.geo.orthographic` in the [geo.projection D3 plugin](https://github.com/d3/d3-plugins/tree/clip/geo/projection).
+The [Orthographic projection](http://en.wikipedia.org/wiki/Orthographic_projection_%28cartography%29) is available as `d3.geo.orthographic` in the [geo.projection D3 plugin](https://github.com/d3/d3-plugins/tree/clip/geo/projection).
diff --git a/README.md b/README.md
@@ -1 +1 @@
-The [Orthographic projection](http://en.wikipedia.org/wiki/Orthographic_projection_(cartography)) is available as `d3.geo.orthographic` in the [geo.projection D3 plugin](https://github.com/d3/d3-plugins/tree/clip/geo/projection).
+The [Orthographic projection](http://en.wikipedia.org/wiki/Orthographic_projection_(cartography%29) is available as `d3.geo.orthographic` in the [geo.projection D3 plugin](https://github.com/d3/d3-plugins/tree/clip/geo/projection).
diff --git a/README.md b/README.md
@@ -1 +1 @@
-The [Aitoff projection](http://en.wikipedia.org/wiki/Aitoff_projection) is available as `d3.geo.aitoff` in the [geo.projection D3 plugin](https://github.com/d3/d3-plugins/tree/master/geo/projection).
+The [Orthographic projection](http://en.wikipedia.org/wiki/Orthographic_projection_(cartography)) is available as `d3.geo.orthographic` in the [geo.projection D3 plugin](https://github.com/d3/d3-plugins/tree/clip/geo/projection).
diff --git a/index.html b/index.html
@@ -35,14 +35,14 @@
 </style>
 <body>
 <script src="http://d3js.org/d3.v2.min.js"></script>
-<script src="https://raw.github.com/d3/d3-plugins/master/geo/projection/projection.js"></script>
+<script src="https://raw.github.com/d3/d3-plugins/clip/geo/projection/projection.js"></script>
 <script>
 
 var width = 960,
     height = 500;
 
 var path = d3.geo.path()
-    .projection(d3.geo.aitoff()
+    .projection(d3.geo.orthographic()
       .translate([width / 2 - .5, height / 2 - .5]));
 
 var graticule = d3.geo.graticule();

diff --git a/README.md b/README.md
@@ -1 +1 @@
-The [Cylindrical equal-area projection](http://en.wikipedia.org/wiki/Cylindrical_equal-area_projection) is available as `d3.geo.cylindricalEqualArea` in the [geo.projection D3 plugin](https://github.com/d3/d3-plugins/tree/master/geo/projection).
+The [Aitoff projection](http://en.wikipedia.org/wiki/Aitoff_projection) is available as `d3.geo.aitoff` in the [geo.projection D3 plugin](https://github.com/d3/d3-plugins/tree/master/geo/projection).
diff --git a/index.html b/index.html
@@ -42,7 +42,7 @@
     height = 500;
 
 var path = d3.geo.path()
-    .projection(d3.geo.cylindricalEqualArea()
+    .projection(d3.geo.aitoff()
       .translate([width / 2 - .5, height / 2 - .5]));
 
 var graticule = d3.geo.graticule();

diff --git a/README.md b/README.md
@@ -1 +1 @@
-The [Aitoff Projection](http://en.wikipedia.org/wiki/Aitoff_projection) is available as `d3.geo.aitoff` in the [geo.projection D3 plugin](https://github.com/d3/d3-plugins/tree/master/geo/projection).
+The [Cylindrical equal-area projection](http://en.wikipedia.org/wiki/Cylindrical_equal-area_projection) is available as `d3.geo.cylindricalEqualArea` in the [geo.projection D3 plugin](https://github.com/d3/d3-plugins/tree/master/geo/projection).
diff --git a/index.html b/index.html
@@ -42,7 +42,7 @@
     height = 500;
 
 var path = d3.geo.path()
-    .projection(d3.geo.aitoff()
+    .projection(d3.geo.cylindricalEqualArea()
       .translate([width / 2 - .5, height / 2 - .5]));
 
 var graticule = d3.geo.graticule();
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		D3 2.11’s `d3.geo.path` will automatically cut features for any aspect. Try
		dragging to rotate the world and see a new aspect.
Original file line number	Diff line number	Diff line change
		@@ -1,3 +0,0 @@
		Testing the new projection API.

		The [Orthographic projection](http://en.wikipedia.org/wiki/Orthographic_projection_%28cartography%29) is available as `d3.geo.orthographic` in the [geo.projection D3 plugin](https://github.com/d3/d3-plugins/tree/clip/geo/projection).
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		The [Orthographic projection](http://en.wikipedia.org/wiki/Orthographic_projection_(cartography%29) is available as `d3.geo.orthographic` in the [geo.projection D3 plugin](https://github.com/d3/d3-plugins/tree/clip/geo/projection).
		The [Orthographic projection](http://en.wikipedia.org/wiki/Orthographic_projection_%28cartography%29) is available as `d3.geo.orthographic` in the [geo.projection D3 plugin](https://github.com/d3/d3-plugins/tree/clip/geo/projection).
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		The [Aitoff projection](http://en.wikipedia.org/wiki/Aitoff_projection) is available as `d3.geo.aitoff` in the [geo.projection D3 plugin](https://github.com/d3/d3-plugins/tree/master/geo/projection).
		The [Orthographic projection](http://en.wikipedia.org/wiki/Orthographic_projection_(cartography)) is available as `d3.geo.orthographic` in the [geo.projection D3 plugin](https://github.com/d3/d3-plugins/tree/clip/geo/projection).
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		The [Cylindrical equal-area projection](http://en.wikipedia.org/wiki/Cylindrical_equal-area_projection) is available as `d3.geo.cylindricalEqualArea` in the [geo.projection D3 plugin](https://github.com/d3/d3-plugins/tree/master/geo/projection).
		The [Aitoff projection](http://en.wikipedia.org/wiki/Aitoff_projection) is available as `d3.geo.aitoff` in the [geo.projection D3 plugin](https://github.com/d3/d3-plugins/tree/master/geo/projection).