D3 Color Gradients

Polylinear Scales using color parameter outputs in D3.js.

HTML

<div id="visualization"></div>
<button onclick="generateNumber()">
 Generate number
</button>

JavaScript

function generateNumber(){
  let number= Math.floor(Math.random() * 101);;
  console.log(number);
  console.log(yScale(number));
	d3.select("#indicador").attr("y",yScale(number) - 10); // to center the indicador image
  d3.select("#indicadorText").attr("y",yScale(number)).text(number);
}

let heightRectangle=10;
d3.select("#visualization").append('svg')
var vis = d3.select("svg").attr("width",800).attr("height",614).style("border","1px solid red");

 vis.append("image")
     .attr("id","indicador")
		.attr("href","https://www.shareicon.net/data/256x256/2015/08/17/86784_left_512x512.png")
    .attr("width",15)
    .attr("height",15)
    .style("transform","translate(100px)")

vis.append("text")
	.attr("id","indicadorText")
	.attr("x", 70)
  .attr("y", 0)
  .attr("alignment-baseline", "middle")
   
   
    
//Doing my color bar
var arr = d3.range(101)
let maxRange=410; // instead of 600
var yScale = d3.scale.linear().domain([0, 100]).range([maxRange,0])

var colorScale = d3.scale.linear().domain([0,50,100])
    .range(["green", "yellow", "red"])

vis.selectAll('rect').data(arr).enter()
    .append('rect')
    .attr({
        y : function(d,i) {  console.log(d,yScale(d)); return i*+4 },
        x : 20,
        height: heightRectangle,
        width: 40,
        fill: function(d) { return colorScale(d) }
    });
    
    
    /*
    var y = d3.scale.linear()
      .range([300, 0])
      .domain([100, 0]);

    var yAxis = d3.axisBottom()
      .scale(y)
      .ticks(5);

    vis.append("g")
      .attr("class", "y axis")
      .attr("transform", "translate(0,30)")
      .call(yAxis)
      .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 0)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("axis title");*/