Published
Edited
Nov 19, 2020
Importers
Insert cell
Insert cell
Insert cell
Insert cell
randomColor = () => ({ r: Math.round(Math.random()*100)/100, g: Math.round(Math.random()*100)/100, b: Math.round(Math.random()*100)/100 })
Insert cell
colorToRgb = color => `rgb(${~~(color.r * 255)}, ${~~(color.g * 255)}, ${~~(color.b * 255)})`
Insert cell
Insert cell
Insert cell
ui = {
let styles = `width:49%;height:100px;line-height:100px;text-align:center;display:inline-block;border-color:grey;border-width:3px;border-style: solid;`;
let data = [];
while (true) {
let testColor = randomColor();
let ui = html`<div><div id='black' style='background:${colorToRgb(testColor)};${styles}'>This one</div><div id='white' style='color:white;background:${colorToRgb(testColor)};${styles}'>This one</div></div>`;
yield ui;
yield new Promise(resolve => {
ui.childNodes[0].onclick = () => {
data.push({ input: testColor, output: { black: 1 }});
net.train(data);
resolve();
};
ui.childNodes[1].onclick = () => {
data.push({ input: testColor, output: { white: 1 }});
net.train(data);
resolve();
};
})
}
}
Insert cell
Insert cell
spectrum = {
ui;
let predictor = net.toFunction();
let container = DOM.element('div');
container.style.maxWidth = '900px';
for (let r = 0; r <= 8; r++) {
for (let g = 0; g <= 8; g++) {
for (let b = 0; b <= 8; b++) {
let swatch = container.appendChild(DOM.element('div'));
swatch.textContent = '★';
let color = { r: r/8, g: g/8, b: b/8 };
swatch.style = `display:inline-block;
background:${colorToRgb(color)};
width:25px;
height:25px;
text-align:center;
color: ${predictor(color).black > 0.5 ? 'black' : 'white'}`;
}
}
}
return container;
}
Insert cell
predictor(randomColor())
Insert cell
predictor = net.toFunction()
Insert cell
net.toJSON()
Insert cell
net.getTrainOptsJSON()
Insert cell
net = new brain.NeuralNetwork()
Insert cell
Insert cell
brain = require('brain.js')

Insert cell
style
Insert cell
import { style } from "@hellonearthis/changing-the-css-as-it-looks-ugly-on-my-screen"
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