scalesHex
scalesHexExpand = tidy.tidy(
scalesHex,
tidy.mutate({
nameSplit: (d) => d.name.split("-")
}),
tidy.transmute({
name: (d) => d.nameSplit.slice(0, 2).join("-"),
mode: (d) => d.nameSplit.slice(-1)[0],
values: (d) => d.values
})
)
scalesMap = {
const scales = scalesHexExpand.filter(
(d) => d.mode == (dark ? "dark" : "light")
);
return new Map(scales.map((d) => [d.name, d3.interpolateRgbBasis(d.values)]));
}
scalesMap.get("blues-float")(0)
weather_2012_week = tidy.tidy(
weather,
tidy.filter((d) => d.date.getUTCFullYear() === 2012),
tidy.mutate({
week: (d) => sun.week(d.date),
weekday: (d) => sun.dayOfWeek(d.date)
})
)
aapl
aapl_2017_week = tidy.tidy(
aapl,
tidy.filter((d) => d.Date.getUTCFullYear() === 2017),
tidy.mutate({
week: (d) => sun.week(d.Date),
weekday: (d) => sun.dayOfWeek(d.Date)
})
)
dates_2017_week = d3
.utcDays(new Date("2017-01-01"), new Date("2018-01-01"))
.map((x) => ({ date: x, week: sun.week(x), weekday: sun.dayOfWeek(x) }))
iso = ({
dayOfWeek: function (x) {
const ref = new Date("1900-01-01"); // Monday
return new Date(ref.setUTCDate(ref.getUTCDate() + (x.getUTCDay() - 1)));
},
week: d3.utcMonday.floor
})
sun = ({
dayOfWeek: function (x) {
const ref = new Date("1899-12-31"); // Sunday
return new Date(ref.setUTCDate(ref.getUTCDate() + x.getUTCDay()));
},
week: d3.utcSunday.floor
})
x = new Date("2023-07-30")
sun.dayOfWeek(x)
sun.week(x)
d3.utcFormat("%a")(sun.dayOfWeek(x))
x
formatMonthByWeek = function (x) {
const y = new Date(x); // copy date
const endOfWeek = new Date(y.setUTCDate(y.getUTCDate() + 6)); // date, 6 days from x
return endOfWeek.getUTCDate() < 8 ? d3.utcFormat("%b")(endOfWeek) : null;
}
formatMonthByWeek(new Date("2012-01-01"))
tidy = import("https://unpkg.com/@tidyjs/tidy@2.5.2/dist/es/index.js?module")
import { toSVG } from "@fil/plot-figure-to-svg"
import { scalesHex } from "@ijlyttle/color-scale-themes"
import { changeTable } from "@ijlyttle/change-log"
import { inputMode, invokeMode, styleDark } from "@ijlyttle/dark-mode-input"
invokeMode(dark)
styleDark()
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.
