2d:null 2e:["$","title",null,{"children":"Error Analysis | Kris Sankaran | Observable"}] 33:Td61,error_analysis = { const svg = d3.select(DOM.svg(width, height)); var scales = generate_scales(); errors[0] = add_jitter(errors[0]) for (var i = 1; i < Object.values(errors).length; i++) { for (var j = 0; j < errors[i].length; j++) { errors[i][j].jitter = errors[0][j].jitter } } draw_axes(svg, scales); svg.selectAll("g") .data(["errors", "series", "loss"], (d) => d).enter() .append("g") .attr("id", (d) => d); svg.select("#loss").append("g").attr("id", "curves"); svg.select("#loss").append("g").attr("id", "epoch_sel"); var epoch = 0, cur_series = []; svg.select("#errors") .append("rect") .attrs({ "x": scales.y.range()[0], "y": scales.y_hat.range()[1], "width": scales.y.range()[1], "height": scales.y_hat.range()[0] - scales.y_hat.range()[1], "fill-opacity": 0 }) .on("mousemove", function() { new_curves(svg, scales, this) }); // Draw the predictions vs. truth svg.select("#errors") .selectAll("circle") .data(errors[epoch]).enter() .append("circle") .attrs({ "cx": (d) => scales.y(d.y) + scales.jitter(d.jitter) + scales.phase_offset(d.phase), "cy": (d) => scales.y_hat(d.y_hat), "fill": (d) => scales.phase(d.phase), "fill-opacity": 0.9, "r": 2 }) var line = d3.line() .x((d) => scales.epoch(d.epoch)) .y((d) => scales.loss(d.loss)); // Draw all the loss curves svg.select("#curves") .append("rect") .attrs({ "x": 1.1 * width / 2, "y": scales.loss.range()[1], "width": scales.epoch.range()[1], "height": scales.loss.range()[0] - scales.loss.range()[1], "fill": "white" }) .on("mousemove", function() { new_epoch(svg, scales, this) }); svg.select("#curves") .selectAll("path") .data(Object.values(epochs)).enter() .append("path") .attrs({ "d": line, "fill": "none", "stroke": (_, i) => i == 0? "#a0a8e4": "#a8e4a0", "stroke-width": 2 }); svg.select("#epoch_sel") .append("line") .attrs({ "x1": 1.1 * width / 2, "x2": 1.1 * width / 2, "y1": scales.loss.range()[0], "y2": scales.loss.range()[1], "stroke": "#959595", "stroke-width": 1, "stroke-opacity": 0.9, "fill": "none" }); svg.select("#series") .append("rect") .attrs({ "x": 1.1 * width / 2, "y": scales.v(1), "width": width / 2, "height": scales.v(0) - scales.v(1), "fill": "#e3e3e3" }) function new_epoch(svg, scales, d) { var div = d3.select(d); d3.select(window) .on("mousemove", mousemove); function mousemove() { var pos = d3.mouse(div.node()); if (pos[0] < 0 || pos[0] > scales.epoch.range()[1] || pos[1] > height || pos[1] < scales.loss.range()[1]) { return; } epoch = Math.round(scales.epoch.invert(pos[0])); redraw_points(svg, errors[epoch], scales, epoch) } } function new_curves(svg, scales, d) { var div = d3.select(d); d3.select(window) .on("mousemove", mousemove); function mousemove() { var pos = d3.mouse(div.node()); if (pos[0] < 0 || pos[0] > width / 2 || pos[1] > height || pos[1] < 0) { return; } cur_series = filter_series(errors[epoch], pos, scales); redraw_series(svg, cur_series, scales); } } return svg.node() }34:T4dd,function redraw_series(svg, cur_series, scales) { var ix = [], focus = []; for (var i = 0; i < curves.length; i++) { for (var j = 0; j < cur_series.length; j++) { if (curves[i].ix == cur_series[j].ix && curves[i].phase == cur_series[j].phase) { focus.push(curves[i].data) console.log(curves[i]) ix.push(curves[i].phase + "_" + curves[i].ix) // continue } } } var focus_curves = d3.line() .x((d) => scales.i(d.i)) .y((d) => scales.v(d.v)) .curve(d3.curveBasis); var paths = svg.select("#series") .selectAll("path") .data(focus, (d, i) => ix[i]); paths.exit().remove() paths.enter() .append("path") .attrs({ "d": focus_curves, "stroke-width": 1.5, "fill": "none", "stroke": "#2c2c2c", "stroke-opacity": 1 }); if (ix.length > 0) { svg.select("#errors") .selectAll("circle") .transition() .duration(10) .attrs({ "fill-opacity": (d) => ix.indexOf(d.phase + "_" + d.ix) == -1 ? .1 : .9 }); } else { svg.select("#errors") .selectAll("circle") .transition() .duration(500) .attrs({ "fill-opacity": .9 }); } } 35:[] 31:{"id":"871a091316f93bf1","slug":"error-analysis","title":"Error Analysis","thumbnail":"c7afd2a335f9825b02bb5b274c22e238d560c93ae9bf1015f158cc2a4df5c552","access_level":"public","create_time":"$D2019-07-26T15:30:53.295Z","update_time":"$D2019-08-23T19:19:17.727Z","view_time":null,"first_public_time":"$D2019-08-23T19:19:24.094Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"58c635fe0c6a930c","login":"krisrs1128","name":"Kris Sankaran","avatar_url":"https://avatars-next.observableusercontent.com/384a4d4ac6e6ad0ce3c5b1bc69c03d2c693a0b2859424bd8395dfef0e462967e","tier":"starter_2024"},"version":353,"publish_version":353,"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":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Error Analysis","cells":[{"id":0,"value":"md`# Error Analysis`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"errors = d3.json(\"https://gist.githubusercontent.com/krisrs1128/d94616ad1fa977f94a2df4f3c010ae65/raw/5fa0f632290cc27e9ad1c51c5c686268f25626bb/errors.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"epochs = d3.json(\"https://gist.githubusercontent.com/krisrs1128/67c45bf9109849e1d233803906767653/raw/0618c52a5a1087a3b47e25d40dbe3a144c305eba/gistfile1.txt\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"curves = d3.json(\"https://gist.githubusercontent.com/krisrs1128/3c816018f76606090b42d1f15036791e/raw/8b6f6cd64e96840efd775af3a2cec322afbb2fe8/curves.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"function filter_series(errors, pos, scales) {\n var result = [];\n for (var i = 0; i < errors.length; i++) {\n var pos_i = scales.y(errors[i].y) + scales.jitter(errors[i].jitter) + scales.phase_offset(errors[i].phase);\n\n var dist = Math.sqrt((pos_i - pos[0]) ** 2 + (scales.y_hat(errors[i].y_hat) - pos[1]) ** 2);\n if (dist < 5) {\n result.push({\"ix\": errors[i].ix, \"phase\": errors[i].phase})\n }\n }\n\n return result;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"function draw_axes(svg, scales) {\n svg.append(\"g\")\n .attr(\"transform\", \"translate(\" + scales.epoch(0) + \",0)\")\n .call(d3.axisLeft().scale(scales.loss))\n\n svg.append(\"g\")\n .attr(\"transform\", \"translate(0,\" + scales.loss(0) + \")\")\n .call(d3.axisBottom().scale(scales.epoch))\n\n svg.append(\"g\")\n .attr(\"transform\", \"translate(\" + scales.y(0) + \",0)\")\n .call(d3.axisLeft().scale(scales.y_hat).ticks(4))\n\n svg.append(\"g\")\n .attr(\"transform\", \"translate(0,\" + scales.y_hat(0) + \")\")\n .call(d3.axisBottom().scale(scales.y).ticks(4))\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"function redraw_points(svg, err, scales, epoch) {\n svg.select(\"#errors\")\n .selectAll(\"circle\")\n .data(err)\n .transition()\n .duration(700)\n .attrs({\n \"cx\": (d) => scales.y(d.y) + scales.jitter(d.jitter) + scales.phase_offset(d.phase),\n \"cy\": (d) => scales.y_hat(d.y_hat),\n })\n \n svg.select(\"#epoch_sel\")\n .select(\"line\")\n .attrs({\n \"x1\": (d) => scales.epoch(epoch),\n \"x2\": (d) => scales.epoch(epoch)\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"function add_jitter(x) {\n for (var i = 0; i < x.length; i++) {\n x[i][\"jitter\"] = Math.random(); \n }\n return x;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"function generate_scales() {\n var scales = {\n \"y\": d3.scaleLinear().domain([0, 6]).range([.05 * width, .8 * width / 2]),\n \"y_hat\": d3.scaleLinear().domain([-.5, 7]).range([.95 * height, .1 * height]),\n \"phase\": d3.scaleOrdinal().domain([\"validation\", \"train\"]).range([\"#a8e4a0\", \"#a0a8e4\"]),\n \"epoch\": d3.scaleLinear().domain([0, 29]).range([1.1 * width / 2, width]),\n \"loss\": d3.scaleLinear().domain([0, 4]).range([.95 * height, 0.75 * height]),\n \"v\": d3.scaleLinear().domain([-6, 7]).range([.6 * height, 0]),\n \"i\": d3.scaleLinear().domain([0, 200]).range([1.1 * width / 2, width]),\n }\n var bw = scales[\"y\"](1) - scales[\"y\"](0)\n \n scales[\"phase_offset\"] = d3.scaleOrdinal().domain([\"train\", \"validation\"]).range([0, .2 * bw])\n scales[\"jitter\"] = d3.scaleLinear().domain([0, 1]).range([0, 0.2 * bw])\n return scales;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"d3 = require(\"d3-selection\", \"d3-selection-multi\", \"d3-scale\", \"d3-array\", \"d3-axis\", \"d3-drag\", \"d3-brush\", \"d3-shape\", \"d3-fetch\", \"d3-scale-chromatic\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"