D3 Color Gradients

Polylinear Scales using color parameter outputs in D3.js.

by pbatey

HTML

<div id="visualization"></div>

JavaScript

var width = 500
var nshades = 7
const curiousBlue = '#2185d0', brightPink = '#bc5090', orange = '#ffa600'

d3.select("#visualization").append('svg').attr('width', width)
var vis = d3.select("svg")

var arr = d3.range(nshades)

//position scale
var xScale = d3.scale.linear().domain([0, nshades]).range([0, width])

//The mystical polylinear color scale
var colorScale = d3.scale.linear()
  .domain([0, (nshades-1)*.5, nshades-1])
  .range([curiousBlue, brightPink, orange])

vis.selectAll('rect').data(arr).enter()
    .append('rect')
    .attr({
        x : function(d) { return xScale(d) },
        y : 20,
        height: 20,
        width: width/nshades,
        fill: function(d) { return colorScale(d) }
    });