Added geodata and first example, cited geodata in README

Rathunter · Nov 13, 2012 · 19abd87 · 19abd87
1 parent e4cf85e
commit 19abd87
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -7,4 +7,10 @@ These are sample code files to accompany the book “Interactive Data Visualizat
 
 This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
 
-http://creativecommons.org/licenses/by-nc-nd/3.0/
+http://creativecommons.org/licenses/by-nc-nd/3.0/
+
+### GeoJSON Data
+
+Chapter 12 includes GeoJSON data that was generated by Mike Bostock, and is included in the D3 download.  For more information on how that data was generated, see:
+
+https://github.com/mbostock/d3/blob/master/examples/data/README.md
diff --git a/chapter_12/01_paths.html b/chapter_12/01_paths.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<title>D3 Demo: GeoJSON</title>
+		<script type="text/javascript" src="../d3/d3.v2.js"></script>
+		<style type="text/css">
+			/* No style rules here yet */		
+		</style>
+	</head>
+	<body>
+		<script type="text/javascript">
+
+			//Width and height
+			var w = 500;
+			var h = 300;
+
+			//Create SVG element
+			var svg = d3.select("body")
+						.append("svg")
+						.attr("width", w)
+						.attr("height", h);
+
+			//Load in GeoJSON data
+			d3.json("us-states.json", function(json) {
+
+				//Define default path generator
+				var path = d3.geo.path();
+
+				//Bind data and create one path per GeoJSON feature
+				svg.selectAll("path")
+				   .data(json.features)
+				   .enter()
+				   .append("path")
+				   .attr("d", path);
+
+			});
+
+		</script>
+	</body>
+</html>