D3 españa mapa2

by jpeter06

HTML

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

.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,  with D3 V5, 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");
  
translateData(ttj);

var estaciones ={
//NOMBRE			LAT										LONG								VAL
	"AGUAYO": 	[43.11945643731245, 	-4.02003547027716, 	400],
	"ALUMINIO": [43.70193990470906, 	-7.478870215097177, 330],
  "APARECID": [42.033714755003196, 	-6.8618056769026285,380],
  "MADRID": 	[40.4165,							-3.70256, 					310],
  "MALAGA": 	[36.719444, 					-4.420000, 					390],
  "SALAMANCA":[40.961613,						-5.667607, 					300],
  "ALMERIA":  [36.838139,						-2.459740,  				390],
  "TOLEDO": 	[39.856667	, 				-4.024444,					300],
  "CUENCA":  	[40.070393,						-2.137416, 					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 = 300,
    height = 300,
    active = d3.select(null);

    var svg = d3.select("body").append("svg")
        .attr("width", "90%")
        .attr("height", "90%")
        .attr("viewBox", "0 0 " + width + " " + height)
        .attr("preserveAspectRatio","xMidYMid meet");//.attr("viewBox","0 0 800 600");
    svg.append("rect")
    .attr("class", "background")
    .attr("width", width)
    .attr("height", height)
    .on("click", reset);
    

  //fitSize  para que encuandre el geojson
	var projection = d3.geoMercator().fitSize([width, height], ttj);
	var path = d3.geoPath().projection(projection);

 drawJsonClip();
 var g =svg.append("g")
      .attr("class", "municipalities");
   g.selectAll('path')
  .data(ttj.features)
  .enter()
  .append("g")
  .append('path')
  .attr('d', path)
  .attr("class", "feature")
      .on("click", clicked);
       
    
  var densityData =...