The avatar for @jcolot
Julien Colot
Data scientist and front-end developer at Jetpack.ai
Public
Edited
Mar 20
Fork of Zooming Large Datasets with Observable Plot
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
plotWidth = width
Insert cell
plotHeight = 500
Insert cell
Insert cell
initialXDomain = [
new Date(Date.now() - (365 + 30) * 86400e3),
new Date(Date.now() + 86400e3 * 30)
]
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
initialTimesData = fetchTimesData(
new Date("2023-12-01"),
new Date("2025-02-01")
)
Insert cell
latitude = location[1]
Insert cell
longitude = location[0]
Insert cell
SunCalc = require("suncalc")
Insert cell
color = d3.scaleSequential(d3.interpolateRdBu).domain([90, -90])
Insert cell
import { getTimezones } from "@jcolot/time-zone-service"
Insert cell
Insert cell
Insert cell
Insert cell
timesLegendColorScale = d3.scaleOrdinal(
["Night", "Nautical twighlight", "Civil twighlight", "Sunset/Sunrise", "Day"],
[
colorAlpha(-90, 0.6),
colorAlpha(-30, 0.6),
colorAlpha(-15, 0.6),
colorAlpha(30, 0.6),
"#ffed9766"
]
)
Insert cell
import { swatches } from "@d3/color-legend"
Insert cell
colorAlpha = function (value, alpha) {
return color(value).replace("rgb", "rgba").replace(")", `, ${alpha})`);
}
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