Dynamic Simplification IV with canvas selection

This map dynamically simplifies the geometry in response to zooming, so that the smallest displayed detail is approximately one square pixel. Use the mousewheel, or pinch on touch devices, to zoom.

There is a click handler that highlight a specific feature.

forked from mbostock's block: Dynamic Simplification IV

<!DOCTYPE html>
<body>
<div style="position: absolute">
  <p style="display: inline-block">Selected id: <span id="selectedId"></span></p>
</div>

var canvas = d3.select("canvas#render"),
    hidden = d3.select("canvas#hidden"),
    context = canvas.node().getContext("2d"),
    contextHdn = hidden.node().getContext("2d"),
    width = canvas.property("width"),
    height = canvas.property("height");
  
var selectedId = null,
    selectedFeature = null,
		selectedSpan = document.getElementById('selectedId');
    
var land,
    borders;

var minZ, // minimum area threshold for simplification
    transform = d3.geoIdentity().clipExtent([[0, 0], [width, height]]),
    simplify = d3.geoTransform({point: function(x, y, z) { if (z >= minZ) this.stream.point(x, y); }});

var zoom = d3.zoom()
    .scaleExtent([1 / (1 << 5), 1 << 2])
    .on("zoom", zoomed);

// styling
context.lineJoin = "round";
context.lineCap = "round";
var styles = {
  fill: "#bbb",
  stroke: "#fff",
  selected: {
	  fill: 'rgba(0, 0, 0, 0.5)',
  	stroke: 'red'    
  }
}

var path = d3.geoPath()
    .projection({
      stream: function(s) { return simplify.stream(transform.stream(s)); }
    })
    .context(context);

d3.json("us-states.json", function(error, us) {
  if (error) throw error;

topojson.presimplify(us);
  land = topojson.feature(us, us.objects.states);
  borders = topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; });
  
  canvas
    .call(zoom)
    .on('click', getHiddenData)

// An arbitrary scale and center point to set the initial view.
  // This projection is baked into the TopoJSON file,
  // but is used here to compute the desired zoom translate.
  var scale = 0.05, point = d3.geoMercator()
  .translate([0, 0])
  .scale(4000)
  ([-75.959, 38.250])
  
  canvas.call(
    zoom.transform,
    d3.zoomIdentity
    .translate(width / 2, height / 2)
    .scale(scale)
    .translate(-point[0], -point[1])
  )

d3.timer(draw)
});

function zoomed(d) {
  var t = d3.event.transform;
  minZ = 1 / (t.k * t.k);
  transform.translate([t.x, t.y]).scale(t.k);
}
    
  
// Retrieve the id with the color, and so, the feature.
function getHiddenData() {
  path.context(contextHdn)
  drawHidden()
  
  mouse = d3.mouse(canvas.node())
  let data = contextHdn.getImageData(mouse[0], mouse[1], 1, 1).data
  selectedId = data[0]
  selectedFeature = land.features.find(f => +f.id === selectedId)
  
  path.context(context)
}

// Main drawing loop
function draw () {
  context.clearRect(0, 0, width, height);
  context.fillStyle = styles.fill;
	context.strokeStyle = styles.stroke;
  
  context.beginPath();
  path(land)
	context.fill();
  context.beginPath();
  path(borders);
  context.stroke();
  
  if (selectedFeature) drawSelected()
}

// Highlight the selected feature
function drawSelected () {
  selectedSpan.innerHTML = selectedId
  context.fillStyle = styles.selected.fill;
  context.strokeStyle = styles.selected.stroke;
  context.beginPath();
  path(selectedFeature)
  context.fill();
  context.stroke();
}
  
  
// Drawing loop to encode id to color
function drawHidden() {
  contextHdn.clearRect(0, 0, width, height);
  land.features.map(f => {
    contextHdn.beginPath();
    path(f);
    // basic exemple because there is less than 255 counties
    contextHdn.fillStyle = `rgba(${f.id}, 0, 0, 1)`
    contextHdn.fill();
  })
}

</script>

ga('create', 'UA-93898246-1', 'auto');
  ga('send', 'pageview');

</script>
</body>

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

https://unpkg.com/topojson-client@2

https://unpkg.com/topojson-simplify@2