In New Zealand being kid of human.
We might make mistakes but we will make other things too. -
Michael Joseph Savage
Published
Edited
Mar 16, 2021
1 fork
predictionButton_RM = md`***prediction button could be added here.***`
saveTrainingData_RM = md`# bugs in here
Need a better was to cache the data as the loading seems borked`
function saveTrainingData(score) {
// const data = JSON.parse(localStorage.getItem("trainingData") || "[]");
console.log('saving...')
let data =[] // debugging
data.push({ // why is that so slow
input: [
currentColours[0][0], currentColours[0][1], currentColours[0][2],
currentColours[1][0], currentColours[1][1], currentColours[1][2],
currentColours[2][0], currentColours[2][1], currentColours[2][2],
currentColours[3][0], currentColours[3][1], currentColours[3][2]
], output: [score]
})
console.log(data[0])
// localStorage.setItem("trainingData", JSON.stringify(data));
// predictThemeCombinations() // predict colours - need to be removed from this cell as it's slow and not needed.
clearStars()
// shuffle images
// d3.shuffle(SVGimages) // doesn't rebuild the dis (display)
getRandomColours() // make new random colours
}
localStorage
function predictThemeCombinations() {
const data = JSON.parse(localStorage.getItem("trainingData") || "[]");
if (!data.length) { return; }
net.train(data)
// results should be cleared here
for (let i = 0; i < 100; i++) { // was 100000 iterations
const zero = getRandomRGB()
const one = getRandomRGB()
const two = getRandomRGB()
const three = getRandomRGB()
const colors = [ // could be a for each...
zero[0], zero[1], zero[2],
one[0], one[1], one[2],
two[0], two[1], two[2],
three[0],three[1],three[2]
]
const [ score ] = net.run(colors) // predict the score
results.push({ zero, one, two, three, score})
}
sortResults()
}
// sort results from prediction into top 10
function sortResults() {
const sortedResults = results.sort(function(a, b) { return b.score - a.score }) // could use loDash here?
console.log('Best Colours output:')
// keep the top 10 results after sorting
for (let i = 0; i < 10; i++) {
console.log(i,sortedResults[i]) // need to make pretty output
}
}
results = []
net = new brain.NeuralNetwork({activation: "leaky-relu"})
update_palette = {
currentColours;
// i need to save the old colours before setting the new colours, so can select for the old colour for replacement
let svgs = d3.select(dis)
svgs.selectAll(`[fill="${oldColours[0]}"]`).attr('fill',`${colourToRGB(currentColours[0])}`);
svgs.selectAll(`[fill="${oldColours[1]}"]`).attr('fill',`${colourToRGB(currentColours[0])}`);
svgs.selectAll(`[fill="${oldColours[2]}"]`).attr('fill',`${colourToRGB(currentColours[1])}`);
svgs.selectAll(`[fill="${oldColours[3]}"]`).attr('fill',`${colourToRGB(currentColours[1])}`);
svgs.selectAll(`[fill="${oldColours[4]}"]`).attr('fill',`${colourToRGB(currentColours[2])}`);
svgs.selectAll(`[fill="${oldColours[5]}"]`).attr('fill',`${colourToRGB(currentColours[2])}`);
svgs.selectAll(`[fill="${oldColours[6]}"]`).attr('fill',`${colourToRGB(currentColours[3])}`);
svgs.selectAll(`[fill="${oldColours[7]}"]`).attr('fill',`${colourToRGB(currentColours[3])}`);
oldColours[0] = `${colourToRGB(currentColours[0])}` // save the current colours into the oldColours[]
oldColours[1] = `${colourToRGB(currentColours[0])}`
oldColours[2] = `${colourToRGB(currentColours[1])}`
oldColours[3] = `${colourToRGB(currentColours[1])}`
oldColours[4] = `${colourToRGB(currentColours[2])}`
oldColours[5] = `${colourToRGB(currentColours[2])}`
oldColours[6] = `${colourToRGB(currentColours[3])}`
oldColours[7] = `${colourToRGB(currentColours[3])}`
// #d1d3d4 gray
}
oldColours = [ // old colours, these are set to the svg defaults.
"#4fc1e9","#3bafda", // lighter / blue
"#48cfad","#37bc9b", // lighter / green
"#ffce54","#f6bb42", // lighter / yellow
"#fc6e51","#e9573f" ] // lighter / red
SVGimages = [
FileAttachment("graph_01.svg"),FileAttachment("graph_02.svg"),FileAttachment("graph_03.svg"),FileAttachment("graph_04.svg"),
FileAttachment("graph_05.svg"),FileAttachment("graph_06.svg"),FileAttachment("graph_07.svg"),FileAttachment("graph_08.svg"),
FileAttachment("graph_09.svg"),FileAttachment("graph_10.svg"),FileAttachment("graph_11.svg"),FileAttachment("graph_12.svg"),
FileAttachment("graph_13.svg"),FileAttachment("graph_14.svg"),FileAttachment("graph_15.svg"),FileAttachment("graph_16.svg"),
FileAttachment("graph_17.svg"),FileAttachment("graph_18.svg"),FileAttachment("graph_19.svg"),FileAttachment("graph_20.svg"),
FileAttachment("graph_21.svg"),FileAttachment("graph_22.svg"),FileAttachment("graph_23.svg"),FileAttachment("graph_24.svg"),
FileAttachment("graph_27.svg"),FileAttachment("graph_28.svg"),
FileAttachment("graph_29.svg"),FileAttachment("graph_30.svg"),FileAttachment("graph_31.svg"),FileAttachment("graph_32.svg"),
FileAttachment("graph_33.svg"),FileAttachment("graph_34.svg"),FileAttachment("graph_35.svg"),FileAttachment("graph_36.svg")
]
// A colour has a value between 0 and 1 colours are stored as an array [r g b]
// the current colours is an array made up of four of these colours
mutable currentColours = ([ [0.31,0.75,0.91], [.28,0.81,0.67], [1,.8,0.32], [0.98,0.43,.31] ]) // these default colours need to be better.
function getRandomColours() // make a new set of colours (should be a loop as I may have more than 4 colours)
{
{ mutable currentColours = {...mutable currentColours, 0: getRandomRGB()}; }
{ mutable currentColours = {...mutable currentColours, 1: getRandomRGB()}; }
{ mutable currentColours = {...mutable currentColours, 2: getRandomRGB()}; }
{ mutable currentColours = {...mutable currentColours, 3: getRandomRGB()}; }
}
colourToRGB = color => `rgb(${_.floor(color[0] * 255)}, ${_.floor(color[1] * 255)}, ${_.floor(color[2] * 255)})`
getRandomRGB = () => ([ _.round(_.random(1,true),3), _.round(_.random(1,true),3),_.round(_.random(1,true),3)])
_ = require ('lodash')
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.
