tilegram brasil

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script src="https://unpkg.com/topojson@3"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    text {
      font: 10px Arial, sans-serif;
    }
    .labels {
      pointer-events: none;
    }
    .tiles path:hover {
      fill: red;
    } 
  </style>
</head>

<body>
  <script>
    	const width = 600;
    	const height = 600;
			const svg = d3.select("body").append("svg")
 				.attr("width", width)
 				.attr("height", height)

const promises = 							 
  [d3.json('tiles.topo.json')];
Promise.all(promises)
  .then((values) => {
        const tilegram = values[0];
        
        const tiles = topojson.feature(tilegram, tilegram.objects.tiles)

const transform = d3.geoTransform({
    			point: function(x, y) {
     		 	this.stream.point(x, -y)
    		}
  	})

const path = d3.geoPath().projection(transform)

const g = svg.append('g')
    .attr('transform',
          `translate(${-tilegram.bbox[0]},
										 ${tilegram.bbox[3]})`)

const ufs = g.selectAll('.tiles')
    .data(tiles.features)
    .enter().append('g')
    .attr('class', 'tiles')
  const ufPaths = ufs.append('path')
    .attr('d', path)
  	.attr('fill', 'lightgray')
    
// Build list of state codes
var estados = []
tilegram.objects.tiles.geometries.forEach(function(geometry) {
  if (estados.indexOf(geometry.properties.name) === -1) {
    estados.push(geometry.properties.name)
  }
})

// Build merged geometry for each state
var estadosFronteiras = estados.map(function(code) {
  return topojson.merge(
    tilegram,
    tilegram.objects.tiles.geometries.filter(function(geometry) {
      return geometry.properties.name === code
    })
  )
})

// Draw path
g.selectAll('path.border')
  .data(estadosFronteiras)
  .enter().append('path')
  .attr('d', path)
  .attr('class', 'border')
  .attr('fill', 'none')
  .attr('stroke', 'white')
  .attr('stroke-width', 2)

const labels = g.selectAll('.labels').data(tiles.features)
.enter()
.append('text')
.attr('class', 'labels')
.attr('text-anchor', 'middle')
.attr('dy', '0.5em')
.text(d => d.id)
.attr('x', d => path.centroid(d)[0])
.attr('y', d => path.centroid(d)[1])

})

</script>
</body>

https://d3js.org/d3.v5.min.js

https://unpkg.com/topojson@3