lmullen · May 21, 2014 23:41 · May 13, 2013 · Mar 23, 2013 · Mar 9, 2013 · Feb 18, 2013
diff --git a/index.html b/index.html
@@ -17,7 +17,7 @@
 <body>
 <script src="http://d3js.org/d3.v3.min.js"></script>
 <script src="http://d3js.org/d3.geo.projection.v0.min.js"></script>
-<script src="http://d3js.org/topojson.v0.min.js"></script>
+<script src="http://d3js.org/topojson.v1.min.js"></script>
 <script>
 
 var width = 960,
@@ -50,7 +50,7 @@
 
 d3.json("/mbostock/raw/4090846/us-land.json", function(error, us) {
   svg.append("path")
-      .datum(topojson.object(us, us.objects.land))
+      .datum(topojson.feature(us, us.objects.land))
       .attr("class", "boundary")
       .attr("d", path);
 });

diff --git a/index.html b/index.html
@@ -29,7 +29,8 @@
     .rotate([76.00, -34.50, 32.12])
     .center([-2, 5])
     .tilt(25)
-    .clipAngle(Math.acos(1 / 1.1) * 180 / Math.PI - 1e-6);
+    .clipAngle(Math.acos(1 / 1.1) * 180 / Math.PI - 1e-6)
+    .precision(.1);
 
 var graticule = d3.geo.graticule()
     .extent([[-93, 27], [-47 + 1e-6, 57 + 1e-6]])

diff --git a/index.html b/index.html
@@ -29,7 +29,7 @@
     .rotate([76.00, -34.50, 32.12])
     .center([-2, 5])
     .tilt(25)
-    .clipAngle(25);
+    .clipAngle(Math.acos(1 / 1.1) * 180 / Math.PI - 1e-6);
 
 var graticule = d3.geo.graticule()
     .extent([[-93, 27], [-47 + 1e-6, 57 + 1e-6]])

diff --git a/index.html b/index.html
@@ -47,7 +47,7 @@
     .attr("class", "graticule")
     .attr("d", path);
 
