The avatar for @joewdavies
Joe Davies
Data Visualization & GIS at Eurostat. Exploring new ways of making maps.
Public
Edited
Feb 19
1 fork
8 stars
1
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
({
ECDC_diverging: getDicopalObjectsForPalette(
[...ecdcDiverging],
"ecdc_diverging",
"diverging",
12
)
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
getIntermediateColor("#17256B", "#0B1432", 0.5)
Insert cell
Insert cell
Insert cell
Insert cell
viewof allSchemes = Inputs.textarea({
label: "Result:",
rows: 40,
placeholder: "Result",
value: estatSchemes ? JSON.stringify(estatSchemes).trim() : ""
})
Insert cell
getPaletteColors = (numberOfColors, interpolator) => {
let colors = [];
let myPaletteT = interpolator.ticks
? interpolator.ticks(numberOfColors)
: d3.range(numberOfColors).map((c) => c / (numberOfColors - 1));

for (let i = 0; i < myPaletteT.length; i++) {
let color = d3.color(interpolator(myPaletteT[i])).formatHex().toUpperCase();
colors.push(color);
}
return colors;
}
Insert cell
getDicopalObjectsForPalette = (
palette,
paletteName,
paletteType,
numberOfObjects
) => {
// last colours of each sequential palette that they gave us are too dark, we can change them manually here
//if (paletteType == "sequential" && paletteName !== "estatMultihue1") {
//let lastColor = palette[palette.length - 1];
//let secondLast = palette[palette.length - 2];
//let newLastColor = getIntermediateColor(lastColor, secondLast, 0.5);
//palette = [palette[0], lastColor]; // our new palette takes just 2 colors from the ones they gave use and we interpolate it ourselves
//}

let interpolator = interpolatePalette(palette);

let objects = [];

for (let i = 2; i <= Math.max(palette.length, 12); i++) {
let colors = getPaletteColors(i, interpolator);

// see dicopal.js API
let object = {
id: paletteName + "_" + i,
name: paletteName,
number: i,
type: paletteType,
colors: colors,
provider: "Eurostat",
url: ""
};

objects.push(object);
}
return objects;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
colorsToConvert = [
"#F7EFE8",
"#E4CCB5",
"#D4A883",
"#BE8451",
"#AC621D",
"#331A03"
]
Insert cell
rgbList = {
let rgbs = [];
colorsToConvert.forEach((color) => {
let rgbString = hexToRGB(color);
rgbs.push(rgbString);
});
return rgbs;
}
Insert cell
function hexToRGB(hex) {
// Remove the leading '#' if present
if (hex.startsWith("#")) {
hex = hex.slice(1);
}

// Convert the hex values to integers
const bigint = parseInt(hex, 16);
const r = (bigint >> 16) & 255;
const g = (bigint >> 8) & 255;
const b = bigint & 255;

// Return the formatted string
return `R${r}/G${g}/B${b}`;
}
Insert cell
Insert cell
dicopal = require("dicopal")
Insert cell
blinder = import("https://cdn.skypack.dev/color-blind@0.1.3?min")
Insert cell
toastify = import("https://cdn.skypack.dev/toastify-js@1.12.0?min")
Insert cell

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.
Learn more