interpolate fonts, colors2

forked from noblemillie's block: interpolate fonts, colors

forked from noblemillie's block: interpolate fonts, colors2

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

<body>
<div id="color-diverge" class="clear"> 
    <span>Poly-Linear Color Interpolation<br></span> 
</div> 
  
 <div class="control-group clear"> 
    <button style="margin:5px;" onclick="render(data, divergingScale(1), '#color-diverge')">Pivot at extreme</button> 
    <button style="margin:10px;" onclick="render(data, divergingScale(3), '#color-diverge')">Pivot at low</button> 
    <button style="margin:20px;" onclick="render(data, divergingScale(5.5), '#color-diverge')">Pivot at mid</button> 
    <button style="margin-left:10px;" onclick="render(data, divergingScale(7), '#color-diverge')">Pivot at high</button> 
    <button style="margin-left:25px;" onclick="render(data, divergingScale(9), '#color-diverge')">Pivot at extreme</button> 
  </div><br>
 
<br> 
<div id="font" class="clear"> 
 <span>font-size interpolator<br></span> 
</div><br>
 
<br> 
<div id="color" class="clear"> 
    <span>Linear Color Interpolation<br></span> 
</div>

var colorScale = d3.scaleLinear() 
    .domain([0, max]) 
    .range(["#c8f4b8", "#307f13"]); 
  
    var textColorScale = d3.scaleLinear() 
    .domain([0, max]) 
    .range(["#fe2ded", "white"]);

cells.enter() 
      .append("div").merge(cells) 
      .classed("cell", true) 
      .style("display", "inline-block") 
      .style("background-color", function(d){ 
      return scale(d);  
    })
    	.style("color", function(d){ 
      return textColorScale(d);  
    })
//       .style("font", function(d,i){ 
//       return sizeScale(d); 
//     })
      .style("font", function(d,i){ 
      return scale(d); 
    })
      .style("border", "1px solid lightgray")
			.style("padding", "8px")
			.style("margin", "2px")
      .text(function(d,i){return i;}); 
  } 
 
//     renderFont(data, sizeScale, "#font");
	
  var data2 = [0,50,100];
  
	  render(data, decrementSizeScale, "#color"); 
	  render(data, colorScale, "#color");
  
	  render(data, midpointScale(5), "#color-diverge");  
   	render(data, divergingScale(5), "#color-diverge"); 
</script>

</body>

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