2c:null 2d:["$","title",null,{"children":"(Cleaner) Interactive Graph Polynomial Convolutions | Ameya Daigavane | Observable"}] 32:T601,function draw_image(img, img_g, img_scale){ var img_rows = img_g.selectAll('g.img-rows') .data(img.map((row_vals, row) => ([row, row_vals]))) .join( enter => ( enter.append('g') ), update => update, exit => exit.remove(), ) .attr('class', 'img-rows'); var img_cells = img_rows .selectAll('rect') .data(([row, row_vals]) => row_vals.map((pixel, col) => [pixel, row, col])) .join( enter => ( enter.append("rect") .attr("class", ([pixel, row, col]) => `pixel rect_${get_index_for_coordinates([row, col])}`) .attr("stroke", "silver") .attr("x", ([pixel, row, col]) => (img_pixel_size * col)) .attr("y", ([pixel, row, col]) => (img_pixel_size * row)) .attr("width", img_pixel_size - 0.6) .attr("height", img_pixel_size - 0.6) .attr("stroke-width", 0.3) ), update => update, exit => exit.remove(), ) .transition() .duration(1000) .attr("fill", ([pixel, row, col]) => img_scale(pixel)); }33:T6be,function draw_axes(graph_g, y_axis_lim, y_spacing){ graph_g.selectAll('g.x-axis').remove(); graph_g.selectAll('g.y-axis').remove(); graph_g.selectAll('g.labels').remove(); var x_axis_lim = 260; var labels_g = graph_g.append('g') .attr('class', 'labels') .attr('transform', `translate(0, ${graph_height})`); var x_axis_label = labels_g.append('text') .attr('x', x_axis_lim/2) .attr('y', 100) .attr('font-size', 14) .attr('text-anchor', 'middle') .attr('dominant-baseline', 'central') .text('Eigenvector #'); var x_scale = d3.scaleLinear() .domain([-1, x_axis_lim/x_spacing - 1]) .range([0, x_axis_lim]) var x_axis = graph_g.append('g') .call(d3.axisBottom(x_scale).ticks(5)) .attr('transform', `translate(0, ${graph_height})`) .attr('class', 'x-axis'); var y_scale = d3.scaleLinear() .domain([-y_axis_lim, y_axis_lim]) .range([graph_height + y_axis_lim * y_spacing, graph_height - y_axis_lim * y_spacing]) .nice(); var y_axis_label = labels_g.append('text') .attr('x', -75) .attr('y', 5) .attr('font-size', 14) .text('Value'); var y_axis = graph_g.append('g') .call(d3.axisLeft(y_scale).ticks(5)) .attr('class', 'y-axis') .attr('transform', `translate(0, 0)`); }34:Ta79,function draw_spectrum(graph_g, coeffs, y_spacing){ var coeffs_g = graph_g.selectAll('g.coeff') .data(coeffs) .join( enter => { enter = enter.append('g') .attr('class', 'coeff'); enter.append('line') .attr('class', 'coeff-line'); enter.append('circle') .attr('class', 'coeff-circle'); enter.append('text') .attr('class', 'coeff-text'); return enter; }, update => update, exit => exit.remove(), ) .attr('transform', `translate(0, ${graph_height})`); var coeffs_line = coeffs_g.select('line.coeff-line') .attr('stroke', 'black') .attr('stroke-width', 1) .attr('x1', (d, i) => 20 + x_spacing * i) .attr('x2', (d, i) => 20 + x_spacing * i) .transition() .duration(1000) .attr('display', (d, i) => true) .attr('y1', (d, i) => 0) .attr('y2', (d, i) => -y_spacing * d); var coeffs_circle = coeffs_g.select('circle.coeff-circle') .attr('r', 3) .attr('cx', (d, i) => 20 + x_spacing * i) .attr('stroke', 'black') .attr('stroke-width', 0.1) .transition() .duration(1000) .attr('display', (d, i) => true) .attr('cy', (d, i) => -y_spacing * d); var coeffs_text = coeffs_g.select('text.coeff-text') .attr('text-anchor', 'middle') .attr('dominant-baseline', 'central') .attr('x', (d, i) => 20 + x_spacing * i) .text((d, i) => (i + 1)) .transition() .duration(1000) .style('display', (d, i) => 'none') .attr('y', (d, i) => -y_spacing * d) .attr('dy', (d, i) => (d == 0 ? 20 : 20 * -math.sign(d))); }35:T736,style = html` `36:T413,function compute_adjacency_for_img_dims(height, width){ // Helper to check whether a position is valid. function check_bounds([row, col]) { return (0 <= row && row < height && 0 <= col && col < width) } // Helper to map a position indicated by a row and column to an index. function index([row, col]) { return row * width + col; } // Add neighbours. var adj = init_2D_array(num_pixels, num_pixels); for(var row = 0; row < height; row++){ for(var col = 0; col < width; col++){ var neighbour_offsets = [ [-1, -1], [-1, 0], [-1, 1], [ 0, -1], [ 0, 1], [ 1, -1], [ 1, 0], [ 1, 1], ] var neighbours = neighbour_offsets.map(([r_off, c_off]) => [row + r_off, col + c_off]) var neighbours_filtered = neighbours.filter(check_bounds); var neighbour_indices = neighbours_filtered.map(index); var pixel_index = index([row, col]); neighbour_indices.forEach(n_index => { adj[pixel_index][n_index] = 1; }); } } return adj; }37:[] 30:{"id":"34992a340dbdb759","slug":"cleaner-interactive-graph-polynomial-convolutions","title":"(Cleaner) Interactive Graph Polynomial Convolutions","thumbnail":"627d5ab1f9a18241f8f4b41e734c037661d3a867b762e8b0f8f1b6566db9e0b2","access_level":"unlisted","create_time":"$D2021-06-23T13:01:26.998Z","update_time":"$D2021-08-18T03:54:48.889Z","view_time":null,"first_public_time":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"29561bb86c3368e7","login":"ameyasd","name":"Ameya Daigavane","avatar_url":"https://avatars-next.observableusercontent.com/a49e3c1e1711d4b1515f7df765b7a0faaac424a417af48a5fad9be5b3e748720","tier":"starter_2024"},"version":1945,"publish_version":1945,"role":null,"authored":false,"authors":[{"type":"individual","id":"aa35c1e295926184","login":"ameyasd","name":"Ameya Daigavane","avatar_url":"https://avatars-next.observableusercontent.com/a49e3c1e1711d4b1515f7df765b7a0faaac424a417af48a5fad9be5b3e748720","tier":null}],"members":[{"type":"individual","id":"aa35c1e295926184","login":"ameyasd","name":"Ameya Daigavane","avatar_url":"https://avatars-next.observableusercontent.com/a49e3c1e1711d4b1515f7df765b7a0faaac424a417af48a5fad9be5b3e748720","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"(Cleaner) Interactive Graph Polynomial Convolutions","cells":[{"id":0,"value":"md`# (Cleaner) Interactive Graph Polynomial Convolutions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"grid_buttons_display = {\n const reset_inp = html``;\n reset_inp.onclick = () => {\n mutable orig_img = init_2D_array(img_height, img_width);\n }\n\n const randomize_inp = html``;\n randomize_inp.onclick = () => {\n mutable orig_img = random_2D_array(img_height, img_width);\n }\n \n const combined_div = html`\n \n\n

\n ${reset_inp}\n ${randomize_inp}\n

\n `;\n return combined_div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1871,"value":"common_scale = d3.scaleDivergingSqrt([-2, 0, 2], d3.interpolateRdBu)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1655,"value":"poly_color_scale = legend({\n color: common_scale,\n title: \"Color Scale\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":922,"value":"poly_figcaptions = html`\n

${figcaption_orig_nat_1}

${figcaption_orig_nat_2}

${figcaption_poly}

${figcaption_kernel}

${figcaption_upd_nat_1}

${figcaption_upd_nat_2}

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"poly_conv_main_div = html`\n ${style}\n

\n \n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1543,"value":"viewof laplacian_type = radio({\n title: 'Choice of Laplacian',\n options: [\n { label: tex`\\text{Unnormalized} \\ L`, value: 'unnormalized' },\n { label: tex`\\text{Normalized} \\ \\tilde{L}`, value: 'normalized' },\n ],\n value: 'unnormalized'\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1102,"value":"polynomial_display = tex.block`\n p_w(${laplacian_symbol})\n = \\sum_{i = 0}^${max_degree} w_i ${laplacian_symbol}^i\n = ${polynomial_display_expanded}.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"poly_conv_sliders = html`

${poly_coeffs_sliders}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1324,"value":"reset_coeffs_button_display = {\n const reset_coeffs = html``;\n reset_coeffs.onclick = () => {\n poly_coeffs_sliders.forEach((elem, i) => {\n elem.reset(); \n elem.value = 0;\n d3.select(elem).select('input').property('value', 0);\n d3.select(elem).select('output').text(elem.value);\n });\n }\n \n const combined_div = html`\n \n\n

\n ${reset_coeffs}\n

\n `;\n return combined_div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"svg = {\n var svg = d3.select(poly_conv_main_div).select(\"svg\")\n .attr(\"viewBox\", [0, 0, svg_width, svg_height])\n .attr(\"width\", svg_width)\n .attr(\"height\", svg_height);\n \n var all_g = svg.append('g')\n .attr('id', 'all-g')\n .attr(\"transform\", \"translate(\" + 35 + \",\" + -75 + \")\");\n \n var orig_img_g = all_g.append('g')\n .attr('class', 'img')\n .attr('id', 'orig-img')\n .attr(\"transform\", \"translate(\" + 170 + \",\" + 80 + \")\");\n\n var conv_kernel_g = all_g.append('g')\n .attr('class', 'img')\n .attr('id', 'conv-kernel')\n .attr(\"transform\", \"translate(\" + 450 + \",\" + 170 + \")\");\n\n var upd_img_g = all_g.append('g')\n .attr('class', 'img')\n .attr('id', 'upd-img')\n .attr(\"transform\", \"translate(\" + 730 + \",\" + 80 + \")\");\n \n return svg;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1575,"value":"laplacian_symbol = (laplacian_type == 'unnormalized' ? 'L' : '\\\\tilde{L}');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1107,"value":"polynomial_display_expanded = d3.range(1 + max_degree).map(\n (i) => polynomial_coeffs[i].toString()\n + (i == 0 ? 'I' : i == 1 ? `${laplacian_symbol}` : `${laplacian_symbol}^${i}`)\n).join(' \\\\ + \\\\ ')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1583,"value":"draw_bottom_line = {\n var all_g = svg.select('#all-g');\n all_g.append('line')\n .attr('x1', 100)\n .attr('x2', 900)\n .attr('y1', 560)\n .attr('y2', 560)\n .style(\"stroke\", \"black\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1449,"value":"draw_arrow = {\n var all_g = svg.select('#all-g');\n all_g\n .append('defs')\n .append('marker')\n .attr('id', 'arrow')\n .attr('viewBox', [0, 0, 20, 20])\n .attr('refX', 10)\n .attr('refY', 10)\n .attr('markerWidth', 10)\n .attr('markerHeight', 10)\n .attr('orient', 'auto-start-reverse')\n .append('path')\n .attr('d', d3.line()([[0, 0], [0, 20], [20, 10]]))\n .attr('stroke', 'black');\n\n all_g\n .append('path')\n .attr('d', d3.line()([[410, 130], [590, 130]]))\n .attr('stroke', 'black')\n .attr('marker-end', 'url(#arrow)')\n .attr('fill', 'none');\n \n all_g\n .append('text')\n .text('Convolve')\n .attr('text-anchor', 'middle')\n .attr('dominant-baseline', 'central')\n .attr('x', 500)\n .attr('y', 110);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1283,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1277,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1154,"value":"draw_original_img = {\n var img_g = svg.select('g#orig-img');\n \n draw_image(orig_img, img_g, common_scale);\n highlight_selected_cell();\n\n function handle_click(event, [val, row, col]){\n orig_img[row][col] = 1 - orig_img[row][col];\n mutable orig_img = mutable orig_img;\n }\n img_g.selectAll('rect').on('click', handle_click);\n\n function handle_mouseover(event, [val, row, col]){\n mutable selected_cell = get_index_for_coordinates([row, col]);\n }\n img_g.selectAll('rect').on('mouseover', handle_mouseover);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1700,"value":"draw_convolutional_kernel = {\n var conv_kernel_g = svg.select('g#conv-kernel'); \n draw_image(conv_kernel, conv_kernel_g, common_scale);\n highlight_selected_cell();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1137,"value":"draw_updated_img = {\n var img_g = svg.select('g#upd-img');\n draw_image(upd_img, img_g, common_scale);\n highlight_selected_cell();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"draw_static_graph_orig = {\n var graph_g = svg.select('g#orig-spectral');\n draw_axes(graph_g, y_axis_lim_orig, y_axis_spacing_orig);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1290,"value":"draw_static_graph_upd = {\n var graph_g = svg.select('g#upd-spectral');\n draw_axes(graph_g, y_axis_lim_upd, y_axis_spacing_upd);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1234,"value":"draw_dyn_graph_orig = { \n var graph_g = svg.select('g#orig-spectral');\n\n draw_spectrum(graph_g, orig_spectral_coeffs, y_axis_spacing_orig);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1294,"value":"draw_dyn_graph_upd = { \n var graph_g = svg.select('g#upd-spectral');\n draw_spectrum(graph_g, upd_spectral_coeffs, y_axis_spacing_upd);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1821,"value":"function highlight_selected_cell() {\n d3.selectAll('.pixel')\n .attr('stroke', 'lightgray')\n .attr('stroke-width', 0.3);\n d3.selectAll(`.rect_${selected_cell}`)\n .attr('stroke', '#191970')\n .attr('stroke-width', 2);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":662,"value":"x_spacing = 10;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1361,"value":"y_axis_lim_orig = -Math.max(1, 1.5 * math.max(math.abs(orig_spectral_coeffs)));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1365,"value":"y_axis_spacing_orig = -100/y_axis_lim_orig;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1362,"value":"y_axis_lim_upd = -Math.max(1, 1.5 * math.max(math.abs(upd_spectral_coeffs)));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1366,"value":"y_axis_spacing_upd = -100/y_axis_lim_upd;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"md`# Calculations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1740,"value":"mutable selected_cell = get_index_for_coordinates([math.floor(img_height / 2), math.floor(img_width / 2)])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1746,"value":"function get_neighbour_weights(poly, selected_cell){\n return poly[selected_cell].map((val, index) => [val, index]).filter(([val, index]) => (val != 0));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1769,"value":"function get_index_for_coordinates([row, col]){\n return img_width * row + col;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1755,"value":"function get_coordinates_for_index(index){\n return [math.floor(index / img_width), index % img_width];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1792,"value":"conv_kernel","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1704,"value":"conv_kernel = {\n // We extract the weights from the current polynomial.\n let kernel = init_2D_array(img_height, img_width);\n let weights = get_neighbour_weights(poly, selected_cell);\n for(let [weight, index] of weights){\n let coords = get_coordinates_for_index(index);\n kernel[coords[0]][coords[1]] = weight;\n }\n return kernel;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"orig_feature = orig_img.flat()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"mutable orig_img = {\n let img = init_2D_array(img_height, img_width);\n for(var i = 0; i < img_height; i++) {\n for(var j = 0; j < img_width; j++) {\n img[i][j] = (Math.random() <= 0.5 ? 1 : 0);\n }\n }\n return img;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1239,"value":"orig_spectral_coeffs = math.multiply(eigenvectors, orig_feature)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1185,"value":"upd_feature = apply_polynomial(poly, orig_feature);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1161,"value":"upd_img = unflatten(upd_feature, img_height, img_width);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1252,"value":"upd_spectral_coeffs = math.multiply(eigenvectors, upd_feature)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1203,"value":"poly = [...polynomial_coeffs].reverse().reduce((acc, curr) => {\n acc = math.multiply(acc, chosen_laplacian);\n acc = math.add(acc, math.multiply(curr, math.identity(num_pixels)));\n return acc;\n }, math.zeros([num_pixels, num_pixels])\n).toArray();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1164,"value":"function apply_polynomial(poly, feature){ \n return math.multiply(poly, feature);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"mutable polynomial_coeffs = poly_coeffs_sliders.map((elem) => (elem.value));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":693,"value":"function l2_normalize(arrs){\n return arrs.map((arr) => math.divide(arr, math.sqrt(math.sum(math.square(arr)))));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1241,"value":"eigenvectors = l2_normalize(math.transpose(laplacian_eigs.vectors));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1571,"value":"chosen_laplacian = (laplacian_type == 'unnormalized' ? laplacian : normalized_laplacian);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1550,"value":"max_eigenvalue = math.max(laplacian_eigs.values);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"laplacian_eigs = math.eigs(laplacian);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"laplacian = compute_laplacian(adjacency_matrix);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1554,"value":"normalized_laplacian = math.subtract(\n math.multiply(2/max_eigenvalue, laplacian), \n math.identity(num_pixels)\n).toArray()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"adjacency_matrix = compute_adjacency_for_img_dims(img_height, img_width);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1932,"value":"function init_2D_array(height, width){\n var arr = [];\n for(var i = 0; i < height; i++) {\n arr.push([]);\n for(var j = 0; j < width; j++) {\n arr[i].push(0);\n }\n }\n return arr;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1936,"value":"function random_2D_array(height, width){\n var arr = init_2D_array(height, width);\n for(var i = 0; i < height; i++) {\n for(var j = 0; j < width; j++) {\n arr[i][j] = (Math.random() <= 0.5 ? 1 : 0);\n }\n }\n return arr;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"function compute_laplacian(adj){\n var degree = math.diag(math.apply(adj, 1, math.sum));\n return math.subtract(degree, adj);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"poly_coeffs_sliders = {\n if(laplacian_type == 'unnormalized'){\n return d3.range(1 + max_degree).map(\n i => slider({\n min: -1/math.pow(10, i), \n max: 1/math.pow(10, i), \n step: 1/math.pow(10, i + 1), \n precision: i + 1,\n value: i <= 1 ? 1/math.pow(10, i) : 0, \n title: tex`{w_{${i}}}`, \n })\n )\n } else {\n return d3.range(1 + max_degree).map(\n i => slider({\n min: -1, \n max: 1, \n step: 0.1, \n precision: 1,\n value: i <= 1 ? 1/math.pow(10, i) : 0, \n title: tex`{w_{${i}}}`, \n })\n )\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":438,"value":"poly_input_slider_watch = {\n var sliders = d3.select('#poly_conv_sliders').selectAll('form');\n \n // When slider changes.\n sliders.on('input', (event) => {\n var elem = event.currentTarget;\n var i = sliders.nodes().indexOf(elem);\n\n mutable polynomial_coeffs[i] = elem.value;\n mutable polynomial_coeffs = mutable polynomial_coeffs;\n });\n \n // On reset.\n sliders.on('reset', (event) => {\n var elem = event.currentTarget;\n elem.reset(); \n d3.select(elem).select('input').property('value', 0);\n d3.select(elem).select('output').text(0);\n\n var i = sliders.nodes().indexOf(elem);\n mutable polynomial_coeffs[i] = 0;\n mutable polynomial_coeffs = mutable polynomial_coeffs;\n });\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":969,"value":"figcaption_orig_nat_1 = html`\n Input Grid\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1466,"value":"figcaption_poly = html`\n ${tex`p_w(L)`}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1904,"value":"figcaption_kernel = html`\n Convolutional Kernel at Highlighted Pixel\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1407,"value":"figcaption_upd_nat_1 = html`\n Output Grid\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":959,"value":"figcaption_orig_nat_2 = html`\n ${tex`x \\in \\{0, 1\\}^{${num_pixels}}`}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1415,"value":"figcaption_upd_nat_2 = html`\n ${tex`x' \\in \\mathbb{R}^{${num_pixels}}`}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":967,"value":"figcaption_orig_spec_1 = html`\n Spectral Representation\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1418,"value":"figcaption_upd_spec_1 = html`\n Spectral Representation\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":904,"value":"figcaption_orig_spec_2 = html`\n ${tex`\\hat{x}`}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1422,"value":"figcaption_upd_spec_2 = html`\n ${tex`\\hat{x'}`}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":760,"value":"max_degree = 2;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"img_pixel_size = 20;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"img_height = 5;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"img_width = 5;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"num_pixels = img_height * img_width;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":594,"value":"svg_height = 220;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":859,"value":"svg_width = 1000;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"graph_height = 250;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"function unflatten(arr, height, width){\n var unflattened = init_2D_array(height, width);\n var k = 0;\n for(var i = 0; i < height; i++) {\n for(var j = 0; j < width; j++) {\n unflattened[i][j] = arr[k];\n k++;\n }\n }\n return unflattened;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"import {slider, radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1651,"value":"import {legend} from \"@d3/color-legend\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"math = require('mathjs@7.6.0/dist/math.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 31:"$30:body"