31:T566,function draw_img_helper(img, img_g, img_pixel_size) { 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("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) .attr("height", img_pixel_size) .attr("stroke-width", 0.5) ), update => update, exit => exit.remove(), ) .transition() .duration(0) .attr("fill", ([pixel, row, col]) => img_scale(pixel)); }32:T5a6,draw_eigenvectors = { var subgrid_svg = d3.select(subgrid_main_div).select("svg") .attr("viewBox", [0, 0, subgrid_svg_width, subgrid_svg_height]) .attr("width", subgrid_svg_width) .attr("height", subgrid_svg_height); var x_offset = 32; var subgrid_pixel_size = math.floor(img_pixel_size / 2); var x_spacing = subgrid_svg_width / num_eigenvectors; var y_offset = 10; var eigenvectors_gs = subgrid_svg.selectAll('g.eigenvectors') .data(d3.range(max_eigenvectors)) .join( enter => ( enter.append('g') ), update => update, exit => exit.remove(), ) .attr('class', 'eigenvectors') .attr('transform', (index) => `translate(${x_offset + x_spacing * index},${y_offset})`) .each(function(index){ let eigenvector = eigenvectors[index]; let eigenvector_reshaped = unflatten(eigenvector, img_height, img_width); draw_img_helper(eigenvector_reshaped, d3.select(this), subgrid_pixel_size); }); }33:T6a0,draw_static_graph = { var graph_g = svg.select('g.graph'); // Axes. var x_axis_lim = 300; var y_axis_lim = -1 * y_spacing; var labels_g = graph_g.append('g') .attr('transform', `translate(0, ${graph_height})`); var x_axis_label = labels_g.append('text') .attr('x', x_axis_lim + 20) .attr('y', 30) .attr('text-anchor', 'middle') .attr('dominant-baseline', 'central') .text('Spectral Coefficient'); var x_axis_label_2 = labels_g.append('text') .attr('x', x_axis_lim/2) .attr('y', 184) .attr('text-anchor', 'middle') .attr('dominant-baseline', 'central') .text('Eigenvector #'); var x_scale = d3.scaleLinear() .domain([0, x_axis_lim/x_spacing]) .range([0, x_axis_lim]); var x_axis = graph_g.append('g').call(d3.axisBottom(x_scale)) .attr('transform', `translate(0, ${graph_height})`) x_axis.selectAll('text').remove(); x_axis.selectAll('.tick').remove(); var y_scale = d3.scaleLinear() .domain([-y_axis_lim/y_spacing, y_axis_lim/y_spacing]) .range([graph_height + y_axis_lim, graph_height - y_axis_lim]) var y_axis_label = labels_g.append('text') .attr('x', -75) .attr('y', 5) .text('Value'); var y_axis = graph_g.append('g').call(d3.axisLeft(y_scale)) .attr('transform', `translate(0, 0)`); }34:Tbc8,draw_dyn_graph = { var graph_g = svg.select('g.graph'); // Spectral Coefficients var coeffs_g = graph_g.selectAll('g.coeff') .data(spectral_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) => display(i)) .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) => display(i)) .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) .attr('display', (d, i) => display(i)) .attr('y', (d, i) => -y_spacing * d) .attr('dy', (d, i) => (d == 0 ? 20 : 20 * -math.sign(d))); function display(i){ return i < num_eigenvectors ? '' : 'none'; } d3.select('span.texed-letters') .data(spectral_coeffs) .style('position', 'absolute') .style('left', (d, i) => 20 + x_spacing * i) .style('top', (d, i) => -y_spacing * d); }35:T780,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:[] 2f:{"title":"Interactive Spectral Conversions","cells":[{"id":0,"value":"md`# Interactive Spectral Conversions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":922,"value":"figcaptions = html`\n

${figcaption_spec_1}

${figcaption_spec_2}

${figcaption_quot}

${figcaption_nat_1}

${figcaption_nat_2}

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"spec_conv_main_div = html`\n ${style}\n

\n \n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1111,"value":"spec_color_scale = legend({\n color: img_scale,\n title: \"Color Scale\",\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1186,"value":"subgrid_main_div = html`\n

\n \n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":477,"value":"spec_conv_sliders = html`

${coeffs}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":483,"value":"spec_conv_buttons_display = {\n const reset_inp = html``;\n reset_inp.onclick = () => {\n coeffs.forEach((elem, i) => {\n elem.reset(); \n d3.select(elem).select('input').property('value', 0);\n d3.select(elem).select('output').text(0);\n });\n }\n\n const combined_div = html`\n \n\n

\n ${reset_inp}\n

\n `;\n return combined_div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"svg = {\n var svg = d3.select(spec_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 img_g = svg.append('g')\n .attr('class', 'img')\n .attr(\"transform\", \"translate(\" + 150 + \",\" + 100 + \")\");\n \n var graph_g = svg.append('g')\n .attr('class', 'graph')\n .attr(\"transform\", \"translate(\" + 500 + \",\" + -100 + \")\");\n \n return svg;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1122,"value":"img_scale = d3.scaleDivergingSqrt([-0.5, 0, 0.5], d3.interpolateRdBu);","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1141,"value":"draw_img = {\n var img_g = svg.select('g.img');\n draw_img_helper(img, img_g, img_pixel_size);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1136,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"md`# Calculations`","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"img = unflatten(natural_feature, img_height, img_width);","pinned":false,"hidden":false,"mode":"ojs"},{"id":432,"value":"mutable spectral_coeffs = coeffs.map((elem) => (elem.value));","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"natural_feature = {\n var weighted_eigenvectors = spectral_coeffs.map(\n (coeff, index) => math.multiply(eigenvectors[index], coeff)\n );\n return math.apply(weighted_eigenvectors, 0, math.sum);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1025,"value":"rayleigh_quotient = {\n var x = natural_feature;\n var L = laplacian;\n var quot = math.multiply(math.multiply(x, L), x) / math.multiply(x, x);\n return isNaN(quot) ? \"\\\\text{undefined}\" : math.round(quot, 2).toFixed(2);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"eigenvalues = laplacian_eigs.values;","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"eigenvectors = normalize(math.transpose(laplacian_eigs.vectors));","pinned":false,"hidden":false,"mode":"ojs"},{"id":693,"value":"function normalize(arrs){\n return arrs.map((arr) => math.divide(arr, math.sqrt(math.sum(math.square(arr)))));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"laplacian_eigs = math.eigs(laplacian);","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"laplacian = compute_laplacian(adjacency_matrix);","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"adjacency_matrix = compute_adjacency_for_img_dims(img_height, img_width);","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":95,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1033,"value":"figcaption_quot = html`\n ${tex`R_L(x) = ${rayleigh_quotient}`}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":969,"value":"figcaption_nat_1 = html`\n Natural Representation\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":959,"value":"figcaption_nat_2 = html`\n ${tex`x \\in \\mathbb{R}^{${num_pixels}}`}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":967,"value":"figcaption_spec_1 = html`\n Spectral Representation\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":904,"value":"figcaption_spec_2 = html`\n ${tex`\\hat{x} = \\left[\n ${d3.range(num_eigenvectors).map(\n i => '\\\\hat{x}_{' + (i + 1).toString() + '}'\n ).join(' \\\\ ')}\n \\right]`}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":438,"value":"spec_input_slider_watch = {\n var sliders = d3.select('#spec-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 spectral_coeffs[i] = elem.value;\n mutable spectral_coeffs = mutable spectral_coeffs;\n });\n \n // On reset.\n sliders.on('reset', (event) => {\n var elem = event.currentTarget;\n var i = sliders.nodes().indexOf(elem);\n\n mutable spectral_coeffs[i] = 0;\n mutable spectral_coeffs = mutable spectral_coeffs;\n });\n \n // When number of eigenvalues change.\n sliders\n .transition()\n .duration(1000)\n .style('visibility', function (d, i) {\n if(i < num_eigenvectors){\n return 'visible';\n } else {\n this.reset();\n this.value = 0;\n d3.select(this).select('output').text(this.value);\n return 'hidden';\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":737,"value":"texed_letters = d3.range(num_eigenvectors).map(\n (i) => html`\n \n ${tex`{\\hat{x}_{${i + 1}}}`}\n `\n);","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"coeffs = {\n return d3.range(max_eigenvectors).map(\n i => slider({\n min: -1, \n max: 1, \n step: 0.1, \n value: -1 + 2 * Math.random(), \n title: tex`{\\hat{x}_{${i + 1}}}`, \n })\n )\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"num_eigenvectors = max_eigenvectors;","pinned":false,"hidden":false,"mode":"ojs"},{"id":760,"value":"max_eigenvectors = 10;","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"img_pixel_size = 12;","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"img_height = 8;","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"img_width = 8;","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"num_pixels = img_height * img_width;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1280,"value":"subgrid_svg_height = 60;","pinned":false,"hidden":false,"mode":"ojs"},{"id":594,"value":"svg_height = 400;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1237,"value":"subgrid_svg_width = 1072","pinned":false,"hidden":false,"mode":"ojs"},{"id":859,"value":"svg_width = 1072;","pinned":false,"hidden":false,"mode":"ojs"},{"id":548,"value":"graph_height = 250;","pinned":false,"hidden":false,"mode":"ojs"},{"id":662,"value":"x_spacing = 20;","pinned":false,"hidden":false,"mode":"ojs"},{"id":665,"value":"y_spacing = 120;","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"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"},{"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"},{"id":13,"value":"function init_image(height, width){\n var img = init_2D_array(height, width);\n for(var i = 0; i < height; i++) {\n for(var j = 0; j < width; j++) {\n img[i][j] = Math.random();\n }\n }\n return img;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1112,"value":"import {legend} from \"@d3/color-legend\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"math = require('mathjs@7.6.0/dist/math.min.js')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}