The avatar for @ijlyttle
Ian Lyttle
Public
Computing on color
Edited
Aug 6, 2023
2 forks
2 stars
Computing on color
Color-Space ViewerChroma and Hue in Color SpacesLuminance in Color SpacesColor-Scale ViewerCategorical Color-Scale ViewerColor-Surface HelpersColor-Scale ThemesCategorical Color-Scale Tryout
Quantitative Color-Scale Tryout
Accessibility: Color-Contrast ModelsColor-Vision-Deficiency WidgetColor Utilities
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
scalesHex
Insert cell
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
})
)
Insert cell
scalesMap = {
const scales = scalesHexExpand.filter(
(d) => d.mode == (dark ? "dark" : "light")
);

return new Map(scales.map((d) => [d.name, d3.interpolateRgbBasis(d.values)]));
}
Insert cell
scalesMap.get("blues-float")(0)
Insert cell
Insert cell
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)
})
)
Insert cell
aapl
Insert cell
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)
})
)
Insert cell
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) }))
Insert cell
Insert cell
Insert cell
Insert cell
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
})
Insert cell
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
})
Insert cell
x = new Date("2023-07-30")
Insert cell
sun.dayOfWeek(x)
Insert cell
sun.week(x)
Insert cell
d3.utcFormat("%a")(sun.dayOfWeek(x))
Insert cell
Insert cell
x
Insert cell
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;
}
Insert cell
formatMonthByWeek(new Date("2012-01-01"))
Insert cell
Insert cell
tidy = import("https://unpkg.com/@tidyjs/tidy@2.5.2/dist/es/index.js?module")
Insert cell
import { toSVG } from "@fil/plot-figure-to-svg"
Insert cell
import { scalesHex } from "@ijlyttle/color-scale-themes"
Insert cell
import { changeTable } from "@ijlyttle/change-log"
Insert cell
import { inputMode, invokeMode, styleDark } from "@ijlyttle/dark-mode-input"
Insert cell
invokeMode(dark)
Insert cell
styleDark()
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more