2f:T4b9,source_points = { const prob = random_problem(1); prob.sources = [5]; const canvas = d3.select(svg``); pause.install(canvas); const sources = canvas.append('g').datum(prob.sources).call(SourceChart()) const points = canvas.append('g'); const annotation = canvas.append('g'); const field = canvas.append('g') .datum(prob.sources) .call(FieldChart()) .select('path') .attr('stroke-opacity', .25); const timestep = 300; while (true) { for (let i = 0; i < PARAMS.T; i++) { sources.call(SourceChart().pulse().duration(timestep)); const subpoints = prob.points.slice(0, i); const soln = solve(prob.sources, subpoints); points .datum({points: subpoints, soln: soln}) .call(PointChart().duration(timestep)) .call(PointChart().pulse().duration(timestep).filter((d, j) => j == i-1)); annotation .datum(`${i+1} calculations`) .call(AnnotationChart()) yield canvas.node(); await pause.tick(timestep); } } }30:T565,sources_points = { const prob = random_problem(100); const canvas = d3.select(svg``) .call(pause.install); const y = d3.scaleLinear() .domain([0, d3.max(solve(prob.sources, prob.points))]) .range([SMALL_RANGE.top + 10, SMALL_RANGE.bottom - 5]) const sources = canvas.append('g').attr('fill-opacity', .5) const points = canvas.append('g') const annotation = canvas.append('g'); const field = canvas.append('g') .attr('stroke-opacity', .25) .datum(prob.sources) .call(FieldChart().y(y)); const timestep = 300 while (true) { for (let i = 0; i < prob.sources.length; i++) { const subsources = prob.sources.slice(0, i); sources .datum(subsources) .call(SourceChart()) .call(SourceChart().pulse().duration(timestep).filter((d, j) => j == i-1)); points .datum({points: prob.points, soln: solve(subsources, prob.points)}) .call(PointChart().y(y)) .call(PointChart().pulse().duration(timestep)); annotation .datum(`${(i+1)*prob.points.length} calculations`) .call(AnnotationChart()) yield canvas.node(); await pause.tick(timestep); } } }31:T702,source_group_far = { const uniform = d3.randomUniform.source(seedrandom(44))(4.5, 5.5); const prob = ({sources: d3.range(5).map(uniform), points: [6], kernel: random_problem().kernel}); const centered_sources = prob.sources.map(d => d3.mean(prob.sources)); const canvas = d3.select(svg``) .call(pause.install); const y = d3.scaleLinear() .domain([0, 5]) .range([10, SMALL_RANGE.bottom-5]); const sources = canvas.append('g') .attr('fill-opacity', .5); const points = canvas.append('g'); const annotation = canvas.append('g'); const field = canvas.append('g') .attr('stroke-opacity', .25) .datum(prob.sources) .call(FieldChart().y(y)) const timestep = 1000; while (true) { sources .datum(prob.sources) .call(SourceChart()) points .datum({points: prob.points, soln: [0]}) .call(PointChart().y(y)) annotation .datum(`0 calculations`) .call(AnnotationChart()) yield canvas.node(); await pause.tick(timestep); sources .datum(centered_sources) .call(SourceChart().duration(timestep)) yield canvas.node(); await pause.tick(timestep); sources .call(SourceChart().pulse().duration(timestep)) points .datum({points: prob.points, soln: solve(centered_sources, prob.points)}) .call(PointChart().y(y).duration(timestep)) .call(PointChart().pulse().duration(timestep)); annotation .datum(`1 calculations`) .call(AnnotationChart()) yield canvas.node(); await pause.tick(5*timestep); } }32:T70a,source_group_near = { { const uniform = d3.randomUniform.source(seedrandom(44))(4.5, 5.5); const prob = ({sources: d3.range(5).map(uniform), points: [5], kernel: random_problem().kernel}); const centered_sources = prob.sources.map(d => d3.mean(prob.sources)); const canvas = d3.select(svg``) .call(pause.install); const y = d3.scaleLinear() .domain([0, 5]) .range([10, SMALL_RANGE.bottom-5]); const sources = canvas.append('g') .attr('fill-opacity', .5); const points = canvas.append('g'); const annotation = canvas.append('g'); const field = canvas.append('g') .attr('stroke-opacity', .25) .datum(prob.sources) .call(FieldChart().y(y)) const timestep = 1000; while (true) { sources .datum(prob.sources) .call(SourceChart()) points .datum({points: prob.points, soln: [0]}) .call(PointChart().y(y)) annotation .datum(`0 calculations`) .call(AnnotationChart()) yield canvas.node(); await pause.tick(timestep); sources .datum(centered_sources) .call(SourceChart().duration(timestep)) yield canvas.node(); await pause.tick(timestep); sources .call(SourceChart().pulse().duration(timestep)) points .datum({points: prob.points, soln: solve(centered_sources, prob.points)}) .call(PointChart().y(y).duration(timestep)) .call(PointChart().pulse().duration(timestep)); annotation .datum(`1 calculations`) .call(AnnotationChart()) yield canvas.node(); await pause.tick(5*timestep); } } }33:Tdd7,source_small_groups = { const prob = random_problem(100); const height = 1; const root = build_hierarchy(prob, 5); const canvas = d3.select(svg``) .call(pause.install); const y = d3.scaleLinear() .domain([0, d3.max(solve(prob.sources, prob.points))]) .range([15, SMALL_RANGE.bottom - 5]) const field = canvas.append('g') .attr('stroke-opacity', .25) .datum(prob.sources) .call(FieldChart().y(y)); const hierarchy = canvas.append('g') const hierarchy_chart = HierarchyChart().y(y).height(height) const annotation = canvas.append('g'); function increment_soln(source, nodes, mult, duration) { const leaves = d3.merge(nodes.map(n => n.leaves())) leaves.forEach(n => { n.data.soln = n.data.soln.map((s, i) => s + mult*PARAMS.kernel(source, n.data.points[i]));}); hierarchy.call(hierarchy_chart.duration(duration).pulse_points().nodes(leaves)); hierarchy.call(hierarchy_chart); } const short = 200, long = 600; while (true) { let calcs = 0; function increment_annotation(count) { calcs += count; annotation.datum(`${calcs} calculations`).call(AnnotationChart());} root.leaves().forEach(l => l.data.soln.fill(0)); hierarchy .datum(root) .call(hierarchy_chart); const order = []; root.eachBefore(n => order.push(n)); for (let o = 0; o < order.length; o++) { const node = order[o]; const leaf_ids = node.leaves().map(l => l.data.id); const source_selection = hierarchy.selectAll('.sources') .filter(d => leaf_ids.includes(d.id)) if (node.height < height) { if (node.data.sources.length) { source_selection.each(d => {d.backup = [...d.sources]; d.sources.fill(node.data.center)}); hierarchy.datum(root).call(hierarchy_chart.duration(long)); yield canvas.node(); await pause.tick(long); const ixns = node.height < height-1? node.ixns : node.far; increment_soln(node.data.center, ixns, node.data.sources.length, long); source_selection.call(SourceChart().pulse().duration(long)) hierarchy.call(hierarchy_chart.duration(long).pulse_nodes().nodes([node])); increment_annotation(d3.sum(ixns.map(n => n.data.points.length))); yield canvas.node(); await pause.tick(long); source_selection.each(n => {n.sources = n.backup; delete n.backup; }); hierarchy.datum(root).call(hierarchy_chart.duration(long)); } else { hierarchy.call(hierarchy_chart.duration(long).pulse_nodes().nodes([node])); yield canvas.node(); await pause.tick(long); } yield canvas.node(); await pause.tick(long); } if (node.height == 0) { const sources = node.data.sources; for (let s = 0; s < sources.length; s++) { source_selection.call(SourceChart().pulse().duration(short).filter((_, ss) => ss == s)) increment_soln(sources[s], node.near, 1, short); increment_annotation(d3.sum(node.near.map(n => n.data.points.length))); yield canvas.node(); await pause.tick(short); } } } yield canvas.node(); await pause.tick(5000); } }34:Tdd6,source_big_groups = { const prob = random_problem(100); const height = 1; const root = build_hierarchy(prob, 4); const canvas = d3.select(svg``) .call(pause.install); const y = d3.scaleLinear() .domain([0, d3.max(solve(prob.sources, prob.points))]) .range([15, SMALL_RANGE.bottom - 5]) const field = canvas.append('g') .attr('stroke-opacity', .25) .datum(prob.sources) .call(FieldChart().y(y)); const hierarchy = canvas.append('g') const hierarchy_chart = HierarchyChart().y(y).height(height) const annotation = canvas.append('g'); function increment_soln(source, nodes, mult, duration) { const leaves = d3.merge(nodes.map(n => n.leaves())) leaves.forEach(n => { n.data.soln = n.data.soln.map((s, i) => s + mult*PARAMS.kernel(source, n.data.points[i]));}); hierarchy.call(hierarchy_chart.duration(duration).pulse_points().nodes(leaves)); hierarchy.call(hierarchy_chart); } const short = 200, long = 600; while (true) { let calcs = 0; function increment_annotation(count) { calcs += count; annotation.datum(`${calcs} calculations`).call(AnnotationChart());} root.leaves().forEach(l => l.data.soln.fill(0)); hierarchy .datum(root) .call(hierarchy_chart); const order = []; root.eachBefore(n => order.push(n)); for (let o = 0; o < order.length; o++) { const node = order[o]; const leaf_ids = node.leaves().map(l => l.data.id); const source_selection = hierarchy.selectAll('.sources') .filter(d => leaf_ids.includes(d.id)) if (node.height < height) { if (node.data.sources.length) { source_selection.each(d => {d.backup = [...d.sources]; d.sources.fill(node.data.center)}); hierarchy.datum(root).call(hierarchy_chart.duration(long)); yield canvas.node(); await pause.tick(long); const ixns = node.height < height-1? node.ixns : node.far; increment_soln(node.data.center, ixns, node.data.sources.length, long); source_selection.call(SourceChart().pulse().duration(long)) hierarchy.call(hierarchy_chart.duration(long).pulse_nodes().nodes([node])); increment_annotation(d3.sum(ixns.map(n => n.data.points.length))); yield canvas.node(); await pause.tick(long); source_selection.each(n => {n.sources = n.backup; delete n.backup; }); hierarchy.datum(root).call(hierarchy_chart.duration(long)); } else { hierarchy.call(hierarchy_chart.duration(long).pulse_nodes().nodes([node])); yield canvas.node(); await pause.tick(long); } yield canvas.node(); await pause.tick(long); } if (node.height == 0) { const sources = node.data.sources; for (let s = 0; s < sources.length; s++) { source_selection.call(SourceChart().pulse().duration(short).filter((_, ss) => ss == s)) increment_soln(sources[s], node.near, 1, short); increment_annotation(d3.sum(node.near.map(n => n.data.points.length))); yield canvas.node(); await pause.tick(short); } } } yield canvas.node(); await pause.tick(5000); } }35:Tdd5,source_group_both = { const prob = random_problem(100); const height = 2; const root = build_hierarchy(prob, 5); const canvas = d3.select(svg``) .call(pause.install); const y = d3.scaleLinear() .domain([0, d3.max(solve(prob.sources, prob.points))]) .range([15, SMALL_RANGE.bottom - 5]) const field = canvas.append('g') .attr('stroke-opacity', .25) .datum(prob.sources) .call(FieldChart().y(y)); const hierarchy = canvas.append('g') const hierarchy_chart = HierarchyChart().y(y).height(height) const annotation = canvas.append('g'); function increment_soln(source, nodes, mult, duration) { const leaves = d3.merge(nodes.map(n => n.leaves())) leaves.forEach(n => { n.data.soln = n.data.soln.map((s, i) => s + mult*PARAMS.kernel(source, n.data.points[i]));}); hierarchy.call(hierarchy_chart.duration(duration).pulse_points().nodes(leaves)); hierarchy.call(hierarchy_chart); } const short = 200, long = 600; while (true) { let calcs = 0; function increment_annotation(count) { calcs += count; annotation.datum(`${calcs} calculations`).call(AnnotationChart());} root.leaves().forEach(l => l.data.soln.fill(0)); hierarchy .datum(root) .call(hierarchy_chart); const order = []; root.eachBefore(n => order.push(n)); for (let o = 0; o < order.length; o++) { const node = order[o]; const leaf_ids = node.leaves().map(l => l.data.id); const source_selection = hierarchy.selectAll('.sources') .filter(d => leaf_ids.includes(d.id)) if (node.height < height) { if (node.data.sources.length) { source_selection.each(d => {d.backup = [...d.sources]; d.sources.fill(node.data.center)}); hierarchy.datum(root).call(hierarchy_chart.duration(long)); yield canvas.node(); await pause.tick(long); const ixns = node.height < height-1? node.ixns : node.far; increment_soln(node.data.center, ixns, node.data.sources.length, long); source_selection.call(SourceChart().pulse().duration(long)) hierarchy.call(hierarchy_chart.duration(long).pulse_nodes().nodes([node])); increment_annotation(d3.sum(ixns.map(n => n.data.points.length))); yield canvas.node(); await pause.tick(long); source_selection.each(n => {n.sources = n.backup; delete n.backup; }); hierarchy.datum(root).call(hierarchy_chart.duration(long)); } else { hierarchy.call(hierarchy_chart.duration(long).pulse_nodes().nodes([node])); yield canvas.node(); await pause.tick(long); } yield canvas.node(); await pause.tick(long); } if (node.height == 0) { const sources = node.data.sources; for (let s = 0; s < sources.length; s++) { source_selection.call(SourceChart().pulse().duration(short).filter((_, ss) => ss == s)) increment_soln(sources[s], node.near, 1, short); increment_annotation(d3.sum(node.near.map(n => n.data.points.length))); yield canvas.node(); await pause.tick(short); } } } yield canvas.node(); await pause.tick(5000); } }36:Tdda,source_group_hierarchy = { const prob = random_problem(100); const height = 4; const root = build_hierarchy(prob, 5); const canvas = d3.select(svg``) .call(pause.install); const y = d3.scaleLinear() .domain([0, d3.max(solve(prob.sources, prob.points))]) .range([15, SMALL_RANGE.bottom - 5]) const field = canvas.append('g') .attr('stroke-opacity', .25) .datum(prob.sources) .call(FieldChart().y(y)); const hierarchy = canvas.append('g') const hierarchy_chart = HierarchyChart().y(y).height(height) const annotation = canvas.append('g'); function increment_soln(source, nodes, mult, duration) { const leaves = d3.merge(nodes.map(n => n.leaves())) leaves.forEach(n => { n.data.soln = n.data.soln.map((s, i) => s + mult*PARAMS.kernel(source, n.data.points[i]));}); hierarchy.call(hierarchy_chart.duration(duration).pulse_points().nodes(leaves)); hierarchy.call(hierarchy_chart); } const short = 200, long = 600; while (true) { let calcs = 0; function increment_annotation(count) { calcs += count; annotation.datum(`${calcs} calculations`).call(AnnotationChart());} root.leaves().forEach(l => l.data.soln.fill(0)); hierarchy .datum(root) .call(hierarchy_chart); const order = []; root.eachBefore(n => order.push(n)); for (let o = 0; o < order.length; o++) { const node = order[o]; const leaf_ids = node.leaves().map(l => l.data.id); const source_selection = hierarchy.selectAll('.sources') .filter(d => leaf_ids.includes(d.id)) if (node.height < height) { if (node.data.sources.length) { source_selection.each(d => {d.backup = [...d.sources]; d.sources.fill(node.data.center)}); hierarchy.datum(root).call(hierarchy_chart.duration(long)); yield canvas.node(); await pause.tick(long); const ixns = node.height < height-1? node.ixns : node.far; increment_soln(node.data.center, ixns, node.data.sources.length, long); source_selection.call(SourceChart().pulse().duration(long)) hierarchy.call(hierarchy_chart.duration(long).pulse_nodes().nodes([node])); increment_annotation(d3.sum(ixns.map(n => n.data.points.length))); yield canvas.node(); await pause.tick(long); source_selection.each(n => {n.sources = n.backup; delete n.backup; }); hierarchy.datum(root).call(hierarchy_chart.duration(long)); } else { hierarchy.call(hierarchy_chart.duration(long).pulse_nodes().nodes([node])); yield canvas.node(); await pause.tick(long); } yield canvas.node(); await pause.tick(long); } if (node.height == 0) { const sources = node.data.sources; for (let s = 0; s < sources.length; s++) { source_selection.call(SourceChart().pulse().duration(short).filter((_, ss) => ss == s)) increment_soln(sources[s], node.near, 1, short); increment_annotation(d3.sum(node.near.map(n => n.data.points.length))); yield canvas.node(); await pause.tick(short); } } } yield canvas.node(); await pause.tick(5000); } }37:T90a,source_point_group = { const uniform_sources = d3.randomUniform.source(seedrandom(44))(4.5, 5.5); const uniform_points = d3.randomUniform.source(seedrandom(44))(6.25, 7.25); const prob = ({sources: d3.range(5).map(uniform_sources), points: d3.range(5).map(uniform_points)}); const centered_sources = prob.sources.map(d => d3.mean(prob.sources)); const centered_points = prob.points.map(d => d3.mean(prob.points)); const canvas = d3.select(svg``) .call(pause.install); const y = d3.scaleLinear() .domain([0, 5]) .range([10, SMALL_RANGE.bottom-5]); const sources = canvas.append('g').attr('fill-opacity', .25); const points = canvas.append('g'); const annotation = canvas.append('g'); const field = canvas.append('g') .attr('stroke-opacity', .25) .datum(prob.sources) .call(FieldChart().y(y)) const timestep = 1000; while (true) { sources .datum(prob.sources) .call(SourceChart()) points .datum({points: prob.points, soln: prob.points.map(p => 0)}) .call(PointChart().y(y)) annotation .datum(`0 calculations`) .call(AnnotationChart()) yield canvas.node(); await pause.tick(timestep); sources .datum(centered_sources) .call(SourceChart().duration(timestep)) points .datum({points: centered_points, soln: prob.points.map(p => 0)}) .call(PointChart().y(y).duration(timestep)) yield canvas.node(); await pause.tick(timestep); sources .call(SourceChart().pulse().duration(timestep)) points .datum({points: centered_points, soln: solve(centered_sources, centered_points)}) .call(PointChart().y(y).duration(timestep)) .call(PointChart().pulse().duration(timestep)); annotation .datum(`1 calculations`) .call(AnnotationChart()) yield canvas.node(); await pause.tick(timestep); points .datum({points: prob.points, soln: solve(centered_sources, centered_points)}) .call(PointChart().y(y).duration(timestep)) yield canvas.node(); await pause.tick(5000); } }38:Tf89,groups = { const prob = random_problem(100); const height = 1; const root = build_hierarchy(prob, 5); const canvas = d3.select(svg``) .call(pause.install); const y = d3.scaleLinear() .domain([0, d3.max(solve(prob.sources, prob.points))]) .range([15, SMALL_RANGE.bottom - 5]) const field = canvas.append('g') .attr('stroke-opacity', .25) .datum(prob.sources) .call(FieldChart().y(y)); const hierarchy = canvas.append('g') const hierarchy_chart = HierarchyChart().y(y).height(height) const annotation = canvas.append('g'); function increment_soln(source, nodes, mult, duration) { const leaves = d3.merge(nodes.map(n => n.leaves())) leaves.forEach(n => { n.data.soln = n.data.soln.map((s, i) => s + mult*PARAMS.kernel(source, n.data.points[i]));}); hierarchy.call(hierarchy_chart.duration(duration).pulse_points().nodes(leaves)); hierarchy.call(hierarchy_chart); } const short = 200, long = 750; while (true) { let calcs = 0; function increment_annotation(count) { calcs += count; annotation.datum(`${calcs} calculations`).call(AnnotationChart());} root.leaves().forEach(l => l.data.soln.fill(0)); hierarchy .datum(root) .call(hierarchy_chart); const order = []; root.eachBefore(n => order.push(n)); for (let o = 0; o < order.length; o++) { const node = order[o]; const source_leaf_ids = node.leaves().map(l => l.data.id); const source_selection = hierarchy.selectAll('.sources') .filter(d => source_leaf_ids.includes(d.id)) if (node.height < height) { if (node.data.sources.length) { source_selection.each(d => {d.source_backup = [...d.sources]; d.sources.fill(node.data.center)}); const ixns = node.height < height-1? node.ixns : node.far; ixns.forEach(i => i.leaves().forEach(l => { l.data.points_backup = [...l.data.points]; l.data.points.fill(i.data.center);})); hierarchy.datum(root).call(hierarchy_chart.duration(long)); yield canvas.node(); await pause.tick(long); increment_soln(node.data.center, ixns, node.data.sources.length, long); source_selection.call(SourceChart().pulse().duration(long)) hierarchy.call(hierarchy_chart.duration(long).pulse_nodes().color(COLORS.sources).nodes([node])); hierarchy.call(hierarchy_chart.duration(long).pulse_nodes().color(COLORS.points).nodes(ixns)); increment_annotation(ixns.length); yield canvas.node(); await pause.tick(long); source_selection.each(n => {n.sources = n.source_backup; delete n.source_backup; }); ixns.forEach(i => i.leaves().forEach(l => { l.data.points = l.data.points_backup; })) hierarchy.datum(root).call(hierarchy_chart.duration(long)); } else { hierarchy.call(hierarchy_chart.duration(long).pulse_nodes().nodes([node])); yield canvas.node(); await pause.tick(long); } yield canvas.node(); await pause.tick(long); } if (node.height == 0) { const sources = node.data.sources; for (let s = 0; s < sources.length; s++) { source_selection.call(SourceChart().pulse().duration(short).filter((_, ss) => ss == s)) increment_soln(sources[s], node.near, 1, short); increment_annotation(d3.sum(node.near.map(n => n.data.points.length))); yield canvas.node(); await pause.tick(short); } } } yield canvas.node(); await pause.tick(5000); } }39:T1003,hierarchy = { const prob = random_problem(100); const height = 4; const root = build_hierarchy(prob, 5); const canvas = d3.select(svg``) .call(pause.install); const y = d3.scaleLinear() .domain([0, d3.max(solve(prob.sources, prob.points))]) .range([15, SMALL_RANGE.bottom - 5]) const combined = canvas.append('g') .attr('stroke-opacity', .25) .datum(prob.sources) .call(FieldChart().y(y)); const hierarchy = canvas.append('g') const hierarchy_chart = HierarchyChart().y(y).height(height) const annotation = canvas.append('g'); function increment_soln(source, nodes, mult, duration) { const leaves = d3.merge(nodes.map(n => n.leaves())) leaves.forEach(n => { n.data.soln = n.data.soln.map((s, i) => s + mult*PARAMS.kernel(source, n.data.points[i]));}); hierarchy.call(hierarchy_chart.duration(duration).pulse_points().nodes(leaves)); hierarchy.call(hierarchy_chart); } const short = 200, long = 750; while (true) { let calcs = 0; function increment_annotation(count) { calcs += count; annotation.datum(`${calcs} calculations`).call(AnnotationChart());} root.leaves().forEach(l => l.data.soln.fill(0)); hierarchy .datum(root) .call(hierarchy_chart); const order = []; root.eachBefore(n => order.push(n)); for (let o = 0; o < order.length; o++) { const node = order[o]; const source_leaf_ids = node.leaves().map(l => l.data.id); const source_selection = hierarchy.selectAll('.sources') .filter(d => source_leaf_ids.includes(d.id)) if (node.height < height) { const ixns = node.height < height-1? node.ixns : node.far; if (node.data.sources.length) { source_selection.each(d => {d.source_backup = [...d.sources]; d.sources.fill(node.data.center)}); ixns.forEach(i => i.leaves().forEach(l => { l.data.points_backup = [...l.data.points]; l.data.points.fill(i.data.center);})); hierarchy.datum(root).call(hierarchy_chart.duration(long)); yield canvas.node(); await pause.tick(long); increment_soln(node.data.center, ixns, node.data.sources.length, long); source_selection.call(SourceChart().pulse().duration(long)) hierarchy.call(hierarchy_chart.duration(long).pulse_nodes().color(COLORS.sources).nodes([node])); hierarchy.call(hierarchy_chart.duration(long).pulse_nodes().color(COLORS.points).nodes(ixns)); increment_annotation(ixns.length); yield canvas.node(); await pause.tick(long); source_selection.each(n => {n.sources = n.source_backup; delete n.source_backup; }); ixns.forEach(i => i.leaves().forEach(l => { l.data.points = l.data.points_backup; })) hierarchy.datum(root).call(hierarchy_chart.duration(long)); } else { hierarchy.call(hierarchy_chart.duration(long).pulse_nodes().nodes([node])); hierarchy.call(hierarchy_chart.duration(long).pulse_nodes().color(COLORS.points).nodes(ixns)) yield canvas.node(); await pause.tick(long); } yield canvas.node(); await pause.tick(long); } if (node.height == 0) { const sources = node.data.sources; for (let s = 0; s < sources.length; s++) { source_selection.call(SourceChart().pulse().duration(short).filter((_, ss) => ss == s)) increment_soln(sources[s], node.near, 1, short); increment_annotation(d3.sum(node.near.map(n => n.data.points.length))); yield canvas.node(); await pause.tick(short); } } } yield canvas.node(); await pause.tick(5000); } }3a:T4b3,pause = { var paused = false; const toggle = () => { paused = !paused; if (paused) { d3.selectAll('.pause').attr('visibility', 'hidden'); d3.selectAll('.play').attr('visibility', 'visible'); } else { d3.selectAll('.pause').attr('visibility', 'visible'); d3.selectAll('.play').attr('visibility', 'hidden'); } } const funcs = ({}); funcs.install = canvas => { canvas.on('click', toggle); canvas .append(() => { const pause_button = svg` ` const play_button = svg` ` return svg` ${pause_button} ${play_button}`}) }; funcs.tick = async function(timestep=0) { if (timestep) { await Promises.tick(timestep); } while (paused) { await Promises.tick(10); } }; return funcs; } 3b:T97d,function build_hierarchy(prob, depth) { const root = { sources: prob.sources, points: prob.points, left: 0, right: PARAMS.W, center: PARAMS.W/2, id: 0} var leaves = [root]; for (let l=0; l < depth; l++) { let new_leaves = []; leaves.forEach(node => { const is_left = x => (x < node.center); const left_child = { sources: node.sources.filter(is_left), points: node.points.filter(is_left), left: node.left, right: node.center, center: (node.left + node.center)/2, id: 2*node.id+1,}; const is_right = x => (x >= node.center); const right_child = { sources: node.sources.filter(is_right), points: node.points.filter(is_right), left: node.center, right: node.right, center: (node.center + node.right)/2, id: 2*node.id+2}; node.children = [left_child, right_child]; new_leaves = new_leaves.concat(node.children); }); leaves = new_leaves; } leaves.forEach(l => {l.soln = l.points.map(p => 0)}); const hierarchy = d3.hierarchy(root); for (let d=1; d <= depth; d++) { const layer = [] hierarchy.each(n => {if (n.depth == d) {layer.push(n);}}); // Add neighbourhood links layer[0].near = [layer[0], layer[1]]; layer[0].far = layer.slice(2, layer.length); for (let i=1; i < layer.length-1; i++) { layer[i].near = [layer[i-1], layer[i], layer[i+1]]; layer[i].far = [...layer.slice(0, i-1), ...layer.slice(i+2, layer.length)]; } layer[layer.length-1].near = [layer[layer.length-2], layer[layer.length-1]]; layer[layer.length-1].far = layer.slice(0, layer.length-2); // Add interaction sets if (d >= 2) { layer[0].ixns = layer[0].parent.near[1].children; layer[1].ixns = [layer[1].parent.near[1].children[1]]; for (let i=2; i < layer.length-2; i++) { const colleagues = layer[i].parent.near; if (i % 2 == 0) { layer[i].ixns = [colleagues[0].children[0], ...colleagues[2].children]; } else { layer[i].ixns = [...colleagues[0].children, colleagues[2].children[1]]; } } layer[layer.length-2].ixns = [layer[layer.length-2].parent.near[0].children[0]]; layer[layer.length-1].ixns = layer[layer.length-1].parent.near[0].children; } } // Add interaction sets return hierarchy; }3c:T9f1,HierarchyChart = function() { const eps = 2.5; let height = 2; let duration = 0; let y = Y; function my(selection) { selection.each(function(data) { const descendants = data.descendants().filter(n => n.height < height); d3.select(this) .selectAll('path') .data(descendants, n => n.id) .join('path') .attr('stroke', COLORS.cells) .attr('fill', 'none') .attr('stroke-width', '1') .attr('d', d => { const l = X(d.data.left) + eps; const r = X(d.data.right) - eps; const t = -10*d.height-5; const b = -10*d.height; return d3.line()([[l, b], [l, t], [r, t], [r, b]])}); d3.select(this) .selectAll('.sources') .data(data.leaves().map(n => n.data), n => n.id) .join('g') .classed('sources', true) .attr('fill-opacity', .5) .call(SourceChart().duration(duration)) d3.select(this) .selectAll('.points') .data(data.leaves().map(n => n.data), n => n.id) .join('g') .classed('points', true) .call(PointChart().y(y).duration(duration)) }); } my.height = value => { height = value; return my; }; my.duration = value => { duration = value; return my; }; my.y = value => { y = value; return my; }; my.pulse_nodes = function() { let nodes = []; let color = COLORS.sources; function my(selection) { const node_ids = nodes.map(n => n.data.id); selection.each(function(data) { d3.select(this) .selectAll('path') .filter(d => node_ids.includes(d.data.id)) .call(c => c.transition('pulse').duration(duration/2).attr('stroke-width', 4).attr('stroke', color) .transition('pulse').duration(duration/2).attr('stroke-width', 1).attr('stroke', COLORS.cells)); }); } my.nodes = value => {nodes = value; return my; }; my.color = value => {color = value; return my; }; return my; } my.pulse_points = function() { let nodes = []; function my(selection) { const leaf_ids = d3.merge(nodes.map(n => n.leaves().map(l => l.data.id))); selection.each(function(data) { d3.select(this) .selectAll('.points') .filter(d => leaf_ids.includes(d.id)) .call(PointChart().pulse().duration(duration)) }); } my.nodes = value => {nodes = value; return my; }; return my; } return my; }3d:T408,PointChart = function () { let y = Y, duration = 0; function my(selection) { selection.each(function(data) { const pairs = d3.zip(data.points, data.soln).map(ps => ({p: ps[0], s: ps[1]})); d3.select(this) .selectAll('circle') .data(pairs) .join( enter => enter.append('circle') .attr('fill', COLORS.points) .attr('cx', d => X(d.p)) .attr('cy', y(0)) .attr('r', 0) .call(c => c .transition().duration(duration).attr('cy', d => y(d.s)).attr('r', 1)), update => update.call(c => c .transition().duration(duration).attr('cy', d => y(d.s)).attr('cx', d=> X(d.p)))); }); } my.y = (value,) => {y = value; return my; } my.duration = (value,) => {duration = value; return my; } my.pulse = () => PulseChart().small(1).large(1.5); return my; }3e:[] 2d:{"title":"Multipole Methods for the Masses","cells":[{"id":170,"value":"md`# Multipole Methods for the Masses`","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"source_field = { \n const prob = random_problem(1);\n prob.sources = [5];\n \n const canvas = d3.select(html``);\n\n canvas\n .append('g')\n .datum(prob.sources)\n .call(SourceChart());\n \n canvas\n .append('g')\n .datum(prob.sources)\n .call(FieldChart())\n \n return canvas.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":864,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":989,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1302,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":750,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1439,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1671,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1771,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":2112,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":2140,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":2180,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":2212,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"md`# Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"d3 = require(\"d3@5\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"seedrandom = require(\"seedrandom\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"PARAMS = ({\n width: 640,\n W: 10,\n T: 100,\n kernel: (a, b) => 1/(1 + ((a-b)*2)**2)});","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"SMALL_RANGE = ({\n top: 0,\n bottom: 50});","pinned":false,"hidden":false,"mode":"ojs"},{"id":584,"value":"// Nabbed from https://github.com/d3/d3-scale-chromatic/blob/master/src/categorical/category10.js\nCOLORS = ({\n sources: d3.color('#ff7f0e'),\n points: d3.color('#1f77b4'),\n field: d3.color('#2ca02c'),\n cells: d3.color('#9467bd')})","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"X = d3.scaleLinear()\n .domain([0, PARAMS.W])\n .range([5, PARAMS.width-5]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":940,"value":"Y = d3.scaleLinear()\n .domain([0, 1])\n .range([SMALL_RANGE.top + 10, SMALL_RANGE.bottom - 5]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":2696,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"random_problem = (S=PARAMS.S, T=PARAMS.T, seed=\"44\") => {\n const uniform = d3.randomUniform.source(seedrandom(seed))(.5, PARAMS.W-.5);\n return ({\n sources: d3.range(0, S).map(() => uniform()).sort(),\n points: d3.range(0, PARAMS.W, PARAMS.W/T)\n });};","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"solve = (sources, points) => points.map(\n point => d3.sum(sources.map(\n source => PARAMS.kernel(source, point))));","pinned":false,"hidden":false,"mode":"ojs"},{"id":1805,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":1773,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":888,"value":"PulseChart = function() {\n let duration = 0, small = 1, large = 2;\n let tag = 'circle', attr = 'r';\n let filter = () => true;\n \n function my(selection) {\n selection.each(function(data) {\n d3.select(this)\n .selectAll(tag)\n .filter(filter)\n .call(c => c\n .transition('pulse').duration(duration/2).attr(attr, large)\n .transition('pulse').duration(duration/2).attr(attr, small));\n });\n }\n\n my.duration = (value,) => {duration = value; return my; };\n my.large = (value,) => {large = value; return my; };\n my.small = (value,) => {small = value; return my; };\n my.tag = (value,) => {tag = value; return my; };\n my.attr = (value,) => {attr = value; return my; };\n my.filter = (value,) => {filter = value; return my; };\n\n return my;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":819,"value":"SourceChart = function() {\n var duration = 0;\n \n function my(selection) {\n selection.each(function(data) {\n if (!Array.isArray(data)) {\n data = data.sources;\n }\n\n d3.select(this)\n .selectAll('circle')\n .data(data)\n .join(\n enter => enter\n .append('circle')\n .attr('fill', COLORS.sources)\n .attr('cy', 5)\n .attr('r', 2)\n .attr('cx', d => X(d)),\n update => update\n .call(c => c.transition().duration(duration).attr('cx', d => X(d))));\n \n });\n }\n \n my.duration = (value,) => { duration = value; return my; };\n my.pulse = () => PulseChart().small(2).large(4);\n \n return my;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":897,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":842,"value":"FieldChart = function () {\n let y = Y;\n \n function my(selection) {\n selection.each(function (data) {\n d3.select(this)\n .selectAll('path')\n .data([data])\n .join('path')\n .attr('fill', 'none')\n .attr('stroke', COLORS.points)\n .attr('stroke-width', .5)\n .call(c => c.transition().duration(600).attr('d', d => {\n const points = d3.range(0, PARAMS.W, PARAMS.W/100);\n const soln = solve(data, points);\n return d3.line()\n .x(d => X(points[d]))\n .y(d => y(soln[d]))\n (d3.range(points.length))}));\n })\n }\n \n my.y = (value,) => {y = value; return my; }\n \n return my;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1033,"value":"AnnotationChart = function() {\n \n function my(selection) {\n selection.each(function (data) {\n d3.select(this)\n .selectAll('text')\n .data([data])\n .join('text')\n .attr('font-size', 'xx-small')\n .attr('text-anchor', 'end')\n .attr('x', PARAMS.width - 10)\n .attr('y', SMALL_RANGE.bottom - 1)\n .text(d => d);\n });\n }\n \n return my;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1505,"value":"CellChart = function() {\n let gap = 2;\n \n function my(selection) {\n selection.each(function(data, height) {\n const n_groups = data.group_idxs.length;\n const half = .5*PARAMS.W/n_groups;\n const centers = d3.range(half, PARAMS.W, 2*half);\n \n const t = -10*height - 5;\n const b = -10*height;\n \n d3.select(this)\n .selectAll('path')\n .data(data.group_idxs)\n .join('path')\n .attr('stroke', COLORS.cells)\n .attr('fill', 'none')\n .attr('stroke-width', '2')\n .attr('d', (d, i) => { \n const left = X(centers[i] - half) + gap;\n const right = X(centers[i] + half) - gap;\n return d3.line()([[left, b], [left, t], [right, t], [right, b]])});\n });\n }\n \n my.pulse = () => PulseChart().tag('path').attr('stroke-width').small(2).large(4);\n \n return my;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3e","stdlib":"1","titling":"auto"}