D3 contour calc

by jpeter06

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.1.1/d3.min.js"></script>
<script>


var tt =...

CSS

html, body {
  overflow:hidden;
  margin:0px;
  padding:0px;
  width:100%;
  height:100%;
}

.main{
  width:100%;
  height:100%;
  overflow:hidden;
  position:absolute;
  background:tan;
  display:grid;
  grid-template-rows: 1fr 8fr 1fr;
}
.svgcontainer{
  width:100%;
  height:100%;
  overflow:hidden;
  background:#444;
}
.other{
  background:#999;
  width:100%;
  height:100%;
}

.municipalities {
  fill: #ccffcc;
}

.municipalities :hover {
  fill: orange;
}

.state-boundary {
  fill: none;
  stroke: #fff;
  pointer-events: none;
}

svg{
    border: 1px solid gray;
}

.background {
  fill: none;
  pointer-events: all;
}

.feature {
  fill: #ccffcc;
  stroke: #fa0;
  stroke-width:0.4;
  cursor: pointer;
}

.feature.active {
  fill: orange;
}

g.label text, .contEstaciones{
  fill:black;
  font-size:8px;
  font-family: Arial;
}

.mesh {
  fill: none;
  stroke: #fa0;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contEstaciones{
  display:none;
}
.showNames .contEstaciones{
  display:inherit;
}

.textoEstaciones{
               font-family: arial;
               font-size : 1px;
               stroke:none;
               fill : #333366;
               user-select:none;
               cursor: pointer;
}

.textoEstaciones:hover{
               font-size:9px;
               fill : #3333bb;
               font-weight:bold;
}

JavaScript

var i0 = d3.interpolateLab("#ccffcc", "#fbff0e");
var i1 = d3.interpolateLab("#fbff0e", "#ff1f0b");
var	i2 = d3.interpolateLab("#ff1f0b", "#9900cc");

var contourThresholds = [0, 40, 60,
													80, 120, 160,
                          200, 240, 260, 280,
                          300, 320, 340, 350,
                          360, 370, 380, 400];
var contTHColors = ['#9933cc','#ba70e8','#9966ff',
										'#f00','#ff0d00','#ff1a00',
                    '#ff3200', '#ff4600','#ff6400','#ff8300',
                    '#ff9a00','#ffcc00','#ff0','#f4f003',
                    '#d2ef06','#c1ef10','#8ee21d','#5cd528'
                    ];



function updateContourScale(cd, factor){
	cd.forEach(data =>{
  	data.coordinates.forEach( c =>{
    	c.forEach( a =>{
      	a.forEach( aa => {
          aa[0] = factor * aa[0];
          aa[1] = factor * aa[1];
        })
      })
    })
  })
}


function genContour(n,m,values, thresholds){
	const contours = d3.contours()
    .size([n, m])
    .thresholds(thresholds)
    (values);
   return contours;
}

function createSVG(width, height ){
   return d3.select("svg")
  .attr("width", "100%")
  .attr("height", "100%")
  .attr("viewBox", "0 0 " + width + " " + height)
  .attr("preserveAspectRatio","xMidYMid meet");
}


function addRectangle(svg, width, height){
  svg.append("rect")
    .attr("class", "background")
    .attr("width", width)
    .attr("height", height);
}

function addMasks(defs, thresholds, width, height){
	  for (var i= 0; i<thresholds.length; i++) {
      mask = defs.append("mask").attr("id",'mask_'+i);
      mask
        .append("rect")
        .attr("width", width)
        .attr("height", height)
        .attr("fill", "white");
   }
}

function drawEstaciones(svg,  projection, estaciones){
  svg.selectAll(".contEstaciones").remove();
  let g = svg.append("g").attr("class",'contEstaciones');
  for(var key of Object.keys(estaciones)){
    g.append("text")
      .attr("class", 'textoEstaciones')
     ...