mutable station = ""
chart = d3
.create("div")
.datum(data)
.call(map)
.call((g) => g.select("svg").attr("height", height))
.call(
d3.zoom().on("zoom", function (e) {
d3.select(this).select("g").attr("transform", e.transform.toString());
})
)
.node()
data = FileAttachment("stations.json").json()
height = 1000
map = tubeMap()
.width(width)
.height(height)
.margin({
top: 20,
right: 20,
bottom: 40,
left: 100
})
.on("click", (name) => (mutable station = name))
style = htl.html`<style>
text {
font-family: sans-serif;
fill: #0019A8;
cursor: pointer;
}
</style>`
tubeMap = (await require("d3-tube-map@1.5.0/dist/d3-tube-map.min.js")).tubeMap
d3 = require("d3@7")
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.
