The avatar for @bdon
Brandon Liu
working on protomaps.com
Published
Edited
Aug 7, 2021
Fork of GeoJSON Viewer
1
Insert cell
Insert cell
Insert cell
data = rewind(raw_data,true)
Insert cell
{
const div = document.createElement("div")
div.style.height = height + "px"
div.appendChild(context.canvas)
context.canvas.style.position = "absolute"
div.appendChild(map)
map.style.position = "absolute"
return div
}
Insert cell
map = html`<svg viewBox="0 0 ${width} ${height}">
<path d="${path(data)}" fill="steelblue" stroke="black" opacity="0.5"></path>
</svg>`
Insert cell
context = makeContext(projection, { data, width, height })
Insert cell
import { protomaps, makeContext } from "@bdon/canvas2d-basemap"
Insert cell
projection = d3.geoMercator()
.fitWidth(width, data)
Insert cell
path = d3.geoPath(projection)
Insert cell
width = 954
Insert cell
height = Math.ceil(path.bounds(data)[1][1])
Insert cell
d3 = require("d3-geo@1")
Insert cell
import {jsonInput} from "@mbostock/file-input"
Insert cell
rewind = rewind_lib.default
Insert cell
rewind_lib = import("https://cdn.skypack.dev/@mapbox/geojson-rewind")
Insert cell

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.
Learn more