D3 españa mapa con heatmap

by jpeter06

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/heatmap.js/2.0.0/heatmap.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;
}

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


#heatCanvas {
  width: 200px;
  height: 200px;
    display:none;
}

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, 	400],
	"ALUMINIO": [43.70193990470906, 	-7.478870215097177, 330],
  "APARECID": [42.033714755003196, 	-6.8618056769026285,380],
  "MADRID2": 	[40.4165,							-3.70256, 					0] ,
  "MALAGA": 	[36.719444, 					-4.420000, 					50],
  "SALAMANCA":[40.961613,						-5.667607, 					300],
  "ALMERIA":  [36.838139,						-2.459740,  				390],
  "TOLEDO": 	[39.856667	, 				-4.024444,					300],
  "CUENCA":  	[40.070393,						-2.137416, 					0],
  "LISBOA":  	[38.736946,						-9.142685, 					0],
  "BARCELONA":[41.390205, 					2.154007,						0]
};
var estaciones2 ={
//NOMBRE			LAT										LONG								VAL
	"AGUAYO": 	[43.11945643731245, 	-4.02003547027716, 	400],
	"ALUMINIO": [43.70193990470906, 	-7.478870215097177, 330],
  "APARECID": [42.033714755003196, 	-6.8618056769026285,380],
  "MADRID2": 	[40.4165,							-3.70256, 					0] ,
  "MALAGA": 	[38.719444, 					-4.420000, 					50],
  "SALAMANCA":[40.961613,						-5.667607, 					300],
  "ALMERIA":  [37.838139,						-2.459740,  				390],
  "TOLEDO": 	[39.856667	, 				-4.024444,					300],
  "CUENCA":  	[40.070393,						-2.137416, 					0],
  "LISBOA":  	[38.736946,						-9.142685, 					0],
  "BARCELONA":[41.390205, 					2.154007,						0]
};

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 = 200,
    height = 200,
    active = d3.select(null); //RESET

var svg = d3.select("svg")
.attr("width", "100%")
.attr("height", "100%")
.attr("viewBox", "0 0 " + width + " "...