2c:null 2d:["$","title",null,{"children":"TensorFlow Vis API | Emu Analytics | Observable"}] 32:[] 30:{"id":"0468823cdd371440","slug":"tensorflow-vis-api","title":"TensorFlow Vis API","thumbnail":"080167a49f92ee465022550fa49f3f6f9046e75499b9781b4af9466751899e13","access_level":"public","create_time":"$D2020-05-08T16:06:05.195Z","update_time":"$D2020-10-23T15:08:09.766Z","view_time":null,"first_public_time":"$D2020-05-08T17:14:51.098Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"374dcc63ddd06df5","login":"emuanalytics","name":"Emu Analytics","avatar_url":"https://avatars-next.observableusercontent.com/be971faab0532b04c1173a4e3af506aaf7228fe01f5d68db47f0459eff95d96d","tier":"pro","bio":""},"version":196,"publish_version":196,"role":null,"authored":false,"authors":[{"type":"individual","id":"bdf516c467dde4e8","login":"robinsummerhill","name":"Robin Summerhill","avatar_url":"https://avatars-next.observableusercontent.com/a9ff6855f02eecd3b45d5c8360553ae7dde7a80f4b79d56742af72792b79ad58","tier":null,"bio":"Head of Technology at Emu Analytics. Geospatial visualisation wizardry."}],"members":[{"type":"team","id":"374dcc63ddd06df5","login":"emuanalytics","name":"Emu Analytics","avatar_url":"https://avatars-next.observableusercontent.com/be971faab0532b04c1173a4e3af506aaf7228fe01f5d68db47f0459eff95d96d","tier":"pro","role":"editor"}],"comments":[{"id":"54122f8cb4bac4d9","reply_to_id":null,"content":"Thanks for this useful notebook! When I opened it first, this module here could not be loaded. It works when the url is replaced by \"https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-vis\".","create_time":"$D2021-03-18T11:26:20.933Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"ea825b7180132fe1","login":"jussi","name":"Justus Schollmeyer","avatar_url":"https://avatars-next.observableusercontent.com/45e9482e97a05df9101f7a0c247096b12e4746059a8c71735b70cf731e34a1cb","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","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 '@emuanalytics/tensorflow-vis-api';\n~~~\n\nExamples of using the wrapper functions are shown below.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"md`## Bar Chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"md`---\n## Confusion Matrix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"md`---\n## Heat Map\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"md`---\n## Histogram\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"md`---\n## Line Chart\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"md`---\n## Scatter Plot\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"md`---\n## Table\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"md`---\n## Show Layer\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"md`---\n## Show Model Summary\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"md`---\n## Show History\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"showHistory(history, ['loss', 'acc'], { height: 200 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"md`## Library`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"md`### \\`render(chartType, data, options)\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"md`### \\`showLayer(layer)\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"md`### \\`showModelSummary(model)\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"md`### \\`showValuesDistribution(tensor)\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"md`### \\`showHistory(history, metrics, options)\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"tf = require('@tensorflow/tfjs@1.7')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"tfvis = require('https://bundle.run/@tensorflow/tfjs-vis@latest')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"