Maps, Infovis, Code
Published
Edited
May 24, 2018
5 stars
{
let projection = d3.geoMercator().fitExtent([[0,0], [resolution,resolution]], district)
let time = Date.now()
let monochrome = renderGeoToBitmap(district, projection, resolution, resolution)
let unantialiased = threshold(monochrome)
let eroded = erode(unantialiased, resolution, resolution)
// amplify for visual output
let amplified = Uint8ClampedArray.from(eroded, val => val * 255 * 4 / resolution)
let canvas = DOM.canvas(width,height),
context = canvas.getContext("2d")
canvas.style.imageRendering = "pixelated"
context.imageSmoothingEnabled = false
let imgData = new ImageData(monochromeToMultichannel(amplified), resolution, resolution)
window.createImageBitmap(imgData,0,0,resolution,resolution).then(bmp => {
context.drawImage(bmp,0,0,width,height)
let contour = d3.contours()
.size([resolution, resolution])
.smooth(false)
.contour(eroded, distance);
mutable renderTime = Date.now() - time
// draw contour
let path = d3.geoPath().projection(d3.geoIdentity().scale(width/resolution))
.context(context)
context.strokeStyle = '#000000'
context.beginPath();
path(contour);
context.stroke();
// draw original polygon
projection.fitExtent([[0,0], [width,height]], district)
path = d3.geoPath().projection(projection)
.context(context)
context.setLineDash([10,5])
context.beginPath();
path(district);
context.stroke();
})
return canvas
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
