2d:null 2e:["$","title",null,{"children":"RNN Update with Gates | Kris Sankaran | Observable"}] 33:Tf8b,chart3 = { const svg = d3.select(DOM.svg(width, f3.height)); var scales = f3.generate_scales(), x = math.zeros(2); f3.draw_axes(svg, scales); svg.selectAll("g") .data(["links", "points", "weights_select", "gates_select", "x_input"], (d) => d).enter() .append("g") .attr("id", (d) => d); var w = math.zeros(2, 2), u = math.matrix([[1, 1], [-1, 1]]), z = math.matrix([.5, .5]), r = math.matrix([.5, .5]), all_data = f3.generate_data(u, w, x, z, r); // 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.3 }); 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(f3.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("#gates_select") .selectAll("circle") .data(f3.gates(z, r)).enter() .append("circle") .attrs({ "cx": (d) => scales.zx(d.value._data[0]), "cy": (d) => scales.zy(d.value._data[1]), "r": 7, "fill": (d) => scales.ztype(d.weight) }) .call(d3.drag().on("drag", (d) => update_gates(d))); function update_x() { if (d3.event.x > width || d3.event.x < scales.x0.range()[0] + 10 || 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 = f3.generate_data(u, w, x, z, r); f3.update_figure(svg, all_data["points"], all_data["links"], x, w, u, z, r) } 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] || 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 = f3.generate_data(u, w, x, z, r); f3.update_figure(svg, all_data["points"], all_data["links"], x, w, u, z, r) } function update_gates(d) { var cur = [scales.zx.invert(d3.event.x), scales.zy.invert(d3.event.y)]; if (cur[0] < scales.zx.domain()[0] || cur[0] > scales.zx.domain()[1] || cur[1] < scales.zy.domain()[0] || cur[1] > scales.zy.domain()[1]) { return; } if (d.weight == "z") { z._data = cur } else { r._data = cur } all_data = f3.generate_data(u, w, x, z, r); f3.update_figure(svg, all_data["points"], all_data["links"], x, w, u, z, r) } return svg.node() }34:T1643,f3 = { var height = 400, scales = generate_scales(); function generate_data(w, u, x, z, r) { var f = rnn_gen(u, w, math.zeros(2), z, r), seq = d3.range(-1, 1, .195), h = {"pre": [], "post": []}; for (var i = 0; i < seq.length; i++) { for (var j = 0; j < seq.length; j++) { var cur_h0 = math.matrix([seq[i], seq[j]]); h["pre"].push(cur_h0); h["post"].push(f(x, cur_h0)) } } var links = [], points = []; for (var i = 0; i < h["pre"].length; i++) { links.push({"pre": h["pre"][i], "post": h["post"][i]}); points.push({"h": h["pre"][i], "type": "pre"}); points.push({"h": h["post"][i], "type": "post"}); } return {"links": links, "points": points} } function generate_scales() { return { "h0": d3.scaleLinear().domain([-1, 1]).range([0, .95 * 3 * width / 4]), "h1": d3.scaleLinear().domain([-1, 1]).range([height, 0]), "x0": d3.scaleLinear().domain([-1.2, 1.2]).range([3 * width / 4, width]), "x1": d3.scaleLinear().domain([-1.2, 1.2]).range([height / 2, 0]), "zx": d3.scaleLinear().domain([0, 1]).range([3 * width / 4, width]), "zy": d3.scaleLinear().domain([0, 1]).range([.95 * height, 3 * height / 4]), "type": d3.scaleOrdinal().domain(["pre", "post"]).range(["#ff9966 ", "#9955bb"]), "wselect_x": d3.scaleLinear().domain([-3, 3]).range([0, width / 8]), "wselect_y": d3.scaleLinear().domain([-3, 3]).range([.95 * 3 * height / 4, 1.05 * height / 2]), "weight_opacity": d3.scaleLinear().domain([0, 3]).range([0.4, 1]), "row_offset": d3.scaleOrdinal().domain([0, 1]).range([3 * height / 4, 7 * height / 8]), "col_offset": d3.scaleOrdinal().domain([0, 1]).range([0, width / 16]), "weight_fill": d3.scaleOrdinal().domain(["w", "u"]).range(["#48994f", "#4f4899"]), "wtype": d3.scaleOrdinal().domain(["w", "u"]).range([3 * width / 4, 7 * width / 8]), "ztype": d3.scaleOrdinal().domain(["z", "r"]).range(["#ffba00", "#ffa6c9"]) }; } function rnn_gen(w, u, b, z, r) { function rnn(x, h) { var h_tilde = (math.add(math.multiply(w, x), math.multiply(u, math.dotMultiply(r, h)))).map(Math.tanh) return math.add(math.dotMultiply(math.subtract(1, z), h), math.dotMultiply(z, h_tilde)) } return rnn } function rows(w, u) { var weight_rows = []; for (var i = 0; i < w._size[0]; i++) { weight_rows.push({"value": math.row(w, i), "weight": "w", "row": i}) weight_rows.push({"value": math.row(u, i), "weight": "u", "row": i}) } return weight_rows; } function gates(z, r) { var result = []; result.push({"value": z, "weight": "z"}) result.push({"value": r, "weight": "r"}) return result } function update_figure(svg, points, links, x, w, u, z, r) { 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("#gates_select") .selectAll("circle") .data(gates(z, r)) .attrs({ "cx": (d) => scales.zx(d.value._data[0]), "cy": (d) => scales.zy(d.value._data[1]), }); } 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)) svg.append("g") .attr("transform", "translate(" + scales.zx(0) + ",0)") .call(d3.axisLeft().scale(scales.zy).ticks(4)) svg.append("g") .attr("transform", "translate(0," + scales.zy(0) + ")") .call(d3.axisBottom().scale(scales.zx).ticks(4)) } return { "height": height, "generate_scales": generate_scales, "draw_axes": draw_axes, "generate_data": generate_data, "rows": rows, "gates": gates, "update_figure": update_figure } }35:[] 31:{"id":"4b3e9aaf4ead168e","slug":"rnn-update-with-gates","title":"RNN Update with Gates","thumbnail":"925714983d191b3089ec5b57569e2a117af5cd68c0978ec38d76eba0bab6e339","access_level":"public","create_time":"$D2019-07-21T20:42:09.195Z","update_time":"$D2019-07-21T21:52:08.209Z","view_time":null,"first_public_time":"$D2019-07-21T21:52:10.464Z","fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"58c635fe0c6a930c","login":"krisrs1128","name":"Kris Sankaran","avatar_url":"https://avatars-next.observableusercontent.com/384a4d4ac6e6ad0ce3c5b1bc69c03d2c693a0b2859424bd8395dfef0e462967e","tier":"starter_2024"},"version":120,"publish_version":120,"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":"0df71d891bf5b667","reply_to_id":null,"content":"You'll want to pin d3-selection at version 1.4.2 to restore compatibility with d3-selection-multi\n\n... and d3-drag @ 1.2.5","create_time":"$D2020-12-29T21:52:17.118Z","update_time":"$D2020-12-29T21:54:07.282Z","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 with Gates","cells":[{"id":118,"value":"md`# RNN Update with Gates`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"math = require(\"https://cdnjs.cloudflare.com/ajax/libs/mathjs/6.0.3/math.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3-selection\", \"d3-selection-multi\", \"d3-scale\", \"d3-array\", \"d3-fetch\", \"d3-axis\", \"d3-drag\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"