temp legend

_.md

[ Launch: temp legend ] 5987481 by poezn

config.json

{"description":"temp legend","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"g.svg":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/o8gsy6W.png"}

g.svg

inlet.js

var tempMin = -50;
var tempMax = 50;
var tempDisplayMin = -50;
var tempDisplayMax = 50; 
  
var range = [315, 15];
var legendScale = d3.scale.ordinal()
    .domain(d3.range(tempMin, tempMax))
    .rangeBands([range[0] + 15, range[1] - 15]);

var colorScale = d3.scale.linear()
    .domain([-50, -30, 10, 30])
    .range(['#26b6e7', '#21C4F7', '#F0F8B3', '#D52323'])
    .interpolate(d3.interpolateLab)

var legendScaleCont = d3.scale.linear()
    .domain([tempMin, tempMax])
    .range(range);

var brush = d3.svg.brush()
    .y(legendScaleCont)
    .on("brushend", function(d, i) {
        var extent = brush.extent();
      tempMin = extent[0];
      tempMax = extent[1];
            d3.selectAll("rect.legend")
            .style({
            "fill": function(d, i) {
                return d >= tempMin && d < tempMax ? colorScale(d) : "#515268";
            }
        });

    });

var legendWidth = 40;

// This draws the legend
g.select("#brush")
.attr({
    "width": legendWidth,
    "transform": function(d, i) {
        var tx = 60;
        return "translate(" + [tx, 0 ] + ")";
    }
})
.call(brush)
.select("rect.extent")
.attr({
  "width": 2,
  "x": (legendWidth - 2) / 2
})
.style({
  "fill": "#FFF"
})

g.selectAll(".resize")
.append("circle")
.attr({
  "r": 4,
  "cx": legendWidth/2,
  "cy": 0
})
.style({
  "fill": "#FFF"
})

g.select("rect.background")
.attr({
  "width": legendWidth
})

var rects = g.select("#range")
.selectAll("rect.legend")
.data(d3.range(tempDisplayMin, tempDisplayMax, 1));

rects.enter().append("rect")
.attr({
    "class": "legend",
    "height": Math.ceil(legendScale.rangeBand()),
    "width": legendWidth,
    "shape-rendering": "crispEdges",
    "transform": function(d, i) {
        var ty = legendScale(d);
        var tx = 60;
        return "translate(" + [tx, ty ] + ")";
    }
});

rects.style({
    "fill": function(d, i) {
        return d >= tempMin && d < tempMax ? colorScale(d) : "#515268";
    }
});

g.select("#ticks").selectAll("text.legend")
.data(d3.range(tempMin, tempMax + 1, 5))
.enter().append("text")
.attr({
    "class": "legend",
    "text-anchor": "middle",
    "transform": function(d, i) {
        var ty = legendScaleCont(d);
        var tx = 31;
        return "translate(" + [tx, ty ] + ")";
    }
})
.style({
    "font-size": 12 + "px"
})
.text(function(d, i) {
    return d;
});