2b:null 2c:["$","title",null,{"children":"Convex optimization tutorials | Ben Lansdell | Observable"}] 31:Tb56,gradient_descent_widget = (f, fprime, x2, y2, thresholds, x2b, y2b) => { const x_init = [1,1]; const x3 = d3.scaleLinear([-2, 2], [-3*padding, size]); const y3 = d3.scaleLinear([-2, 2], [size, -2*padding]); const color = d3.scaleSequential(d3.extent(thresholds), d3.interpolateMagma); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height/2+2*padding]) .style("display", "block") .style("margin", "10 10"); //.style("width", "800px") //.style("height", "500px"); const cell = svg.append("g") .selectAll("g") .data(d3.cross(d3.range(2), d3.range(1))) .join("g") .attr("transform", ([i, j]) => `translate(${i * size},${j * size})`); cell.each(function([i, j]) { let a = d3.select(this); if (i == 0) { a.append("g") .attr("fill", "none") .attr("stroke", "#fff") .attr("stroke-opacity", 0.5) .selectAll("path") .data(generate_contours(f, x3, y3, thresholds, size-3*padding, size-2*padding)) .join("path") .attr("fill", d => color(d.value)) .attr("d", d3.geoPath()) .attr("transform", `translate(${padding},${padding})`); a.append("g") .attr("transform", `translate(0,${y2(-2)})`) .call(d3.axisBottom(x2).ticks(5,"f")) .style("font", "14px sans-serif"); a.append("g") .attr("transform", `translate(${x2(-2)},0)`) .call(d3.axisLeft(y2).ticks(5, "f")) .style("font", "14px sans-serif"); //Make data running gradient descent a.append("path") .attr("fill", "none") .attr("stroke", "#22ff22") .attr("stroke-width", 7) .attr("d", d3.line(d => x2(d.x), d => y2(d.y))(run_gradient_descent(f, fprime, x_init))); } if (i == 1) { a.append("path") .attr("fill", "none") .attr("stroke", "#000000") .attr("stroke-width", 3) .attr("d", d3.line(d => x2b(d.step), d => y2b(d.gap))(run_gradient_descent(f, fprime, x_init))); a.append("g") .attr("transform", `translate(0,${y2b(1e-10)})`) .call(d3.axisBottom(x2b).ticks(5,"f")) .style("font", "14px sans-serif"); a.append("g") .attr("transform", `translate(${x2b(-2)},0)`) .call(d3.axisLeft(y2b).ticks(5, "f").tickFormat(d3.format(".1e"))) .style("font", "14px sans-serif"); a.append("text") .attr("class", "x label") .attr("text-anchor", "middle") .attr("x", size/2) .attr("y", size+20) .text("iteration") .style("font", "18px sans-serif"); } /*svg.append("text") .attr("class", "title") .attr("text-anchor", "middle") .attr("x", size) .attr("y", 20) .text("Convergence of gradient descent") .style("font", "bold 18px sans-serif");*/ }); svg.append("g") svg.property("value", []) return svg.node(); }32:T448,strong_convex_widget = (f, f_prime, xmin, xmax) => { const g = x => f(x0) + f_prime(x0)*(x-x0) + m/2*(x - x0)**2; const height = 320; const width = 480; const margin = {top: 20, right: 30, bottom: 20, left: 40}; const x = d3.scaleLinear().domain([xmin, xmax]).range([margin.left, width - margin.right]); const y = d3.scaleLinear().domain([-1, 4]).range([height - margin.bottom, margin.top]); const svg = d3.select(DOM.svg(width, height)); svg.append("g") .attr("transform", `translate(0,${y(0)})`) .call(d3.axisBottom(x).ticks(5,"f")); svg.append("g") .attr("transform", `translate(${x(0)},0)`) .call(d3.axisLeft(y).ticks(5, "f")); svg.append("path") .attr("fill", "none") .attr("stroke", xColor) .attr("stroke-width", 2) .attr("d", d3.line(d => x(d.x), d => y(d.y))(make_func_data(f, xmin, xmax))); svg.append("path") .attr("fill", "none") .attr("stroke", xColor2) .attr("stroke-width", 2) .attr("d", d3.line(d => x(d.x), d => y(d.y))(make_func_data(g, xmin, xmax))); return svg.node(); }33:[] 2f:{"id":"9846e1cd8f51cdbe","slug":"convex-optimization-tutorials","title":"Convex optimization tutorials","thumbnail":"be96549ffbca8963059dc6fdf4a7a54308fc21ba7c3a926135ed3ea855bd9aca","access_level":"public","create_time":"$D2021-02-26T02:17:09.295Z","update_time":"$D2021-03-23T23:54:54.863Z","view_time":null,"first_public_time":"$D2021-03-05T17:09:02.211Z","fork":{"id":"9d7cc1d26bcca7c7","slug":"contours","title":"Contours","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":1,"starred":false,"owner":{"type":"team","id":"a70cb3aaead7a29e","login":"benlansdell","name":"Ben Lansdell","avatar_url":"https://avatars-next.observableusercontent.com/3f654d6654e266de041d78659d7965a803b9b493ac88d1ed4f109789d1c715bd","tier":"starter_2024"},"version":1233,"publish_version":1233,"role":null,"authored":false,"authors":[{"type":"individual","id":"69740a65168e1727","login":"benlansdell","name":"Ben Lansdell","avatar_url":"https://avatars-next.observableusercontent.com/3f654d6654e266de041d78659d7965a803b9b493ac88d1ed4f109789d1c715bd","tier":null}],"members":[{"type":"individual","id":"69740a65168e1727","login":"benlansdell","name":"Ben Lansdell","avatar_url":"https://avatars-next.observableusercontent.com/3f654d6654e266de041d78659d7965a803b9b493ac88d1ed4f109789d1c715bd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Convex optimization tutorials","cells":[{"id":0,"value":"md`# Convex optimization tutorials\n\nShowing the [Goldstein–Price test function](https://en.wikipedia.org/wiki/Test_functions_for_optimization) at the top. Plots also for:\n\n* unit circle indicator function\n* quadratic functions\n* L1 norm\n\nSome widgets for convergence proof of gradient descent, and others\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3,"value":"value = (x, y) =>\n (1 + (x + y + 1) ** 2 * (19 - 14 * x + 3 * x ** 2 - 14 * y + 6 * x * y + 3 * y ** 2))\n * (30 + (2 * x - 3 * y) ** 2 * (18 - 32 * x + 12 * x * x + 48 * y - 36 * x * y + 27 * y ** 2))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":292,"value":"unit_circle = (x, y) =>\n (x**2 + y**2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":388,"value":"l1norm = (x,y) => (Math.abs(x) + Math.abs(y))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":413,"value":"quadratic = (x, y) => (x**2 - x*y + y**2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":857,"value":"simple_quadratic = (x, y) => (alpha*x**2/2 + beta*y**2/2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":874,"value":"simple_quadratic_prime = (x, y) => [alpha*x, beta*y]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":250,"value":"legend({color, title: \"Value\", tickFormat: \",\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":36,"value":"chart = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 150, width-28, goldstein_height-200])\n .style(\"display\", \"block\")\n .style(\"margin\", \"0 -28px\")\n .style(\"width\", \"calc(100%-28px)\");\n\n svg.append(\"g\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"#fff\")\n .attr(\"stroke-opacity\", 0.5)\n .selectAll(\"path\")\n .data(contours)\n .join(\"path\")\n .attr(\"fill\", d => color(d.value))\n .attr(\"d\", d3.geoPath());\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":362,"value":"indicator_function = plot_function(unit_circle, x2, y2, thresholds2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":672,"value":"md` ### 2D plots`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":399,"value":"quad_plot = plot_function(quadratic, x2, y2, d3.range(-2, 12, .3))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":381,"value":"l2_plot = plot_function(unit_circle, x2, y2, d3.range(-2, 9, .2))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":390,"value":"l1_plot = plot_function(l1norm, x2, y2, d3.range(-2, 5, .2))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":669,"value":"md`### 1D plots`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":463,"value":"plot_1d_function((x => x**2), -3, 3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":650,"value":"plot_1d_function((x => 1/x), 0, 4)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":654,"value":"plot_1d_function(x => Math.exp(x), -4, 4)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":667,"value":"md`## Interactive widgets\n\n### Examples of strong convexity (or not)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":788,"value":"viewof x0 = Range([-2, 2], {label: 'x0', value: 0})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":793,"value":"viewof m = Range([0, 2], {label: \"m\", value: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":674,"value":"x2_strong_convex = strong_convex_widget(x=>x**2, x=> 2*x, -3, 3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":704,"value":"exp_strong_convex = strong_convex_widget(x=>Math.exp(-x), x=>-Math.exp(-x), -3, 3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":801,"value":"md` ### Convergence of gradient descent`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":760,"value":"viewof sliders = {\n const form = html``;\n form.oninput = () => form.value = [\n form.m.valueAsNumber, \n form.x0.valueAsNumber, \n ];\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":923,"value":"x3 = d3.scaleLinear([-2, 2], [padding-4, size - 2*padding+4]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":924,"value":"y3 = d3.scaleLinear([-2, 2], [size - padding+2, padding-3]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1002,"value":"x4 = d3.scaleLinear([0, 20], [padding, size-padding]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1176,"value":"min_exponent = -10;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1001,"value":"y4 = d3.scaleLog([10**(min_exponent), 1], [size - padding/2, padding]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":862,"value":"viewof alpha = Range([0, 4], {label: 'm_x', value: 2})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":859,"value":"viewof beta = Range([0, 4], {label: 'm_y', value: 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":850,"value":"gd_widget = gradient_descent_widget(simple_quadratic, simple_quadratic_prime, x3, y3, d3.range(-3, 10, .3), x4, y4)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":645,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":919,"value":"padding = 35;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":916,"value":"size = (width - (2 + 1) * padding) / 2 + padding","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":846,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":870,"value":"run_gradient_descent = (f, fprime, xinit) => {\n const n = 21;\n const stepsize = 1/(Math.max(alpha, beta));\n // Start at the center of the field.\n let vx = xinit[0];\n let vy = xinit[1];\n let gap = f(vx, vy);\n let pre_gap = gap;\n var grad = [0,0];\n let i_prime = 0;\n let below = false;\n const data = [];\n data.push({\n step: i_prime,\n x: vx,\n y: vy,\n gap: gap});\n for (let i = 1; i < n; i++) {\n grad = fprime(vx, vy)\n pre_gap = gap;\n vx -= stepsize*grad[0];\n vy -= stepsize*grad[1];\n gap = f(vx, vy);\n if (gap < 10**(min_exponent)) {\n i_prime = i - 1 + (Math.log10(pre_gap) - min_exponent)/(Math.log10(pre_gap/gap));\n gap = 10**(min_exponent);\n below = true;\n }\n else {\n i_prime = i;\n }\n data.push({\n step: i_prime,\n x: vx,\n y: vy,\n gap: gap\n });\n if (below)\n break\n }\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":688,"value":"import {Range} from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":772,"value":"//x0 = rgb[1]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":779,"value":"//m = rgb[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":699,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":460,"value":"plot_1d_function = (func, xmin, xmax) => {\n\n const height = 320;\n const width = 480;\n const margin = {top: 20, right: 30, bottom: 20, left: 40};\n const x = d3.scaleLinear().domain([xmin, xmax]).range([margin.left, width - margin.right]);\n const y = d3.scaleLinear().domain([-1, 4]).range([height - margin.bottom, margin.top]);\n\n const svg = d3.select(DOM.svg(width, height));\n\n svg.append(\"g\")\n .attr(\"transform\", `translate(0,${y(0)})`)\n .call(d3.axisBottom(x).ticks(5,\"f\"));\n\n svg.append(\"g\")\n .attr(\"transform\", `translate(${x(0)},0)`)\n .call(d3.axisLeft(y).ticks(5, \"f\"));\n\n svg.append(\"path\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", xColor)\n .attr(\"stroke-width\", 2)\n .attr(\"d\", d3.line(d => x(d.x), d => y(d.y))(make_func_data(func, xmin, xmax)));\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":627,"value":"make_func_data = (f, xmin, xmax) => {\n const n = 50;\n const stepsize = (xmax - xmin)/n;\n // Start at the center of the field.\n let vx = xmin;\n const data = [];\n for (let i = 0; i < n; i++) {\n // Random walk with large or small steps.\n data.push({\n step: i,\n x: vx += stepsize,\n y: f(vx)\n });\n }\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":522,"value":"xColor = d3.schemeCategory10[4]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":683,"value":"xColor2 = d3.schemeCategory10[1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":175,"value":"color = d3.scaleSequentialLog(d3.extent(thresholds), d3.interpolateMagma)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"thresholds = d3.range(1, 20).map(i => Math.pow(2, i))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":371,"value":"thresholds2 = d3.range(-2, 2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"grid = {\n const q = 4; // The level of detail, e.g., sample every 4 pixels in x and y.\n const x0 = -q / 2, x1 = width + 28 + q;\n const y0 = -q / 2, y1 = goldstein_height + q;\n const n = Math.ceil((x1 - x0) / q);\n const m = Math.ceil((y1 - y0) / q);\n const grid = new Array(n * m);\n for (let j = 0; j < m; ++j) {\n for (let i = 0; i < n; ++i) {\n grid[j * n + i] = value(x.invert(i * q + x0), y.invert(j * q + y0));\n }\n }\n grid.x = -q;\n grid.y = -q;\n grid.k = q;\n grid.n = n;\n grid.m = m;\n return grid;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":299,"value":"generate_grid = (val, x, y, width, height) => {\n const q = 4; // The level of detail, e.g., sample every 4 pixels in x and y.\n const x0 = -q / 2, x1 = width + q;\n const y0 = -q / 2, y1 = height + q;\n const n = Math.ceil((x1 - x0) / q);\n const m = Math.ceil((y1 - y0) / q);\n const grid = new Array(n * m);\n for (let j = 0; j < m; ++j) {\n for (let i = 0; i < n; ++i) {\n grid[j * n + i] = val(x.invert(i * q + x0), y.invert(j * q + y0));\n }\n }\n grid.x = -q;\n grid.y = -q;\n grid.k = q;\n grid.n = n;\n grid.m = m;\n return grid;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":309,"value":"generate_transform = gr => {\n return ({type, value, coordinates}) => {\n return {type, value, coordinates: coordinates.map(rings => {\n return rings.map(points => {\n return points.map(([x, y]) => ([\n gr.x + gr.k * x,\n gr.y + gr.k * y\n ]));\n });\n })};\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":152,"value":"// Converts from grid coordinates (indexes) to screen coordinates (pixels).\ntransform = ({type, value, coordinates}) => {\n return {type, value, coordinates: coordinates.map(rings => {\n return rings.map(points => {\n return points.map(([x, y]) => ([\n grid.x + grid.k * x,\n grid.y + grid.k * y\n ]));\n });\n })};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":302,"value":"generate_contours = (val, x, y, thresholds, width, height) => {\n const grid = generate_grid(val, x, y, width, height);\n const contours = d3.contours()\n .size([grid.n, grid.m])\n .thresholds(thresholds)\n (grid)\n .map(generate_transform(grid));\n return contours;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":288,"value":"plot_function = (func, x2, y2, thresholds) => {\n const color = d3.scaleSequential(d3.extent(thresholds), d3.interpolateMagma);\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 50, width, height])\n .style(\"display\", \"block\")\n .style(\"margin\", \"0 0\")\n .style(\"width\", \"300px\")\n .style(\"height\", \"300px\");\n\n svg.append(\"g\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"#fff\")\n .attr(\"stroke-opacity\", 0.5)\n .selectAll(\"path\")\n .data(generate_contours(func, x2, y2, thresholds, width, height))\n .join(\"path\")\n .attr(\"fill\", d => color(d.value))\n .attr(\"d\", d3.geoPath());\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"contours = d3.contours()\n .size([grid.n, grid.m])\n .thresholds(thresholds)\n (grid)\n .map(transform)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"x = d3.scaleLinear([-2, 2], [0, width + 28])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"y = d3.scaleLinear([-2, 1], [goldstein_height, 0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":339,"value":"x2 = d3.scaleLinear([-2, 2], [0, width]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":341,"value":"y2 = d3.scaleLinear([-2, 2], [height, 0]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":54,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height})`)\n .call(d3.axisTop(x).ticks(width / height * 10))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.selectAll(\".tick\").filter(d => x.domain().includes(d)).remove())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":49,"value":"yAxis = g => g\n .attr(\"transform\", \"translate(-1,0)\")\n .call(d3.axisRight(y))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.selectAll(\".tick\").filter(d => y.domain().includes(d)).remove())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"height = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":486,"value":"//width = 400;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":355,"value":"goldstein_height = 600;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":248,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"