Skip to content

Instantly share code, notes, and snippets.

@sjbeckett

sjbeckett/test.ipynb

Created March 21, 2020 22:54
Show Gist options
  • Save sjbeckett/27d16aa207926fbf323637e542e2e0dd to your computer and use it in GitHub Desktop.
Save sjbeckett/27d16aa207926fbf323637e542e2e0dd to your computer and use it in GitHub Desktop.
Download ZIP
test notebook
Raw
gistfile1.txt
{
"cells": [
{
"cell_type": "code",
"execution_count": 3,
"metadata": {},
"outputs": [],
"source": [
"using Interact, Plots"
]
},
{
"cell_type": "code",
"execution_count": 4,
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.webio.node+json": {
"children": [
{
"children": [
{
"children": [
{
"children": [
{
"children": [
{
"children": [
"ϕ"
],
"instanceArgs": {
"namespace": "html",
"tag": "label"
},
"nodeType": "DOM",
"props": {
"className": "interact ",
"style": {
"padding": "5px 10px 0px 10px"
}
},
"type": "node"
}
],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"className": "interact-flex-row-left"
},
"type": "node"
},
{
"children": [
{
"children": [],
"instanceArgs": {
"namespace": "html",
"tag": "input"
},
"nodeType": "DOM",
"props": {
"attributes": {
"data-bind": "numericValue: index, valueUpdate: 'input', event: {change: function (){this.changes(this.changes()+1)}}",
"orient": "horizontal",
"type": "range"
},
"className": "slider slider is-fullwidth",
"max": 65,
"min": 1,
"step": 1,
"style": {}
},
"type": "node"
}
],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"className": "interact-flex-row-center"
},
"type": "node"
},
{
"children": [
{
"children": [],
"instanceArgs": {
"namespace": "html",
"tag": "p"
},
"nodeType": "DOM",
"props": {
"attributes": {
"data-bind": "text: formatted_val"
}
},
"type": "node"
}
],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"className": "interact-flex-row-right"
},
"type": "node"
}
],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"className": "interact-flex-row interact-widget"
},
"type": "node"
}
],
"instanceArgs": {
"handlers": {
"changes": [
"(function (val){return (val!=this.model[\"changes\"]()) ? (this.valueFromJulia[\"changes\"]=true, this.model[\"changes\"](val)) : undefined})"
],
"index": [
"(function (val){return (val!=this.model[\"index\"]()) ? (this.valueFromJulia[\"index\"]=true, this.model[\"index\"](val)) : undefined})"
]
},
"id": "16602723456808555616",
"imports": {
"data": [
{
"name": "knockout",
"type": "js",
"url": "/assetserver/e9cedc98424c572a9ae686012f43006ab0106277-knockout.js"
},
{
"name": "knockout_punches",
"type": "js",
"url": "/assetserver/cc1a3ba135dced540c908f2f598618cc86e701d5-knockout_punches.js"
},
{
"name": null,
"type": "js",
"url": "/assetserver/0f84f35e1053d2664980c88310fd4707a9ffcec1-all.js"
},
{
"name": null,
"type": "css",
"url": "/assetserver/421b2b40b150d338c1db78f2b9d5cba7c41968fa-style.css"
},
{
"name": null,
"type": "css",
"url": "/assetserver/55710cf65ecfe2d946425cd7f51e147ca3d0fb01-bulma_confined.min.css"
}
],
"type": "async_block"
},
"mount_callbacks": [
"function () {\n var handler = (function (ko, koPunches) {\n ko.punches.enableAll();\n ko.bindingHandlers.numericValue = {\n init: function(element, valueAccessor, allBindings, data, context) {\n var stringified = ko.observable(ko.unwrap(valueAccessor()));\n stringified.subscribe(function(value) {\n var val = parseFloat(value);\n if (!isNaN(val)) {\n valueAccessor()(val);\n }\n });\n valueAccessor().subscribe(function(value) {\n var str = JSON.stringify(value);\n if ((str == \"0\") && ([\"-0\", \"-0.\"].indexOf(stringified()) >= 0))\n return;\n if ([\"null\", \"\"].indexOf(str) >= 0)\n return;\n stringified(str);\n });\n ko.applyBindingsToNode(\n element,\n {\n value: stringified,\n valueUpdate: allBindings.get('valueUpdate'),\n },\n context,\n );\n }\n };\n var json_data = {\"formatted_vals\":[\"0.0\",\"0.19635\",\"0.392699\",\"0.589049\",\"0.785398\",\"0.981748\",\"1.1781\",\"1.37445\",\"1.5708\",\"1.76715\",\"1.9635\",\"2.15984\",\"2.35619\",\"2.55254\",\"2.74889\",\"2.94524\",\"3.14159\",\"3.33794\",\"3.53429\",\"3.73064\",\"3.92699\",\"4.12334\",\"4.31969\",\"4.51604\",\"4.71239\",\"4.90874\",\"5.10509\",\"5.30144\",\"5.49779\",\"5.69414\",\"5.89049\",\"6.08684\",\"6.28319\",\"6.47953\",\"6.67588\",\"6.87223\",\"7.06858\",\"7.26493\",\"7.46128\",\"7.65763\",\"7.85398\",\"8.05033\",\"8.24668\",\"8.44303\",\"8.63938\",\"8.83573\",\"9.03208\",\"9.22843\",\"9.42478\",\"9.62113\",\"9.81748\",\"10.0138\",\"10.2102\",\"10.4065\",\"10.6029\",\"10.7992\",\"10.9956\",\"11.1919\",\"11.3883\",\"11.5846\",\"11.781\",\"11.9773\",\"12.1737\",\"12.37\",\"12.5664\"],\"changes\":WebIO.getval({\"name\":\"changes\",\"scope\":\"16602723456808555616\",\"id\":\"ob_13\",\"type\":\"observable\"}),\"index\":WebIO.getval({\"name\":\"index\",\"scope\":\"16602723456808555616\",\"id\":\"ob_12\",\"type\":\"observable\"})};\n var self = this;\n function AppViewModel() {\n for (var key in json_data) {\n var el = json_data[key];\n this[key] = Array.isArray(el) ? ko.observableArray(el) : ko.observable(el);\n }\n \n [this[\"formatted_val\"]=ko.computed( function(){\n return this.formatted_vals()[parseInt(this.index())-(1)];\n }\n,this)]\n [this[\"changes\"].subscribe((function (val){!(this.valueFromJulia[\"changes\"]) ? (WebIO.setval({\"name\":\"changes\",\"scope\":\"16602723456808555616\",\"id\":\"ob_13\",\"type\":\"observable\"},val)) : undefined; return this.valueFromJulia[\"changes\"]=false}),self),this[\"index\"].subscribe((function (val){!(this.valueFromJulia[\"index\"]) ? (WebIO.setval({\"name\":\"index\",\"scope\":\"16602723456808555616\",\"id\":\"ob_12\",\"type\":\"observable\"},val)) : undefined; return this.valueFromJulia[\"index\"]=false}),self)]\n \n }\n self.model = new AppViewModel();\n self.valueFromJulia = {};\n for (var key in json_data) {\n self.valueFromJulia[key] = false;\n }\n ko.applyBindings(self.model, self.dom);\n}\n);\n (WebIO.importBlock({\"data\":[{\"name\":\"knockout\",\"type\":\"js\",\"url\":\"/assetserver/e9cedc98424c572a9ae686012f43006ab0106277-knockout.js\"},{\"name\":\"knockout_punches\",\"type\":\"js\",\"url\":\"/assetserver/cc1a3ba135dced540c908f2f598618cc86e701d5-knockout_punches.js\"}],\"type\":\"async_block\"})).then((imports) => handler.apply(this, imports));\n}\n"
],
"observables": {
"changes": {
"id": "ob_13",
"sync": false,
"value": 0
},
"index": {
"id": "ob_12",
"sync": true,
"value": 33
}
},
"systemjs_options": null
},
"nodeType": "Scope",
"props": {},
"type": "node"
}
],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"className": "field interact-widget"
},
"type": "node"
},
{
"children": [
{
"children": [
{
"children": [
{
"children": [
{
"children": [
"f"
],
"instanceArgs": {
"namespace": "html",
"tag": "label"
},
"nodeType": "DOM",
"props": {
"className": "interact ",
"style": {
"padding": "5px 10px 0px 10px"
}
},
"type": "node"
}
],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"className": "interact-flex-row-left"
},
"type": "node"
},
{
"children": [
{
"children": [
{
"children": [
{
"children": [],
"instanceArgs": {
"namespace": "html",
"tag": "label"
},
"nodeType": "DOM",
"props": {
"attributes": {
"data-bind": "text : key"
}
},
"type": "node"
}
],
"instanceArgs": {
"namespace": "html",
"tag": "span"
},
"nodeType": "DOM",
"props": {
"attributes": {
"data-bind": "click: function (){$root.update(val)}, css: {'is-primary is-selected' : $root.index() == val, 'interact-widget is-medium button ' : true}"
}
},
"type": "node"
}
],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"attributes": {
"data-bind": "foreach : options_js"
},
"className": "buttons has-addons is-centered"
},
"type": "node"
}
],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"className": "interact-flex-row-center"
},
"type": "node"
},
{
"children": [
{
"children": [],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {},
"type": "node"
}
],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"className": "interact-flex-row-right"
},
"type": "node"
}
],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"className": "interact-flex-row interact-widget"
},
"type": "node"
}
],
"instanceArgs": {
"handlers": {
"index": [
"(function (val){return (val!=this.model[\"index\"]()) ? (this.valueFromJulia[\"index\"]=true, this.model[\"index\"](val)) : undefined})"
],
"options_js": [
"(function (val){return (val!=this.model[\"options_js\"]()) ? (this.valueFromJulia[\"options_js\"]=true, this.model[\"options_js\"](val)) : undefined})"
]
},
"id": "2434294350016015517",
"imports": {
"data": [
{
"name": "knockout",
"type": "js",
"url": "/assetserver/e9cedc98424c572a9ae686012f43006ab0106277-knockout.js"
},
{
"name": "knockout_punches",
"type": "js",
"url": "/assetserver/cc1a3ba135dced540c908f2f598618cc86e701d5-knockout_punches.js"
},
{
"name": null,
"type": "js",
"url": "/assetserver/0f84f35e1053d2664980c88310fd4707a9ffcec1-all.js"
},
{
"name": null,
"type": "css",
"url": "/assetserver/421b2b40b150d338c1db78f2b9d5cba7c41968fa-style.css"
},
{
"name": null,
"type": "css",
"url": "/assetserver/55710cf65ecfe2d946425cd7f51e147ca3d0fb01-bulma_confined.min.css"
}
],
"type": "async_block"
},
"mount_callbacks": [
"function () {\n var handler = (function (ko, koPunches) {\n ko.punches.enableAll();\n ko.bindingHandlers.numericValue = {\n init: function(element, valueAccessor, allBindings, data, context) {\n var stringified = ko.observable(ko.unwrap(valueAccessor()));\n stringified.subscribe(function(value) {\n var val = parseFloat(value);\n if (!isNaN(val)) {\n valueAccessor()(val);\n }\n });\n valueAccessor().subscribe(function(value) {\n var str = JSON.stringify(value);\n if ((str == \"0\") && ([\"-0\", \"-0.\"].indexOf(stringified()) >= 0))\n return;\n if ([\"null\", \"\"].indexOf(str) >= 0)\n return;\n stringified(str);\n });\n ko.applyBindingsToNode(\n element,\n {\n value: stringified,\n valueUpdate: allBindings.get('valueUpdate'),\n },\n context,\n );\n }\n };\n var json_data = {\"options_js\":WebIO.getval({\"name\":\"options_js\",\"scope\":\"2434294350016015517\",\"id\":\"ob_18\",\"type\":\"observable\"}),\"index\":WebIO.getval({\"name\":\"index\",\"scope\":\"2434294350016015517\",\"id\":\"ob_17\",\"type\":\"observable\"})};\n var self = this;\n function AppViewModel() {\n for (var key in json_data) {\n var el = json_data[key];\n this[key] = Array.isArray(el) ? ko.observableArray(el) : ko.observable(el);\n }\n [this[\"update\"]=function (val) {this.index(val)}]\n \n [this[\"options_js\"].subscribe((function (val){!(this.valueFromJulia[\"options_js\"]) ? (WebIO.setval({\"name\":\"options_js\",\"scope\":\"2434294350016015517\",\"id\":\"ob_18\",\"type\":\"observable\"},val)) : undefined; return this.valueFromJulia[\"options_js\"]=false}),self),this[\"index\"].subscribe((function (val){!(this.valueFromJulia[\"index\"]) ? (WebIO.setval({\"name\":\"index\",\"scope\":\"2434294350016015517\",\"id\":\"ob_17\",\"type\":\"observable\"},val)) : undefined; return this.valueFromJulia[\"index\"]=false}),self)]\n \n }\n self.model = new AppViewModel();\n self.valueFromJulia = {};\n for (var key in json_data) {\n self.valueFromJulia[key] = false;\n }\n ko.applyBindings(self.model, self.dom);\n}\n);\n (WebIO.importBlock({\"data\":[{\"name\":\"knockout\",\"type\":\"js\",\"url\":\"/assetserver/e9cedc98424c572a9ae686012f43006ab0106277-knockout.js\"},{\"name\":\"knockout_punches\",\"type\":\"js\",\"url\":\"/assetserver/cc1a3ba135dced540c908f2f598618cc86e701d5-knockout_punches.js\"}],\"type\":\"async_block\"})).then((imports) => handler.apply(this, imports));\n}\n"
],
"observables": {
"index": {
"id": "ob_17",
"sync": true,
"value": 1
},
"options_js": {
"id": "ob_18",
"sync": false,
"value": [
{
"id": "idX2hu0LR9",
"key": "sin",
"val": 1
},
{
"id": "idwA19nJDb",
"key": "cos",
"val": 2
}
]
}
},
"systemjs_options": null
},
"nodeType": "Scope",
"props": {},
"type": "node"
}
],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"className": "interact-widget"
},
"type": "node"
},
{
"children": [
{
"children": [
{
"children": [
{
"children": [
{
"children": [],
"instanceArgs": {
"namespace": "html",
"tag": "input"
},
"nodeType": "DOM",
"props": {
"attributes": {
"data-bind": "checked: value, valueUpdate: 'change', event: {change: function (){this.changes(this.changes()+1)}}",
"type": "checkbox"
},
"className": "switch ",
"id": "##425",
"style": {}
},
"type": "node"
},
{
"children": [
"both"
],
"instanceArgs": {
"namespace": "html",
"tag": "label"
},
"nodeType": "DOM",
"props": {
"attributes": {
"className": "",
"for": "##425"
}
},
"type": "node"
}
],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"className": "field interact-widget"
},
"type": "node"
}
],
"instanceArgs": {
"handlers": {
"changes": [
"(function (val){return (val!=this.model[\"changes\"]()) ? (this.valueFromJulia[\"changes\"]=true, this.model[\"changes\"](val)) : undefined})"
],
"value": [
"(function (val){return (val!=this.model[\"value\"]()) ? (this.valueFromJulia[\"value\"]=true, this.model[\"value\"](val)) : undefined})"
]
},
"id": "2749847935824986639",
"imports": {
"data": [
{
"name": "knockout",
"type": "js",
"url": "/assetserver/e9cedc98424c572a9ae686012f43006ab0106277-knockout.js"
},
{
"name": "knockout_punches",
"type": "js",
"url": "/assetserver/cc1a3ba135dced540c908f2f598618cc86e701d5-knockout_punches.js"
},
{
"name": null,
"type": "js",
"url": "/assetserver/0f84f35e1053d2664980c88310fd4707a9ffcec1-all.js"
},
{
"name": null,
"type": "css",
"url": "/assetserver/421b2b40b150d338c1db78f2b9d5cba7c41968fa-style.css"
},
{
"name": null,
"type": "css",
"url": "/assetserver/55710cf65ecfe2d946425cd7f51e147ca3d0fb01-bulma_confined.min.css"
}
],
"type": "async_block"
},
"mount_callbacks": [
"function () {\n var handler = (function (ko, koPunches) {\n ko.punches.enableAll();\n ko.bindingHandlers.numericValue = {\n init: function(element, valueAccessor, allBindings, data, context) {\n var stringified = ko.observable(ko.unwrap(valueAccessor()));\n stringified.subscribe(function(value) {\n var val = parseFloat(value);\n if (!isNaN(val)) {\n valueAccessor()(val);\n }\n });\n valueAccessor().subscribe(function(value) {\n var str = JSON.stringify(value);\n if ((str == \"0\") && ([\"-0\", \"-0.\"].indexOf(stringified()) >= 0))\n return;\n if ([\"null\", \"\"].indexOf(str) >= 0)\n return;\n stringified(str);\n });\n ko.applyBindingsToNode(\n element,\n {\n value: stringified,\n valueUpdate: allBindings.get('valueUpdate'),\n },\n context,\n );\n }\n };\n var json_data = {\"changes\":WebIO.getval({\"name\":\"changes\",\"scope\":\"2749847935824986639\",\"id\":\"ob_20\",\"type\":\"observable\"}),\"value\":WebIO.getval({\"name\":\"value\",\"scope\":\"2749847935824986639\",\"id\":\"ob_19\",\"type\":\"observable\"})};\n var self = this;\n function AppViewModel() {\n for (var key in json_data) {\n var el = json_data[key];\n this[key] = Array.isArray(el) ? ko.observableArray(el) : ko.observable(el);\n }\n \n \n [this[\"changes\"].subscribe((function (val){!(this.valueFromJulia[\"changes\"]) ? (WebIO.setval({\"name\":\"changes\",\"scope\":\"2749847935824986639\",\"id\":\"ob_20\",\"type\":\"observable\"},val)) : undefined; return this.valueFromJulia[\"changes\"]=false}),self),this[\"value\"].subscribe((function (val){!(this.valueFromJulia[\"value\"]) ? (WebIO.setval({\"name\":\"value\",\"scope\":\"2749847935824986639\",\"id\":\"ob_19\",\"type\":\"observable\"},val)) : undefined; return this.valueFromJulia[\"value\"]=false}),self)]\n \n }\n self.model = new AppViewModel();\n self.valueFromJulia = {};\n for (var key in json_data) {\n self.valueFromJulia[key] = false;\n }\n ko.applyBindings(self.model, self.dom);\n}\n);\n (WebIO.importBlock({\"data\":[{\"name\":\"knockout\",\"type\":\"js\",\"url\":\"/assetserver/e9cedc98424c572a9ae686012f43006ab0106277-knockout.js\"},{\"name\":\"knockout_punches\",\"type\":\"js\",\"url\":\"/assetserver/cc1a3ba135dced540c908f2f598618cc86e701d5-knockout_punches.js\"}],\"type\":\"async_block\"})).then((imports) => handler.apply(this, imports));\n}\n"
],
"observables": {
"changes": {
"id": "ob_20",
"sync": false,
"value": 0
},
"value": {
"id": "ob_19",
"sync": true,
"value": false
}
},
"systemjs_options": null
},
"nodeType": "Scope",
"props": {},
"type": "node"
}
],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"className": "field interact-widget"
},
"type": "node"
}
],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"className": "interact-flex-row interact-widget"
},
"type": "node"
},
{
"children": [
{
"children": [],
"instanceArgs": {
"id": "ob_26",
"name": "obs-node"
},
"nodeType": "ObservableNode",
"props": {},
"type": "node"
}
],
"instanceArgs": {
"handlers": {},
"id": "10525477624923411216",
"imports": {
"data": [],
"type": "async_block"
},
"mount_callbacks": [],
"observables": {
"obs-node": {
"id": "ob_26",
"sync": false,
"value": {
"children": [
{
"children": [],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"setInnerHtml": "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"600\" height=\"400\" viewBox=\"0 0 2400 1600\">\n<defs>\n <clipPath id=\"clip6200\">\n <rect x=\"0\" y=\"0\" width=\"2400\" height=\"1600\"/>\n </clipPath>\n</defs>\n<path clip-path=\"url(#clip6200)\" d=\"\nM0 1600 L2400 1600 L2400 0 L0 0 Z\n \" fill=\"#ffffff\" fill-rule=\"evenodd\" fill-opacity=\"1\"/>\n<defs>\n <clipPath id=\"clip6201\">\n <rect x=\"480\" y=\"0\" width=\"1681\" height=\"1600\"/>\n </clipPath>\n</defs>\n<path clip-path=\"url(#clip6200)\" d=\"\nM182.008 1487.47 L2352.76 1487.47 L2352.76 47.2441 L182.008 47.2441 Z\n \" fill=\"#ffffff\" fill-rule=\"evenodd\" fill-opacity=\"1\"/>\n<defs>\n <clipPath id=\"clip6202\">\n <rect x=\"182\" y=\"47\" width=\"2172\" height=\"1441\"/>\n </clipPath>\n</defs>\n<polyline clip-path=\"url(#clip6202)\" style=\"stroke:#000000; stroke-width:2; stroke-opacity:0.1; fill:none\" points=\"\n 243.444,1487.47 243.444,47.2441 \n \"/>\n<polyline clip-path=\"url(#clip6202)\" style=\"stroke:#000000; stroke-width:2; stroke-opacity:0.1; fill:none\" points=\"\n 755.413,1487.47 755.413,47.2441 \n \"/>\n<polyline clip-path=\"url(#clip6202)\" style=\"stroke:#000000; stroke-width:2; stroke-opacity:0.1; fill:none\" points=\"\n 1267.38,1487.47 1267.38,47.2441 \n \"/>\n<polyline clip-path=\"url(#clip6202)\" style=\"stroke:#000000; stroke-width:2; stroke-opacity:0.1; fill:none\" points=\"\n 1779.35,1487.47 1779.35,47.2441 \n \"/>\n<polyline clip-path=\"url(#clip6202)\" style=\"stroke:#000000; stroke-width:2; stroke-opacity:0.1; fill:none\" points=\"\n 2291.32,1487.47 2291.32,47.2441 \n \"/>\n<polyline clip-path=\"url(#clip6202)\" style=\"stroke:#000000; stroke-width:2; stroke-opacity:0.1; fill:none\" points=\"\n 182.008,1447.43 2352.76,1447.43 \n \"/>\n<polyline clip-path=\"url(#clip6202)\" style=\"stroke:#000000; stroke-width:2; stroke-opacity:0.1; fill:none\" points=\"\n 182.008,1107.5 2352.76,1107.5 \n \"/>\n<polyline clip-path=\"url(#clip6202)\" style=\"stroke:#000000; stroke-width:2; stroke-opacity:0.1; fill:none\" points=\"\n 182.008,767.557 2352.76,767.557 \n \"/>\n<polyline clip-path=\"url(#clip6202)\" style=\"stroke:#000000; stroke-width:2; stroke-opacity:0.1; fill:none\" points=\"\n 182.008,427.619 2352.76,427.619 \n \"/>\n<polyline clip-path=\"url(#clip6202)\" style=\"stroke:#000000; stroke-width:2; stroke-opacity:0.1; fill:none\" points=\"\n 182.008,87.6808 2352.76,87.6808 \n \"/>\n<polyline clip-path=\"url(#clip6200)\" style=\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\" points=\"\n 182.008,1487.47 2352.76,1487.47 \n \"/>\n<polyline clip-path=\"url(#clip6200)\" style=\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\" points=\"\n 182.008,1487.47 182.008,47.2441 \n \"/>\n<polyline clip-path=\"url(#clip6200)\" style=\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\" points=\"\n 243.444,1487.47 243.444,1470.19 \n \"/>\n<polyline clip-path=\"url(#clip6200)\" style=\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\" points=\"\n 755.413,1487.47 755.413,1470.19 \n \"/>\n<polyline clip-path=\"url(#clip6200)\" style=\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\" points=\"\n 1267.38,1487.47 1267.38,1470.19 \n \"/>\n<polyline clip-path=\"url(#clip6200)\" style=\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\" points=\"\n 1779.35,1487.47 1779.35,1470.19 \n \"/>\n<polyline clip-path=\"url(#clip6200)\" style=\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\" points=\"\n 2291.32,1487.47 2291.32,1470.19 \n \"/>\n<polyline clip-path=\"url(#clip6200)\" style=\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\" points=\"\n 182.008,1447.43 208.057,1447.43 \n \"/>\n<polyline clip-path=\"url(#clip6200)\" style=\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\" points=\"\n 182.008,1107.5 208.057,1107.5 \n \"/>\n<polyline clip-path=\"url(#clip6200)\" style=\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\" points=\"\n 182.008,767.557 208.057,767.557 \n \"/>\n<polyline clip-path=\"url(#clip6200)\" style=\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\" points=\"\n 182.008,427.619 208.057,427.619 \n \"/>\n<polyline clip-path=\"url(#clip6200)\" style=\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\" points=\"\n 182.008,87.6808 208.057,87.6808 \n \"/>\n<g clip-path=\"url(#clip6200)\">\n<text style=\"fill:#000000; fill-opacity:1; font-family:Arial,Helvetica Neue,Helvetica,sans-serif; font-size:48px; text-anchor:middle;\" transform=\"rotate(0, 243.444, 1541.47)\" x=\"243.444\" y=\"1541.47\">0</text>\n</g>\n<g clip-path=\"url(#clip6200)\">\n<text style=\"fill:#000000; fill-opacity:1; font-family:Arial,Helvetica Neue,Helvetica,sans-serif; font-size:48px; text-anchor:middle;\" transform=\"rotate(0, 755.413, 1541.47)\" x=\"755.413\" y=\"1541.47\">2</text>\n</g>\n<g clip-path=\"url(#clip6200)\">\n<text style=\"fill:#000000; fill-opacity:1; font-family:Arial,Helvetica Neue,Helvetica,sans-serif; font-size:48px; text-anchor:middle;\" transform=\"rotate(0, 1267.38, 1541.47)\" x=\"1267.38\" y=\"1541.47\">4</text>\n</g>\n<g clip-path=\"url(#clip6200)\">\n<text style=\"fill:#000000; fill-opacity:1; font-family:Arial,Helvetica Neue,Helvetica,sans-serif; font-size:48px; text-anchor:middle;\" transform=\"rotate(0, 1779.35, 1541.47)\" x=\"1779.35\" y=\"1541.47\">6</text>\n</g>\n<g clip-path=\"url(#clip6200)\">\n<text style=\"fill:#000000; fill-opacity:1; font-family:Arial,Helvetica Neue,Helvetica,sans-serif; font-size:48px; text-anchor:middle;\" transform=\"rotate(0, 2291.32, 1541.47)\" x=\"2291.32\" y=\"1541.47\">8</text>\n</g>\n<g clip-path=\"url(#clip6200)\">\n<text style=\"fill:#000000; fill-opacity:1; font-family:Arial,Helvetica Neue,Helvetica,sans-serif; font-size:48px; text-anchor:end;\" transform=\"rotate(0, 158.008, 1464.93)\" x=\"158.008\" y=\"1464.93\">-1.0</text>\n</g>\n<g clip-path=\"url(#clip6200)\">\n<text style=\"fill:#000000; fill-opacity:1; font-family:Arial,Helvetica Neue,Helvetica,sans-serif; font-size:48px; text-anchor:end;\" transform=\"rotate(0, 158.008, 1125)\" x=\"158.008\" y=\"1125\">-0.5</text>\n</g>\n<g clip-path=\"url(#clip6200)\">\n<text style=\"fill:#000000; fill-opacity:1; font-family:Arial,Helvetica Neue,Helvetica,sans-serif; font-size:48px; text-anchor:end;\" transform=\"rotate(0, 158.008, 785.057)\" x=\"158.008\" y=\"785.057\">0.0</text>\n</g>\n<g clip-path=\"url(#clip6200)\">\n<text style=\"fill:#000000; fill-opacity:1; font-family:Arial,Helvetica Neue,Helvetica,sans-serif; font-size:48px; text-anchor:end;\" transform=\"rotate(0, 158.008, 445.119)\" x=\"158.008\" y=\"445.119\">0.5</text>\n</g>\n<g clip-path=\"url(#clip6200)\">\n<text style=\"fill:#000000; fill-opacity:1; font-family:Arial,Helvetica Neue,Helvetica,sans-serif; font-size:48px; text-anchor:end;\" transform=\"rotate(0, 158.008, 105.181)\" x=\"158.008\" y=\"105.181\">1.0</text>\n</g>\n<polyline clip-path=\"url(#clip6202)\" style=\"stroke:#009af9; stroke-width:4; stroke-opacity:1; fill:none\" points=\"\n 243.444,767.557 248.444,754.279 253.444,741.006 258.444,727.743 263.443,714.495 309.674,593.612 355.904,478.388 402.134,372.569 448.365,279.598 476.147,231.188 \n 503.93,189.091 531.712,153.8 559.495,125.732 582.985,107.883 606.474,95.584 629.964,88.9396 653.454,88.0053 678.97,93.4689 704.487,105.625 730.003,124.352 \n 755.52,149.465 779.043,178.06 802.567,211.63 826.091,249.891 849.615,292.52 900.055,396.933 950.496,515.69 1008.94,665.145 1067.38,819.914 1119.31,955.423 \n 1171.24,1083.23 1216.79,1184.81 1262.33,1273.22 1287.15,1314.85 1311.98,1351.34 1336.81,1382.34 1361.63,1407.56 1386.61,1426.86 1411.58,1439.89 1436.56,1446.53 \n 1461.53,1446.71 1489.14,1439.4 1516.75,1424.27 1544.37,1401.51 1571.98,1371.38 1598.25,1336.2 1624.52,1295.02 1650.79,1248.3 1677.07,1196.52 1731.7,1075.06 \n 1786.33,939.649 1832.32,819.346 1878.31,697.375 1934.46,551.913 1990.61,416.785 2017,358.711 2043.39,304.979 2069.78,256.159 2096.17,212.77 2138.45,155.706 \n 2180.73,115.295 2223.01,92.637 2265.29,88.3492 2271.8,89.3346 2278.31,90.7581 2284.81,92.619 2291.32,94.9159 \n \"/>\n<path clip-path=\"url(#clip6200)\" d=\"\nM1989.93 251.724 L2280.76 251.724 L2280.76 130.764 L1989.93 130.764 Z\n \" fill=\"#ffffff\" fill-rule=\"evenodd\" fill-opacity=\"1\"/>\n<polyline clip-path=\"url(#clip6200)\" style=\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\" points=\"\n 1989.93,251.724 2280.76,251.724 2280.76,130.764 1989.93,130.764 1989.93,251.724 \n \"/>\n<polyline clip-path=\"url(#clip6200)\" style=\"stroke:#009af9; stroke-width:4; stroke-opacity:1; fill:none\" points=\"\n 2013.93,191.244 2157.93,191.244 \n \"/>\n<g clip-path=\"url(#clip6200)\">\n<text style=\"fill:#000000; fill-opacity:1; font-family:Arial,Helvetica Neue,Helvetica,sans-serif; font-size:48px; text-anchor:start;\" transform=\"rotate(0, 2181.93, 208.744)\" x=\"2181.93\" y=\"208.744\">y1</text>\n</g>\n</svg>\n"
},
"type": "node"
}
],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {
"className": "interact-flex-row interact-widget"
},
"type": "node"
}
}
},
"systemjs_options": null
},
"nodeType": "Scope",
"props": {},
"type": "node"
}
],
"instanceArgs": {
"namespace": "html",
"tag": "div"
},
"nodeType": "DOM",
"props": {},
"type": "node"
},
"text/html": [
"<div\n",
" class=\"webio-mountpoint\"\n",
" data-webio-mountpoint=\"13295428720873669449\"\n",
">\n",
" <script>\n",
" if (window.require && require.defined && require.defined(\"nbextensions/webio-jupyter-notebook\")) {\n",
" console.log(\"Jupyter WebIO extension detected, not mounting.\");\n",
" } else if (window.WebIO) {\n",
" WebIO.mount(\n",
" document.querySelector('[data-webio-mountpoint=\"13295428720873669449\"]'),\n",
" {\"props\":{},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{\"className\":\"field interact-widget\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{},\"nodeType\":\"Scope\",\"type\":\"node\",\"instanceArgs\":{\"imports\":{\"data\":[{\"name\":\"knockout\",\"type\":\"js\",\"url\":\"\\/assetserver\\/e9cedc98424c572a9ae686012f43006ab0106277-knockout.js\"},{\"name\":\"knockout_punches\",\"type\":\"js\",\"url\":\"\\/assetserver\\/cc1a3ba135dced540c908f2f598618cc86e701d5-knockout_punches.js\"},{\"name\":null,\"type\":\"js\",\"url\":\"\\/assetserver\\/0f84f35e1053d2664980c88310fd4707a9ffcec1-all.js\"},{\"name\":null,\"type\":\"css\",\"url\":\"\\/assetserver\\/421b2b40b150d338c1db78f2b9d5cba7c41968fa-style.css\"},{\"name\":null,\"type\":\"css\",\"url\":\"\\/assetserver\\/55710cf65ecfe2d946425cd7f51e147ca3d0fb01-bulma_confined.min.css\"}],\"type\":\"async_block\"},\"id\":\"16602723456808555616\",\"handlers\":{\"changes\":[\"(function (val){return (val!=this.model[\\\"changes\\\"]()) ? (this.valueFromJulia[\\\"changes\\\"]=true, this.model[\\\"changes\\\"](val)) : undefined})\"],\"index\":[\"(function (val){return (val!=this.model[\\\"index\\\"]()) ? (this.valueFromJulia[\\\"index\\\"]=true, this.model[\\\"index\\\"](val)) : undefined})\"]},\"systemjs_options\":null,\"mount_callbacks\":[\"function () {\\n var handler = (function (ko, koPunches) {\\n ko.punches.enableAll();\\n ko.bindingHandlers.numericValue = {\\n init: function(element, valueAccessor, allBindings, data, context) {\\n var stringified = ko.observable(ko.unwrap(valueAccessor()));\\n stringified.subscribe(function(value) {\\n var val = parseFloat(value);\\n if (!isNaN(val)) {\\n valueAccessor()(val);\\n }\\n });\\n valueAccessor().subscribe(function(value) {\\n var str = JSON.stringify(value);\\n if ((str == \\\"0\\\") && ([\\\"-0\\\", \\\"-0.\\\"].indexOf(stringified()) >= 0))\\n return;\\n if ([\\\"null\\\", \\\"\\\"].indexOf(str) >= 0)\\n return;\\n stringified(str);\\n });\\n ko.applyBindingsToNode(\\n element,\\n {\\n value: stringified,\\n valueUpdate: allBindings.get('valueUpdate'),\\n },\\n context,\\n );\\n }\\n };\\n var json_data = {\\\"formatted_vals\\\":[\\\"0.0\\\",\\\"0.19635\\\",\\\"0.392699\\\",\\\"0.589049\\\",\\\"0.785398\\\",\\\"0.981748\\\",\\\"1.1781\\\",\\\"1.37445\\\",\\\"1.5708\\\",\\\"1.76715\\\",\\\"1.9635\\\",\\\"2.15984\\\",\\\"2.35619\\\",\\\"2.55254\\\",\\\"2.74889\\\",\\\"2.94524\\\",\\\"3.14159\\\",\\\"3.33794\\\",\\\"3.53429\\\",\\\"3.73064\\\",\\\"3.92699\\\",\\\"4.12334\\\",\\\"4.31969\\\",\\\"4.51604\\\",\\\"4.71239\\\",\\\"4.90874\\\",\\\"5.10509\\\",\\\"5.30144\\\",\\\"5.49779\\\",\\\"5.69414\\\",\\\"5.89049\\\",\\\"6.08684\\\",\\\"6.28319\\\",\\\"6.47953\\\",\\\"6.67588\\\",\\\"6.87223\\\",\\\"7.06858\\\",\\\"7.26493\\\",\\\"7.46128\\\",\\\"7.65763\\\",\\\"7.85398\\\",\\\"8.05033\\\",\\\"8.24668\\\",\\\"8.44303\\\",\\\"8.63938\\\",\\\"8.83573\\\",\\\"9.03208\\\",\\\"9.22843\\\",\\\"9.42478\\\",\\\"9.62113\\\",\\\"9.81748\\\",\\\"10.0138\\\",\\\"10.2102\\\",\\\"10.4065\\\",\\\"10.6029\\\",\\\"10.7992\\\",\\\"10.9956\\\",\\\"11.1919\\\",\\\"11.3883\\\",\\\"11.5846\\\",\\\"11.781\\\",\\\"11.9773\\\",\\\"12.1737\\\",\\\"12.37\\\",\\\"12.5664\\\"],\\\"changes\\\":WebIO.getval({\\\"name\\\":\\\"changes\\\",\\\"scope\\\":\\\"16602723456808555616\\\",\\\"id\\\":\\\"ob_13\\\",\\\"type\\\":\\\"observable\\\"}),\\\"index\\\":WebIO.getval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"16602723456808555616\\\",\\\"id\\\":\\\"ob_12\\\",\\\"type\\\":\\\"observable\\\"})};\\n var self = this;\\n function AppViewModel() {\\n for (var key in json_data) {\\n var el = json_data[key];\\n this[key] = Array.isArray(el) ? ko.observableArray(el) : ko.observable(el);\\n }\\n \\n [this[\\\"formatted_val\\\"]=ko.computed( function(){\\n return this.formatted_vals()[parseInt(this.index())-(1)];\\n }\\n,this)]\\n [this[\\\"changes\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"changes\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"changes\\\",\\\"scope\\\":\\\"16602723456808555616\\\",\\\"id\\\":\\\"ob_13\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"changes\\\"]=false}),self),this[\\\"index\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"index\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"16602723456808555616\\\",\\\"id\\\":\\\"ob_12\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"index\\\"]=false}),self)]\\n \\n }\\n self.model = new AppViewModel();\\n self.valueFromJulia = {};\\n for (var key in json_data) {\\n self.valueFromJulia[key] = false;\\n }\\n ko.applyBindings(self.model, self.dom);\\n}\\n);\\n (WebIO.importBlock({\\\"data\\\":[{\\\"name\\\":\\\"knockout\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"\\/assetserver\\/e9cedc98424c572a9ae686012f43006ab0106277-knockout.js\\\"},{\\\"name\\\":\\\"knockout_punches\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"\\/assetserver\\/cc1a3ba135dced540c908f2f598618cc86e701d5-knockout_punches.js\\\"}],\\\"type\\\":\\\"async_block\\\"})).then((imports) => handler.apply(this, imports));\\n}\\n\"],\"observables\":{\"changes\":{\"sync\":false,\"id\":\"ob_13\",\"value\":0},\"index\":{\"sync\":true,\"id\":\"ob_12\",\"value\":33}}},\"children\":[{\"props\":{\"className\":\"interact-flex-row interact-widget\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{\"className\":\"interact-flex-row-left\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{\"className\":\"interact \",\"style\":{\"padding\":\"5px 10px 0px 10px\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"label\"},\"children\":[\"ϕ\"]}]},{\"props\":{\"className\":\"interact-flex-row-center\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{\"max\":65,\"min\":1,\"attributes\":{\"type\":\"range\",\"data-bind\":\"numericValue: index, valueUpdate: 'input', event: {change: function (){this.changes(this.changes()+1)}}\",\"orient\":\"horizontal\"},\"step\":1,\"className\":\"slider slider is-fullwidth\",\"style\":{}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"input\"},\"children\":[]}]},{\"props\":{\"className\":\"interact-flex-row-right\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{\"attributes\":{\"data-bind\":\"text: formatted_val\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"p\"},\"children\":[]}]}]}]}]},{\"props\":{\"className\":\"interact-widget\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{},\"nodeType\":\"Scope\",\"type\":\"node\",\"instanceArgs\":{\"imports\":{\"data\":[{\"name\":\"knockout\",\"type\":\"js\",\"url\":\"\\/assetserver\\/e9cedc98424c572a9ae686012f43006ab0106277-knockout.js\"},{\"name\":\"knockout_punches\",\"type\":\"js\",\"url\":\"\\/assetserver\\/cc1a3ba135dced540c908f2f598618cc86e701d5-knockout_punches.js\"},{\"name\":null,\"type\":\"js\",\"url\":\"\\/assetserver\\/0f84f35e1053d2664980c88310fd4707a9ffcec1-all.js\"},{\"name\":null,\"type\":\"css\",\"url\":\"\\/assetserver\\/421b2b40b150d338c1db78f2b9d5cba7c41968fa-style.css\"},{\"name\":null,\"type\":\"css\",\"url\":\"\\/assetserver\\/55710cf65ecfe2d946425cd7f51e147ca3d0fb01-bulma_confined.min.css\"}],\"type\":\"async_block\"},\"id\":\"2434294350016015517\",\"handlers\":{\"options_js\":[\"(function (val){return (val!=this.model[\\\"options_js\\\"]()) ? (this.valueFromJulia[\\\"options_js\\\"]=true, this.model[\\\"options_js\\\"](val)) : undefined})\"],\"index\":[\"(function (val){return (val!=this.model[\\\"index\\\"]()) ? (this.valueFromJulia[\\\"index\\\"]=true, this.model[\\\"index\\\"](val)) : undefined})\"]},\"systemjs_options\":null,\"mount_callbacks\":[\"function () {\\n var handler = (function (ko, koPunches) {\\n ko.punches.enableAll();\\n ko.bindingHandlers.numericValue = {\\n init: function(element, valueAccessor, allBindings, data, context) {\\n var stringified = ko.observable(ko.unwrap(valueAccessor()));\\n stringified.subscribe(function(value) {\\n var val = parseFloat(value);\\n if (!isNaN(val)) {\\n valueAccessor()(val);\\n }\\n });\\n valueAccessor().subscribe(function(value) {\\n var str = JSON.stringify(value);\\n if ((str == \\\"0\\\") && ([\\\"-0\\\", \\\"-0.\\\"].indexOf(stringified()) >= 0))\\n return;\\n if ([\\\"null\\\", \\\"\\\"].indexOf(str) >= 0)\\n return;\\n stringified(str);\\n });\\n ko.applyBindingsToNode(\\n element,\\n {\\n value: stringified,\\n valueUpdate: allBindings.get('valueUpdate'),\\n },\\n context,\\n );\\n }\\n };\\n var json_data = {\\\"options_js\\\":WebIO.getval({\\\"name\\\":\\\"options_js\\\",\\\"scope\\\":\\\"2434294350016015517\\\",\\\"id\\\":\\\"ob_18\\\",\\\"type\\\":\\\"observable\\\"}),\\\"index\\\":WebIO.getval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"2434294350016015517\\\",\\\"id\\\":\\\"ob_17\\\",\\\"type\\\":\\\"observable\\\"})};\\n var self = this;\\n function AppViewModel() {\\n for (var key in json_data) {\\n var el = json_data[key];\\n this[key] = Array.isArray(el) ? ko.observableArray(el) : ko.observable(el);\\n }\\n [this[\\\"update\\\"]=function (val) {this.index(val)}]\\n \\n [this[\\\"options_js\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"options_js\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"options_js\\\",\\\"scope\\\":\\\"2434294350016015517\\\",\\\"id\\\":\\\"ob_18\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"options_js\\\"]=false}),self),this[\\\"index\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"index\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"2434294350016015517\\\",\\\"id\\\":\\\"ob_17\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"index\\\"]=false}),self)]\\n \\n }\\n self.model = new AppViewModel();\\n self.valueFromJulia = {};\\n for (var key in json_data) {\\n self.valueFromJulia[key] = false;\\n }\\n ko.applyBindings(self.model, self.dom);\\n}\\n);\\n (WebIO.importBlock({\\\"data\\\":[{\\\"name\\\":\\\"knockout\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"\\/assetserver\\/e9cedc98424c572a9ae686012f43006ab0106277-knockout.js\\\"},{\\\"name\\\":\\\"knockout_punches\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"\\/assetserver\\/cc1a3ba135dced540c908f2f598618cc86e701d5-knockout_punches.js\\\"}],\\\"type\\\":\\\"async_block\\\"})).then((imports) => handler.apply(this, imports));\\n}\\n\"],\"observables\":{\"options_js\":{\"sync\":false,\"id\":\"ob_18\",\"value\":[{\"key\":\"sin\",\"val\":1,\"id\":\"idX2hu0LR9\"},{\"key\":\"cos\",\"val\":2,\"id\":\"idwA19nJDb\"}]},\"index\":{\"sync\":true,\"id\":\"ob_17\",\"value\":1}}},\"children\":[{\"props\":{\"className\":\"interact-flex-row interact-widget\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{\"className\":\"interact-flex-row-left\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{\"className\":\"interact \",\"style\":{\"padding\":\"5px 10px 0px 10px\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"label\"},\"children\":[\"f\"]}]},{\"props\":{\"className\":\"interact-flex-row-center\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{\"attributes\":{\"data-bind\":\"foreach : options_js\"},\"className\":\"buttons has-addons is-centered\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{\"attributes\":{\"data-bind\":\"click: function (){$root.update(val)}, css: {'is-primary is-selected' : $root.index() == val, 'interact-widget is-medium button ' : true}\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"span\"},\"children\":[{\"props\":{\"attributes\":{\"data-bind\":\"text : key\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"label\"},\"children\":[]}]}]}]},{\"props\":{\"className\":\"interact-flex-row-right\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[]}]}]}]}]},{\"props\":{\"className\":\"interact-flex-row interact-widget\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{\"className\":\"field interact-widget\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{},\"nodeType\":\"Scope\",\"type\":\"node\",\"instanceArgs\":{\"imports\":{\"data\":[{\"name\":\"knockout\",\"type\":\"js\",\"url\":\"\\/assetserver\\/e9cedc98424c572a9ae686012f43006ab0106277-knockout.js\"},{\"name\":\"knockout_punches\",\"type\":\"js\",\"url\":\"\\/assetserver\\/cc1a3ba135dced540c908f2f598618cc86e701d5-knockout_punches.js\"},{\"name\":null,\"type\":\"js\",\"url\":\"\\/assetserver\\/0f84f35e1053d2664980c88310fd4707a9ffcec1-all.js\"},{\"name\":null,\"type\":\"css\",\"url\":\"\\/assetserver\\/421b2b40b150d338c1db78f2b9d5cba7c41968fa-style.css\"},{\"name\":null,\"type\":\"css\",\"url\":\"\\/assetserver\\/55710cf65ecfe2d946425cd7f51e147ca3d0fb01-bulma_confined.min.css\"}],\"type\":\"async_block\"},\"id\":\"2749847935824986639\",\"handlers\":{\"changes\":[\"(function (val){return (val!=this.model[\\\"changes\\\"]()) ? (this.valueFromJulia[\\\"changes\\\"]=true, this.model[\\\"changes\\\"](val)) : undefined})\"],\"value\":[\"(function (val){return (val!=this.model[\\\"value\\\"]()) ? (this.valueFromJulia[\\\"value\\\"]=true, this.model[\\\"value\\\"](val)) : undefined})\"]},\"systemjs_options\":null,\"mount_callbacks\":[\"function () {\\n var handler = (function (ko, koPunches) {\\n ko.punches.enableAll();\\n ko.bindingHandlers.numericValue = {\\n init: function(element, valueAccessor, allBindings, data, context) {\\n var stringified = ko.observable(ko.unwrap(valueAccessor()));\\n stringified.subscribe(function(value) {\\n var val = parseFloat(value);\\n if (!isNaN(val)) {\\n valueAccessor()(val);\\n }\\n });\\n valueAccessor().subscribe(function(value) {\\n var str = JSON.stringify(value);\\n if ((str == \\\"0\\\") && ([\\\"-0\\\", \\\"-0.\\\"].indexOf(stringified()) >= 0))\\n return;\\n if ([\\\"null\\\", \\\"\\\"].indexOf(str) >= 0)\\n return;\\n stringified(str);\\n });\\n ko.applyBindingsToNode(\\n element,\\n {\\n value: stringified,\\n valueUpdate: allBindings.get('valueUpdate'),\\n },\\n context,\\n );\\n }\\n };\\n var json_data = {\\\"changes\\\":WebIO.getval({\\\"name\\\":\\\"changes\\\",\\\"scope\\\":\\\"2749847935824986639\\\",\\\"id\\\":\\\"ob_20\\\",\\\"type\\\":\\\"observable\\\"}),\\\"value\\\":WebIO.getval({\\\"name\\\":\\\"value\\\",\\\"scope\\\":\\\"2749847935824986639\\\",\\\"id\\\":\\\"ob_19\\\",\\\"type\\\":\\\"observable\\\"})};\\n var self = this;\\n function AppViewModel() {\\n for (var key in json_data) {\\n var el = json_data[key];\\n this[key] = Array.isArray(el) ? ko.observableArray(el) : ko.observable(el);\\n }\\n \\n \\n [this[\\\"changes\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"changes\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"changes\\\",\\\"scope\\\":\\\"2749847935824986639\\\",\\\"id\\\":\\\"ob_20\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"changes\\\"]=false}),self),this[\\\"value\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"value\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"value\\\",\\\"scope\\\":\\\"2749847935824986639\\\",\\\"id\\\":\\\"ob_19\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"value\\\"]=false}),self)]\\n \\n }\\n self.model = new AppViewModel();\\n self.valueFromJulia = {};\\n for (var key in json_data) {\\n self.valueFromJulia[key] = false;\\n }\\n ko.applyBindings(self.model, self.dom);\\n}\\n);\\n (WebIO.importBlock({\\\"data\\\":[{\\\"name\\\":\\\"knockout\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"\\/assetserver\\/e9cedc98424c572a9ae686012f43006ab0106277-knockout.js\\\"},{\\\"name\\\":\\\"knockout_punches\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"\\/assetserver\\/cc1a3ba135dced540c908f2f598618cc86e701d5-knockout_punches.js\\\"}],\\\"type\\\":\\\"async_block\\\"})).then((imports) => handler.apply(this, imports));\\n}\\n\"],\"observables\":{\"changes\":{\"sync\":false,\"id\":\"ob_20\",\"value\":0},\"value\":{\"sync\":true,\"id\":\"ob_19\",\"value\":false}}},\"children\":[{\"props\":{\"className\":\"field interact-widget\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{\"attributes\":{\"type\":\"checkbox\",\"data-bind\":\"checked: value, valueUpdate: 'change', event: {change: function (){this.changes(this.changes()+1)}}\"},\"id\":\"##425\",\"className\":\"switch \",\"style\":{}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"input\"},\"children\":[]},{\"props\":{\"attributes\":{\"className\":\"\",\"for\":\"##425\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"label\"},\"children\":[\"both\"]}]}]}]}]},{\"props\":{},\"nodeType\":\"Scope\",\"type\":\"node\",\"instanceArgs\":{\"imports\":{\"data\":[],\"type\":\"async_block\"},\"id\":\"10832823612260397108\",\"handlers\":{},\"systemjs_options\":null,\"mount_callbacks\":[],\"observables\":{\"obs-node\":{\"sync\":false,\"id\":\"ob_24\",\"value\":{\"props\":{\"className\":\"interact-flex-row interact-widget\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{\"setInnerHtml\":\"<?xml version=\\\"1.0\\\" encoding=\\\"utf-8\\\"?>\\n<svg xmlns=\\\"http:\\/\\/www.w3.org\\/2000\\/svg\\\" xmlns:xlink=\\\"http:\\/\\/www.w3.org\\/1999\\/xlink\\\" width=\\\"600\\\" height=\\\"400\\\" viewBox=\\\"0 0 2400 1600\\\">\\n<defs>\\n <clipPath id=\\\"clip5800\\\">\\n <rect x=\\\"0\\\" y=\\\"0\\\" width=\\\"2400\\\" height=\\\"1600\\\"\\/>\\n <\\/clipPath>\\n<\\/defs>\\n<path clip-path=\\\"url(#clip5800)\\\" d=\\\"\\nM0 1600 L2400 1600 L2400 0 L0 0 Z\\n \\\" fill=\\\"#ffffff\\\" fill-rule=\\\"evenodd\\\" fill-opacity=\\\"1\\\"\\/>\\n<defs>\\n <clipPath id=\\\"clip5801\\\">\\n <rect x=\\\"480\\\" y=\\\"0\\\" width=\\\"1681\\\" height=\\\"1600\\\"\\/>\\n <\\/clipPath>\\n<\\/defs>\\n<path clip-path=\\\"url(#clip5800)\\\" d=\\\"\\nM182.008 1487.47 L2352.76 1487.47 L2352.76 47.2441 L182.008 47.2441 Z\\n \\\" fill=\\\"#ffffff\\\" fill-rule=\\\"evenodd\\\" fill-opacity=\\\"1\\\"\\/>\\n<defs>\\n <clipPath id=\\\"clip5802\\\">\\n <rect x=\\\"182\\\" y=\\\"47\\\" width=\\\"2172\\\" height=\\\"1441\\\"\\/>\\n <\\/clipPath>\\n<\\/defs>\\n<polyline clip-path=\\\"url(#clip5802)\\\" style=\\\"stroke:#000000; stroke-width:2; stroke-opacity:0.1; fill:none\\\" points=\\\"\\n 243.444,1487.47 243.444,47.2441 \\n \\\"\\/>\\n<polyline clip-path=\\\"url(#clip5802)\\\" style=\\\"stroke:#000000; stroke-width:2; stroke-opacity:0.1; fill:none\\\" points=\\\"\\n 755.413,1487.47 755.413,47.2441 \\n \\\"\\/>\\n<polyline clip-path=\\\"url(#clip5802)\\\" style=\\\"stroke:#000000; stroke-width:2; stroke-opacity:0.1; fill:none\\\" points=\\\"\\n 1267.38,1487.47 1267.38,47.2441 \\n \\\"\\/>\\n<polyline clip-path=\\\"url(#clip5802)\\\" style=\\\"stroke:#000000; stroke-width:2; stroke-opacity:0.1; fill:none\\\" points=\\\"\\n 1779.35,1487.47 1779.35,47.2441 \\n \\\"\\/>\\n<polyline clip-path=\\\"url(#clip5802)\\\" style=\\\"stroke:#000000; stroke-width:2; stroke-opacity:0.1; fill:none\\\" points=\\\"\\n 2291.32,1487.47 2291.32,47.2441 \\n \\\"\\/>\\n<polyline clip-path=\\\"url(#clip5802)\\\" style=\\\"stroke:#000000; stroke-width:2; stroke-opacity:0.1; fill:none\\\" points=\\\"\\n 182.008,1447.43 2352.76,1447.43 \\n \\\"\\/>\\n<polyline clip-path=\\\"url(#clip5802)\\\" style=\\\"stroke:#000000; stroke-width:2; stroke-opacity:0.1; fill:none\\\" points=\\\"\\n 182.008,1107.5 2352.76,1107.5 \\n \\\"\\/>\\n<polyline clip-path=\\\"url(#clip5802)\\\" style=\\\"stroke:#000000; stroke-width:2; stroke-opacity:0.1; fill:none\\\" points=\\\"\\n 182.008,767.557 2352.76,767.557 \\n \\\"\\/>\\n<polyline clip-path=\\\"url(#clip5802)\\\" style=\\\"stroke:#000000; stroke-width:2; stroke-opacity:0.1; fill:none\\\" points=\\\"\\n 182.008,427.619 2352.76,427.619 \\n \\\"\\/>\\n<polyline clip-path=\\\"url(#clip5802)\\\" style=\\\"stroke:#000000; stroke-width:2; stroke-opacity:0.1; fill:none\\\" points=\\\"\\n 182.008,87.6808 2352.76,87.6808 \\n \\\"\\/>\\n<polyline clip-path=\\\"url(#clip5800)\\\" style=\\\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\\\" points=\\\"\\n 182.008,1487.47 2352.76,1487.47 \\n \\\"\\/>\\n<polyline clip-path=\\\"url(#clip5800)\\\" style=\\\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\\\" points=\\\"\\n 182.008,1487.47 182.008,47.2441 \\n \\\"\\/>\\n<polyline clip-path=\\\"url(#clip5800)\\\" style=\\\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\\\" points=\\\"\\n 243.444,1487.47 243.444,1470.19 \\n \\\"\\/>\\n<polyline clip-path=\\\"url(#clip5800)\\\" style=\\\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\\\" points=\\\"\\n 755.413,1487.47 755.413,1470.19 \\n \\\"\\/>\\n<polyline clip-path=\\\"url(#clip5800)\\\" style=\\\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\\\" points=\\\"\\n 1267.38,1487.47 1267.38,1470.19 \\n \\\"\\/>\\n<polyline clip-path=\\\"url(#clip5800)\\\" style=\\\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\\\" points=\\\"\\n 1779.35,1487.47 1779.35,1470.19 \\n \\\"\\/>\\n<polyline clip-path=\\\"url(#clip5800)\\\" style=\\\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\\\" points=\\\"\\n 2291.32,1487.47 2291.32,1470.19 \\n \\\"\\/>\\n<polyline clip-path=\\\"url(#clip5800)\\\" style=\\\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\\\" points=\\\"\\n 182.008,1447.43 208.057,1447.43 \\n \\\"\\/>\\n<polyline clip-path=\\\"url(#clip5800)\\\" style=\\\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\\\" points=\\\"\\n 182.008,1107.5 208.057,1107.5 \\n \\\"\\/>\\n<polyline clip-path=\\\"url(#clip5800)\\\" style=\\\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\\\" points=\\\"\\n 182.008,767.557 208.057,767.557 \\n \\\"\\/>\\n<polyline clip-path=\\\"url(#clip5800)\\\" style=\\\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\\\" points=\\\"\\n 182.008,427.619 208.057,427.619 \\n \\\"\\/>\\n<polyline clip-path=\\\"url(#clip5800)\\\" style=\\\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\\\" points=\\\"\\n 182.008,87.6808 208.057,87.6808 \\n \\\"\\/>\\n<g clip-path=\\\"url(#clip5800)\\\">\\n<text style=\\\"fill:#000000; fill-opacity:1; font-family:Arial,Helvetica Neue,Helvetica,sans-serif; font-size:48px; text-anchor:middle;\\\" transform=\\\"rotate(0, 243.444, 1541.47)\\\" x=\\\"243.444\\\" y=\\\"1541.47\\\">0<\\/text>\\n<\\/g>\\n<g clip-path=\\\"url(#clip5800)\\\">\\n<text style=\\\"fill:#000000; fill-opacity:1; font-family:Arial,Helvetica Neue,Helvetica,sans-serif; font-size:48px; text-anchor:middle;\\\" transform=\\\"rotate(0, 755.413, 1541.47)\\\" x=\\\"755.413\\\" y=\\\"1541.47\\\">2<\\/text>\\n<\\/g>\\n<g clip-path=\\\"url(#clip5800)\\\">\\n<text style=\\\"fill:#000000; fill-opacity:1; font-family:Arial,Helvetica Neue,Helvetica,sans-serif; font-size:48px; text-anchor:middle;\\\" transform=\\\"rotate(0, 1267.38, 1541.47)\\\" x=\\\"1267.38\\\" y=\\\"1541.47\\\">4<\\/text>\\n<\\/g>\\n<g clip-path=\\\"url(#clip5800)\\\">\\n<text style=\\\"fill:#000000; fill-opacity:1; font-family:Arial,Helvetica Neue,Helvetica,sans-serif; font-size:48px; text-anchor:middle;\\\" transform=\\\"rotate(0, 1779.35, 1541.47)\\\" x=\\\"1779.35\\\" y=\\\"1541.47\\\">6<\\/text>\\n<\\/g>\\n<g clip-path=\\\"url(#clip5800)\\\">\\n<text style=\\\"fill:#000000; fill-opacity:1; font-family:Arial,Helvetica Neue,Helvetica,sans-serif; font-size:48px; text-anchor:middle;\\\" transform=\\\"rotate(0, 2291.32, 1541.47)\\\" x=\\\"2291.32\\\" y=\\\"1541.47\\\">8<\\/text>\\n<\\/g>\\n<g clip-path=\\\"url(#clip5800)\\\">\\n<text style=\\\"fill:#000000; fill-opacity:1; font-family:Arial,Helvetica Neue,Helvetica,sans-serif; font-size:48px; text-anchor:end;\\\" transform=\\\"rotate(0, 158.008, 1464.93)\\\" x=\\\"158.008\\\" y=\\\"1464.93\\\">-1.0<\\/text>\\n<\\/g>\\n<g clip-path=\\\"url(#clip5800)\\\">\\n<text style=\\\"fill:#000000; fill-opacity:1; font-family:Arial,Helvetica Neue,Helvetica,sans-serif; font-size:48px; text-anchor:end;\\\" transform=\\\"rotate(0, 158.008, 1125)\\\" x=\\\"158.008\\\" y=\\\"1125\\\">-0.5<\\/text>\\n<\\/g>\\n<g clip-path=\\\"url(#clip5800)\\\">\\n<text style=\\\"fill:#000000; fill-opacity:1; font-family:Arial,Helvetica Neue,Helvetica,sans-serif; font-size:48px; text-anchor:end;\\\" transform=\\\"rotate(0, 158.008, 785.057)\\\" x=\\\"158.008\\\" y=\\\"785.057\\\">0.0<\\/text>\\n<\\/g>\\n<g clip-path=\\\"url(#clip5800)\\\">\\n<text style=\\\"fill:#000000; fill-opacity:1; font-family:Arial,Helvetica Neue,Helvetica,sans-serif; font-size:48px; text-anchor:end;\\\" transform=\\\"rotate(0, 158.008, 445.119)\\\" x=\\\"158.008\\\" y=\\\"445.119\\\">0.5<\\/text>\\n<\\/g>\\n<g clip-path=\\\"url(#clip5800)\\\">\\n<text style=\\\"fill:#000000; fill-opacity:1; font-family:Arial,Helvetica Neue,Helvetica,sans-serif; font-size:48px; text-anchor:end;\\\" transform=\\\"rotate(0, 158.008, 105.181)\\\" x=\\\"158.008\\\" y=\\\"105.181\\\">1.0<\\/text>\\n<\\/g>\\n<polyline clip-path=\\\"url(#clip5802)\\\" style=\\\"stroke:#009af9; stroke-width:4; stroke-opacity:1; fill:none\\\" points=\\\"\\n 243.444,767.557 248.444,754.279 253.444,741.006 258.444,727.743 263.443,714.495 309.674,593.612 355.904,478.388 402.134,372.569 448.365,279.598 476.147,231.188 \\n 503.93,189.091 531.712,153.8 559.495,125.732 582.985,107.883 606.474,95.584 629.964,88.9396 653.454,88.0053 678.97,93.4689 704.487,105.625 730.003,124.352 \\n 755.52,149.465 779.043,178.06 802.567,211.63 826.091,249.891 849.615,292.52 900.055,396.933 950.496,515.69 1008.94,665.145 1067.38,819.914 1119.31,955.423 \\n 1171.24,1083.23 1216.79,1184.81 1262.33,1273.22 1287.15,1314.85 1311.98,1351.34 1336.81,1382.34 1361.63,1407.56 1386.61,1426.86 1411.58,1439.89 1436.56,1446.53 \\n 1461.53,1446.71 1489.14,1439.4 1516.75,1424.27 1544.37,1401.51 1571.98,1371.38 1598.25,1336.2 1624.52,1295.02 1650.79,1248.3 1677.07,1196.52 1731.7,1075.06 \\n 1786.33,939.649 1832.32,819.346 1878.31,697.375 1934.46,551.913 1990.61,416.785 2017,358.711 2043.39,304.979 2069.78,256.159 2096.17,212.77 2138.45,155.706 \\n 2180.73,115.295 2223.01,92.637 2265.29,88.3492 2271.8,89.3346 2278.31,90.7581 2284.81,92.619 2291.32,94.9159 \\n \\\"\\/>\\n<path clip-path=\\\"url(#clip5800)\\\" d=\\\"\\nM1989.93 251.724 L2280.76 251.724 L2280.76 130.764 L1989.93 130.764 Z\\n \\\" fill=\\\"#ffffff\\\" fill-rule=\\\"evenodd\\\" fill-opacity=\\\"1\\\"\\/>\\n<polyline clip-path=\\\"url(#clip5800)\\\" style=\\\"stroke:#000000; stroke-width:4; stroke-opacity:1; fill:none\\\" points=\\\"\\n 1989.93,251.724 2280.76,251.724 2280.76,130.764 1989.93,130.764 1989.93,251.724 \\n \\\"\\/>\\n<polyline clip-path=\\\"url(#clip5800)\\\" style=\\\"stroke:#009af9; stroke-width:4; stroke-opacity:1; fill:none\\\" points=\\\"\\n 2013.93,191.244 2157.93,191.244 \\n \\\"\\/>\\n<g clip-path=\\\"url(#clip5800)\\\">\\n<text style=\\\"fill:#000000; fill-opacity:1; font-family:Arial,Helvetica Neue,Helvetica,sans-serif; font-size:48px; text-anchor:start;\\\" transform=\\\"rotate(0, 2181.93, 208.744)\\\" x=\\\"2181.93\\\" y=\\\"208.744\\\">y1<\\/text>\\n<\\/g>\\n<\\/svg>\\n\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[]}]}}}},\"children\":[{\"props\":{},\"nodeType\":\"ObservableNode\",\"type\":\"node\",\"instanceArgs\":{\"id\":\"ob_24\",\"name\":\"obs-node\"},\"children\":[]}]}]},\n",
" window,\n",
" );\n",
" } else {\n",
" document\n",
" .querySelector('[data-webio-mountpoint=\"13295428720873669449\"]')\n",
" .innerHTML = (\n",
" '<div style=\"padding: 1em; background-color: #f8d6da; border: 1px solid #f5c6cb\">' +\n",
" '<p><strong>WebIO not detected.</strong></p>' +\n",
" '<p>Please read ' +\n",
" '<a href=\"https://juliagizmos.github.io/WebIO.jl/latest/troubleshooting/not-detected/\" target=\"_blank\">the troubleshooting guide</a> ' +\n",
" 'for more information on how to resolve this issue.</p>' +\n",
" '<p><a href=\"https://juliagizmos.github.io/WebIO.jl/latest/troubleshooting/not-detected/\" target=\"_blank\">https://juliagizmos.github.io/WebIO.jl/latest/troubleshooting/not-detected/</a></p>' +\n",
" '</div>'\n",
" );\n",
" }\n",
" </script>\n",
"</div>\n"
],
"text/plain": [
"Node{WebIO.DOM}(WebIO.DOM(:html, :div), Any[Node{WebIO.DOM}(WebIO.DOM(:html, :div), Any[Scope(Node{WebIO.DOM}(WebIO.DOM(:html, :div), Any[Node{WebIO.DOM}(WebIO.DOM(:html, :div), Any[Node{WebIO.DOM}(WebIO.DOM(:html, :label), Any[\"ϕ\"], Dict{Symbol,Any}(:className => \"interact \",:style => Dict{Any,Any}(:padding => \"5px 10px 0px 10px\")))], Dict{Symbol,Any}(:className => \"interact-flex-row-left\")), Node{WebIO.DOM}(WebIO.DOM(:html, :div), Any[Node{WebIO.DOM}(WebIO.DOM(:html, :input), Any[], Dict{Symbol,Any}(:max => 65,:min => 1,:attributes => Dict{Any,Any}(:type => \"range\",Symbol(\"data-bind\") => \"numericValue: index, valueUpdate: 'input', event: {change: function (){this.changes(this.changes()+1)}}\",\"orient\" => \"horizontal\"),:step => 1,:className => \"slider slider is-fullwidth\",:style => Dict{Any,Any}()))], Dict{Symbol,Any}(:className => \"interact-flex-row-center\")), Node{WebIO.DOM}(WebIO.DOM(:html, :div), Any[Node{WebIO.DOM}(WebIO.DOM(:html, :p), Any[], Dict{Symbol,Any}(:attributes => Dict(\"data-bind\" => \"text: formatted_val\")))], Dict{Symbol,Any}(:className => \"interact-flex-row-right\"))], Dict{Symbol,Any}(:className => \"interact-flex-row interact-widget\")), Dict{String,Tuple{Observables.AbstractObservable,Union{Nothing, Bool}}}(\"changes\" => (Observable{Int64} with 1 listeners. Value:\n",
"0, nothing),\"index\" => (Observable{Any} with 2 listeners. Value:\n",
"33, nothing)), Set(String[]), nothing, Asset[Asset(\"js\", \"knockout\", \"C:\\\\Users\\\\Steve\\\\.julia\\\\packages\\\\Knockout\\\\IP1uR\\\\src\\\\..\\\\assets\\\\knockout.js\"), Asset(\"js\", \"knockout_punches\", \"C:\\\\Users\\\\Steve\\\\.julia\\\\packages\\\\Knockout\\\\IP1uR\\\\src\\\\..\\\\assets\\\\knockout_punches.js\"), Asset(\"js\", nothing, \"C:\\\\Users\\\\Steve\\\\.julia\\\\packages\\\\InteractBase\\\\9mFwe\\\\src\\\\..\\\\assets\\\\all.js\"), Asset(\"css\", nothing, \"C:\\\\Users\\\\Steve\\\\.julia\\\\packages\\\\InteractBase\\\\9mFwe\\\\src\\\\..\\\\assets\\\\style.css\"), Asset(\"css\", nothing, \"C:\\\\Users\\\\Steve\\\\.julia\\\\packages\\\\Interact\\\\SbgIk\\\\src\\\\..\\\\assets\\\\bulma_confined.min.css\")], Dict{Any,Any}(\"changes\" => Any[WebIO.JSString(\"(function (val){return (val!=this.model[\\\"changes\\\"]()) ? (this.valueFromJulia[\\\"changes\\\"]=true, this.model[\\\"changes\\\"](val)) : undefined})\")],\"index\" => Any[WebIO.JSString(\"(function (val){return (val!=this.model[\\\"index\\\"]()) ? (this.valueFromJulia[\\\"index\\\"]=true, this.model[\\\"index\\\"](val)) : undefined})\")]), WebIO.ConnectionPool(Channel{Any}(sz_max:32,sz_curr:0), Set(AbstractConnection[]), Base.GenericCondition{Base.AlwaysLockedST}(Base.InvasiveLinkedList{Task}(Task (runnable) @0x000000002de030f0, Task (runnable) @0x000000002de030f0), Base.AlwaysLockedST(1))), WebIO.JSString[WebIO.JSString(\"function () {\\n var handler = (function (ko, koPunches) {\\n ko.punches.enableAll();\\n ko.bindingHandlers.numericValue = {\\n init: function(element, valueAccessor, allBindings, data, context) {\\n var stringified = ko.observable(ko.unwrap(valueAccessor()));\\n stringified.subscribe(function(value) {\\n var val = parseFloat(value);\\n if (!isNaN(val)) {\\n valueAccessor()(val);\\n }\\n });\\n valueAccessor().subscribe(function(value) {\\n var str = JSON.stringify(value);\\n if ((str == \\\"0\\\") && ([\\\"-0\\\", \\\"-0.\\\"].indexOf(stringified()) >= 0))\\n return;\\n if ([\\\"null\\\", \\\"\\\"].indexOf(str) >= 0)\\n return;\\n stringified(str);\\n });\\n ko.applyBindingsToNode(\\n element,\\n {\\n value: stringified,\\n valueUpdate: allBindings.get('valueUpdate'),\\n },\\n context,\\n );\\n }\\n };\\n var json_data = {\\\"formatted_vals\\\":[\\\"0.0\\\",\\\"0.19635\\\",\\\"0.392699\\\",\\\"0.589049\\\",\\\"0.785398\\\",\\\"0.981748\\\",\\\"1.1781\\\",\\\"1.37445\\\",\\\"1.5708\\\",\\\"1.76715\\\",\\\"1.9635\\\",\\\"2.15984\\\",\\\"2.35619\\\",\\\"2.55254\\\",\\\"2.74889\\\",\\\"2.94524\\\",\\\"3.14159\\\",\\\"3.33794\\\",\\\"3.53429\\\",\\\"3.73064\\\",\\\"3.92699\\\",\\\"4.12334\\\",\\\"4.31969\\\",\\\"4.51604\\\",\\\"4.71239\\\",\\\"4.90874\\\",\\\"5.10509\\\",\\\"5.30144\\\",\\\"5.49779\\\",\\\"5.69414\\\",\\\"5.89049\\\",\\\"6.08684\\\",\\\"6.28319\\\",\\\"6.47953\\\",\\\"6.67588\\\",\\\"6.87223\\\",\\\"7.06858\\\",\\\"7.26493\\\",\\\"7.46128\\\",\\\"7.65763\\\",\\\"7.85398\\\",\\\"8.05033\\\",\\\"8.24668\\\",\\\"8.44303\\\",\\\"8.63938\\\",\\\"8.83573\\\",\\\"9.03208\\\",\\\"9.22843\\\",\\\"9.42478\\\",\\\"9.62113\\\",\\\"9.81748\\\",\\\"10.0138\\\",\\\"10.2102\\\",\\\"10.4065\\\",\\\"10.6029\\\",\\\"10.7992\\\",\\\"10.9956\\\",\\\"11.1919\\\",\\\"11.3883\\\",\\\"11.5846\\\",\\\"11.781\\\",\\\"11.9773\\\",\\\"12.1737\\\",\\\"12.37\\\",\\\"12.5664\\\"],\\\"changes\\\":WebIO.getval({\\\"name\\\":\\\"changes\\\",\\\"scope\\\":\\\"16602723456808555616\\\",\\\"id\\\":\\\"ob_13\\\",\\\"type\\\":\\\"observable\\\"}),\\\"index\\\":WebIO.getval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"16602723456808555616\\\",\\\"id\\\":\\\"ob_12\\\",\\\"type\\\":\\\"observable\\\"})};\\n var self = this;\\n function AppViewModel() {\\n for (var key in json_data) {\\n var el = json_data[key];\\n this[key] = Array.isArray(el) ? ko.observableArray(el) : ko.observable(el);\\n }\\n \\n [this[\\\"formatted_val\\\"]=ko.computed( function(){\\n return this.formatted_vals()[parseInt(this.index())-(1)];\\n }\\n,this)]\\n [this[\\\"changes\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"changes\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"changes\\\",\\\"scope\\\":\\\"16602723456808555616\\\",\\\"id\\\":\\\"ob_13\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"changes\\\"]=false}),self),this[\\\"index\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"index\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"16602723456808555616\\\",\\\"id\\\":\\\"ob_12\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"index\\\"]=false}),self)]\\n \\n }\\n self.model = new AppViewModel();\\n self.valueFromJulia = {};\\n for (var key in json_data) {\\n self.valueFromJulia[key] = false;\\n }\\n ko.applyBindings(self.model, self.dom);\\n}\\n);\\n (WebIO.importBlock({\\\"data\\\":[{\\\"name\\\":\\\"knockout\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"/assetserver/e9cedc98424c572a9ae686012f43006ab0106277-knockout.js\\\"},{\\\"name\\\":\\\"knockout_punches\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"/assetserver/cc1a3ba135dced540c908f2f598618cc86e701d5-knockout_punches.js\\\"}],\\\"type\\\":\\\"async_block\\\"})).then((imports) => handler.apply(this, imports));\\n}\\n\")])], Dict{Symbol,Any}(:className => \"field interact-widget\")), Node{WebIO.DOM}(WebIO.DOM(:html, :div), Any[Scope(Node{WebIO.DOM}(WebIO.DOM(:html, :div), Any[Node{WebIO.DOM}(WebIO.DOM(:html, :div), Any[Node{WebIO.DOM}(WebIO.DOM(:html, :label), Any[\"f\"], Dict{Symbol,Any}(:className => \"interact \",:style => Dict{Any,Any}(:padding => \"5px 10px 0px 10px\")))], Dict{Symbol,Any}(:className => \"interact-flex-row-left\")), Node{WebIO.DOM}(WebIO.DOM(:html, :div), Any[Node{WebIO.DOM}(WebIO.DOM(:html, :div), Any[Node{WebIO.DOM}(WebIO.DOM(:html, :span), Any[Node{WebIO.DOM}(WebIO.DOM(:html, :label), Any[], Dict{Symbol,Any}(:attributes => Dict(\"data-bind\" => \"text : key\")))], Dict{Symbol,Any}(:attributes => Dict(\"data-bind\" => \"click: function (){\\$root.update(val)}, css: {'is-primary is-selected' : \\$root.index() == val, 'interact-widget is-medium button ' : true}\")))], Dict{Symbol,Any}(:attributes => (\"data-bind\" => \"foreach : options_js\"),:className => \"buttons has-addons is-centered\"))], Dict{Symbol,Any}(:className => \"interact-flex-row-center\")), Node{WebIO.DOM}(WebIO.DOM(:html, :div), Any[Node{WebIO.DOM}(WebIO.DOM(:html, :div), Any[], Dict{Symbol,Any}())], Dict{Symbol,Any}(:className => \"interact-flex-row-right\"))], Dict{Symbol,Any}(:className => \"interact-flex-row interact-widget\")), Dict{String,Tuple{Observables.AbstractObservable,Union{Nothing, Bool}}}(\"options_js\" => (Observable{Any} with 1 listeners. Value:\n",
"OrderedDict[OrderedDict{String,Any}(\"key\" => \"sin\",\"val\" => 1,\"id\" => \"idX2hu0LR9\"), OrderedDict{String,Any}(\"key\" => \"cos\",\"val\" => 2,\"id\" => \"idwA19nJDb\")], nothing),\"index\" => (Observable{Any} with 2 listeners. Value:\n",
"1, nothing)), Set(String[]), nothing, Asset[Asset(\"js\", \"knockout\", \"C:\\\\Users\\\\Steve\\\\.julia\\\\packages\\\\Knockout\\\\IP1uR\\\\src\\\\..\\\\assets\\\\knockout.js\"), Asset(\"js\", \"knockout_punches\", \"C:\\\\Users\\\\Steve\\\\.julia\\\\packages\\\\Knockout\\\\IP1uR\\\\src\\\\..\\\\assets\\\\knockout_punches.js\"), Asset(\"js\", nothing, \"C:\\\\Users\\\\Steve\\\\.julia\\\\packages\\\\InteractBase\\\\9mFwe\\\\src\\\\..\\\\assets\\\\all.js\"), Asset(\"css\", nothing, \"C:\\\\Users\\\\Steve\\\\.julia\\\\packages\\\\InteractBase\\\\9mFwe\\\\src\\\\..\\\\assets\\\\style.css\"), Asset(\"css\", nothing, \"C:\\\\Users\\\\Steve\\\\.julia\\\\packages\\\\Interact\\\\SbgIk\\\\src\\\\..\\\\assets\\\\bulma_confined.min.css\")], Dict{Any,Any}(\"options_js\" => Any[WebIO.JSString(\"(function (val){return (val!=this.model[\\\"options_js\\\"]()) ? (this.valueFromJulia[\\\"options_js\\\"]=true, this.model[\\\"options_js\\\"](val)) : undefined})\")],\"index\" => Any[WebIO.JSString(\"(function (val){return (val!=this.model[\\\"index\\\"]()) ? (this.valueFromJulia[\\\"index\\\"]=true, this.model[\\\"index\\\"](val)) : undefined})\")]), WebIO.ConnectionPool(Channel{Any}(sz_max:32,sz_curr:0), Set(AbstractConnection[]), Base.GenericCondition{Base.AlwaysLockedST}(Base.InvasiveLinkedList{Task}(Task (runnable) @0x0000000013bf1710, Task (runnable) @0x0000000013bf1710), Base.AlwaysLockedST(1))), WebIO.JSString[WebIO.JSString(\"function () {\\n var handler = (function (ko, koPunches) {\\n ko.punches.enableAll();\\n ko.bindingHandlers.numericValue = {\\n init: function(element, valueAccessor, allBindings, data, context) {\\n var stringified = ko.observable(ko.unwrap(valueAccessor()));\\n stringified.subscribe(function(value) {\\n var val = parseFloat(value);\\n if (!isNaN(val)) {\\n valueAccessor()(val);\\n }\\n });\\n valueAccessor().subscribe(function(value) {\\n var str = JSON.stringify(value);\\n if ((str == \\\"0\\\") && ([\\\"-0\\\", \\\"-0.\\\"].indexOf(stringified()) >= 0))\\n return;\\n if ([\\\"null\\\", \\\"\\\"].indexOf(str) >= 0)\\n return;\\n stringified(str);\\n });\\n ko.applyBindingsToNode(\\n element,\\n {\\n value: stringified,\\n valueUpdate: allBindings.get('valueUpdate'),\\n },\\n context,\\n );\\n }\\n };\\n var json_data = {\\\"options_js\\\":WebIO.getval({\\\"name\\\":\\\"options_js\\\",\\\"scope\\\":\\\"2434294350016015517\\\",\\\"id\\\":\\\"ob_18\\\",\\\"type\\\":\\\"observable\\\"}),\\\"index\\\":WebIO.getval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"2434294350016015517\\\",\\\"id\\\":\\\"ob_17\\\",\\\"type\\\":\\\"observable\\\"})};\\n var self = this;\\n function AppViewModel() {\\n for (var key in json_data) {\\n var el = json_data[key];\\n this[key] = Array.isArray(el) ? ko.observableArray(el) : ko.observable(el);\\n }\\n [this[\\\"update\\\"]=function (val) {this.index(val)}]\\n \\n [this[\\\"options_js\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"options_js\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"options_js\\\",\\\"scope\\\":\\\"2434294350016015517\\\",\\\"id\\\":\\\"ob_18\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"options_js\\\"]=false}),self),this[\\\"index\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"index\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"2434294350016015517\\\",\\\"id\\\":\\\"ob_17\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"index\\\"]=false}),self)]\\n \\n }\\n self.model = new AppViewModel();\\n self.valueFromJulia = {};\\n for (var key in json_data) {\\n self.valueFromJulia[key] = false;\\n }\\n ko.applyBindings(self.model, self.dom);\\n}\\n);\\n (WebIO.importBlock({\\\"data\\\":[{\\\"name\\\":\\\"knockout\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"/assetserver/e9cedc98424c572a9ae686012f43006ab0106277-knockout.js\\\"},{\\\"name\\\":\\\"knockout_punches\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"/assetserver/cc1a3ba135dced540c908f2f598618cc86e701d5-knockout_punches.js\\\"}],\\\"type\\\":\\\"async_block\\\"})).then((imports) => handler.apply(this, imports));\\n}\\n\")])], Dict{Symbol,Any}(:className => \"interact-widget\")), Node{WebIO.DOM}(WebIO.DOM(:html, :div), Any[Node{WebIO.DOM}(WebIO.DOM(:html, :div), Any[Scope(Node{WebIO.DOM}(WebIO.DOM(:html, :div), Any[Node{WebIO.DOM}(WebIO.DOM(:html, :input), Any[], Dict{Symbol,Any}(:attributes => Dict{Any,Any}(:type => \"checkbox\",Symbol(\"data-bind\") => \"checked: value, valueUpdate: 'change', event: {change: function (){this.changes(this.changes()+1)}}\"),:id => \"##425\",:className => \"switch \",:style => Dict{Any,Any}())), Node{WebIO.DOM}(WebIO.DOM(:html, :label), Any[\"both\"], Dict{Symbol,Any}(:attributes => Dict(\"className\" => \"\",\"for\" => \"##425\")))], Dict{Symbol,Any}(:className => \"field interact-widget\")), Dict{String,Tuple{Observables.AbstractObservable,Union{Nothing, Bool}}}(\"changes\" => (Observable{Int64} with 1 listeners. Value:\n",
"0, nothing),\"value\" => (Observable{Bool} with 2 listeners. Value:\n",
"false, nothing)), Set(String[]), nothing, Asset[Asset(\"js\", \"knockout\", \"C:\\\\Users\\\\Steve\\\\.julia\\\\packages\\\\Knockout\\\\IP1uR\\\\src\\\\..\\\\assets\\\\knockout.js\"), Asset(\"js\", \"knockout_punches\", \"C:\\\\Users\\\\Steve\\\\.julia\\\\packages\\\\Knockout\\\\IP1uR\\\\src\\\\..\\\\assets\\\\knockout_punches.js\"), Asset(\"js\", nothing, \"C:\\\\Users\\\\Steve\\\\.julia\\\\packages\\\\InteractBase\\\\9mFwe\\\\src\\\\..\\\\assets\\\\all.js\"), Asset(\"css\", nothing, \"C:\\\\Users\\\\Steve\\\\.julia\\\\packages\\\\InteractBase\\\\9mFwe\\\\src\\\\..\\\\assets\\\\style.css\"), Asset(\"css\", nothing, \"C:\\\\Users\\\\Steve\\\\.julia\\\\packages\\\\Interact\\\\SbgIk\\\\src\\\\..\\\\assets\\\\bulma_confined.min.css\")], Dict{Any,Any}(\"changes\" => Any[WebIO.JSString(\"(function (val){return (val!=this.model[\\\"changes\\\"]()) ? (this.valueFromJulia[\\\"changes\\\"]=true, this.model[\\\"changes\\\"](val)) : undefined})\")],\"value\" => Any[WebIO.JSString(\"(function (val){return (val!=this.model[\\\"value\\\"]()) ? (this.valueFromJulia[\\\"value\\\"]=true, this.model[\\\"value\\\"](val)) : undefined})\")]), WebIO.ConnectionPool(Channel{Any}(sz_max:32,sz_curr:0), Set(AbstractConnection[]), Base.GenericCondition{Base.AlwaysLockedST}(Base.InvasiveLinkedList{Task}(Task (runnable) @0x000000002de01150, Task (runnable) @0x000000002de01150), Base.AlwaysLockedST(1))), WebIO.JSString[WebIO.JSString(\"function () {\\n var handler = (function (ko, koPunches) {\\n ko.punches.enableAll();\\n ko.bindingHandlers.numericValue = {\\n init: function(element, valueAccessor, allBindings, data, context) {\\n var stringified = ko.observable(ko.unwrap(valueAccessor()));\\n stringified.subscribe(function(value) {\\n var val = parseFloat(value);\\n if (!isNaN(val)) {\\n valueAccessor()(val);\\n }\\n });\\n valueAccessor().subscribe(function(value) {\\n var str = JSON.stringify(value);\\n if ((str == \\\"0\\\") && ([\\\"-0\\\", \\\"-0.\\\"].indexOf(stringified()) >= 0))\\n return;\\n if ([\\\"null\\\", \\\"\\\"].indexOf(str) >= 0)\\n return;\\n stringified(str);\\n });\\n ko.applyBindingsToNode(\\n element,\\n {\\n value: stringified,\\n valueUpdate: allBindings.get('valueUpdate'),\\n },\\n context,\\n );\\n }\\n };\\n var json_data = {\\\"changes\\\":WebIO.getval({\\\"name\\\":\\\"changes\\\",\\\"scope\\\":\\\"2749847935824986639\\\",\\\"id\\\":\\\"ob_20\\\",\\\"type\\\":\\\"observable\\\"}),\\\"value\\\":WebIO.getval({\\\"name\\\":\\\"value\\\",\\\"scope\\\":\\\"2749847935824986639\\\",\\\"id\\\":\\\"ob_19\\\",\\\"type\\\":\\\"observable\\\"})};\\n var self = this;\\n function AppViewModel() {\\n for (var key in json_data) {\\n var el = json_data[key];\\n this[key] = Array.isArray(el) ? ko.observableArray(el) : ko.observable(el);\\n }\\n \\n \\n [this[\\\"changes\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"changes\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"changes\\\",\\\"scope\\\":\\\"2749847935824986639\\\",\\\"id\\\":\\\"ob_20\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"changes\\\"]=false}),self),this[\\\"value\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"value\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"value\\\",\\\"scope\\\":\\\"2749847935824986639\\\",\\\"id\\\":\\\"ob_19\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"value\\\"]=false}),self)]\\n \\n }\\n self.model = new AppViewModel();\\n self.valueFromJulia = {};\\n for (var key in json_data) {\\n self.valueFromJulia[key] = false;\\n }\\n ko.applyBindings(self.model, self.dom);\\n}\\n);\\n (WebIO.importBlock({\\\"data\\\":[{\\\"name\\\":\\\"knockout\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"/assetserver/e9cedc98424c572a9ae686012f43006ab0106277-knockout.js\\\"},{\\\"name\\\":\\\"knockout_punches\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"/assetserver/cc1a3ba135dced540c908f2f598618cc86e701d5-knockout_punches.js\\\"}],\\\"type\\\":\\\"async_block\\\"})).then((imports) => handler.apply(this, imports));\\n}\\n\")])], Dict{Symbol,Any}(:className => \"field interact-widget\"))], Dict{Symbol,Any}(:className => \"interact-flex-row interact-widget\")), Observable{Any} with 0 listeners. Value:\n",
"Node{WebIO.DOM}(WebIO.DOM(:html, :div), Any[Plot{Plots.GRBackend() n=1}], Dict{Symbol,Any}(:className => \"interact-flex-row interact-widget\"))], Dict{Symbol,Any}())"
]
},
"execution_count": 4,
"metadata": {
"application/vnd.webio.node+json": {
"kernelId": "de74667b-84f2-4ef5-ab5b-896e4968e321"
}
},
"output_type": "execute_result"
}
],
"source": [
"@manipulate for ϕ = 0:π/16:4π, f = [sin, cos], both = false\n",
" if both\n",
" plot([θ -> sin(θ + ϕ), θ -> cos(θ + ϕ)], 0, 8)\n",
" else\n",
" plot(θ -> f(θ + ϕ), 0, 8)\n",
" end\n",
"end"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": []
}
],
"metadata": {
"@webio": {
"lastCommId": "36fbf2cd605143b3aeb6ba0350068592",
"lastKernelId": "de74667b-84f2-4ef5-ab5b-896e4968e321"
},
"kernelspec": {
"display_name": "Julia 1.3.1",
"language": "julia",
"name": "julia-1.3"
},
"language_info": {
"file_extension": ".jl",
"mimetype": "application/julia",
"name": "julia",
"version": "1.3.1"
}
},
"nbformat": 4,
"nbformat_minor": 4
}
Display the source blob
Display the rendered blob
Raw
test.ipynb
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment