31:[] 2f:{"title":"TensorFlow Vis API","cells":[{"id":0,"value":"md`# TensorFlow Vis API\n\nThis notebook provides a very thin wrapper around the TensorFlow Vis API. See https://js.tensorflow.org/api_vis for details.\n\nImport into your own notebooks using:\n\n~~~js\nimport { render, showLayer, showModelSummary, showValuesDistribution, showHistory } from '@horaceg/tensorflow-vis-api';\n~~~\n\nExamples of using the wrapper functions are shown below.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"md`## Bar Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"{\n const data = [\n { index: 0, value: 50 },\n { index: 1, value: 100 },\n { index: 2, value: 150 }\n ];\n\n return render('barchart', data);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"md`---\n## Confusion Matrix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"{\n const rows = 5;\n const cols = 5;\n const values = [];\n for (let i = 0; i < rows; i++) {\n const row = [];\n for (let j = 0; j < cols; j++) {\n row.push(Math.round(Math.random() * 50));\n }\n values.push(row);\n }\n const data = { values };\n\n return render('confusionMatrix', data);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":85,"value":"md`---\n## Heat Map\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"{\n const cols = 50;\n const rows = 20;\n const values = [];\n for (let i = 0; i < cols; i++) {\n const col = [];\n for (let j = 0; j < rows; j++) {\n col.push(i * j);\n }\n values.push(col);\n }\n const data = { values };\n\n return render('heatmap', data);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":88,"value":"md`---\n## Histogram\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"{\n const data = Array(100)\n .fill(0)\n .map(x => Math.random() * 100 - Math.random() * 50);\n\n // Push some special values for the stats table.\n data.push(Infinity);\n data.push(NaN);\n data.push(0);\n\n return render('histogram', data);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":99,"value":"md`---\n## Line Chart\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"{\n const series1 = Array(100)\n .fill(0)\n .map(y => Math.random() * 100 - Math.random() * 50)\n .map((y, x) => ({ x, y }));\n\n const series2 = Array(100)\n .fill(0)\n .map(y => Math.random() * 100 - Math.random() * 150)\n .map((y, x) => ({ x, y }));\n\n const series = ['First', 'Second'];\n const data = { values: [series1, series2], series };\n\n return render('linechart', data);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":92,"value":"md`---\n## Scatter Plot\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"{\n const series1 = Array(100)\n .fill(0)\n .map(y => Math.random() * 100 - Math.random() * 50)\n .map((y, x) => ({ x, y }));\n\n const series2 = Array(100)\n .fill(0)\n .map(y => Math.random() * 100 - Math.random() * 150)\n .map((y, x) => ({ x, y }));\n\n const series = ['First', 'Second'];\n const data = { values: [series1, series2], series };\n\n return render('scatterplot', data);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":120,"value":"md`---\n## Table\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"{\n const headers = ['Col 1', 'Col 2', 'Col 3'];\n\n const values = [[1, 2, 3], ['4', '5', '6'], ['7', true, false]];\n\n const surface = { name: 'Table', tab: 'Charts' };\n return render('table', { headers, values }, { height: 150 });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":158,"value":"md`---\n## Show Layer\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"{\n const model = tf.sequential({\n layers: [\n tf.layers.dense({ inputShape: [784], units: 32, activation: 'relu' }),\n tf.layers.dense({ units: 10, activation: 'softmax' })\n ]\n });\n\n return showLayer(model.getLayer(undefined, 1));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":165,"value":"md`---\n## Show Model Summary\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"{\n const model = tf.sequential({\n layers: [\n tf.layers.dense({ inputShape: [784], units: 32, activation: 'relu' }),\n tf.layers.dense({ units: 10, activation: 'softmax' })\n ]\n });\n\n return showModelSummary(model);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":168,"value":"{\n const tensor = tf.tensor1d([0, 0, 0, 0, 2, 3, 4]);\n\n return showValuesDistribution(tensor);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":103,"value":"md`---\n## Show History\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"history = {\n const model = tf.sequential({\n layers: [\n tf.layers.dense({ inputShape: [784], units: 32, activation: 'relu' }),\n tf.layers.dense({ units: 10, activation: 'softmax' })\n ]\n });\n\n model.compile({\n optimizer: 'sgd',\n loss: 'categoricalCrossentropy',\n metrics: ['accuracy']\n });\n\n const data = tf.randomNormal([100, 784]);\n const labels = tf.randomUniform([100, 10]);\n\n // Train for 5 epochs with batch size of 32.\n const history = await model.fit(data, labels, {\n epochs: 5,\n batchSize: 32\n });\n\n return history;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":129,"value":"showHistory(history, ['loss', 'acc'], { height: 200 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":104,"value":"md`## Library`","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"md`### \\`render(chartType, data, options)\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"render = async (chartType, data, options) => {\n const defaultOptions = {\n width: 880,\n height: 400\n };\n\n if (!tfvis.render.hasOwnProperty(chartType)) {\n throw new Error(`Invalid chart type: ${chartType}`);\n }\n\n options = { ...defaultOptions, ...options };\n\n const elem = html`

`;\n elem.style.height = `${options.height}px`;\n\n await tfvis.render[chartType](elem, data, options);\n\n return elem;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":183,"value":"md`### \\`showLayer(layer)\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"showLayer = async layer => {\n const elem = html`

`;\n tfvis.show.layer(elem, layer);\n\n return elem;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":187,"value":"md`### \\`showModelSummary(model)\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"showModelSummary = async model => {\n const elem = html`

`;\n tfvis.show.modelSummary(elem, model);\n\n return elem;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":190,"value":"md`### \\`showValuesDistribution(tensor)\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"showValuesDistribution = async tensor => {\n const elem = html`

`;\n tfvis.show.valuesDistribution(elem, tensor);\n\n return elem;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":146,"value":"md`### \\`showHistory(history, metrics, options)\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"showHistory = async (history, metrics, options) => {\n const defaultOptions = {\n width: 880,\n height: 400\n };\n\n options = { ...defaultOptions, ...options };\n\n const elem = html`

`;\n\n await tfvis.show.history(elem, history, metrics, options);\n\n return elem;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"tf = require('@tensorflow/tfjs')","pinned":true,"hidden":false,"mode":"ojs"},{"id":223,"value":"tf.setBackend(\"cpu\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"tfvis = require('@tensorflow/tfjs-vis@latest')","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}