2d:null 2e:["$","title",null,{"children":"RNN Update in 2D V2 | Kris Sankaran | Observable"}] 33:Tec1,chart = { const svg = d3.select(DOM.svg(width, height)); var x = math.zeros(2); draw_axes(svg, scales); svg.selectAll("g") .data(["links", "points", "weights_select", "weights", "weights_text", "x_input"], (d) => d).enter() .append("g") .attr("id", (d) => d); var u = math.zeros(2, 2), w = math.zeros(2, 2), all_data = generate_data(u, w, x); // draw the links svg.select("#links") .selectAll("path") .data(all_data["links"]).enter() .append("path") .attrs({ "d": (d) => "M" + scales.h0(d["pre"]._data[0]) + "," + scales.h1(d["pre"]._data[1]) + "L" + scales.h0(d["post"]._data[0]) + "," + scales.h1(d["post"]._data[1]), "stroke": "#a4a4a4", "stroke-width": 0.8 }); svg.select("#points") .selectAll("circle") .data(all_data["points"]).enter() .append("circle") .attrs({ "cx": (d) => scales.h0(d.h._data[0]), "cy": (d) => scales.h1(d.h._data[1]), "r": 3, "fill-opacity": .6, "fill": (d) => scales.type(d.type) }); svg.select("#x_input") .selectAll("circle") .data([x]).enter() .append("circle") .attrs({ "cx": (d) => scales.x0(d._data[0]), "cy": (d) => scales.x1(d._data[1]), "r": 10, "fill": "black" }) .call(d3.drag().on("drag", update_x)) svg.select("#weights_select") .selectAll("circle") .data(rows(w, u)).enter() .append("circle") .attrs({ "cx": (d) => scales.wselect_x(d.value._data[0][0]) + scales.wtype(d.weight), "cy": (d) => scales.wselect_y(d.value._data[0][1]), "r": 7, "fill": (d) => scales.weight_fill(d.weight) }) .call(d3.drag().on("drag", (d) => update_weights(d))); svg.select("#weights") .selectAll("rect") .data(entries(w, u)).enter() .append("rect") .attrs({ "x": (d) => scales.wtype(d.weight) + scales.col_offset(d.col), "y": (d) => scales.row_offset(d.row), "width": scales.col_offset(1) - scales.col_offset(0), "height": scales.row_offset(1) - scales.row_offset(0), "fill": (d) => scales.weight_fill(d.weight), "fill-opacity": (d) => .5 * scales.weight_opacity(Math.abs(d.value)), }); svg.select("#weights_text") .selectAll("text") .data(entries(w, u)).enter() .append("text") .attrs({ "x": (d) => scales.wtype(d.weight) + scales.col_offset(d.col), "y": (d) => scales.row_offset(d.row), "fill": (d) => scales.weight_fill(d.weight), "fill-opacity": (d) => scales.weight_fill(Math.abs(d.value)), "font-size": 15, "alignment-baseline": "hanging" }) .text((d) => Number(d.value).toFixed(3)) function update_x() { if (d3.event.x > width || d3.event.x < scales.x0.range()[0] + 10) { return; } if (d3.event.y > scales.x1.range()[0] - 10 || d3.event.y < 0) { return; } x = math.matrix( [scales.x0.invert(d3.event.x), scales.x1.invert(d3.event.y)]); all_data = generate_data(u, w, x); update_figure(svg, all_data["points"], all_data["links"], x, w, u) } function update_weights(d) { var cur = [scales.wselect_x.invert(d3.event.x - scales.wtype(d.weight)), scales.wselect_y.invert(d3.event.y)]; if (cur[0] < scales.wselect_x.domain()[0] || cur[0] > scales.wselect_x.domain()[1]) { return; } if (cur[1] < scales.wselect_y.domain()[0] || cur[1] > scales.wselect_y.domain()[1]) { return; } if (d.weight == "w") { w.subset(math.index(d.row, [0, 1]), cur); } else { u.subset(math.index(d.row, [0, 1]), cur); } all_data = generate_data(u, w, x); update_figure(svg, all_data["points"], all_data["links"], x, w, u) } return svg.node() }34:T4c8,function draw_axes(svg, scales) { svg.append("g") .attr("transform", "translate(" + scales.h0(0) + ",0)") .call(d3.axisLeft().scale(scales.h1)) svg.append("g") .attr("transform", "translate(0," + scales.h1(0) + ")") .call(d3.axisBottom().scale(scales.h0)) svg.append("g") .attr("transform", "translate(" + scales.x0(0) + ",0)") .call(d3.axisLeft().scale(scales.x1).ticks(4)) svg.append("g") .attr("transform", "translate(0," + scales.x1(0) + ")") .call(d3.axisBottom().scale(scales.x0).ticks(4)) svg.append("g") .attr("transform", "translate(" + (scales.wtype("u") + scales.wselect_x(0)) + ",0)") .call(d3.axisLeft().scale(scales.wselect_y).ticks(4)) svg.append("g") .attr("transform", "translate(" + scales.wtype("u") + "," + scales.wselect_y(0) + ")") .call(d3.axisBottom().scale(scales.wselect_x).ticks(4)) svg.append("g") .attr("transform", "translate(" + (scales.wtype("w") + scales.wselect_x(0)) + ",0)") .call(d3.axisLeft().scale(scales.wselect_y).ticks(4)) svg.append("g") .attr("transform", "translate(" + scales.wtype("w") + "," + scales.wselect_y(0) + ")") .call(d3.axisBottom().scale(scales.wselect_x).ticks(4)) }35:T4fb,function update_figure(svg, points, links, x, w, u) { svg.select("#links") .selectAll("path") .data(links) .attrs({ "d": (d) => "M" + scales.h0(d["pre"]._data[0]) + "," + scales.h1(d["pre"]._data[1]) + "L" + scales.h0(d["post"]._data[0]) + "," + scales.h1(d["post"]._data[1]), }); svg.select("#points") .selectAll("circle") .data(points) .attrs({ "cx": (d) => scales.h0(d.h._data[0]), "cy": (d) => scales.h1(d.h._data[1]), }); svg.select("#x_input") .select("circle") .data([x]) .attrs({ "cx": (d) => scales.x0(d._data[0]), "cy": (d) => scales.x1(d._data[1]), }) svg.select("#weights_select") .selectAll("circle") .data(rows(w, u)) .attrs({ "cx": (d) => scales.wselect_x(d.value._data[0][0]) + scales.wtype(d.weight), "cy": (d) => scales.wselect_y(d.value._data[0][1]), }); svg.select("#weights") .selectAll("rect") .data(entries(w, u)) .attrs({ "fill-opacity": (d) => .5 * scales.weight_opacity(Math.abs(d.value)), }); svg.select("#weights_text") .selectAll("text") .data(entries(w, u)) .attrs({ "fill-opacity": (d) => scales.weight_opacity(Math.abs(d.value)) }) .text((d) => Number(d.value).toFixed(3)) }36:[] 31:{"id":"1ee872592aa5b7b1","slug":"rnn-update-in-2d-v2","title":"RNN Update in 2D V2","thumbnail":"35cdbe0258044faf27aa30fb884dc5664ded0c6c34bcd855f361eaf03f8a7ad5","access_level":"public","create_time":"$D2019-07-18T23:18:33.383Z","update_time":"$D2019-07-21T19:51:30.688Z","view_time":null,"first_public_time":"$D2019-07-19T00:03:20.472Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"58c635fe0c6a930c","login":"krisrs1128","name":"Kris Sankaran","avatar_url":"https://avatars-next.observableusercontent.com/384a4d4ac6e6ad0ce3c5b1bc69c03d2c693a0b2859424bd8395dfef0e462967e","tier":"starter_2024"},"version":675,"publish_version":675,"role":null,"authored":false,"authors":[{"type":"individual","id":"544fdf34bf62b87c","login":"krisrs1128","name":"Kris Sankaran","avatar_url":"https://avatars-next.observableusercontent.com/384a4d4ac6e6ad0ce3c5b1bc69c03d2c693a0b2859424bd8395dfef0e462967e","tier":null}],"members":[{"type":"individual","id":"544fdf34bf62b87c","login":"krisrs1128","name":"Kris Sankaran","avatar_url":"https://avatars-next.observableusercontent.com/384a4d4ac6e6ad0ce3c5b1bc69c03d2c693a0b2859424bd8395dfef0e462967e","tier":null,"role":"editor"}],"comments":[{"id":"768e12ff1467a76c","reply_to_id":null,"content":"As mentioned in https://observablehq.com/@krisrs1128/rnn-update-with-gates, some of these need to be pinned to restore compatibility.","create_time":"$D2020-12-29T21:55:59.082Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"RNN Update in 2D V2","cells":[{"id":0,"value":"md`# RNN Update in 2D V2`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"function generate_data(w, u, x) {\n var f = rnn_gen(u, w, math.zeros(2)),\n seq = d3.range(-1, 1, .195),\n h = {\"pre\": [], \"post\": []};\n\n for (var i = 0; i < seq.length; i++) {\n for (var j = 0; j < seq.length; j++) {\n var cur_h0 = math.matrix([seq[i], seq[j]]);\n h[\"pre\"].push(cur_h0);\n h[\"post\"].push(f(x, cur_h0))\n }\n }\n\n var links = [],\n points = [];\n for (var i = 0; i < h[\"pre\"].length; i++) {\n links.push({\"pre\": h[\"pre\"][i], \"post\": h[\"post\"][i]});\n points.push({\"h\": h[\"pre\"][i], \"type\": \"pre\"});\n points.push({\"h\": h[\"post\"][i], \"type\": \"post\"});\n }\n return {\"links\": links, \"points\": points}\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":625,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"scales = generate_scales();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"function rows(w, u) {\n var weight_rows = [];\n for (var i = 0; i < w._size[0]; i++) {\n weight_rows.push({\"value\": math.row(w, i), \"weight\": \"w\", \"row\": i}) \n weight_rows.push({\"value\": math.row(u, i), \"weight\": \"u\", \"row\": i})\n }\n return weight_rows;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":541,"value":"function entries(w, u) {\n var weight_entries = [];\n for (var i = 0; i < w._size[0]; i++) {\n for (var j = 0; j < w._size[1]; j++) {\n weight_entries.push({\"value\": w._data[i][j], \"row\": i, \"col\": j, \"weight\": \"w\"});\n weight_entries.push({\"value\": u._data[i][j], \"row\": i, \"col\": j, \"weight\": \"u\"});\n }\n }\n return weight_entries\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"function rnn_gen(w, u, b) {\n function rnn(x, h) {\n var mixture = math.add(math.multiply(w, x), math.multiply(u, h), b);\n return (mixture).map(Math.tanh)\n }\n return rnn\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"w = math.zeros(2, 2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"function generate_scales() {\n return {\n \"h0\": d3.scaleLinear().domain([-1, 1]).range([0, .95 * 3 * width / 4]),\n \"h1\": d3.scaleLinear().domain([-1, 1]).range([height, 0]),\n \"x0\": d3.scaleLinear().domain([-1.2, 1.2]).range([3 * width / 4, width]),\n \"x1\": d3.scaleLinear().domain([-1.2, 1.2]).range([height / 2, 0]),\n \"type\": d3.scaleOrdinal().domain([\"pre\", \"post\"]).range([\"#ff9966\t\", \"#9955bb\"]),\n \"wselect_x\": d3.scaleLinear().domain([-3, 3]).range([0, width / 8]),\n \"wselect_y\": d3.scaleLinear().domain([-3, 3]).range([.95 * 3 * height / 4, 1.05 * height / 2]),\n \"weight_opacity\": d3.scaleLinear().domain([0, 3]).range([0.4, 1]),\n \"row_offset\": d3.scaleOrdinal().domain([0, 1]).range([3 * height / 4, 7 * height / 8]),\n \"col_offset\": d3.scaleOrdinal().domain([0, 1]).range([0, width / 16]),\n \"weight_fill\": d3.scaleOrdinal().domain([\"w\", \"u\"]).range([\"#48994f\", \"#4f4899\"]),\n \"wtype\": d3.scaleOrdinal().domain([\"w\", \"u\"]).range([3 * width / 4, 7 * width / 8])\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3-selection\", \"d3-selection-multi\", \"d3-scale\", \"d3-array\", \"d3-drag\", \"d3-dispatch\", \"d3-axis\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"math = require(\"https://cdnjs.cloudflare.com/ajax/libs/mathjs/6.0.3/math.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"