Gradient Color Scale

_.md

[ Launch: Tributary inlet ] 11334732 by jsl6906

config.json

{"description":"Gradient Color Scale","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"asdf":{"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":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/JggQXXz.png"}

inlet.js

var margin = {top: 65, right: 10, bottom: 30, left: 30},
    width = 500 - margin.left - margin.right,
    height = 550 - margin.top - margin.bottom;

var svg = d3.select("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var gradient = svg.append("defs").append("linearGradient").attr("id", "gradient");

var colorscale = d3.scale.linear()
    .domain([0, 1])
    .range(["red","green"]);
var symbol = d3.svg.symbol().type("cross").size(250);
var percent = d3.format(".1%f");

gradient.selectAll("stop")
	.data([["0%", "red"], ["100%", "green"]])
  .enter().append("stop")
	.attr("offset", function(d) { return d[0]; })
	.attr("stop-color", function(d) { return d[1]; });

svg.append("rect")
	.style("fill", "url(#gradient)")
	.style("stroke", "black")
	.style("shape-rendering", "crispEdges")
	.attr({
      width: 300,
      height: 30,
      y: 10 - margin.top
    })

svg.selectAll("text.legendText")
	.data([
      ["0%", 5, "start"],
      ["100%", 295, "end"]
    ])
  .enter().append("text")
	.attr({
      "class": "legendText",
      x: function(d) { return d[1]; },
      y: 25 - margin.top,
      dy: ".35em",
      "text-anchor": function(d) { return d[2]; }
    })
	.style("fill", "white")
	.text(function(d) { return d[0]; })

svg.append("text")
	.attr("x", 310)
	.attr("y", 25 - margin.top)
	.attr("dy", ".35em")
	.text("Click to update!")
	.style("cursor", "pointer")
	.on("click", update);


function update() {
    //generate random data
    var data = [];
    for (var i=0; i<15; i++) {
        data.push(Math.random());
    }
    //add-update symbols
    var symbols = svg.selectAll("path")
        .data(data);
    symbols.enter().append("path")
        .attr("transform", function(d,i) { return "translate(0," + (25*i + 10) + ")"; })
        .attr("d", symbol)
        .style("stroke","black");
    symbols.transition().duration(1000)
        .style("fill", function(d) { return colorscale(d); }); 
    //add-update text
    var text = svg.selectAll("text.dataText")
        .data(data);
    text.enter().append("text")
        .attr("class", "dataText")
        .attr("transform", function(d,i) { return "translate(25," + (25*i + 10) + ")"; })  
        .attr("dy",".35em");
    text.text(function(d) {return percent(d);});     
}
update();