D3 contour label threshold

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;
}

.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{
  fill:black;
  font-size:9px;
  font-family: Arial;
}
.mesh {
  fill: none;
  stroke: #fa0;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

.textoEstaciones:hover{

               fill : #3333bb;
               font-weight:bold;
}

JavaScript

//CON D3 V5!!!
console.log("VIEW GEOJSON, centered and scaled, maps from https://geojson-maps.ash.ms/");
//--- COLOR FUNCTION PARA ISOBARAS --------
var i0 = d3.interpolateLab("#ccffcc", "#fbff0e");
var i1 = d3.interpolateLab("#fbff0e", "#ff1f0b");
var	i2 = d3.interpolateLab("#ff1f0b", "#9900cc");

var estaciones ={
//NOMBRE			LAT										LONG								VAL
	"AGUAYO": 	[43.11945643731245, 	-4.02003547027716, 	300],
	"ALUMINIO": [43.70193990470906, 	-7.478870215097177, 330],
  "APARECID": [42.033714755003196, 	-6.8618056769026285,390],
  "MADRID": 	[40.4165,							-3.70256, 					400] ,
  "SALAMANCA":[40.961613,						-5.667607, 					300],
  "MALAGA": 	[36.719444, 					-4.420000, 					395],
  "ALMERIA":  [36.838139,						-2.459740,  				390],
  "TOLEDO": 	[39.856667	, 				-4.024444,					300],
  "CUENCA":  	[40.070393,						-2.137416, 					0],
  "LISBOA":  	[38.736946,						-9.142685, 					0]  
};

var thresholds = [0.05, 0.5, 0.8,1]; //Lineas a dibujar
var steps = 60; //Separación entre labels
var datosEstaciones =[];
Object.entries(estaciones)
	.forEach(item => { 
  item[1][2] = 		Math.abs(item[1][2] - 400); //Invertimos valores
  datosEstaciones.push(item[1]); //Obtenemos array para density
})


var width = 400,
    height = 400,
    active = d3.select(null); //RESET

var svg = d3.select("body").append("svg")
.attr("width", "90%")
.attr("height", "90%")
.attr("viewBox", "0 0 " + width + " " + height)
.attr("preserveAspectRatio","xMidYMid meet");

const defs = svg.append("defs");
//Rectangulo que enmarque el svg
svg.append("rect")
  .attr("class", "background")
  .attr("width", width)
  .attr("height", height);
 
//fitSize  para que encuandre el geojson automáticamente
var projection = d3.geoMercator().fitSize([width, height], ttj);
// Creates a new geographic path generator
var path = d3.geoPath().projection(projection);

//Clip para contorno.
drawJsonClip(ttj, path);
 
 //Creamos el g "general" con su clase
 var g =svg.append("g")
   .attr("class",...