2a:null 2b:["$","title",null,{"children":"Tensorflow (neural network) | Hongtao Hao | Observable"}] 31:T45d,// 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 = model1.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:[{"id":"31dbf79159b9651fc1a8906bc67084503131e1ec80e070db9b297427f65e14ccaec3e090b1c7dd58df28ff3e2df2810048d69899731610c85beb8d0f7f28cda0","href":"https://static.observableusercontent.com/files/31dbf79159b9651fc1a8906bc67084503131e1ec80e070db9b297427f65e14ccaec3e090b1c7dd58df28ff3e2df2810048d69899731610c85beb8d0f7f28cda0","name":"data_to_me@2.csv","type":"text/csv","lastModified":1670714563708.156,"size":198367},{"id":"112aab86ba11fb5f25ade20c881f2635b5a7259da34ee1ddbb11fc79d5ea7f88a2e37ee720c325a83ed6e6dc042332fc0f4dfeeb0af96ea263a13f829c8c178f","href":"https://static.observableusercontent.com/files/112aab86ba11fb5f25ade20c881f2635b5a7259da34ee1ddbb11fc79d5ea7f88a2e37ee720c325a83ed6e6dc042332fc0f4dfeeb0af96ea263a13f829c8c178f","name":"data_to_me.csv","type":"text/csv","lastModified":1670724467690.014,"size":388863}] 2e:{"id":"9fc1522cdc3666c4","slug":"tensorflow-neural-network-new","title":"Tensorflow (neural network)","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2022-12-10T23:22:43.708Z","update_time":"$D2025-09-05T16:48:48.293Z","view_time":null,"first_public_time":"$D2022-12-10T23:22:43.708Z","fork":{"id":"e0c9428ca3d7d132","slug":"tensorflow-neural-network","title":"Tensorflow (neural network - old)","owner":{"id":"ac0e7b04fecfcd79","login":"hongtaoh","name":"Hongtao Hao"}},"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":1269,"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":0,"collection":{"id":"199a24f333c3897f","slug":"tutorials","title":"tutorials","owner":{"id":"ac0e7b04fecfcd79","login":"hongtaoh","name":"Hongtao Hao"}},"type":"notebook","body":{"title":"Tensorflow (neural network)","cells":[{"id":0,"value":"# Tensorflow (neural network)\n\nThis notebooks is the backbone of my project on [modeling & visualizing ATUS data](https://atus.hongtaoh.com/). It is heavily built upon these two sources:\n - https://observablehq.com/@fengyfei/linear-regression\n - https://observablehq.com/@observablehq/plot-parcoords\n","pinned":false,"hidden":false,"mode":"md"},{"id":249,"value":"data_to_me = await FileAttachment(\"data_to_me.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":938,"value":"eduList = [['Less than 1st grade', 0],\n ['1st, 2nd, 3rd, or 4th grade', 1],\n ['5th or 6th grade', 2],\n ['7th or 8th grade', 3],\n ['9th grade', 4],\n ['10th grade', 5],\n ['11th grade', 6],\n ['12th grade - no diploma', 7],\n ['High school graduate - diploma or equivalent (GED)', 8],\n ['Some college but no degree', 9],\n ['Associate degree - occupational/vocational', 10],\n ['Associate degree - academic program', 11],\n [\"Bachelor's degree (BA, AB, BS, etc.)\", 12],\n [\"Master's degree (MA, MS, MEng, MEd, MSW, etc.)\", 13],\n ['Professional school degree (MD, DDS, DVM, etc.)', 14],\n ['Doctoral degree (PhD, EdD, etc.)', 15]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":943,"value":"raceList = [['White only', 1],\n ['Black only', 2],\n ['American Indian, Alaskan Native only', 3],\n ['Asian only', 4],\n ['Hawaiian/Pacific Islander only', 5],\n ['White-Black', 6],\n ['White-American Indian', 7],\n ['White-Asian', 8],\n ['White-Hawaiian', 9],\n ['Black-American Indian', 10],\n ['Black-Asian', 11],\n ['Black-Hawaiian', 12],\n ['American Indian-Asian', 13]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":946,"value":"partnerList = [['Married', 1], ['Unmarried, but in relationship', 2], ['Single', 3]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":948,"value":"genderList = [['Male', 1], ['Female', 2]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":950,"value":"jobtypeList = [['fulltime', 1], ['partime', 2], ['Not specified', -1]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":952,"value":"employmentList = [['Employed', 1], ['Unemployed', 2], ['Not specified', -1]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":972,"value":"incomeList = [['<= 50K', 0], ['50K - 100K', 1], ['100K - 140K', 2], ['> 140K', 3]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":954,"value":"metroList = [['Not specified', -1],\n ['Metropolitan', 1],\n ['Non-metropolitan', 2],\n ['Not specified', 3]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1166,"value":"yearList = [[2003, 0],\n [2004, 1],\n [2005, 2],\n [2006, 3],\n [2007, 4],\n [2008, 5],\n [2009, 6],\n [2010, 7],\n [2011, 8],\n [2012, 9],\n [2013, 10],\n [2014, 11],\n [2015, 12],\n [2016, 13],\n [2017, 14],\n [2018, 15],\n [2019, 16],\n [2020, 17],\n [2021, 18]]","pinned":false,"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":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":870,"value":"viewof activation2 = Inputs.radio([\"sigmoid\", \"tanh\"], {label: \"First layter activation\", value: \"sigmoid\"})","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":872,"value":"viewof learningRate2 = Inputs.range([0, 0.1], {label: \"Learning Rate\", step: 0.001, value: \"0.005\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":708,"value":"viewof epoch1 = Inputs.range([0, 30], {label: \"Epoch\", step: 1, value: \"10\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":874,"value":"viewof epoch2 = Inputs.range([0, 30], {label: \"Epoch\", step: 1, value: \"10\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":178,"value":"model1 = {\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":false,"hidden":false,"mode":"ojs"},{"id":876,"value":"model2 = {\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: activation2\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(learningRate2),\n loss: \"meanSquaredError\",\n metrics: [\"mse\"]\n });\n \n return model;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":747,"value":"width = 1000","pinned":true,"hidden":false,"mode":"ojs"},{"id":738,"value":"trainLossPlot1 = html`\n

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":995,"value":"trainLossPlot2 = html`\n

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

\n//

\n// `","pinned":true,"hidden":false,"mode":"ojs"},{"id":839,"value":"loss1","pinned":true,"hidden":false,"mode":"ojs"},{"id":888,"value":"loss2","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 ({ loss1 }) => {\n const skip = 2;\n const x = [];\n const y = [];\n for (let i = 0; i < loss1.length; i = i + skip) {\n x.push(i);\n y.push(loss1[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":864,"value":"updateLossPlot2 = {\n Plotly.newPlot(\n 'lossPlot2',\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 ({ loss2 }) => {\n const skip = 2;\n const x = [];\n const y = [];\n for (let i = 0; i < loss2.length; i = i + skip) {\n x.push(i);\n y.push(loss2[i]);\n }\n\n Plotly.react(\n 'lossPlot2',\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":882,"value":"trainButton2 = {\n const button = html``;\n button.onclick = async () => {\n button.disabled = true;\n\n await onStartTraining2();\n\n button.disabled = false;\n };\n\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":884,"value":"onStartTraining2 = async () => {\n const interval = 40;\n await training2({\n callback: ({ model2, epoch2, logs }) => {\n loss2[epoch2] = logs.loss;\n\n updateLossPlot2({ loss2 });\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"onStartTraining = async () => {\n const interval = 40;\n await training({\n callback: ({ model1, epoch1, logs }) => {\n loss1[epoch1] = logs.loss;\n\n updateLossPlot({ loss1 });\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":886,"value":"training2 = async ({ callback }) => { \n await model1.fit(inputs, outputs, {\n shuffle: true,\n epochs: epoch2,\n callbacks: {\n onEpochEnd: async (epoch2, logs) => {\n callback({ model2, epoch2, logs });\n await tf.nextFrame();\n }\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"loss1 = []","pinned":true,"hidden":false,"mode":"ojs"},{"id":849,"value":"loss2 = []","pinned":true,"hidden":false,"mode":"ojs"},{"id":280,"value":"training = async ({ callback }) => { \n await model1.fit(inputs, outputs, {\n shuffle: true,\n epochs: epoch1,\n callbacks: {\n onEpochEnd: async (epoch1, logs) => {\n callback({ model1, epoch1, logs });\n await tf.nextFrame();\n }\n }\n });\n}","pinned":false,"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":415,"value":"// viewof selectedPredictions = Inputs.checkbox(outcomes, {label: \"Outcomes\", value: outcomes.slice(0, 3)})","pinned":true,"hidden":false,"mode":"ojs"},{"id":924,"value":"viewof selectedPredictions = checkbox({\n title: \"Select Time Usage\",\n options: outcomes,\n value: outcomes.slice(0, 3),\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":921,"value":"import {select, radio, slider, checkbox} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":932,"value":"toPredData = [age,\nyear, \nedu,\ngender,\nrace,\nsalary,\nmetro,\nageYoungestChild,\ndayOfWeek,\npartner,\nemployment,\njobType,\nnumChildren]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1025,"value":"mod2pred = model2.predict(tf.tensor([toPredData])).dataSync();","pinned":true,"hidden":false,"mode":"ojs"},{"id":1040,"value":"pred1_all_raw = model1.predict(tf.tensor([toPredData])).dataSync();","pinned":true,"hidden":false,"mode":"ojs"},{"id":1052,"value":"pred1_all = pred1_all_raw.map(e => e* 1440);","pinned":true,"hidden":false,"mode":"ojs"},{"id":1033,"value":"dataForPlot = dataplot()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1029,"value":"dataplot = function() {\n let predData = [];\n const pred1_all_raw = model1.predict(tf.tensor([toPredData])).dataSync();\n let pred1_all = pred1_all_raw.map(e => e* 1440);\n const pred2_all_raw = model2.predict(tf.tensor([toPredData])).dataSync();\n let pred2_all = pred2_all_raw.map(e => e* 1440);\n let pred1 = selectedPredictionsIndices.map(i => pred1_all[i]);\n let pred2 = selectedPredictionsIndices.map(i => pred2_all[i]);\n let model1_data = zip(selectedPredictions, pred1);\n let model2_data = zip(selectedPredictions, pred2);\n model1_data['model'] = \"Model 1\";\n model2_data['model'] = \"Model 2\";\n predData.push(model1_data);\n predData.push(model2_data);\n return predData;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":354,"value":"attribs = {\n let all = Object.keys(dataForPlot[0])\n all.pop()\n return all\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":762,"value":"parallelData = attribs.flatMap((attribs) => {\n return dataForPlot.map((datum) => ({\n model: `${datum.model}`,\n attribs,\n value: datum[attribs],\n datum\n }));\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":755,"value":"ticks = attribs.flatMap((attribs) => {\n return d3.ticks(...d3.extent(dataForPlot, (d) => d[attribs]), numberTicks).map((value) => {\n return { attribs, value };\n });\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":758,"value":"xy = Plot.normalizeX({\n basis: \"extent\",\n x: \"value\",\n y: \"attribs\",\n z: \"attribs\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1183,"value":"JSON.stringify(inputs_raw).indexOf(JSON.stringify(toPredData))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1199,"value":"// {\n// var a = [ [1,2] , [1,2], [3,4] ];\n// var b = [1,2];\n// a = JSON.stringify(a);\n// b = JSON.stringify(b);\n// var c = a.indexOf(b);\n// return c\n// }","pinned":false,"hidden":false,"mode":"ojs"},{"id":1192,"value":"// inputs_raw[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":357,"value":"viewof numTicks = slider({\n min: 1,\n max: 10,\n value: 3,\n step: 1,\n title: \"Number of vertical ticks\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":907,"value":"viewof age = Inputs.range([15, 85], {label: \"Age\", step: 1, value: \"45\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":910,"value":"viewof year = Inputs.select(new Map(yearList), {value: 19, label: \"Year\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":936,"value":"viewof edu = Inputs.select(new Map(eduList), {value: 40, label: \"Education\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":962,"value":"viewof gender = Inputs.select(new Map(genderList), {value: 2, label: \"Gender\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":958,"value":"viewof race = Inputs.select(new Map(raceList), {value: 1, label: \"Race\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":980,"value":"viewof salary = Inputs.select(new Map(incomeList), {value: 1, label: \"Annual Salary\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":970,"value":"viewof metro = Inputs.select(new Map(metroList), {value: 1, label: \"Metropolitan\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":917,"value":"viewof ageYoungestChild = Inputs.range([1, 18], {label: \"Age of youngest child\", step: 1, value: \"1\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":915,"value":"viewof dayOfWeek = Inputs.range([1, 7], {label: \"Day of week\", step: 1, value: \"1\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":960,"value":"viewof partner = Inputs.select(new Map(partnerList), {value: 1, label: \"Partner\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":968,"value":"viewof employment = Inputs.select(new Map(employmentList), {value: 1, label: \"Employment\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":966,"value":"viewof jobType = Inputs.select(new Map(jobtypeList), {value: 1, label: \"Job Type\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":912,"value":"viewof numChildren = Inputs.range([0, 10], {label: \"# of Chidren\", step: 1, value: \"3\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":793,"value":"viewof schemec = Inputs.select(new Map([\n[\"Accent (categorical, 8 colors)\", \"accent\"],\n[\"Category10 (categorical, 10 colors)\", \"category10\"],\n[\"Dark2 (categorical, 8 colors)\", \"dark2\"],\n[\"Paired (categorical, 12 colors)\", \"paired\"],\n[\"Pastel1 (categorical, 9 colors)\", \"pastel1\"],\n[\"Pastel2 (categorical, 8 colors)\", \"pastel2\"],\n[\"Set1 (categorical, 9 colors)\", \"set1\"],\n[\"Set2 (categorical, 8 colors)\", \"set2\"],\n[\"Set3 (categorical, 12 colors)\", \"set3\"],\n[\"Tableau10 (categorical, 10 colors)\", \"tableau10\"]\n]), {label: \"Color scheme\", value: \"dark2\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":806,"value":"viewof numberTicks = Inputs.range([0, 10], {label: \"Number of Ticks\", step: 1, value: \"3\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1061,"value":"// toPredData = Array.from({length: 13}, () => Math.floor(Math.random() * 13));","pinned":true,"hidden":false,"mode":"ojs"},{"id":770,"value":"parallelPlot = Plot.plot({\n marginLeft: 260,\n marginRight: 20,\n height: selectedPredictions.length * 60,\n x: {\n axis: null\n },\n y: {\n padding: 0.1,\n domain: attribs,\n label: \"Time Usage Type\",\n tickPadding: 15,\n },\n color: {\n type: \"categorical\",\n scheme: schemec,\n legend: true,\n },\n marks: [\n Plot.ruleY(attribs, {\n stroke: \"black\",\n strokeWidth: 1\n }),\n Plot.line(parallelData, {\n ...xy,\n z: \"model\",\n stroke: (d) => d.datum.model,\n strokeWidth: 2.9,\n strokeOpacity: 0.9\n }),\n Plot.text(ticks, {\n ...xy,\n text: \"value\",\n fontSize: 12,\n fill: \"black\",\n stroke: \"white\",\n strokeWidth: 3\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"tf = require(\"@tensorflow/tfjs@0.8.0/dist/tf.min.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":361,"value":"import {vl} from \"@vega/vega-lite-api\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":77,"value":"tfvis = require('https://bundle.run/@tensorflow/tfjs-vis@0.1.1')","pinned":true,"hidden":false,"mode":"ojs"},{"id":226,"value":"Plotly = require(\"https://cdn.plot.ly/plotly-latest.min.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":540,"value":"// import {button} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":456,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1177,"value":"data","pinned":true,"hidden":false,"mode":"ojs"},{"id":578,"value":"viewof predButton = html`

${Object.assign(html`