Public
Edited
Dec 5, 2022
function kFormatter(num) {
return Math.abs(num) > 999
? Math.sign(num) * (Math.abs(num) / 1000).toFixed(1)
: Math.sign(num) * Math.abs(num);
}
d3 = require("d3@6", "d3-tile@1")
station = FileAttachment("station_info.json").json()
railroadSection = FileAttachment("tokyoRailroad.json").json()
url = (x, y, z) =>
`https://api.mapbox.com/styles/v1/mapbox/dark-v11/tiles/${z}/${x}/${y}${
devicePixelRatio > 1 ? "@2x" : ""
}?access_token=pk.eyJ1Ijoia2VudGFybzExIiwiYSI6ImNrcWMxdnB2NTFmMG4zMm12ZWxic3kwbWwifQ.tl4d6iP4wrUkRoBmOfM-IQ`
import { Legend } from "@d3/color-legend"
style = html`
<style>
.stationCircle {
stroke-width: 0.1;
}
.railroadPath {
fill: none;
}
.stationDescGroup {
pointer-events: none;
}
.staionTooltipFrame {
fill: white;
stroke: #8b8b8b;
}
.stationDesc {
dominant-baseline: middle;
text-anchor: middle;
font-size: small;
fill: #8b8b8b;
}
.legend-left-text{
dominant-baseline: middle;
text-anchor: end;
fill: white;
font-size:0.8rem;
font-weight:bold;
}
.legend-right-text{
dominant-baseline: middle;
text-anchor: start;
fill: white;
font-size:0.8rem;
font-weight:bold;
}
.legend-title{
dominant-baseline: middle;
text-anchor: middle;
fill: white;
font-size:1rem;
font-weight:bold;
}
.backgroundMap{
opacity:0.9;
}
</sytle>
`
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.
