added legend

css/style.css

@@ -35,7 +35,7 @@ input {
   font-family: monospace;
   padding: 10px 20px;
   font-size: 18px;
-  margin: 20px 0px 0px 200px;
+  margin: 10px 0px 0px 200px;
   color: black;
   opacity:0.7;
   text-align: center;
@@ -50,7 +50,7 @@ form {
   background: transparent;
 }
 
-.rect {
+.fudge {
   fill: white;
   stroke: none;
 }

index.html

@@ -33,6 +33,7 @@
     <script src="//d3js.org/d3-queue.v3.min.js"></script>
     <script src="js/map.js"></script>
     <script src="js/input.js"></script>
+    <script src="js/gradient_legend.js"></script>
   </head>
 
   <div id="non-svg-elements">

js/app.js

@@ -16,6 +16,7 @@
   , svg_height = 600
   , map_size = {"width": svg_width * 0.5, "height":svg_height * 0.5};
 
+  var polygon_fill_opacity = 0.60;
 
   function runApp(error, us, usaf,postalcode2wmo,energy,vintage2nationalTotal){
     //console.log(vintage2nationalTotal)
@@ -43,7 +44,7 @@
     //console.log(energy["(722010, 1900)"])
     // create non-svg elements
     var input = NewInput();
-
+    // insert input
     d3.select("#"+input.div_id())
       .selectAll("div")
       .data(map_data)
@@ -53,19 +54,38 @@
     ;
 
     // create an instance of NewMap
-    var vMap = NewMap()
+    var vMap = NewMap();
     // update map settings
+    vMap.polygon_opacity(polygon_fill_opacity)
     vMap.height(map_size.height)
     vMap.width(map_size.width)
+
+    // create an instance of GradientLegend
+    var gLegend = GradientLegend();
+    // update legend settings
+    gLegend.stop_opacity(polygon_fill_opacity)
     // a container nested under svg
     var svg = d3.select("#viz-container")
-      .attr("height",svg_height)
-      .attr("width",svg_width)
-    // creat container for each viz
-    svg.selectAll("g")
+        .attr("height",svg_height)
+        .attr("width",svg_width)
+
+    // create a new container for each viz
+    // gradient legend
+
+    var legend = svg.selectAll("#"+gLegend.id())
+        .data(map_data)
+       .enter().append("g")
+        .attr("id",gLegend.id());
+
+    // map
+    var map = svg.selectAll("#"+vMap.id())
         .data(map_data)
        .enter().append("g")
         .attr("id",vMap.id())
-        .call(vMap)
+        .call(vMap);
+
+    gLegend.domain(vMap.choroplethScale().domain())
+    console.log(gLegend.domain())
+    legend.call(gLegend)
   }
 }())

js/gradient_legend.js

@@ -0,0 +1,98 @@
+function GradientLegend(){
+
+  var id = "gradient-legend";
+
+  var height = 7
+    , width = 510;
+  var stop_opacity = 0.60
+
+  var domain;
+
+  function chart(selection) {
+    selection.each(function(data) {
+      //console.log(data)
+      var legend = d3.select(this)
+          .attr("transform","translate(85,65)");
+
+    // create some definitions
+    var defs = legend.append("defs");
+      /*
+       RED
+      #d73027
+      #fc8d59
+      #fee08b
+      #d9ef8b
+      #91cf60
+      #1a9850
+       Green
+      */
+    // define a linear gradient
+    var linearGradient = defs.append("linearGradient")
+          .attr("id","map-color-gradient")
+          //.attr("gradientUnits", "userSpaceOnUse")
+          .attr("x1", "0%").attr("y1", "0%")
+          .attr("x2", "100%").attr("y2", "0%")
+          .selectAll("stop")
+          .data([
+            {offset: "0%", color: "#1a9850"},
+            {offset: "16.67%", color: "#91cf60"},
+            {offset: "33.33%", color: "#d9ef8b"},
+            {offset: "50%", color: "#fee08b"},
+            {offset: "66.67%", color: "#fc8d59"},
+            {offset: "100%", color: "#d73027"}
+          ])
+         .enter().append("stop")
+          .attr("offset", function(d) { return d.offset; })
+          .attr("stop-color", function(d) { return d.color; })
+          .attr("stop-opacity",stop_opacity);
+
+      var legend_rect = legend.append("rect")
+          .attr("x",0)
+          .attr("y",0)
+          .attr("width",width)
+          .attr("height",height)
+          .style("fill","url(#map-color-gradient)");
+
+      // legend scale
+      var x = d3.scaleLinear()
+          .domain(d3.extent(domain))
+          .range([0,width])
+
+      var xAxis = legend.append("g")
+          .attr("id","xAxis")
+          .call(d3.axisBottom(x))
+
+
+      // legend axis
+    //end selection
+    })
+  // end chart
+  }
+  chart.id = function(i) {
+    if (!arguments.length) { return id; }
+    id = i;
+    return chart;
+  };
+  chart.width = function(w) {
+    if (!arguments.length) { return width; }
+    width = w;
+    return chart;
+  };
+  chart.height = function(h) {
+    if (!arguments.length) { return height; }
+    height = h;
+    return chart;
+  };
+  chart.stop_opacity = function(s) {
+    if (!arguments.length) { return stop_opacity; }
+    stop_opacity = s;
+    return chart;
+  };
+  chart.domain = function(d) {
+    if (!arguments.length) { return domain; }
+    domain = d;
+    return chart;
+  };
+// end GradientLegend
+  return chart
+}

