Public
Edited
Dec 11, 2022
Insert cell
Insert cell
data_to_me.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
features = Object.keys(data[0]).slice(18, 31)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// viewof selectedFeatures = Inputs.checkbox(features, {label: "Features", value: features.slice(0, 3)})
Insert cell
outcomes = Object.keys(data[0]).slice(0, 17)
Insert cell
selectedPredictions
Insert cell
selectedPredictionsIndices = selectedPredictions.map(e => outcomes.indexOf(e))
Insert cell
data = data_to_me
Insert cell
OUTPUT_OBJECTS = data.map(e => Object.fromEntries(Object.entries(e).slice(0,17)))
Insert cell
// INPUTS_OBJECTS.map(e => Object.values(e))
Insert cell
outputs_raw = OUTPUT_OBJECTS.map(e => Object.values(e))
Insert cell
outputs = tf.tensor(OUTPUT_OBJECTS.map(e => Object.values(e)))
Insert cell
Insert cell
INPUT_OBJECTS = data.map(e => Object.fromEntries(Object.entries(e).slice(18,31)))
Insert cell
// INPUT_OBJECTS = data.map(e => subset(e, selectedFeatures))
Insert cell
inputs_raw = INPUT_OBJECTS.map(e => Object.values(e))
Insert cell
inputs = tf.tensor(INPUT_OBJECTS.map(e => Object.values(e)))
Insert cell
inputs.shape
Insert cell
viewof activation1 = Inputs.radio(["sigmoid", "tanh"], {label: "First layter activation", value: "sigmoid"})
Insert cell
viewof activation2 = Inputs.radio(["sigmoid", "tanh"], {label: "First layter activation", value: "sigmoid"})
Insert cell
viewof learningRate1 = Inputs.range([0, 0.1], {label: "Learning Rate", step: 0.001, value: "0.005"})
Insert cell
viewof learningRate2 = Inputs.range([0, 0.1], {label: "Learning Rate", step: 0.001, value: "0.005"})
Insert cell
viewof epoch1 = Inputs.range([0, 30], {label: "Epoch", step: 1, value: "10"})
Insert cell
viewof epoch2 = Inputs.range([0, 30], {label: "Epoch", step: 1, value: "10"})
Insert cell
Insert cell
Insert cell
width = 1000
Insert cell
trainLossPlot1 = html`
<div id='lossPlot'></div>
`
Insert cell
trainLossPlot2 = html`
<div id='lossPlot2'></div>
`
Insert cell
// trainLossPlot = html`
// <div style=width:${width}; display: flex; flex-direction: row;'>
// <div id='lossPlot' style='display:flex; flex: 0.5;' />
// <div id='lossPlot2' style='display:flex; flex: 0.5;' />
// </div>
// `
Insert cell
loss1
Insert cell
loss2
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
loss1 = []
Insert cell
loss2 = []
Insert cell
Insert cell
Insert cell
selectedPredictions
Insert cell
// viewof selectedPredictions = Inputs.checkbox(outcomes, {label: "Outcomes", value: outcomes.slice(0, 3)})
Insert cell
viewof selectedPredictions = checkbox({
title: "Select Time Usage",
options: outcomes,
value: outcomes.slice(0, 3),
})
Insert cell
import {select, radio, slider, checkbox} from "@jashkenas/inputs"
Insert cell
Insert cell
mod2pred = model2.predict(tf.tensor([toPredData])).dataSync();
Insert cell
pred1_all_raw = model1.predict(tf.tensor([toPredData])).dataSync();
Insert cell
pred1_all = pred1_all_raw.map(e => e* 1440);
Insert cell
dataForPlot = dataplot()
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
JSON.stringify(inputs_raw).indexOf(JSON.stringify(toPredData))
Insert cell
// {
// var a = [ [1,2] , [1,2], [3,4] ];
// var b = [1,2];
// a = JSON.stringify(a);
// b = JSON.stringify(b);
// var c = a.indexOf(b);
// return c
// }
Insert cell
// inputs_raw[0]
Insert cell
Insert cell
viewof age = Inputs.range([15, 85], {label: "Age", step: 1, value: "45"})
Insert cell
viewof year = Inputs.select(new Map(yearList), {value: 19, label: "Year"})
Insert cell
viewof edu = Inputs.select(new Map(eduList), {value: 40, label: "Education"})
Insert cell
viewof gender = Inputs.select(new Map(genderList), {value: 2, label: "Gender"})
Insert cell
viewof race = Inputs.select(new Map(raceList), {value: 1, label: "Race"})
Insert cell
viewof salary = Inputs.select(new Map(incomeList), {value: 1, label: "Annual Salary"})
Insert cell
viewof metro = Inputs.select(new Map(metroList), {value: 1, label: "Metropolitan"})
Insert cell
viewof ageYoungestChild = Inputs.range([1, 18], {label: "Age of youngest child", step: 1, value: "1"})
Insert cell
viewof dayOfWeek = Inputs.range([1, 7], {label: "Day of week", step: 1, value: "1"})
Insert cell
viewof partner = Inputs.select(new Map(partnerList), {value: 1, label: "Partner"})
Insert cell
viewof employment = Inputs.select(new Map(employmentList), {value: 1, label: "Employment"})
Insert cell
viewof jobType = Inputs.select(new Map(jobtypeList), {value: 1, label: "Job Type"})
Insert cell
viewof numChildren = Inputs.range([0, 10], {label: "# of Chidren", step: 1, value: "3"})
Insert cell
Insert cell
viewof numberTicks = Inputs.range([0, 10], {label: "Number of Ticks", step: 1, value: "3"})
Insert cell
// toPredData = Array.from({length: 13}, () => Math.floor(Math.random() * 13));
Insert cell
parallelPlot = Plot.plot({
marginLeft: 260,
marginRight: 20,
height: selectedPredictions.length * 60,
x: {
axis: null
},
y: {
padding: 0.1,
domain: attribs,
label: "Time Usage Type",
tickPadding: 15,
},
color: {
type: "categorical",
scheme: schemec,
legend: true,
},
marks: [
Plot.ruleY(attribs, {
stroke: "black",
strokeWidth: 1
}),
Plot.line(parallelData, {
...xy,
z: "model",
stroke: (d) => d.datum.model,
strokeWidth: 2.9,
strokeOpacity: 0.9
}),
Plot.text(ticks, {
...xy,
text: "value",
fontSize: 12,
fill: "black",
stroke: "white",
strokeWidth: 3
})
]
})
Insert cell
tf = require("@tensorflow/tfjs@0.8.0/dist/tf.min.js")
Insert cell
import {vl} from "@vega/vega-lite-api"
Insert cell
tfvis = require('https://bundle.run/@tensorflow/tfjs-vis@0.1.1')
Insert cell
Plotly = require('plotly.js-dist')
Insert cell
// import {button} from "@jashkenas/inputs"
Insert cell
d3 = require("d3@6")
Insert cell
data
Insert cell
Insert cell
// 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;
// }
// }
Insert cell
// dataForPlot = {
// predButton; // Wait for the start button to be clicked!
// for (let i = 0; i < 2; ++i) {
// let predData = [];
// const pred1_all = model1.predict(tf.tensor([toPredData])).dataSync();
// const pred2_all = model2.predict(tf.tensor([toPredData])).dataSync();
// let pred1 = selectedPredictionsIndices.map(i => pred1_all[i]);
// let pred2 = selectedPredictionsIndices.map(i => pred2_all[i]);
// let model1_data = zip(selectedPredictions, pred1);
// let model2_data = zip(selectedPredictions, pred2);
// model1_data['model'] = "Model 1";
// model2_data['model'] = "Model 2";
// predData.push(model1_data);
// predData.push(model2_data);
// yield predData;
// }
// }
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