-d3.json("../4090846/us-land.json", function(error, us) {
+d3.json("/mbostock/raw/4090846/us-land.json", function(error, us) {
   svg.append("path")
       .datum(topojson.object(us, us.objects.land))
       .attr("class", "boundary")

diff --git a/index.html b/index.html
@@ -47,7 +47,7 @@
     .attr("class", "graticule")
     .attr("d", path);
 
-d3.json("../4090846/us.json", function(error, us) {
+d3.json("../4090846/us-land.json", function(error, us) {
   svg.append("path")
       .datum(topojson.object(us, us.objects.land))
       .attr("class", "boundary")

diff --git a/index.html b/index.html
@@ -16,7 +16,8 @@
 </style>
 <body>
 <script src="http://d3js.org/d3.v3.min.js"></script>
-<script src="https://raw.github.com/d3/d3-plugins/master/geo/projection/projection.js"></script>
+<script src="http://d3js.org/d3.geo.projection.v0.min.js"></script>
+<script src="http://d3js.org/topojson.v0.min.js"></script>
 <script>
 
 var width = 960,
@@ -46,9 +47,9 @@
     .attr("class", "graticule")
     .attr("d", path);
 
-d3.json("/d/3750900/us-boundary.json", function(error, collection) {
+d3.json("../4090846/us.json", function(error, us) {
   svg.append("path")
-      .datum(collection)
+      .datum(topojson.object(us, us.objects.land))
       .attr("class", "boundary")
       .attr("d", path);
 });

diff --git a/index.html b/index.html
@@ -46,7 +46,7 @@
     .attr("class", "graticule")
     .attr("d", path);
 
-d3.json("/d/3750900/us-boundary.json", function(collection) {
+d3.json("/d/3750900/us-boundary.json", function(error, collection) {
   svg.append("path")
       .datum(collection)
       .attr("class", "boundary")

diff --git a/index.html b/index.html
@@ -16,7 +16,7 @@
 </style>
 <body>
 <script src="http://d3js.org/d3.v3.min.js"></script>
-<script src="https://raw.github.com/d3/d3-plugins/projection/geo/projection/projection.js"></script>
+<script src="https://raw.github.com/d3/d3-plugins/master/geo/projection/projection.js"></script>
 <script>
 
 var width = 960,

diff --git a/index.html b/index.html
@@ -15,7 +15,7 @@
 
 </style>
 <body>
-<script src="https://raw.github.com/mbostock/d3/projection/d3.v2.min.js"></script>
+<script src="http://d3js.org/d3.v3.min.js"></script>
 <script src="https://raw.github.com/d3/d3-plugins/projection/geo/projection/projection.js"></script>
 <script>
 

diff --git a/thumbnail.png b/thumbnail.png
diff --git a/index.html b/index.html
@@ -28,7 +28,7 @@
     .rotate([76.00, -34.50, 32.12])
     .center([-2, 5])
     .tilt(25)
-    .clipAngle(20);
+    .clipAngle(25);
 
 var graticule = d3.geo.graticule()
     .extent([[-93, 27], [-47 + 1e-6, 57 + 1e-6]])

diff --git a/index.html b/index.html
@@ -48,7 +48,7 @@
 
 d3.json("/d/3750900/us-boundary.json", function(collection) {
   svg.append("path")
-      .datum(circle.clip(collection))
+      .datum(collection)
       .attr("class", "boundary")
       .attr("d", path);
 });

diff --git a/index.html b/index.html
@@ -27,11 +27,8 @@
     .scale(5500)
     .rotate([76.00, -34.50, 32.12])
     .center([-2, 5])
-    .tilt(25);
-
-var circle = d3.geo.circle()
-    .angle(20)
-    .origin([-projection.rotate()[0], -projection.rotate()[1]]);
+    .tilt(25)
+    .clipAngle(20);
 
 var graticule = d3.geo.graticule()
     .extent([[-93, 27], [-47 + 1e-6, 57 + 1e-6]])

diff --git a/index.html b/index.html
@@ -24,7 +24,7 @@
 
 var projection = d3.geo.satellite()
     .distance(1.1)
-    .scale(6000)
+    .scale(5500)
     .rotate([76.00, -34.50, 32.12])
     .center([-2, 5])
     .tilt(25);

diff --git a/index.html b/index.html
@@ -24,17 +24,17 @@
 
 var projection = d3.geo.satellite()
     .distance(1.1)
-    .scale(5800)
+    .scale(6000)
     .rotate([76.00, -34.50, 32.12])
-    .center([0, 5])
-    .tilt(-3);
+    .center([-2, 5])
+    .tilt(25);
 
 var circle = d3.geo.circle()
     .angle(20)
     .origin([-projection.rotate()[0], -projection.rotate()[1]]);
 
 var graticule = d3.geo.graticule()
-    .extent([[-93, 27], [-66 + 1e-6, 48 + 1e-6]])
+    .extent([[-93, 27], [-47 + 1e-6, 57 + 1e-6]])
     .step([3, 3]);
 
 var path = d3.geo.path()

diff --git a/index.html b/index.html
@@ -26,7 +26,7 @@
     .distance(1.1)
     .scale(5800)
     .rotate([76.00, -34.50, 32.12])
-    .center([0, 10])
+    .center([0, 5])
     .tilt(-3);
 
 var circle = d3.geo.circle()

diff --git a/index.html b/index.html
@@ -26,7 +26,7 @@
     .distance(1.1)
     .scale(5800)
     .rotate([76.00, -34.50, 32.12])
-    .center([0, 20])
+    .center([0, 10])
     .tilt(-3);
 
 var circle = d3.geo.circle()

diff --git a/index.html b/index.html
@@ -26,6 +26,7 @@
     .distance(1.1)
     .scale(5800)
     .rotate([76.00, -34.50, 32.12])
+    .center([0, 20])
     .tilt(-3);
 
 var circle = d3.geo.circle()

diff --git a/index.html b/index.html
@@ -20,7 +20,7 @@
 <script>
 
 var width = 960,
-    height = 500;
+    height = 960;
 
 var projection = d3.geo.satellite()
     .distance(1.1)
@@ -55,4 +55,6 @@
       .attr("d", path);
 });
 
+d3.select(self.frameElement).style("height", height + "px");
+
 </script>
diff --git a/index.html b/index.html
@@ -2,8 +2,14 @@
 <meta charset="utf-8">
 <style>
 
-path {
+.graticule {
+  fill: none;
+  stroke: #777;
+}
+
+.boundary {
   fill: #ccc;
+  fill-opacity: .8;
   stroke: #000;
 }
 
@@ -18,13 +24,17 @@
 
 var projection = d3.geo.satellite()
     .distance(1.1)
-    .scale(2400)
-    .rotate([76, -35, 32])
-    .tilt(20);
+    .scale(5800)
+    .rotate([76.00, -34.50, 32.12])
+    .tilt(-3);
 
 var circle = d3.geo.circle()
     .angle(20)
-    .origin([-76, 35]);
+    .origin([-projection.rotate()[0], -projection.rotate()[1]]);
+
+var graticule = d3.geo.graticule()
+    .extent([[-93, 27], [-66 + 1e-6, 48 + 1e-6]])
+    .step([3, 3]);
 
 var path = d3.geo.path()
     .projection(projection);
@@ -33,10 +43,16 @@
     .attr("width", width)
     .attr("height", height);
 
+svg.append("path")
+    .datum(graticule)
+    .attr("class", "graticule")
+    .attr("d", path);
+
 d3.json("/d/3750900/us-boundary.json", function(collection) {
   svg.append("path")
       .datum(circle.clip(collection))
+      .attr("class", "boundary")
       .attr("d", path);
 });
 
-</script>
+</script>
diff --git a/index.html b/index.html
@@ -20,7 +20,7 @@
     .distance(1.1)
     .scale(2400)
     .rotate([76, -35, 32])
-    .tilt(-20);
+    .tilt(20);
 
 var circle = d3.geo.circle()
     .angle(20)

diff --git a/index.html b/index.html
@@ -18,7 +18,7 @@
 
 var projection = d3.geo.satellite()
     .distance(1.1)
-    .scale(1200)
+    .scale(2400)
     .rotate([76, -35, 32])
     .tilt(-20);
 

diff --git a/index.html b/index.html
@@ -23,6 +23,7 @@
     .tilt(-20);
 
 var circle = d3.geo.circle()
+    .angle(20)
     .origin([-76, 35]);
 
 var path = d3.geo.path()

diff --git a/index.html b/index.html
@@ -22,6 +22,9 @@
     .rotate([76, -35, 32])
     .tilt(-20);
 
+var circle = d3.geo.circle()
+    .origin([-76, 35]);
+
 var path = d3.geo.path()
     .projection(projection);
 
@@ -31,7 +34,7 @@
 
 d3.json("/d/3750900/us-boundary.json", function(collection) {
   svg.append("path")
-      .datum(collection)
+      .datum(circle.clip(collection))
       .attr("d", path);
 });
 

diff --git a/index.html b/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+
+path {
+  fill: #ccc;
+  stroke: #000;
+}
+
+</style>
+<body>
+<script src="https://raw.github.com/mbostock/d3/projection/d3.v2.min.js"></script>
+<script src="https://raw.github.com/d3/d3-plugins/projection/geo/projection/projection.js"></script>
+<script>
+
+var width = 960,
+    height = 500;
+
+var projection = d3.geo.satellite()
+    .distance(1.1)
+    .scale(1200)
+    .rotate([76, -35, 32])
+    .tilt(-20);
+
+var path = d3.geo.path()
+    .projection(projection);
+
+var svg = d3.select("body").append("svg")
+    .attr("width", width)
+    .attr("height", height);
+
+d3.json("/d/3750900/us-boundary.json", function(collection) {
+  svg.append("path")
+      .datum(collection)
+      .attr("d", path);
+});
+
+</script>
No results found