2b:null 2c:["$","title",null,{"children":"The Universal Approximation Theorem | Nick Strayer | Observable"}] 31:[] 2f:{"id":"2414cff178c6bcf2","slug":"the-universal-approximation-theorem","title":"The Universal Approximation Theorem","thumbnail":"dd2b42497f5868482710429c1982f66519d9e5eed842c60dc73d802f8a485247","access_level":"public","create_time":"$D2018-02-14T15:57:07.495Z","update_time":"$D2019-02-07T19:05:31.676Z","view_time":null,"first_public_time":"$D2018-02-14T16:30:24.347Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"c7ceaaf194433370","login":"nstrayer","name":"Nick Strayer","avatar_url":"https://avatars-next.observableusercontent.com/56ce9e43c9ae8d967575f2641fd299251ce5e022874e0c8fe8d04becea060719","tier":"starter_2024"},"version":156,"publish_version":156,"role":null,"authored":false,"authors":[{"type":"individual","id":"e253fe2c017ea3f1","login":"nstrayer","name":"Nick Strayer","avatar_url":"https://avatars-next.observableusercontent.com/56ce9e43c9ae8d967575f2641fd299251ce5e022874e0c8fe8d04becea060719","tier":null}],"members":[{"type":"individual","id":"e253fe2c017ea3f1","login":"nstrayer","name":"Nick Strayer","avatar_url":"https://avatars-next.observableusercontent.com/56ce9e43c9ae8d967575f2641fd299251ce5e022874e0c8fe8d04becea060719","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"The Universal Approximation Theorem","cells":[{"id":0,"value":"md`# The Universal Approximation Theorem\n\nBy stacking ever more neurons into this setup we can start to construct any function we desire.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"{\n const data = x.map((d,i) => ({x:d, y: output[i]}))\n const x_scale = d3.scaleLinear()\n .domain(d3.extent(x))\n .range([margin.left, width - margin.right]),\n y_scale = d3.scaleLinear()\n \t\t .domain([-2,2])\n \t\t .range([height - margin.bottom, margin.top]),\n line = d3.line()\n \t\t .x(d => x_scale(d.x))\n .y(d => y_scale(d.y));\n \n const svg = d3.select(DOM.svg(width, height));\n \n svg.append(\"path\")\n .datum(data)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"orangered\")\n .attr(\"stroke-width\", 2)\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"d\", line);\n \n // Add the x Axis\n svg.append(\"g\")\n .attr(\"transform\", \"translate(0,\" + (height - margin.bottom)+ \")\")\n .call(d3.axisBottom(x_scale));\n\n svg.append(\"g\")\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y_scale));\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":103,"value":"viewof neuron1_weight = slider({message: 'Contribution of neuron 1', min:-1, max:1, start:0.2, step: 0.01})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":108,"value":"viewof neuron2_weight = slider({message: 'Contribution of neuron 1', min:-1, max:1, start:-0.2, step:0.01})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":51,"value":"plot_neuron(neuron1, DOM)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":140,"value":"viewof neuron1_wb = {\n const form = html``;\n const intermediate = [form.weight, form.bias].map(i => i.valueAsNumber);\n form.value = {weight: intermediate[0], bias: intermediate[1]};\n form.weight.oninput = () => form.value.weight = form.weight.valueAsNumber;\n form.bias.oninput = () => form.value.bias = form.bias.valueAsNumber;\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":61,"value":"plot_neuron(neuron2, DOM)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":132,"value":"viewof neuron2_wb = {\n const form = html``;\n const intermediate = [form.weight, form.bias].map(i => i.valueAsNumber);\n form.value = {weight: intermediate[0], bias: intermediate[1]};\n form.weight.oninput = () => form.value.weight = form.weight.valueAsNumber;\n form.bias.oninput = () => form.value.bias = form.bias.valueAsNumber;\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":44,"value":"neuron = (weight, bias) => x.map( d => sigmoid((d + bias)*weight))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":91,"value":"output = neuron1.map((d,i) => (d*neuron1_weight) + (neuron2[i]*neuron2_weight))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":46,"value":"neuron1 = neuron(neuron1_wb.weight,neuron1_wb.bias)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":48,"value":"neuron2 = neuron(neuron2_wb.weight,neuron2_wb.bias)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"height = 200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"x = d3.range(0, 10, 0.01)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"y = x.map(d=> rng())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":63,"value":"plot_neuron = function(neuron_vals, DOM){\n const data = x.map((d,i) => ({x:d, y: neuron_vals[i]}))\n const x_scale = d3.scaleLinear()\n .domain(d3.extent(x))\n .range([margin.left, width/2 - margin.right]),\n y_scale = d3.scaleLinear()\n \t\t .domain([0,1])\n \t\t .range([height - margin.bottom, margin.top]),\n line = d3.line()\n \t\t .x(d => x_scale(d.x))\n .y(d => y_scale(d.y));\n \n const svg = d3.select(DOM.svg(width/2, height));\n \n svg.append(\"path\")\n .datum(data)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"orangered\")\n .attr(\"stroke-width\", 2)\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"d\", line);\n \n // Add the x Axis\n svg.append(\"g\")\n .attr(\"transform\", \"translate(0,\" + (height - margin.bottom)+ \")\")\n .call(d3.axisBottom(x_scale));\n svg.append(\"g\")\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y_scale));\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"rng = d3.randomUniform()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":56,"value":"sigmoid = (x) => 1/(1 + Math.exp(-x))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"function slider({\n message = 'Set your value', \n min = 0, max = 1, start = 0.5, step = 0.1,\n precision = 3, int = false,\n}){\n \n min = min/step;\n max = max/step;\n start = start/step;\n \n const div = html`\n\t${message}\n \n ${start*step}\n `;\n const range = div.querySelector(\"[type=range]\");\n const value_disp = div.querySelector('span');\n div.value = value_disp.innerHTML = start*step;\n\n \n range.addEventListener(\"input\", () => {\n const newValue = range.valueAsNumber*step; \n div.value = newValue;\n value_disp.innerHTML = int ? Math.round(newValue) : newValue.toPrecision(precision); \n });\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"