In New Zealand being kid of human.
We might make mistakes but we will make other things too. -
Michael Joseph Savage
chroma.contrast(currentColours[0] , currentColours[1] )
chroma.contrast(currentColours[0] , currentColours[2] )
chroma.contrast(currentColours[0] , currentColours[3] )
chroma.contrast(currentColours[0] , currentColours[4] )
chroma.contrast(currentColours[1] , currentColours[2] )
chroma.contrast(currentColours[1] , currentColours[3] )
chroma.contrast(currentColours[1] , currentColours[4] )
chroma.contrast(currentColours[2] , currentColours[3] )
chroma.contrast(currentColours[2] , currentColours[4] )
chroma.contrast(currentColours[3] , currentColours[4] )
predictThemeCombinations = {
makeColours;
let config = {
logPeriod: 1000,
log: false, //true,
iterations: 10000, // default iterations is 20000
hiddenLayers: [3,5,4,2], //[3,4,3], // I don't understand what this or ⬇ setting do ot affect the output. But tweaks because meh defaults
momentum: 0.05,
learningRate: 0.00042,
activation: 'leaky-relu' // supported activation types: ['sigmoid', 'relu', 'leaky-relu', 'tanh']
};
let results = []
if (!teBrainData.length) { return; }
let brainlog = net.train(teBrainData,config) // do it need to do this everytime? ,{iterations: 40000}
console.log(brainlog)
let json = net.toJSON(); // this is how a trined brain could be save, it's the state of a trained network
//console.log('the json',JSON.stringify(json))
for (let i = 0; i < 100000; i++) { // was 100000 iterations (maybe I could run it until i get 5 palettes with a score > 3 ?)
const colours = randomColours() // returns 5 r,g,b colours in an array in brain.js style of numbers between 0-1
let [score] = net.run(colours) // predict the score
results.push({ colours, score})
}
let sortedResults = _.orderBy(results, ['score'],['desc']);
return sortedResults
}
star = 'M22,2,25.8268343236509,12.761204674887132,36.14213562373095,7.857864376269051,31.238795325112868, 18.1731656763491,42,22,31.238795325112868,25.8268343236509,36.14213562373095,36.14213562373095, 25.8268343236509,31.238795325112868,22,42,18.173165676349104,31.238795325112868,7.857864376269051, 36.14213562373095,12.761204674887132,25.8268343236509,2,22.000000000000004,12.76120467488713, 18.173165676349107,7.857864376269045,7.857864376269051,18.173165676349104,12.761204674887132Z'
net = new brain.NeuralNetwork();
getRandomRGB = () => ( d3.color(`rgb(${d3.randomInt(0, 255)()}, ${d3.randomInt(0, 255)()}, ${d3.randomInt(0, 255)()})`))
getRandomRGB()
getRandomRGB2 = () => ( chroma.random().hex()) // toString()
getRandomRGB2()
randomColours()
chroma = require('chroma-js@2.4.2/chroma.js')
import {textarea} from "@jashkenas/inputs"
localStorage
import {Button} from "@observablehq/inputs"
Main todo is:
ADD WCAG Ratio testing.
To test if the random colours have a fail or AAA rating.
This could be automated as a core of the training and would fix issues around two colours the same.
https://vis4.net/chromajs/
chroma.contrast(color1, color2)https://gka.github.io/chroma.js/#chroma-contrast
Computes the WCAG contrast ratio between two colors.
A minimum contrast of 4.5:1 is recommended to ensure that text is still readable against a background color.
This has issues because two colours could be different but have similar contrast. The result could end up with gray scale colour ranges.
Getting all to be a 3 is difficult.
https://coolors.co/contrast-checker/112a46-acc8e5 two colours
http://colorsafe.co/ two colours
https://dev.to/alvaromontoro/building-your-own-color-contrast-checker-4j7o
https://observablehq.com/@shastabolicious/color-contrast-checker
https://benmyers.dev/blog/fix-low-contrast-text/
https://reasonable.work/colors/
https://blog.logrocket.com/exploring-css-color-module-level-5/
https://htmlcolorcodes.com/
and the things to try outhttps://observablehq.com/d/c5b991d5ad0110b9#cell-306
https://colorcolor.in/
---
// linear interpolation
chroma.scale('yellow', 'red', 'black');
// bezier interpolation
chroma.bezier('yellow', 'red', 'black');
chroma.bezier('yellow', 'red', 'black')
.scale()
.colors(5);
other_palettes =
["#69d2e7", "#fa6000", "#79f888", "#ff847c", "#ffe181",
"#c06c84", "#7c5b7b", "#355cad", "#fab87f", "#b28774",
"#7aa11c", "#574951", "#83988e", "#fc354c", "#5932af",
"#0a9fbc", "#a5c500", "#cdb380", "#036564", "#A39649",
"#a7d5bd", "#7a78c7", "#ffa000", "#f7a541", "#f0f020",
'#d53e4f', '#f46d43', '#fdae61', '#fee08b', '#e6f598', '#abdda4',
'#de77ae', '#f1b6da', '#fde0ef', '#e6f5d0', '#b8e186',
'#7fbc41', '#4d9221', '#762a83', '#9970ab', '#c2a5cf',
'#e7d4e8', '#d9f0d3', '#a6dba0', '#5aae61', '#1b7837',
'#b35806', '#e08214', '#fdb863', '#fee0b6', '#d8daeb',
'#b2182b','#d6604d','#f4a582','#fddbc7','#d1e5f0','#92c5de','#4393c3','#2166ac',
'#b2182b','#d6604d','#f4a582','#fddbc7','#e0e0e0','#bababa','#878787','#4d4d4d',
'#d73027','#f46d43','#fdae61','#fee090','#e0f3f8','#abd9e9','#74add1','#4575b4',
'#d73027','#f46d43','#fdae61','#fee08b','#d9ef8b','#a6d96a','#66bd63','#1a9850',
'#d53e4f','#f46d43','#fdae61','#fee08b','#e6f598','#abdda4','#66c2a5','#3288bd',
'#8c510a','#bf812d','#dfc27d','#f6e8c3','#c7eae5','#80cdc1','#35978f','#01665e']
colors = {
let colours = [];
[ 'https://coolors.co/palette/caf0f8-ade8f4-90e0ef-48cae4-00b4d8-0096c7-0077b6',
'https://coolors.co/palette/d8f3dc-b7e4c7-95d5b2-74c69d-52b788-40916c-2d6a4f',
'https://coolors.co/palette/ffedd8-f3d5b5-e7bc91-d4a276-bc8a5f-a47148-8b5e34',
'https://coolors.co/palette/ffba08-faa307-f48c06-e85d04-dc2f02-d00000-9d0208', ].forEach((url) => {
colours.push(createCols(url));
});
return colours
}
// Take some Colors from coolors URL
function createCols(url) {
let slaIndex = url.lastIndexOf('/');
let colStr = url.slice(slaIndex + 1);
let colArr = colStr.split('-');
for (let i = 0; i < colArr.length; i++) colArr[i] = '#' + colArr[i];
return colArr;
}
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.
