tickFormatX = (d) =>
d3.utcFormat("%b %-d")(d3.utcDay.offset(new Date(2024, 0, d)))
viewof newSvg = button({ value: "Submit" })
mutable xmin = d3.min(pts)
mutable xmax = d3.max(pts)
xAxis = (g) =>
g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x))
x = d3.scaleLinear([0, 366], [margin.left * 0.95, width - margin.right * 0.7])
ry = height - margin.bottom
height = 120
pts = changes.map((d) => d.day)
margin = ({ top: 50, right: 25, bottom: 50, left: 55 })
changes_2023 = changes.filter((d) => d.year === "2023")
changes_2024 = changes.filter((d) => d.year === "2024")
max = {
//newSvg;
return group(data.filter((d) => +d.year < 2023))
.by((d) => d.day)
.orderBy((d) => d.key)
.run() // This returns array
.map((grouped) => {
const temps = grouped.values.map((d) => d.temp);
//const sum = temps.reduce((a, b) => a + b, 0);
//const avg = sum / grouped.values.length;
const max = Math.max(...temps);
const min = Math.min(...temps);
return Object.assign({ min, max }, grouped);
});
}
import { interval } from "@mootari/range-slider"
import { list } from "@stwind/input-list"
import { rangeSlider } from "@mootari/range-slider"
import { slider, button } from "@jashkenas/inputs"
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.
