Preparing #182

electricitymaps · Feb 15, 2017 · d817e66 · d817e66
1 parent 2e4106a
commit d817e66
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 9 deletions.
diff --git a/web/app/horizontalcolorbar.js b/web/app/horizontalcolorbar.js
@@ -5,11 +5,12 @@ function HorizontalColorbar(selector, d3ColorScale, d3TickFormat, d3TickValues)
     this.PADDING_Y = 10; // Inner padding allow place for the axis text
 
     this.root = d3.select(selector);
-    this.scale = d3ColorScale.copy();
-    this.colors = d3ColorScale.range();
-    this.domain = d3ColorScale.domain();
     this.d3TickFormat = d3TickFormat;
     this.d3TickValues = d3TickValues;
+    this.originalColorScale = d3ColorScale;
+    this._setDomainAndRange(
+        d3ColorScale.domain(),
+        d3ColorScale.range ? d3ColorScale.range() : undefined)
 
     this.gColorbar = this.root.append('g')
         .attr('transform', 'translate(' + this.PADDING_X + ', 0)');
@@ -79,10 +80,10 @@ HorizontalColorbar.prototype.render = function() {
     if (this.scale.ticks) {
         // Linear scale
         var pixelRelativeScale = d3.scaleLinear()
-            .domain([d3.min(this.domain), d3.max(this.domain)])
+            .domain([d3.min(this._domain), d3.max(this._domain)])
             .range([0, 1]);
         this.scale
-            .range(this.domain.map(function (d, i) {
+            .range(this._domain.map(function (d, i) {
                 return pixelRelativeScale(d) * that.colorbarWidth;
             }));
 
@@ -93,7 +94,7 @@ HorizontalColorbar.prototype.render = function() {
             .append('stop')
         .merge(stops)
             .attr('offset', function(d, i) { 
-                return pixelRelativeScale(that.domain[i]);
+                return i / (that.colors.length - 1);
             })
             .attr('stop-color', function (d) { return d; });
         // Add a rect with the gradient
@@ -175,6 +176,7 @@ HorizontalColorbar.prototype.currentMarker = function(d) {
         this.gColorbar.select('.marker')
             .style('display', 'none')
     }
+    return this;
 }
 
 HorizontalColorbar.prototype.markerColor = function(arg) {
@@ -183,4 +185,25 @@ HorizontalColorbar.prototype.markerColor = function(arg) {
     return this;
 }
 
+HorizontalColorbar.prototype.domain = function(arg) {
+    if (!arg) return this._domain;
+    this._setDomainAndRange(arg, undefined);
+    return this;
+}
+
+HorizontalColorbar.prototype._setDomainAndRange = function(d, r) {
+    var that = this;
+
+    this._domain = d;
+    this.colors = r ?
+        r :
+        d3.range(10).map(function(i) { 
+            var e = d3.extent(that._domain);
+            return that.originalColorScale(d3.interpolate(e[0], e[1])(i / (10 - 1)));
+        });
+    this.scale = d3.scaleLinear()
+        .range(this.colors)
+        .domain(this._domain);
+}
+
 module.exports = HorizontalColorbar;
diff --git a/web/app/linegraph.js b/web/app/linegraph.js
@@ -38,6 +38,8 @@ function LineGraph(selector, xAccessor, yAccessor, definedAccessor, yColorScale)
     this.x = x = d3.scaleTime();
     this.y = y = d3.scaleLinear()
         .domain(d3.extent(yColorScale.domain()));
+    // Override domain
+    y.domain([y.domain()[0], 750]);
 
     // Create line
     this.line = d3.line()

diff --git a/web/app/main.js b/web/app/main.js
@@ -140,9 +140,9 @@ moment.locale(locale);
 // Display embedded warning
 // d3.select('#embedded-error').style('display', isEmbedded ? 'block' : 'none');
 
-var co2color = d3.scaleLinear()
-    .domain([0, 375, 725, 800])
-    .range(['green', 'orange', 'rgb(26,13,0)'])
+var maxCo2 = 800;
+var co2color = d3.scaleSequential(d3.interpolateMagma)
+    .domain([2000, 0])
     .clamp(true);
 var maxWind = 15;
 var windColor = d3.scaleLinear()
@@ -223,6 +223,7 @@ var countryHistoryGraph = new LineGraph('.country-history',
 if (!isSmallScreen())
     var co2Colorbar = new HorizontalColorbar('.co2-colorbar', co2color)
         .markerColor('white')
+        .domain([0, maxCo2])
         .render();
 var windColorbar = new HorizontalColorbar('.wind-colorbar', windColor)
     .markerColor('black');