js/map.js

@@ -10,18 +10,31 @@ function NewMap(){
       .y( d => +d.screen_lat)
 
   var wmo = [];
-
+  var polygon_opacity = 0.60;
   var colorScale = d3.scaleLinear();
 
+  var consumption_extent,
+      choroplethScale;
+
   function chart(selection) {
     selection.each(function(map_data) {
       console.log(map_data)
       d3.select("svg").append("rect")
+        .classed("fudge",true)
         .attr("x",680)
-        .attr("y",420)
+        .attr("y",430)
         .classed("rect",true)
         .attr("height",20)
         .attr("width",40)
+
+      d3.select("svg").append("rect")
+        .classed("fudge",true)
+        .attr("x",65)
+        .attr("y",0)
+        .classed("rect",true)
+        .attr("height",20)
+        .attr("width",40);
+
       // set data vars
       var us = map_data["us"]
         , usaf = map_data["usaf"]
@@ -42,13 +55,14 @@ function NewMap(){
       })
       //console.log(consumption)
       //console.log(d3.extent(consumption))
-      var consumption_extent = d3.extent(consumption)
-      , consumption_min = consumption_extent[0]
+      consumption_extent = d3.extent(consumption)
+
+      var consumption_min = consumption_extent[0]
       , consumption_max = consumption_extent[1]
       , consumption_mid = (consumption_min+consumption_max) / 2.0
       , consumption_domain = [consumption_min,consumption_mid, consumption_max]
       , consumption_delta = (consumption_max-consumption_min)/6;
-      var choroplethScale = d3.scaleLinear()
+      choroplethScale = d3.scaleLinear()
           .domain([
              consumption_min
             , consumption_min+consumption_delta
@@ -103,7 +117,7 @@ function NewMap(){
       })
       // create container for map elements
       var viz_g = d3.select("#"+id)
-          .attr("transform","translate(100,90)");
+          .attr("transform","translate(100,100)");
 
       // build map elements
       viz_g.append("path")
@@ -138,8 +152,7 @@ function NewMap(){
       voronoi.extent([[-15, -10], [width + 15, height + 15]])
 
       var v = voronoi(usaf)
-        , poly = v.polygons()
-        , polygon_opacity = 0.50;
+        , poly = v.polygons();
 
       var vData = v.cells.map(function(d,i){
         //console.log(d)
@@ -196,7 +209,7 @@ function NewMap(){
           .transition()
           .duration(2000)
 */
-          .style("fill-opacity",0.60);
+          .style("fill-opacity",polygon_opacity);
           //.style("fill-opacity", d => d.opacity)
 
       polygons.on("click",function(d){
@@ -233,6 +246,22 @@ function NewMap(){
     height = h;
     return chart;
   };
+  chart.polygon_opacity = function(p) {
+    if (!arguments.length) { return polygon_opacity; }
+    polygon_opacity = p;
+    return chart;
+  };
+  chart.consumption_extent = function(c) {
+    if (!arguments.length) { return consumption_extent; }
+    consumption_extent = c;
+    return chart;
+  };
+  chart.choroplethScale= function(c) {
+    if (!arguments.length) { return choroplethScale; }
+    choroplethScale = c;
+    return chart;
+  };
+
 // end NewMap
   return chart
 }