Public
Edited
Jul 4, 2023
Importers
3 stars
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
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
allSetColours(activeObj);
Insert cell
activeObj.combinations
Insert cell
sets[activeObj.combinations[0]]
Insert cell
function allSetColours (obj){
// return array of colours in set
return _.uniq(_.flattenDeep(
obj.combinations.map(d => {
return sets[d -1];
})
));
}
Insert cell
// have a function to render the set values if they exist
function renderTable(index) {
if (activeObj.combinations[index]) {
return Inputs.table(sets[activeObj.combinations[index] -1], {columns: ["name", "index", "swatch", "cmyk", "rgb", "hex", "lab"]});
} else {
return "no set " + (index + 1);
}
}
Insert cell
function renderColGrid (index) {
return (activeObj.combinations[index]) ? createGrid(sets[activeObj.combinations[index] -1]) : null;
}
Insert cell
Insert cell
Insert cell
Insert cell
data = colours.map((d, i) => {
const obj = {...d};
const combos = d.combinations;
// colours that are within combos with this colour
const _setIndexValues = [];
// extract the index for each colour from the combo set
combos.forEach(v => {
console.log('v', v);
_setIndexValues.push(setIndexes(v -1, d.index));
})
// have an array of colour indexes of colours in other sets with the source colour (d.index)
obj.setIndexValues = _setIndexValues;
obj.setIndexValuesFlat = _setIndexValues.flat();
return obj;
})
Insert cell
setIndexes(22, 46)
Insert cell
// have a method to get index/colours from each set
function setIndexes (set, colIndex) {
// have array of the set
const setArray = sets[set];
const indexValues = setArray.map(d => d.index)
// remove the source colour
.filter(d => d !== colIndex);
return indexValues;
}
Insert cell
Insert cell
Insert cell
Insert cell
//d3 = require("https://d3js.org/d3.v5.min.js")
Insert cell
Insert cell
colours = coloursJSON.map((d, i) => {
const _d = {...d}
d.index = i + 1 // mutating by mistake but is actually useful!
return d
})
Insert cell
Insert cell
Insert cell
Insert cell
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=PT+Sans&display=swap" rel="stylesheet">

<style>
text {
font-family: 'PT Sans', sans-serif;
font-weight: 400;
}
</style>
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