Public
Edited
Sep 30, 2023
Insert cell
Insert cell
viewof data = jsonInput({
initialUrl: await FileAttachment("philippines-regions2018.json").url()
})
Insert cell
map = html`<svg viewBox="0 0 ${width} ${height}">
<path d="${path(data)}" fill="none" stroke="black"></path>
</svg>`
Insert cell
projection = d3.geoIdentity()
.reflectY(true)
.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
philippinesRegions2018 = FileAttachment("philippines-regions2018.json").json()
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