31:[] 2f:{"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"},{"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"},{"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"},{"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"},{"id":51,"value":"plot_neuron(neuron1, DOM)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":61,"value":"plot_neuron(neuron2, DOM)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":44,"value":"neuron = (weight, bias) => x.map( d => sigmoid((d + bias)*weight))","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"output = neuron1.map((d,i) => (d*neuron1_weight) + (neuron2[i]*neuron2_weight))","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"neuron1 = neuron(neuron1_wb.weight,neuron1_wb.bias)","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"neuron2 = neuron(neuron2_wb.weight,neuron2_wb.bias)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"height = 200","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"x = d3.range(0, 10, 0.01)","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"y = x.map(d=> rng())","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":14,"value":"rng = d3.randomUniform()","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"sigmoid = (x) => 1/(1 + Math.exp(-x))","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs"},{"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"}],"files":"$W31","stdlib":"1","titling":"auto"}