31:T79f,todo_readme = md`**todo:** ✅ Make a test data visualation like https://projects.susielu.com/viz-palette using SVG images. >> ✅ load random SVG image in a way they can have their fill= selected ✅ change SVG colours to use the ones randomly generated ✅ Make a test visualisation so I dont need to do a heap of D3 visualisation generation ✅ copy and paste brain.js code and get it working in observable. ✅ Work out local storage. (goes, but could be better) ⬜ Paste in palates, so you can add palettes that you like. Or a pile of paletes to review. 4 colours is a common palete number. ✅ Add click on colour box to select a new colour. https://observablehq.com/@hellonearthis/wip-neural-networks-with-brain-js __ Allow the individule random colours to be reselected as random is too often nasty. ⬜ **Add rendering of the predicted palettes.** >> ⬜ **Remove All prediction from the voting ** >> ⬜ **Add undo last vote and review all votes.** ⬜ **Add a button to show predicted colour palettes** *maybe svg* ⬜ 💣 bug in the local storage. After rating a palette it stores more than just adding the new palate. ⬜ add buttons to make change the random colours to be warmer or cooler. It's more about palette tuning than randomness when training brain. ✅ The ui cell is not very observable friendly as it is overly mutable and should be redesigned to play better with other cells >> ⬆ this adds a tone of bulk to the notebook due to the added cells for each colours r g b cells. >> ✅ rewrite with mutable objects and use an array for each colour? ⬜ might need a button to toggle background colour between dark and light or check palette brightness and auto set backgrounds ✅ start with default current colours and not zero Could be a bug if two random colours are the same. Not much chance of that. ⬜ 💣 The SVG images only change on load and not when rating is given.

`32:T499,ui = { let ui = html`

Colour Zero

Colour One

Colour Two

Colour Three

` yield ui; // eeek a d3 select might have been better new Promise(resolve => { ui.childNodes[0].onclick = () => { { mutable currentColours = {...mutable currentColours, 0: getRandomRGB()}; } resolve(); }; ui.childNodes[2].onclick = () => { { mutable currentColours = {...mutable currentColours, 1: getRandomRGB()}; } resolve(); }; ui.childNodes[4].onclick = () => { { mutable currentColours = {...mutable currentColours, 2: getRandomRGB()}; } resolve(); }; ui.childNodes[6].onclick = () => { { mutable currentColours = {...mutable currentColours, 3: getRandomRGB()}; } resolve(); }; }) } 33:T5c0,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 }34:T473,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") ]35:[{"id":"bee1424da8548c67cbb5f5b5d619aac48c2e0f4cbae25b6220e604d5a37cc09da87ab7f8ba7d1a00dbc3adf59465911327768f6098a3abe5f635628020015f0c","href":"https://static.observableusercontent.com/files/bee1424da8548c67cbb5f5b5d619aac48c2e0f4cbae25b6220e604d5a37cc09da87ab7f8ba7d1a00dbc3adf59465911327768f6098a3abe5f635628020015f0c","name":"graph_29.svg","type":"image/svg+xml","lastModified":1606092887237.201,"size":506},{"id":"4500a7327ac670105aa40f84db286417f962ceb64f2616c2c11707ba23eac65219446fa7b04e82da4ff5f854d10c88382fc63b01de31720c33695302c1b13c69","href":"https://static.observableusercontent.com/files/4500a7327ac670105aa40f84db286417f962ceb64f2616c2c11707ba23eac65219446fa7b04e82da4ff5f854d10c88382fc63b01de31720c33695302c1b13c69","name":"graph_11.svg","type":"image/svg+xml","lastModified":1606092886919.336,"size":1668},{"id":"9f2743f97d438229ae2065abc20d06f9ea5c6654d9db738ff5acb25b05bfcbff10a9384279e9e5a8bf303651379794fb0874bbf9cf202ebce137a835afe80747","href":"https://static.observableusercontent.com/files/9f2743f97d438229ae2065abc20d06f9ea5c6654d9db738ff5acb25b05bfcbff10a9384279e9e5a8bf303651379794fb0874bbf9cf202ebce137a835afe80747","name":"graph_10.svg","type":"image/svg+xml","lastModified":1606092886891.468,"size":5247},{"id":"9523caa6b54d4b5bee3584dcc7881a740c9e0e33f86bc6f04ef080cc93b8d1fb1250e4eae05a4dc9515e4ee1e76b2725db0036fc78f6365a60af103c08d2b8cb","href":"https://static.observableusercontent.com/files/9523caa6b54d4b5bee3584dcc7881a740c9e0e33f86bc6f04ef080cc93b8d1fb1250e4eae05a4dc9515e4ee1e76b2725db0036fc78f6365a60af103c08d2b8cb","name":"graph_19.svg","type":"image/svg+xml","lastModified":1606092886303.6,"size":345},{"id":"bc2c9db1bc71ec626ee6b028d00d90289c5ab78f9566cf11d2b18828a28e263a59a8db063f900c794c0d62f6589b9600710b3b3b69695c9c8451aecc6adf6618","href":"https://static.observableusercontent.com/files/bc2c9db1bc71ec626ee6b028d00d90289c5ab78f9566cf11d2b18828a28e263a59a8db063f900c794c0d62f6589b9600710b3b3b69695c9c8451aecc6adf6618","name":"graph_01.svg","type":"image/svg+xml","lastModified":1606092886282.86,"size":1340},{"id":"69765ca61c160a0c47ae7101c6155320bd5b2afc0656191761e6c878877c7dc823efc46aea315f3e2a5bbac37f07717089eea4f3e3f7ed79fd82db370889ccf6","href":"https://static.observableusercontent.com/files/69765ca61c160a0c47ae7101c6155320bd5b2afc0656191761e6c878877c7dc823efc46aea315f3e2a5bbac37f07717089eea4f3e3f7ed79fd82db370889ccf6","name":"graph_07.svg","type":"image/svg+xml","lastModified":1606092886304.269,"size":898},{"id":"2cc03340759df34e30c02cecda617ceeab133f06f0436d1e585d4dd200a04a26a5723041d5a9bf3b555b2f696d8c5feb89e2e65d9d6307b48adf1f3dab84573d","href":"https://static.observableusercontent.com/files/2cc03340759df34e30c02cecda617ceeab133f06f0436d1e585d4dd200a04a26a5723041d5a9bf3b555b2f696d8c5feb89e2e65d9d6307b48adf1f3dab84573d","name":"graph_13.svg","type":"image/svg+xml","lastModified":1606092886907.756,"size":1302},{"id":"2dac65abe67b66b3a51430485266f67ea1dbdb36b7b8e0f9fcb1ade9e3bb0973f89db08f5492c4873de18c3405cb37ca4346c56410245f2459ea0b5501a0e620","href":"https://static.observableusercontent.com/files/2dac65abe67b66b3a51430485266f67ea1dbdb36b7b8e0f9fcb1ade9e3bb0973f89db08f5492c4873de18c3405cb37ca4346c56410245f2459ea0b5501a0e620","name":"graph_32.svg","type":"image/svg+xml","lastModified":1606092886950.664,"size":1255},{"id":"ccd47e61cc9f82c28527cff2bf585eeda41435daeb451834b490990ba6a3943b84c7785f428652a9d4d90e4eeda6e0690cd4265d188ae621f47ddc7c03d0470a","href":"https://static.observableusercontent.com/files/ccd47e61cc9f82c28527cff2bf585eeda41435daeb451834b490990ba6a3943b84c7785f428652a9d4d90e4eeda6e0690cd4265d188ae621f47ddc7c03d0470a","name":"graph_31.svg","type":"image/svg+xml","lastModified":1606092886305.181,"size":643},{"id":"d98ece84f9c4a96280f732d9e2b3582ba23e8995c59d5e946be300a7f118cc72eb29519796b222952bd423f46d2b5ee07328a664f64ec24f7597667cde5abc26","href":"https://static.observableusercontent.com/files/d98ece84f9c4a96280f732d9e2b3582ba23e8995c59d5e946be300a7f118cc72eb29519796b222952bd423f46d2b5ee07328a664f64ec24f7597667cde5abc26","name":"graph_24.svg","type":"image/svg+xml","lastModified":1606092886901.319,"size":3804},{"id":"f3efa1c2b2e71ba02b60fd8e26b4d54b08ffe55bedb3ca65a73f912ff5fa1d61afca445d8baceed4383423238356ce928c487126b39a4da864a2980678f3cb19","href":"https://static.observableusercontent.com/files/f3efa1c2b2e71ba02b60fd8e26b4d54b08ffe55bedb3ca65a73f912ff5fa1d61afca445d8baceed4383423238356ce928c487126b39a4da864a2980678f3cb19","name":"graph_22.svg","type":"image/svg+xml","lastModified":1606092886964.854,"size":1233},{"id":"6349137f03d8f8d3eb30aab16e3766f4d7eb8bf6201e3949d71947075f8c37e7b289b8ff35a098522123bb5a32baf6d992c231b0f26121120b709e15679977b7","href":"https://static.observableusercontent.com/files/6349137f03d8f8d3eb30aab16e3766f4d7eb8bf6201e3949d71947075f8c37e7b289b8ff35a098522123bb5a32baf6d992c231b0f26121120b709e15679977b7","name":"graph_18.svg","type":"image/svg+xml","lastModified":1606092886323.262,"size":594},{"id":"d11cc6f8a946e78c7bd1ac3c38cac70c7aed70ea427e42aab8709d520af1039de94ec9fcea15cff8bec08640f6c1e02e795719b76da3eb7488cdb89856088236","href":"https://static.observableusercontent.com/files/d11cc6f8a946e78c7bd1ac3c38cac70c7aed70ea427e42aab8709d520af1039de94ec9fcea15cff8bec08640f6c1e02e795719b76da3eb7488cdb89856088236","name":"graph_05.svg","type":"image/svg+xml","lastModified":1606092886921.475,"size":1308},{"id":"cbee17975f2191f616e9f8a3f504aa60e8648996fffd577b19f478ecd120621f4d6068d88165c0e88bd7326a54f702229e89cfd963f7bfeca2a3d5683569b196","href":"https://static.observableusercontent.com/files/cbee17975f2191f616e9f8a3f504aa60e8648996fffd577b19f478ecd120621f4d6068d88165c0e88bd7326a54f702229e89cfd963f7bfeca2a3d5683569b196","name":"graph_03.svg","type":"image/svg+xml","lastModified":1606092886883.648,"size":572},{"id":"183beb7e228cd5f28bcbd59bc1727aa8cade7e69b1a97a3518dace27578ad00f4cedf37a803eeb7c2a3bf585cbb97afd7d0041f7f20ab1d3147c7f9fd1d225a9","href":"https://static.observableusercontent.com/files/183beb7e228cd5f28bcbd59bc1727aa8cade7e69b1a97a3518dace27578ad00f4cedf37a803eeb7c2a3bf585cbb97afd7d0041f7f20ab1d3147c7f9fd1d225a9","name":"graph_12.svg","type":"image/svg+xml","lastModified":1606092886885.14,"size":1236},{"id":"377573fbd2e9c36bbb551b2faed03852d7d8487d8cedfd3c16c324014a7bf54d1b04ae18f55c242b2ea724915be89a9ad9c07697baa6be9561082aee76c763e6","href":"https://static.observableusercontent.com/files/377573fbd2e9c36bbb551b2faed03852d7d8487d8cedfd3c16c324014a7bf54d1b04ae18f55c242b2ea724915be89a9ad9c07697baa6be9561082aee76c763e6","name":"graph_08.svg","type":"image/svg+xml","lastModified":1606092886888.788,"size":646},{"id":"2588a8b24c636f841d9a925d57db34fb83f832733bfe5d8543f73ae74b0a985e81a02100bdf07816198d543b1a2399ecfc64e844d16434f5671355d0ec1b67c2","href":"https://static.observableusercontent.com/files/2588a8b24c636f841d9a925d57db34fb83f832733bfe5d8543f73ae74b0a985e81a02100bdf07816198d543b1a2399ecfc64e844d16434f5671355d0ec1b67c2","name":"graph_27.svg","type":"image/svg+xml","lastModified":1606092886896.775,"size":882},{"id":"60dbd712aa6a1ee90934b0b85479799d77fc4f690ac850d854b7f992fd45f8ef1ae282131ad1e349b3bca0e331fc433cd17456f6cc205c3917d1d6f7ca52a052","href":"https://static.observableusercontent.com/files/60dbd712aa6a1ee90934b0b85479799d77fc4f690ac850d854b7f992fd45f8ef1ae282131ad1e349b3bca0e331fc433cd17456f6cc205c3917d1d6f7ca52a052","name":"graph_21.svg","type":"image/svg+xml","lastModified":1606092886967.03,"size":5362},{"id":"5563599c9360e32435f4a80dd4e542d510b0df86598be0add3ae7b6deae44504d5e640a628f2935c8992b5c3c8bb69d66d208deba6f0f2fd617946b0052646e4","href":"https://static.observableusercontent.com/files/5563599c9360e32435f4a80dd4e542d510b0df86598be0add3ae7b6deae44504d5e640a628f2935c8992b5c3c8bb69d66d208deba6f0f2fd617946b0052646e4","name":"graph_02.svg","type":"image/svg+xml","lastModified":1606092886900.294,"size":4184},{"id":"466d5351f18b29cb55c18e981c5f88d7419270366296acd3b73c604664c6729640b184ab174add52527f4d4ca3bd65162371cd41bf5abd6f51227a9d36c4ab34","href":"https://static.observableusercontent.com/files/466d5351f18b29cb55c18e981c5f88d7419270366296acd3b73c604664c6729640b184ab174add52527f4d4ca3bd65162371cd41bf5abd6f51227a9d36c4ab34","name":"graph_09.svg","type":"image/svg+xml","lastModified":1606092886909.506,"size":1363},{"id":"eacc5a1024ec5c127cce4b5c2f04e622145869036ebcb84f446a1bd4c47f4bc38349cac25c919f3356e45cec2c7f70b464b515bbe076e78358dd9aebdf70bd1e","href":"https://static.observableusercontent.com/files/eacc5a1024ec5c127cce4b5c2f04e622145869036ebcb84f446a1bd4c47f4bc38349cac25c919f3356e45cec2c7f70b464b515bbe076e78358dd9aebdf70bd1e","name":"graph_28.svg","type":"image/svg+xml","lastModified":1606092886966.268,"size":1188},{"id":"0a94fe23525430c866a933ab652a4a88f0471a823b5416c56d491881a2f6bc1193cad063bdf5757ab3650c361b3896b1a4fa18859fb6f1211fd06c1fe2c0501a","href":"https://static.observableusercontent.com/files/0a94fe23525430c866a933ab652a4a88f0471a823b5416c56d491881a2f6bc1193cad063bdf5757ab3650c361b3896b1a4fa18859fb6f1211fd06c1fe2c0501a","name":"graph_16.svg","type":"image/svg+xml","lastModified":1606092886912.247,"size":734},{"id":"d6baf975f0e7514eaf090f0e7e5b1ae25f736fa468bd7add084daefddbcbb7e1ebdca5559e5382b7f013ca793b526597abe0a34457db75df7ef2df0e2f37c580","href":"https://static.observableusercontent.com/files/d6baf975f0e7514eaf090f0e7e5b1ae25f736fa468bd7add084daefddbcbb7e1ebdca5559e5382b7f013ca793b526597abe0a34457db75df7ef2df0e2f37c580","name":"graph_14.svg","type":"image/svg+xml","lastModified":1606092886912.662,"size":1184},{"id":"7b8be06a4423e0378f00e4513e1b8759ddcf7a93f5981d8a4c54ce9602b7a7201f2d6341f76f31bf3e3d596f05dc36e89fa1ddb8b5dd22f27a0c18561456b471","href":"https://static.observableusercontent.com/files/7b8be06a4423e0378f00e4513e1b8759ddcf7a93f5981d8a4c54ce9602b7a7201f2d6341f76f31bf3e3d596f05dc36e89fa1ddb8b5dd22f27a0c18561456b471","name":"graph_34.svg","type":"image/svg+xml","lastModified":1606092886967.89,"size":2149},{"id":"48c1ace0ab205dff9e93ca143efc8a4decccba6d2b8914a08db4b5c5afe93fa1667d413f99a8e64f6f32d8490e7308038761b3fa90273be7842d8e2bcfec4618","href":"https://static.observableusercontent.com/files/48c1ace0ab205dff9e93ca143efc8a4decccba6d2b8914a08db4b5c5afe93fa1667d413f99a8e64f6f32d8490e7308038761b3fa90273be7842d8e2bcfec4618","name":"graph_35.svg","type":"image/svg+xml","lastModified":1606092886913.161,"size":532},{"id":"b891dd1ef4c16f93323feac2aa309bdfc79507bbd9f6f30c072f9e7d2f650bf5aad28e339e967a5a459a0d64f6682ef579adf21c71012e9c62281a19fe33be68","href":"https://static.observableusercontent.com/files/b891dd1ef4c16f93323feac2aa309bdfc79507bbd9f6f30c072f9e7d2f650bf5aad28e339e967a5a459a0d64f6682ef579adf21c71012e9c62281a19fe33be68","name":"graph_06.svg","type":"image/svg+xml","lastModified":1606092886914.837,"size":2898},{"id":"caa3a1c564f2075cbdb4f7724f196fcaf9b279c6a70d7b5f7db51d9cac510dc205d6465c1ad33c01b9723ec807214943b4c41fcf320f6ee126915f860f4f6cc7","href":"https://static.observableusercontent.com/files/caa3a1c564f2075cbdb4f7724f196fcaf9b279c6a70d7b5f7db51d9cac510dc205d6465c1ad33c01b9723ec807214943b4c41fcf320f6ee126915f860f4f6cc7","name":"graph_33.svg","type":"image/svg+xml","lastModified":1606092886916.433,"size":3894},{"id":"79ac7096259728e5e4b9016775f7367fa30371313fcfe4c17749114f405521c8a7ff1cb0287b09ac257ed7c489b8fc941a9c25b6464730e92fcc62f76aeef37f","href":"https://static.observableusercontent.com/files/79ac7096259728e5e4b9016775f7367fa30371313fcfe4c17749114f405521c8a7ff1cb0287b09ac257ed7c489b8fc941a9c25b6464730e92fcc62f76aeef37f","name":"graph_15.svg","type":"image/svg+xml","lastModified":1606092887060.12,"size":688},{"id":"42c784d6a9ffa7079f180a468a5b5b0dfeb79b8d5b51b18ce59b6236cccdd439bf3af08de8b09642757b44748b2de311430969c2e97d5b8189132f11f68efc8b","href":"https://static.observableusercontent.com/files/42c784d6a9ffa7079f180a468a5b5b0dfeb79b8d5b51b18ce59b6236cccdd439bf3af08de8b09642757b44748b2de311430969c2e97d5b8189132f11f68efc8b","name":"graph_17.svg","type":"image/svg+xml","lastModified":1606092887069.71,"size":1003},{"id":"8df667822b93c29b32151f0d6ed8d76700e0b09e7c0c50442610639a2e432b00250a2606ca9738d5209a8046618ea43d6ec423e251f7d2778ff860c97a1dc441","href":"https://static.observableusercontent.com/files/8df667822b93c29b32151f0d6ed8d76700e0b09e7c0c50442610639a2e432b00250a2606ca9738d5209a8046618ea43d6ec423e251f7d2778ff860c97a1dc441","name":"graph_20.svg","type":"image/svg+xml","lastModified":1606092887174.387,"size":933},{"id":"8d69a9ba449cc51612cc702acf2a6e257048eeb4f10710c3d2f9e121aa8ab6f3cbbac4f41acef8e30f1ef2b0ab6eecf4a2a3a5eb927eb1029993afeba8e0c53c","href":"https://static.observableusercontent.com/files/8d69a9ba449cc51612cc702acf2a6e257048eeb4f10710c3d2f9e121aa8ab6f3cbbac4f41acef8e30f1ef2b0ab6eecf4a2a3a5eb927eb1029993afeba8e0c53c","name":"graph_23.svg","type":"image/svg+xml","lastModified":1606092887176.765,"size":1083},{"id":"cdaeda9b44e0e54090c6e65ccd5e83c70f47f086950d003e162bc1ff745a4d2cf9cfb01bb404b64eee1b767528f8f2babbcfe4655d00c876bcf5dc232bb6c455","href":"https://static.observableusercontent.com/files/cdaeda9b44e0e54090c6e65ccd5e83c70f47f086950d003e162bc1ff745a4d2cf9cfb01bb404b64eee1b767528f8f2babbcfe4655d00c876bcf5dc232bb6c455","name":"graph_36.svg","type":"image/svg+xml","lastModified":1606092887167.411,"size":32919},{"id":"3c6ce0714cecd2d381b50563c03ea8d400243949afdc76541757e6da46045777b9d95c9564555b9296247d29ae616893dfe68570579dbc1cce30d42452577c59","href":"https://static.observableusercontent.com/files/3c6ce0714cecd2d381b50563c03ea8d400243949afdc76541757e6da46045777b9d95c9564555b9296247d29ae616893dfe68570579dbc1cce30d42452577c59","name":"graph_30.svg","type":"image/svg+xml","lastModified":1606092887277.695,"size":1663},{"id":"89ea87fe04446c16f45062fc72572f342e419811a7730d830ba9a66b8793d1d7d280dfd758dad975895d24dcae70597ad27046a23c411b2c5ac6746aa6af905c","href":"https://static.observableusercontent.com/files/89ea87fe04446c16f45062fc72572f342e419811a7730d830ba9a66b8793d1d7d280dfd758dad975895d24dcae70597ad27046a23c411b2c5ac6746aa6af905c","name":"graph_04.svg","type":"image/svg+xml","lastModified":1606092887309.203,"size":640}] 2f:{"title":"Brain JS colour recommendation (orgional)","cells":[{"id":0,"value":"about_RM = md`# Brain JS colour recommendation (orgional)\n\nBased on [hackernoon/how-to-make-a-machine-learning-recommendation-system-from-scratch](Based on https://medium.com/hackernoon/how-to-make-a-machine-learning-recommendation-system-from-scratch-d747be801ce9) [**github repo**](https://github.com/Pradyuman7/Theme-Recommender/blob/master/index.js)\n\nWorking on making the code [observable friendly.](https://observablehq.com/@tmcw/observable-anti-patterns-and-code-smells?collection=@observablehq/javascript-in-observable)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2906,"value":"change_colours_RM = md`You can change a colour by clicking on it.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2172,"value":"// loads as SVG\ndis = {\n d3.shuffle(SVGimages)\n let ht = html`

`auto`).join(' ')};\">

