The avatar for @eesur
Sundar Singh
playing with space, shape, colour & composition
Public
Sanzo Wada colours
Edited
Jul 4, 2023
Fork of Sanzo Wada colour combinations
•
1 fork
Importers
4 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
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

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