formatTitle = (d) =>
`${d3.timeFormat("%Y/%m/%d")(d.date)}\n${d.hour}\n${d.usage.toFixed(2)} kW`
filtered = data.filter(d => d.hour === hour)
st = {
const values = filtered.map(d => d.usage)
return {
max: d3.quantile(values, range.high),
upper: d3.quantile(values, 0.75),
lower: d3.quantile(values, 0.25),
min: d3.quantile(values, range.low),
mean: d3.mean(values),
median: d3.median(values)
}
}
formatDate = function (date) {
return date.toLocaleString(undefined, {
weekday: "short",
month: "short",
day: "numeric"
});
}
dateRange = d3.extent(data.map(d => d.date))
dataRange = d3.extent(data, d => d.usage)
hours = [...new Set(data.map(d => d.hour))]
data = {
const src = await FileAttachment("pge-electric-data.csv").csv();
return src.map(d => ({
date: d3.timeParse("%Y-%m-%d")(d.DATE),
hour: +d["START TIME"].substring(0, 2),
usage: +d.USAGE
}));
}
import { addTooltips } from "@mkfreeman/plot-tooltip"
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.
