I like maps
colors = FileAttachment("colors.json").json()
getPalette(colors, [7, 153, 156, 1, /*103,*/ 3, 110, 4, 5, 88, 11])
getPalette(
colors,
[5, 220, 156, 86],
[
"Production, car",
"Production, battery",
"Energy production (well to tank)",
"Fuel combustion (tank to wheel)"
]
)
rgbCol = (rgb) => htl.html`<div style="background: #${rgb};">${rgb}</div> `
function getPalette(allLegoColors, paletteColorIds, paletteColorNames) {
const legoColors = fromIds(allLegoColors, paletteColorIds, paletteColorNames);
const columns = [
"name",
"rgb",
"colorId",
"last6MonthsUsed_avgPrice",
"currentUsed_minPrice",
"currentUsed_maxPrice",
"currentUsed_avgPrice"
];
if (paletteColorNames) {
columns.unshift("paletteName");
}
const table = Inputs.table(legoColors, {
columns,
header: {
name: "Name",
rgb: "RGB",
colorId: "col#"
},
format: {
rgb: rgbCol,
colorId: link,
paletteName: (name) => html`<b>${name}</b>`
},
maxWidth: 1500,
layout: "auto"
});
return html`<div>
${table} Cost per 1000 (equal amount of each color, min, max, avg):
<b>${getCostPer1000(legoColors)}</b>
</div>`;
}
function getCostPer1000(legoColors) {
return [
Math.round(
(1000 / legoColors.length) *
legoColors.reduce((acc, c) => acc + c.currentUsed_minPrice, 0)
),
Math.round(
(1000 / legoColors.length) *
legoColors.reduce((acc, c) => acc + c.currentUsed_maxPrice, 0)
),
Math.round(
(1000 / legoColors.length) *
legoColors.reduce((acc, c) => acc + c.currentUsed_avgPrice, 0)
)
]
.map((d) => `${d}€`)
.join(", ");
}
function fromIds(legoColors, legoColorIds, paletteColorNames) {
return legoColorIds.map((id, i) =>
paletteColorNames
? { paletteName: paletteColorNames[i], ...fromId(legoColors, id) }
: fromId(legoColors, id)
);
}
function fromId(legoColors, legoColorId) {
return legoColors.find((c) => c.colorId === legoColorId);
}
function getColorsFromLegoIds(legoColorIds) {
return fromIds(colors, legoColorIds);
}
function getHexColorsFromLegoIds(legoColorIds) {
return fromIds(colors, legoColorIds).map((c) => `#${c.rgb}`);
}
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.
