D3 españa mapa

by jpeter06

HTML

<script src="https://dev-cb.netbase.com/cb/pulse/lib/topojson.v1.min.js"></script>
<script>
var tt = `
{
    "type": "Topology",
    "objects": {
        "collection": {
            "bbox": [
                -18.1612491607666,
                27.64736175537115,
                4.30791807174711,
                43.78763961791998
            ],
            "type": "GeometryCollection",
            "geometries": [
                 {
                  "type": "MultiPolygon",
                  "properties": {
                    "id": "baleares",
                    "name": "balear"
                  },               
                  "arcs": [ [   [    0    ]    ],
                            [   [    1    ]    ],
                            [   [    2    ]    ],
                            [   [    3    ]    ]
                  ]
                },
                {
                  "type": "MultiPolygon",
                  "properties": {
                    "id": "peninsula",
                    "name": "Sistemas Penínsulares"
                  },
                  "arcs": [[       [       4       ]     ]
                  ]
                },
                {
                  "type": "MultiPolygon",
                  "properties": {
                    "id": "canarias",
                    "name": "canario"
                  },
                  "arcs": [ [     [    5       ]     ],
                            [     [    6       ]     ],
                            [     [    7       ]     ],
                            [     [    8       ]     ],
                            [     [    9       ]     ],
                            [     [    10      ]     ],
                            [     [    11      ]     ],
                            [     [    12      ]     ],
                            [     [    13      ]     ],
                            [     [    14      ]     ],
                            [     [    15      ]     ],
                           ...

CSS

.municipalities {
  fill: #222;
}

.municipalities :hover {
  fill: orange;
}

.state-boundary {
  fill: none;
  stroke: #fff;
  pointer-events: none;
}
svg{
    border: 1px solid gray;
}

JavaScript

var width = 500,
    height = 500;

//create unit projection
var projection = d3.geo.mercator()
    .scale(1)
    .translate([0,0]);

// create the path
var path = d3.geo.path()
    .projection(projection);



    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height)
        .attr("preserveAspectRatio","xMidYMid meet");//.attr("viewBox","0 0 800 600");
    

    var ind = topojson.feature(ttj, ttj.objects.collection);
    //  var ind = topojson.feature(mx, mx.objects.india);

    // see http://stackoverflow.com/questions/14492284/center-a-map-in-d3-given-a-geojson-object
    var b = path.bounds(ind),
        s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
        t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];

// Update the projection to use computed scale & translate.
    projection
        .scale(s)
        .translate(t);
    
    var geoPaths = svg.append("g")
      .attr("class", "municipalities")
    .selectAll("path")
      .data(topojson.feature(ttj, ttj.objects.collection).features);
      
    geoPaths.enter().append("path")
      .attr("d", path);