D3 Examples - Matrícula en sala de 5 años

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  
<style>
​
h1 {
  text-align: center;
  margin-bottom: -5;
  font-size: 18px;
  font-weight: 600;
  font-family: "Open Sans", sans-serif;
}
  
h2 {
  text-align: center;
  margin-bottom: -20;
  font-size: 16px;
  font-weight: 400;
  font-family: "Open Sans", sans-serif;
  color: gray;
}
  
.d3-tip {
  line-height: 140%; /*Interlineado*/
  font-size: 10px;
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
  padding: 8px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}
  
.partidos {
  fill: none;
  stroke: #aaaaaa;
  stroke-linejoin: round;
}
​
</style>
  
<head>
  <title>Matrícula en sala de 5 años</title>
  <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet">
  <script src="https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>  
  <script src="cobertura.js"></script>
</head>
<body>
  
      
<h1>Matrícula en sala de 5 años</h1>
<h2>Dependencia Oficial</h2>
  
  <script>
​
var width = 960,
    height = 800;
    
// escala de color
var color = d3.scale.threshold()
    .domain([0, 1500, 3000, 4500, 6000, 7500, 9000, 10500, 12000])
    .range(['#ffffd9','#edf8b1','#c7e9b4','#7fcdbb','#41b6c4','#1d91c0','#225ea8','#253494','#081d58']);
​
var svg = d3.select( "body" )
  .append( "svg" )
  .attr( "width", width )
  .attr( "height", height );
    
tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .direction('n')
  .html(function(d) {
    return "<strong>Partido:</strong> <strong style='color:#e1ef1f'>" + d.properties.partido + "</strong>" + "<br/><strong>Matrícula: </strong> <strong style='color:#e1ef1f'>" + d.properties.do_5 + "</strong>";
 });
    
svg.call(tip);
​
var g = svg.append( "g" )
  .attr("class", "partidos");
​
var transverseMercatorProjection = d3.geo.transverseMercator()
  .scale(3000)
  .rotate( [62,0] )
  .center( [1.5, -40] )
  .translate( [width/2,height/2] );
​
var geoPath = d3.geo.path()
    .projection( transverseMercatorProjection );
    
g.selectAll( "path" )
  .data( cobertura.features)
  .enter()
  .append( "path" )
  .attr("class", "counties")
  .attr( "fill", function(d) { return color(d.density = d.properties.do_5) })
  .attr( "d", geoPath )
  .on('mouseover', tip.show)
  .on('mouseout', tip.hide);
​
  </script>
</body>
</html>
    