2a:null 2b:["$","title",null,{"children":"Tensorflow (neural network - old) | Hongtao Hao | Observable"}] 31:T411,dataForPlot = { predButton; // Wait for the start button to be clicked! for (let i = 0; i < 2; ++i) { let predData = []; let random_numbers = Array.from({length: features.length}, () => Math.floor(Math.random() * features.length)); let predraw_all = model.predict(tf.tensor([random_numbers])).dataSync() let predraw = selectedPredictionsIndices.map(i => predraw_all[i]) let pred1 = predraw.map(e => Math.floor(e * 1000)) const pred2 = pred1.map(e => e + 1); const pred3 = pred1.map(e => e + 2); let model1 = zip(selectedPredictions, pred1) let model2 = zip(selectedPredictions, pred2) let model3 = zip(selectedPredictions, pred3) // let model1 = Object.assign(selectedPredictions, pred1); // let model2 = Object.assign(selectedPredictions, pred2); // let model3 = Object.assign(selectedPredictions, pred3); model1['model'] = 1 model2['model'] = 2 model3['model'] = 3 predData.push(model1); predData.push(model2); predData.push(model3); yield predData; } }32:T803,// chart = { // // Source: https://observablehq.com/@vega/vega-lite-parallel-coordinates // const height = 200; // const hover = vl // .selectSingle() // .on("mouseover") // .nearest(true) // .empty("none"); // const base = vl.markRule({ color: "#ccc" }).encode( // vl.x().fieldN("key"), // vl.detail().count() // ); // const line = base.markLine().encode( // vl.color().fieldN("model"), // vl.detail().fieldN("index"), // vl.opacity().if(hover, vl.value(1)).value(0.6), // vl.y().fieldQ("norm_val").axis(null), // vl.tooltip(attribs) // ); // const points = line.markCircle() // .select(hover) // .encode(vl.size().if(hover, vl.value(50)).value(5)); // // Generates a spec to show tick values at an specific value of y0 // const tick = y0 => // vl.layer( // base.markText({ style: "label" }).encode(vl.text().max("max")), // base.markTick({ style: "tick", size: 8, color: "#ccc" }) // ) // .encode(vl.y().value(y0)); // // Create an array with *numTicks* ticks // const ticks = Array.from({ length: numTicks }) // .map((_, i) => tick((height / (numTicks - 1)) * i)); // return vl // .layer(base, line, points, ...ticks) // .data(dataForPlot) // .transform( // vl.filter(attribs.map(a => `datum["${a}"] != null`).join(" && ")), // vl.window(vl.count().as("index")), // vl.fold(attribs), // vl.groupby("key").joinaggregate(vl.min("value").as("min"), vl.max("value").as("max")), // vl.calculate("(datum.value - datum.min) / (datum.max - datum.min)").as("norm_val"), // vl.calculate("(datum.min + datum.max) / 2").as("mid") // ) // .config({ // axisX: { domain: false, labelAngle: 0, tickColor: "#ccc", title: null }, // view: { stroke: null }, // style: { // label: { baseline: "middle", align: "right", dx: -5 }, // tick: { orient: "horizontal" } // } // }) // .width(width - 100) // .height(height) // .render(); // }33:[{"id":"31dbf79159b9651fc1a8906bc67084503131e1ec80e070db9b297427f65e14ccaec3e090b1c7dd58df28ff3e2df2810048d69899731610c85beb8d0f7f28cda0","href":"https://static.observableusercontent.com/files/31dbf79159b9651fc1a8906bc67084503131e1ec80e070db9b297427f65e14ccaec3e090b1c7dd58df28ff3e2df2810048d69899731610c85beb8d0f7f28cda0","name":"data_to_me@2.csv","type":"text/csv","lastModified":1670688786035.421,"size":198367},{"id":"62bcbcd43adc2adbc30c0a806426fedb04d31b8aad3f930cba1aaf8a2dd5ec48234b9a9f9afa76596fb061e3802d78ffa4cff20235ea3361dcaf690e0439da7d","href":"https://static.observableusercontent.com/files/62bcbcd43adc2adbc30c0a806426fedb04d31b8aad3f930cba1aaf8a2dd5ec48234b9a9f9afa76596fb061e3802d78ffa4cff20235ea3361dcaf690e0439da7d","name":"data_numerical.csv","type":"text/csv","lastModified":1670448795721.212,"size":2053881},{"id":"5f133802452c923242c0f9159d5504b27c2b709fb687d31ce0440912f1dc183553528e8cbe957daec602eb4686ae74d2608d9965b0fb5ec56dcadf2ed712b149","href":"https://static.observableusercontent.com/files/5f133802452c923242c0f9159d5504b27c2b709fb687d31ce0440912f1dc183553528e8cbe957daec602eb4686ae74d2608d9965b0fb5ec56dcadf2ed712b149","name":"data_to_me.csv","type":"text/csv","lastModified":1670599228757.479,"size":196143},{"id":"79ed1ec6dfad804fdb2be3e6fa55edd8ec834ca60eb1c3eed6242d679d605d6cdfc5c5ead6b2a10c186f8ed66777b38813ad8859bfe2520c25a134eec2b9b710","href":"https://static.observableusercontent.com/files/79ed1ec6dfad804fdb2be3e6fa55edd8ec834ca60eb1c3eed6242d679d605d6cdfc5c5ead6b2a10c186f8ed66777b38813ad8859bfe2520c25a134eec2b9b710","name":"data_to_me@1.csv","type":"text/csv","lastModified":1670599998463.979,"size":284981}] 2e:{"id":"e0c9428ca3d7d132","slug":"tensorflow-neural-network","title":"Tensorflow (neural network - old)","thumbnail":"40ad18d82aa2a60368734c4785be46b5d54ece3464d0967d255e4f56926e54ac","access_level":"public","create_time":"$D2022-12-07T14:56:57.253Z","update_time":"$D2025-09-05T16:46:03.031Z","view_time":null,"first_public_time":"$D2022-12-07T14:56:57.253Z","fork":{"id":"662080314eb2cb2c","slug":"blog-post","title":"Blog Post","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"ac0e7b04fecfcd79","login":"hongtaoh","name":"Hongtao Hao","avatar_url":"https://avatars-next.observableusercontent.com/ee6259b27cf1635d95eeafe152f2a7982e66b35d5e447110f5c3371c231b7829","tier":"starter_2024"},"version":818,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"534b8b5a17d1d792","login":"hongtaoh","name":"Hongtao Hao","avatar_url":"https://avatars-next.observableusercontent.com/275bdbd20c688c26dcac698202028ab781d97547864853f854ba4dc49f22a2bf","tier":null}],"members":[{"type":"individual","id":"534b8b5a17d1d792","login":"hongtaoh","name":"Hongtao Hao","avatar_url":"https://avatars-next.observableusercontent.com/275bdbd20c688c26dcac698202028ab781d97547864853f854ba4dc49f22a2bf","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Tensorflow (neural network - old)","cells":[{"id":0,"value":"# Tensorflow (neural network - old)\n## Short description goes here","pinned":false,"hidden":false,"mode":"md"},{"id":249,"value":"data_to_me = await FileAttachment(\"data_to_me@2.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":387,"value":"features = Object.keys(data[0]).slice(18, 31)","pinned":true,"hidden":false,"mode":"ojs"},{"id":392,"value":"// viewof selectedFeatures = Inputs.checkbox(features, {label: \"Features\", value: features.slice(0, 3)})","pinned":true,"hidden":false,"mode":"ojs"},{"id":412,"value":"outcomes = Object.keys(data[0]).slice(0, 17)","pinned":true,"hidden":false,"mode":"ojs"},{"id":415,"value":"viewof selectedPredictions = Inputs.checkbox(outcomes, {label: \"Outcomes\", value: outcomes.slice(0, 3)})","pinned":true,"hidden":false,"mode":"ojs"},{"id":702,"value":"selectedPredictions","pinned":true,"hidden":false,"mode":"ojs"},{"id":462,"value":"selectedPredictionsIndices = selectedPredictions.map(e => outcomes.indexOf(e))","pinned":true,"hidden":false,"mode":"ojs"},{"id":84,"value":"data = data_to_me","pinned":true,"hidden":false,"mode":"ojs"},{"id":88,"value":"OUTPUT_OBJECTS = data.map(e => Object.fromEntries(Object.entries(e).slice(0,17)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":116,"value":"// INPUTS_OBJECTS.map(e => Object.values(e))","pinned":true,"hidden":false,"mode":"ojs"},{"id":168,"value":"outputs_raw = OUTPUT_OBJECTS.map(e => Object.values(e))","pinned":true,"hidden":false,"mode":"ojs"},{"id":111,"value":"outputs = tf.tensor(OUTPUT_OBJECTS.map(e => Object.values(e)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":403,"value":"function subset(obj, propList) {\n return propList.reduce(function(newObj, prop) {\n obj.hasOwnProperty(prop) && (newObj[prop] = obj[prop]);\n return newObj;\n }, {});\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"INPUT_OBJECTS = data.map(e => Object.fromEntries(Object.entries(e).slice(18,31)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":409,"value":"// INPUT_OBJECTS = data.map(e => subset(e, selectedFeatures))","pinned":true,"hidden":false,"mode":"ojs"},{"id":210,"value":"inputs_raw = INPUT_OBJECTS.map(e => Object.values(e))","pinned":true,"hidden":false,"mode":"ojs"},{"id":120,"value":"inputs = tf.tensor(INPUT_OBJECTS.map(e => Object.values(e)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":108,"value":"inputs.shape","pinned":true,"hidden":false,"mode":"ojs"},{"id":630,"value":"viewof activation1 = Inputs.radio([\"sigmoid\", \"tanh\"], {label: \"First layter activation\", value: \"sigmoid\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":228,"value":"// viewof learningRate1 = slider({\n// min: 0,\n// max: 0.1,\n// step: 0.001,\n// precision: 3,\n// value: 0.005,\n// title: \"Learning Rate\",\n// description: \"\"\n// })","pinned":true,"hidden":false,"mode":"ojs"},{"id":719,"value":"viewof learningRate1 = Inputs.range([0, 0.1], {label: \"Learning Rate\", step: 0.001, value: \"0.005\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":708,"value":"viewof epoch = Inputs.range([0, 30], {label: \"Epoch\", step: 1, value: \"10\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":230,"value":"// viewof epoch = slider({\n// min: 0,\n// max: 30,\n// step: 1,\n// value: 10,\n// title: \"Epoch\",\n// description: \"\"\n// })","pinned":true,"hidden":false,"mode":"ojs"},{"id":178,"value":"model = {\n // https://towardsdatascience.com/build-a-simple-neural-network-with-tensorflow-js-d434a30fcb8\n const model = tf.sequential();\n model.add(\n tf.layers.dense({\n inputShape: [inputs.shape[1]],\n units: 3,\n activation: activation1\n })\n );\n\n model.add(\n tf.layers.dense({\n units: outputs.shape[1],\n activation: \"softmax\"\n })\n );\n\n model.compile({\n optimizer: tf.train.sgd(learningRate1),\n loss: \"meanSquaredError\",\n metrics: [\"mse\"]\n });\n \n return model;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":731,"value":"loss","pinned":true,"hidden":false,"mode":"ojs"},{"id":747,"value":"width = 1000","pinned":true,"hidden":false,"mode":"ojs"},{"id":288,"value":"// lossplot = html`\n//

\n//

\n// `","pinned":true,"hidden":false,"mode":"ojs"},{"id":738,"value":"trainLossPlot = html`\n

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":291,"value":"updateLossPlot = {\n Plotly.newPlot(\n 'lossPlot',\n [\n {\n x: [0, 1],\n y: [1, 1]\n }\n ],\n {\n width: width / 2 - 2,\n xaxis: {\n title: 'Epoch'\n },\n yaxis: {\n title: 'Loss'\n },\n showLegend: true\n },\n {\n displayModeBar: true\n }\n );\n\n return ({ loss }) => {\n const skip = 2;\n const x = [];\n const y = [];\n for (let i = 0; i < loss.length; i = i + skip) {\n x.push(i);\n y.push(loss[i]);\n }\n\n Plotly.react(\n 'lossPlot',\n [\n {\n x: x,\n y: y,\n type: 'line'\n }\n ],\n {\n width: width / 2 - 2,\n xaxis: {\n title: 'Epoch'\n },\n yaxis: {\n title: 'Loss'\n },\n showLegend: true\n },\n {\n displayModeBar: true\n }\n );\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":293,"value":"trainButton = {\n const button = html``;\n button.onclick = async () => {\n button.disabled = true;\n\n await onStartTraining();\n\n button.disabled = false;\n };\n\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"onStartTraining = async () => {\n const interval = 40;\n await training({\n callback: ({ model, epoch, logs }) => {\n loss[epoch] = logs.loss;\n\n updateLossPlot({ loss });\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":282,"value":"loss = []","pinned":true,"hidden":false,"mode":"ojs"},{"id":280,"value":"training = async ({ callback }) => { \n await model.fit(inputs, outputs, {\n shuffle: true,\n epochs: epoch,\n callbacks: {\n onEpochEnd: async (epoch, logs) => {\n callback({ model, epoch, logs });\n await tf.nextFrame();\n }\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":689,"value":"function zip(arr1,arr2,out={}){\n // https://stackoverflow.com/a/57413251\n arr1.map( (val,idx)=>{ out[val] = arr2[idx]; } );\n return out;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":704,"value":"selectedPredictions","pinned":true,"hidden":false,"mode":"ojs"},{"id":580,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":578,"value":"viewof predButton = html`

${Object.assign(html`