Playing with hues

This visualization was inspired by one of Tamara Munzner's examples in Visualization Design and Analysis. I built this from scratch to experiment with some scales.

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="//d3js.org/d3-scale-chromatic.v0.3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    r1 {font-size: 30}
  </style>
</head>

<body>
  <script>
    
    
    var data1 = [
      {x:20, y:30},
      {x: 50, y:30},
      {x:80, y:30},
      {x:110, y:30}];
     
       var data2 = [
      {x:20, y:50},
      {x: 50, y:50},
      {x:80, y:50},
      {x:110, y:50}]; 
    
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)

margin = {top:75, right:20, bottom: 20, left:200};
    
    xScale = d3.scaleLinear().domain([0,150]).range([0,500]);
    yScale = d3.scaleLinear().domain([0, 150]).range([0,500]);
    //var colorScale1 = d3.scaleSequential(d3.interpolateCool).domain([0, 200]);
    //var colorScale1 = d3.scaleSequential(d3.interpolateBlues).domain([0, 100]);
    var colorScale1 = d3.scaleSequential(d3.interpolateGreys).domain([0, 100]);
    var colorScale2 = d3.scaleSequential(d3.interpolateGreens).domain([0,200]);
    
    var g = svg.append('g')
    	.attr('transform', `translate(${margin['left']},${margin['top']})`);
    
    var enter = g.selectAll('r1').data(data1).enter()
    enter.append('rect')
    	.attr('class','r1')
    	.attr('x', function(d){return(xScale(d.x));})
    	.attr('y', function(d){return(yScale(d.y));} )
    	.attr('height', 30)
    	.attr('width', 30)
    	.attr('fill', function(d){return(colorScale1(d.x));})
 
    
       var enter = g.selectAll('r2').data(data2).enter()
    enter.append('rect')
    	.attr('class','r2')
    	.attr('x', function(d){return(xScale(d.x));})
    	.attr('y', function(d){return(yScale(d.y));} )
    	.attr('height', 30)
    	.attr('width', 30)
    	.attr('fill', function(d){return(colorScale2(d.x));}) 
    
    
    
    svg.append("text")
      .text("Exercise in mechanics: Playing with hues and color scales")
      .attr("y", 70)
      .attr("x", 70)
      .attr("font-size", 25)
      .attr("font-family", "monospace")

</script>
</body>

https://d3js.org/d3.v4.min.js

https://d3js.org/d3-scale-chromatic.v0.3.min.js