D3 Color Gradients

Polylinear Scales using color parameter outputs in D3.js.

HTML

<div id="visualization"></div>
<div id="visualization2"></div>
<div id="visualization3"></div>
<div id="visualization4"></div>
<div id="visualization5"></div>
<div id="visualization6"></div>

CSS

svg {
  height: 30px
}

JavaScript

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

var arr = d3.range(100)

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

//The mystical polylinear color scale
var colorScale = d3.scale.linear().domain([0,100])
    .range(["#5d2f58", "#fefdfe"])

vis.selectAll('rect').data(arr).enter()
    .append('rect')
    .attr({
        x : function(d) { return xScale(d) },
        y : 0,
        height: 20,
        width: 5,
        fill: function(d) { return colorScale(d) }
    });
    
var vis= d3.select("#visualization2").append('svg')

var arr = d3.range(100)

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

//The mystical polylinear color scale
var colorScale = d3.scale.linear().domain([0,100])
    .range(["#8aae1b", "#f3f6e8"])

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