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

.svgContainer{
  width:90%;
  height:90%;
}
.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: #b9e3ef; /*#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: 400px;
  height: 400px;
    display:none;
}

JavaScript

//CON D3 V5!!!
console.log("VIEW GEOJSON, centered and scaled, maps from https://geojson-maps.ash.ms/");
/**
 '.0':'#b9e3ef',
    '.05':'#bbff5c',
    '.1':'#e2f531',
    '.15':'#ffff00',
    //'0.06':'#ffff00',
    '.22': '#ffa000',
    '.3':'#ff6e00',
    '.52': '#ff0000',
    '.99': '#c6f'
    */
var  espacios = [1, 0.8, 0.6, 0.52, 0.44, 0.36, 0.3, 
			0.26, 0.22, 0.18, 0.14, 0.1, 0.06, 0.04, 0.02, 0.01];
var  cespacios = ['#cc66ff', '#cc50a0', '#cc3350', '#ff0000', '#ff1e00', '#ff4600', 
	'#ff6e00', '#ff8c00', '#ffa000', '#ffb400', '#ffc800',
  '#ffdc00', '#ffff00', '#e2f531', '#bbff5c', '#cbff96'];
//--- COLOR FUNCTION PARA ISOBARAS --------
var i0 = d3.interpolateLab("#cbff96", "#e2f531");
var i1 = d3.interpolateLab("#e2f531", "#ffa000");
var	i2 = d3.interpolateLab("#ffa000", "#ff0000");

//--- COLOR FUNCTION PARA ISOBARAS --------
var i0 = d3.interpolateLab("#cbff96", "#e2f531");
var i1 = d3.interpolateLab("#e2f531", "#ffa000");
var	i2 = d3.interpolateLab("#ffa000", "#ff0000");

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],
 ...