dlimasouza/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!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>

## tiles.topo.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              tiles.topo.json
            
          
      Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!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>