California projection built, test buoys added.

.gitignore

@@ -0,0 +1 @@
+natural-earth

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);

index.html

@@ -62,55 +62,30 @@
 
 <!-- <script src="d3.min.js"></script> -->
 <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
-<script src="//d3js.org/topojson.v1.min.js"></script>
+<!-- <script src="//d3js.org/topojson.v1.min.js"></script> -->
 
 <!-- <script src="gradients-v1.js"></script> -->
-<script src="gradients-v2.js"></script>
-<!-- UK complete but needs some minor debugging <script src="uk.js"></script> -->
-<!-- <script src="ocean.js"></script> -->
-
-<!-- ORIGINAL -->
-<!-- <svg viewBox="0 0 300px 300px">
-  <defs>
-      <linearGradient id="fillR" gradientUnits="userSpaceOnUse" x1="50" y1="0" x2="50" y2="86">
-        <stop offset="0%" stop-color="#FF0000"/>
-        <stop offset="100%" stop-color="" />
-      </linearGradient>
-
-      <linearGradient id="fillG" gradientUnits="userSpaceOnUse" x1="0" y1="86" x2="75" y2="43">
-        <stop offset="0%" stop-color="#00FF00"/>
-        <stop offset="100%" stop-color="" />
-      </linearGradient>
-
-      <linearGradient id="fillA" gradientUnits="userSpaceOnUse" x1="100" y1="86" x2="25" y2="43">
-        <stop offset="0%" stop-color="#0000FF"/>
-        <stop offset="100%" stop-color="" />
-      </linearGradient>
-
-      <path id="pathA-1" d="M 50,0 L 0,86 100,86 Z" fill="url(#fillR)"/>
-      <path id="pathB-1" d="M 50,0 L 0,86 100,86 Z" fill="url(#fillG)"/>
-      <filter id="Default">
-        <feImage xlink:href="#pathA-1" result="layerA" x="0" y="0" />
-        <feImage xlink:href="#pathB-1" result="layerB" x="0" y="0" />
-        <feComposite in="layerA" in2="layerB" operator="arithmetic" k1="0" k2="1.0" k3="1.0" k4="0" result="temp"/>
-        <feComposite in="temp" in2="SourceGraphic"   operator="arithmetic" k1="0" k2="1.0" k3="1.0" k4="0"/>
-      </filter>
-    </defs>
-
-    <g stroke="none" stroke-width="0" shape-rendering="crispEdges" >
-      <path d="M 50,0 L 0,86 100,86 Z" fill="url(#fillB)" filter="url(#Default)" />
-    </g>
-</svg>
- -->
+<!-- <script src="gradients-v2.js"></script> -->
+<script src="california.js"></script>
 
 
 <!--
+46026: 37.755 N 122.839 W (37°45'18" N 122°50'21" W)
+
 DISCUSS:
 Opacity solution lacks saturation and transition alignment
 gourand / phong?
 Delaunay / Voronoi
 Mesh gradients / coon mesh
 feImage
+
+Don't discuss triangle gradient attempts.
+ogr2ogr -f GeoJSON -clipsrc -114 32.5 -125 43 -where "name IN ('California', 'Oregon', 'Nevada', 'Idaho')" california.geojson states.shp
+
+Fast hex/dec conversion: http://stackoverflow.com/questions/12934720/how-to-increment-decrement-hex-color-values-with-javascript-jquery
+http://dvisvgm.bplaced.net/Gradients
+http://www.gdal.org/ogr_sql.html
+http://www.sarasafavi.com/intro-to-ogr-part-i-exploring-data.html
 -->
 
 </body>