Published
Edited
Oct 12, 2018
8 stars
/*
* This should make the text in the network visualisation appear and disappear depending on mouseovers.
* However, the code below doesn't seem to work at all. Pulling it out of the block does make it work,
* but only after manual execution.
*/
// {
// drawnLinearNetwork;
// drawnCubicNetwork;
// Array.from(document.getElementsByClassName("neuron")).forEach(neuron => {
// const networkId = Number(neuron.getAttribute("network-id"));
// const layerIndex = Number(neuron.getAttribute("layer-index"));
// const neuronIndex = Number(neuron.getAttribute("neuron-index"));
// const texts = Array.from(document
// .getElementsByClassName(`neuron-text-${networkId}-${layerIndex}-${neuronIndex}`));
// neuron.addEventListener("mouseenter", event => {
// texts.forEach(text => text.setAttribute("visibility", "visible"));
// });
// neuron.addEventListener("mouseleave", event => {
// texts.forEach(text => text.setAttribute("visibility", "hidden"));
// });
// // return [networkId, layerIndex, neuronIndex, Array.from(texts).map(text => text.innerHTML)]
// // return texts
// })
// }
// function drawTrainedNetwork(canvasSize, displayPoints, guess, curve, network, trainedNetwork) {
// return `
// <svg width="${canvasSize}" height="${canvasSize}">
// ${displayPoints.map(point =>
// `<circle
// cx="${point.x * canvasSize}"
// cy="${point.y * canvasSize}"
// r="2"
// fill="${guess(point)? "blue" : "red"}"/>`
// )}
// ${curve}
// </svg>
// <svg width="${canvasSize}" height="${canvasSize}">
// ${(() => {
// const { sizes, weights, biases } = trainedNetwork;
// const buffer = canvasSize / 6;
// const neuronSize = buffer / 4;
// const depth = trainedNetwork.sizes.length;
// const deltaX = (canvasSize - 2 * buffer) / (depth - 1);
// const width = trainedNetwork.sizes.reduce((largest, size) => Math.max(largest, size), 0);
// const deltaY = (canvasSize - 2 * buffer) / (width - 1);
// // const log = `<text x="200" y="300">${depth}</text>`;
// const connections = weights.map((layerWeights, layerIndex) => {
// const prevLayerWidth = sizes[layerIndex];
// const layerwidth = sizes[layerIndex+1];
// return layerWeights.map((neuronWeights, neuronIndex) => {
// return neuronWeights.map((weight, prevNeuronIndex) => {
// const prevOffset = (width - prevLayerWidth) * .5 * deltaY; // Center previous layer
// const prevNeuronX = buffer + deltaX * layerIndex;
// const prevNeuronY = buffer + deltaY * prevNeuronIndex + prevOffset;
// const offset = (width - layerwidth) * .5 * deltaY; // Center layer
// const neuronX = buffer + deltaX * (layerIndex + 1);
// const neuronY = buffer + deltaY * neuronIndex + offset;
// const originalWeight = network.weights[layerIndex][neuronIndex][prevNeuronIndex];
// return `<line
// x1="${prevNeuronX}"
// x2="${neuronX}"
// y1="${prevNeuronY}"
// y2="${neuronY}"
// stroke="black" />
// <text
// class="neuron-text-${trainedNetwork.id}-${layerIndex + 1}-${neuronIndex}"
// x=${avg([prevNeuronX, neuronX])}
// y=${avg([prevNeuronY, neuronY]) + neuronIndex * 25}
// text-anchor="middle"
// fill="blue"
// visibility="hidden">
// w: ${originalWeight.toFixed(2)} to ${weight.toFixed(2)}
// </text>
// `
// });
// });
// });
// const neurons = sizes.map((size, xIndex) => {
// return Array.from({ length: size }, (v, yIndex) => {
// const offset = (width - size) * .5 * deltaY; // Center layer
// const neuronX = buffer + deltaX * xIndex;
// const neuronY = buffer + deltaY * yIndex + offset;
// const circle = `<circle
// class="neuron"
// network-id="${trainedNetwork.id}"
// layer-index="${xIndex}"
// neuron-index="${yIndex}"
// cx="${neuronX}"
// cy="${neuronY}"
// r="${neuronSize}"
// fill="white"
// stroke="black"/>`
// if (xIndex === 0) {
// return circle
// } else {
// const bias = biases[xIndex-1][yIndex].toFixed(2);
// const originalBias = network.biases[xIndex-1][yIndex].toFixed(2);
// const biasX = neuronX;
// const biasY = neuronY - 1.5 * neuronSize;
// return circle + `<text
// class="neuron-text-${trainedNetwork.id}-${xIndex}-${yIndex}"
// x="${biasX}"
// y="${biasY}"
// text-anchor="middle"
// fill="green">
// b: ${originalBias} to ${bias}
// </text>`
// }
// });
// });
// return [connections, neurons];
// })()}
// </svg>
// ${(() => {
// if (trainedNetwork.log) {
// const trainedNetworkLastLogEntry = trainedNetwork.log.slice(-1)[0];
// const cost = trainedNetworkLastLogEntry.averageCost.toFixed(5);
// const performance = Math.round(trainedNetworkLastLogEntry.averageCorrect * 100);
// return `<p>Correct: ${performance}%</p><p>Cost: ${cost}</p><p>Epochs: ${trainedNetwork.log.length}</p>`;
// } else {
// return `<p>Correct: ...%</p><p>Cost: ...</p><p>Epochs: 0</p>`;
// }
// })()}
// `;
// }
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.
