diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..6034bb1
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+natural-earth
diff --git a/california.js b/california.js
new file mode 100644
index 0000000..e2518dd
--- /dev/null
+++ b/california.js
@@ -0,0 +1,39 @@
+var file = 'natural-earth/california.geojson';
+
+d3.json(file, function(error, mapJson) {
+
+ var projection =
+ d3.geo.mercator()
+ .center([-122, 38])
+ .scale(1960)
+ .translate([w / 2, h / 2]);
+
+ var path = d3.geo.path().projection(projection);
+
+ svg.selectAll('.subunit')
+ .data(mapJson.features)
+ .enter().append('path')
+ .attr('d', path)
+ .attr('stroke', 'lime');
+
+ var buoys = [];
+ buoys.push(projection([-122.634, 37.786]));
+ buoys.push(projection([-122.839, 37.755]));
+ buoys.push(projection([-122.977, 37.996]));
+
+ svg.selectAll('.buoy')
+ .data(buoys)
+ .enter().append('circle')
+ .attr('cx', function(d) { return d[0]; })
+ .attr('cy', function(d) { return d[1]; })
+ .attr('r', 5)
+ .attr('fill', 'crimson');
+});
+
+var w = 450;
+var h = 450;
+
+var svg = d3.select("body").append("svg")
+ .attr("style", "border:1px solid lime")
+ .attr("width", w)
+ .attr("height", h);
diff --git a/index.html b/index.html
index 3edf511..7c908e2 100644
--- a/index.html
+++ b/index.html
@@ -62,55 +62,30 @@
-
+
-
-
-
-
-
-
+
+