`\n \n for(let i=0;i<15;i++){\n const text = await SVGimages[i].text();\n const document = (new DOMParser).parseFromString(text, \"image/svg+xml\");\n const svg = d3.select(document.documentElement).remove();\n \n d3.select(ht)\n .append(\"div\")\n .attr('title',SVGimages[i].name)\n .append('svg')\n .attr('width', sw)\n .attr('height', sh)\n .attr(\"id\", `pic_${i}`)\n .attr('viewBox',\"0 0 1000 1000\")\n .append('g')\n .html(svg.html())\n }\n \n oldColours[0] = \"#4fc1e9\" // reset to the svg default colours when new random set is selected.\n oldColours[1] = \"#3bafda\"\n oldColours[2] = \"#48cfad\"\n oldColours[3] = \"#37bc9b\"\n oldColours[4] = \"#ffce54\"\n oldColours[5] = \"#f6bb42\"\n oldColours[6] = \"#fc6e51\"\n oldColours[7] = \"#e9573f\"\n \n return ht\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"ratePalette = html`Rate the above colour palette.
\nOnce clicked it can take a 2nd to learn.
\n \n \n \n \n `","pinned":false,"hidden":false,"mode":"ojs"},{"id":2902,"value":"predictionButton_RM = md`***prediction button could be added here.***`","pinned":true,"hidden":false,"mode":"ojs"},{"id":881,"value":"rate = {\n let stars = document.querySelectorAll(\".star\"); // should be global but isnt because it runs before the html is constructed\n\n stars.forEach((star, i) => {\n star.addEventListener(\"mouseenter\", setStars.bind(setStars, i))\n star.addEventListener(\"mouseleave\", clearStars)\n const score = i / 4\n star.addEventListener(\"click\", saveTrainingData.bind(saveTrainingData, score))\n })\n}\n\n// d3 could do the onclick :o https://gist.github.com/enjalot/1425402","pinned":false,"hidden":false,"mode":"ojs"},{"id":904,"value":"function setStars(whichStar) {\n let stars = document.querySelectorAll(\".star\"); // should be global but isnt because it runs before the html is constructed or d3\n for (let i = 0; i < stars.length; i++) {\n stars[i].classList.add(\"gold\")\n if (i >= whichStar) {\n break;\n }\n }\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":900,"value":"function clearStars() {\n let stars = document.querySelectorAll(\".star\"); // should be global but isnt because it runs before the html is constructed or d3\n for (const star of stars) {\n star.classList.remove(\"gold\")\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2889,"value":"saveTrainingData_RM = md`# bugs in here\nNeed a better was to cache the data as the loading seems borked`","pinned":true,"hidden":false,"mode":"ojs"},{"id":127,"value":"function saveTrainingData(score) {\n// const data = JSON.parse(localStorage.getItem(\"trainingData\") || \"[]\");\n\n \n \n console.log('saving...')\n let data =[] // debugging\n \n data.push({ // why is that so slow\n input: [\n currentColours[0][0], currentColours[0][1], currentColours[0][2],\n currentColours[1][0], currentColours[1][1], currentColours[1][2],\n currentColours[2][0], currentColours[2][1], currentColours[2][2],\n currentColours[3][0], currentColours[3][1], currentColours[3][2]\n ], output: [score]\n })\n\n console.log(data[0])\n// localStorage.setItem(\"trainingData\", JSON.stringify(data)); \n\n// predictThemeCombinations() // predict colours - need to be removed from this cell as it's slow and not needed.\n \n clearStars()\n \n // shuffle images\n // d3.shuffle(SVGimages) // doesn't rebuild the dis (display)\n\n\n \n getRandomColours() // make new random colours\n \n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2912,"value":"localStorage_usage_RM = md`# *Local Storage:*\n\n### This is an object that contains data objects for each entry.\n\nneed to reformat this test to explain arguments, ie \nArguments: array (Array): The array to iterate over. \nReturns: Returns the maximum value.\n\n
\n**localStorage.length** \nreturns the number of entries in local storage.\n\n**localStorage.key(0)** \nreturns: String of the *key* object name. \nIn this case the first entry in local storage.\n\n**localStorage.*key*.length** \n*key* is a string on the name of the local storage entry. \nreturns: memory size of the entery.\n\n**localStorage.getItem(*key*)** \n*key* is a string on the name of the local storage entry. \nreturns: data String of stored entry.\n\n**localStorage.setItem(*key*, value)** \n*key* is a string on the name of the local storage entry. \nvalue: A string containing the data to be stored.\n\n**localStorage.removeIten(*key*)** \n*key*: Name of the entry to be removed.\n\n**localStorage.clear()** \ndeletes **all** local Storage entries.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2919,"value":"localStorage","pinned":true,"hidden":false,"mode":"ojs"},{"id":247,"value":"te_train_RM = md`## This does the training but also displays predictions\n\n** *The predictThemeCombinations() function uses the user’s liked history trained network to get colours and themes that they would probably like. Take some time to understand the working of this method. It’s simple but clever.* **\n\n# todo: the prediction should be put into it's own cell/function/button\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"function predictThemeCombinations() {\n const data = JSON.parse(localStorage.getItem(\"trainingData\") || \"[]\");\n\n if (!data.length) { return; }\n\n net.train(data)\n\n \n // results should be cleared here\n \n for (let i = 0; i < 100; i++) { // was 100000 iterations\n const zero = getRandomRGB()\n const one = getRandomRGB()\n const two = getRandomRGB()\n const three = getRandomRGB()\n\n const colors = [ // could be a for each...\n zero[0], zero[1], zero[2],\n one[0], one[1], one[2],\n two[0], two[1], two[2],\n three[0],three[1],three[2]\n ]\n const [ score ] = net.run(colors) // predict the score\n \n results.push({ zero, one, two, three, score})\n }\n sortResults()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":481,"value":"// sort results from prediction into top 10\nfunction sortResults() {\n const sortedResults = results.sort(function(a, b) { return b.score - a.score }) // could use loDash here?\n\n console.log('Best Colours output:')\n\n // keep the top 10 results after sorting\n for (let i = 0; i < 10; i++) {\n console.log(i,sortedResults[i]) // need to make pretty output\n }\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":439,"value":"results = []","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"net = new brain.NeuralNetwork({activation: \"leaky-relu\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2384,"value":"ReplaceSVGcolours_RM = md`---\n### Replace SVG colours\n\n*Maybe I can have 8 colours without too much change...*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2325,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":2784,"value":"oldColours = [ // old colours, these are set to the svg defaults.\n \"#4fc1e9\",\"#3bafda\", // lighter / blue\n \"#48cfad\",\"#37bc9b\", // lighter / green\n \"#ffce54\",\"#f6bb42\", // lighter / yellow \n \"#fc6e51\",\"#e9573f\" ] // lighter / red","pinned":true,"hidden":false,"mode":"ojs"},{"id":2870,"value":"sgv_size_RM = md `**sw** width and **sh** height of svg's.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1445,"value":"sw = 200","pinned":false,"hidden":false,"mode":"ojs"},{"id":1447,"value":"sh = 200","pinned":false,"hidden":false,"mode":"ojs"},{"id":1968,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":3361,"value":"colour_functions_RM = md`## colour functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"// A colour has a value between 0 and 1 colours are stored as an array [r g b]\n// the current colours is an array made up of four of these colours\n\nmutable 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.","pinned":true,"hidden":false,"mode":"ojs"},{"id":547,"value":"function getRandomColours() // make a new set of colours (should be a loop as I may have more than 4 colours)\n{ \n { mutable currentColours = {...mutable currentColours, 0: getRandomRGB()}; }\n { mutable currentColours = {...mutable currentColours, 1: getRandomRGB()}; }\n { mutable currentColours = {...mutable currentColours, 2: getRandomRGB()}; }\n { mutable currentColours = {...mutable currentColours, 3: getRandomRGB()}; }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":269,"value":"colour_conversion_RM = md`## Colour conversion functions:\n\n**colorToRgb([r,g,b]) **: converts object [r,g,b] values that are between 0 to 1 into color values by mutiplying it by 255. \n\nColourToRGB([r,g,b])\n\n**getRandomRgb()**: returns an array [r,g,1] with values between 0 and 1 with 2 decimal places. \n\nstring: \"rgb(r,g,b)\" = getRandomRgb()\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2578,"value":"colourToRGB = color => `rgb(${_.floor(color[0] * 255)}, ${_.floor(color[1] * 255)}, ${_.floor(color[2] * 255)})`","pinned":true,"hidden":false,"mode":"ojs"},{"id":2577,"value":"getRandomRGB = () => ([ _.round(_.random(1,true),3), _.round(_.random(1,true),3),_.round(_.random(1,true),3)])","pinned":true,"hidden":false,"mode":"ojs"},{"id":2731,"value":"css_RM = md`---\n # css box styles\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":955,"value":"\nbs = `width:45%; height:80px; line-height:80px; text-align:center; display:inline-block;\n border-color:grey; border-width: 3px; border-style:solid;\n text-shadow: 1px 1px 3px black,-1px -1px 3px black;color: white;`;","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"Colour_Ref_RM = md`## Colour references sites:\n\n*These are sites that are interesting and insperational me making this project.*\n\nhttps://colorable.jxnblk.com/001b66/00ffa2 \nhttps://palettte.app/ \nhttps://mycolor.space/ \nhttps://www.colorhexa.com/index.php \nhttps://colorsinspo.com/ \nhttps://cssgradient.io/ \nhttps://coolors.co/ \nhttps://colormixer.web.app/02007115ff623007ff9bc91b64440301ffff7c5f55610300/Sunset \nhttps://picular.co/ \nhttps://colorhunt.co/ \nhttps://maketintsandshades.com/ \nhttps://color.review/ \nhttp://khroma.co/ \nhttps://projects.susielu.com/viz-palette \nhttps://www.canva.com/colors/color-palettes/ \nhttps://icolorpalette.com/color-palette-from-images \nhttps://refactoringui.com/previews/building-your-color-palette/ \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"Appendix_RM = md`# Appendix\n\nhttps://observablehq.com/@mbostock/manipulating-svg-files \ndynamic file loading https://talk.observablehq.com/t/evaluate-from-fileattachment/3889/7 \n\nI use https://observablehq.com/@a10k/persist-data-of-a-cell-in-local-storage for local storage but should do it safer with this \nhttps://observablehq.com/@mbostock/safe-local-storage \nhttps://github.com/d3/d3-selection/blob/v2.0.0/README.md#local-variables\n\nhttps://talk.observablehq.com/t/does-mutable-work-with-objects/399/5\n\nhttps://speckyboy.com/free-vector-graph-chart/\n\nhttps://github.com/d3/d3-selection/blob/master/README.md#d3-selection\n\nShuffled the ${SVGimages.length} images to randomise. https://observablehq.com/@d3/d3-shuffle\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"brain = require('brain.js')\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"import {localStorage} from \"@mbostock/safe-local-storage\"\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1034,"value":"_ = require ('lodash')","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}