32:T60c,viewpoint_selector = { example; let div = d3.create('div'); let project2d_container = div.append('span').style('padding-right', '10px'); let project2d = project2d_container .append('input') .attr('type', 'radio') .attr('name', 'projection') .attr('id', 'twoD') .attr('value', 'twoD') .property('checked', true) .on('click', function() { d3.select(animated_solution) .select('#ortho_viewpoint') .attr('set_bind', 'true'); d3.select(animated_solution) .select('transform') .transition() .duration(750) .attr('scale', '1,1,0'); d3.select(animated_solution) .select('div.overlay') .style('pointer-events', 'auto'); }); project2d_container .append('label') .attr('for', 'twoD') .text('2D'); let project3d_container = div.append('span'); let project3d = project3d_container .append('input') .attr('type', 'radio') .attr('name', 'projection') .attr('id', 'threeD') .attr('value', 'threeD') .on('click', function() { d3.select(animated_solution) .select('#classic_viewpoint') .attr('set_bind', 'true'); d3.select(animated_solution) .select('transform') .transition() .duration(750) .attr('scale', '1,1,1'); d3.select(animated_solution) .select('div.overlay') .style('pointer-events', 'none'); }); project3d_container .append('label') .attr('for', 'threeD') .text('3D'); return div.node(); }33:T833,md`From the mathematical perspective, the study of heat flow is one of the major topics of partial differential equations. The basic idea of how we can specify a heat flow problem and how we might expect the solution to behave based on physical intuition is relatively simple, though. This demo provides several illustrations of statements of heat flow problems together with illustrations of their resulting flows. The hope is to build intuition and provide motivation to tackle the mathematics. ## Stating a heat flow problem Let's first be clear about how one might state a heat flow problem. We begin with a bounded region ${tex`R`} in the plane; we'll denote it's boundary by ${tex`\partial R`}. There is literally a huge variety of possibilities. A rectangle with a hole might look like so: ${await FileAttachment("rect_with_hole.svg").image()} Now, for any point ${tex`(x,y)`} in the region and for any time ${tex`t`}, let's suppose the temperature at that point and time is denoted by ${tex`u(x,y,t)`}. We'll suppose that we know the temperature throughout the region at time ${tex`t=0`}; that is, we know ${tex`u(x,y,0)`} for all ${tex`(x,y)`} in ${tex`R`}. We'll also suppose that we know the temperature on the boundary at all points in time; that is, we know ${tex`u(x,y,t)`} for all ${tex`(x,y)`} on ${tex`\partial R`}. The fundamental question is - can we, from the given boundary and initial conditions, deduce the value of ${tex`u(x,y,t)`} for all ${tex`(x,y)`} in ${tex`R`} and for all time ${tex`t > 0`}? To visualize what the answer to this question might look like, choose an example from the **Example** menu below. Some expository text should appear to describe the situation. Hit the "start" button to start the heat flow or use the slider to control it. You can view the heat distribution as a shaded, two-dimensional contour plot or as a three-dimensional graph. When in 2D mode, you can hover over the image to get values. The 3D mode is generated by X3Dom so you have all the [interactions it provides](https://www.x3dom.org/documentation/interaction/). `34:T69d,md`## The mathematical description of the problem For those studying partial differential equations, the mathematical statement of problems like the ones illustrated here look like so: ${tex.block`\begin{aligned} &u_t = D\Delta u + f & \text{ for } (x,y)\in R, t>0 \\ &u(x,y,t) = u_b(x,y) & \text{ for } (x,y)\in \partial R, t>0 \\ &u(x,y,0) = u_0(x,y) & \text{ for } (x,y)\in R. \end{aligned} `} The solution of this set of equations is the function ${tex`u(x,y,t)`} that describes the heat flow. The first equation ${tex`u_t = D\,\Delta u+f`} is called the *2D heat equation with source*. The parameter ${tex`D`} is a constant that indicates how diffusive the material is; the larger the value of ${tex`D`}, the faster heat conducts through the region. The function ${tex`f`} represents an external heat source, as in the *heated annulus* example. The ${tex`\Delta u`} represents the Laplacian: ${tex.block`\Delta u = u_{xx} + u_{yy}.`} The second equation is the portion that specifies the boundary condition; it says, quite simply, that we'd like to hold the temperature on the boundary to some specific temperature. This type of boundary condition is called a *Dirichlet condition*. Alternatively, we might specify how the heat flows across the boundary; that is we might specify the rate of change of ${tex`u`} at a point on the boundary in the direction of a vector ${tex`\vec{n}`} that's normal to the boundary at the point. Mathematically, we'd specify the value of ${tex`\nabla u\cdot \vec{n}`}. If, for example, we specify that we want ${tex`\nabla u\cdot \vec{n} = 0`}, when we are indicating that the corresponding portion of the boundary is insulated. `35:T138f,initial_setup = { if (solution_data && solution_data.success) { let container = d3.select(animated_solution); container.selectAll('.solution').remove(); let div = container .append('div') .attr('class', 'solution') .style('width', scales.w.toString() + 'px') .style('height', scales.h.toString() + 'px') .style('position', 'relative'); let scene = div .append('x3d') // .attr('disableKeys', 'true') .attr('width', scales.w.toString() + 'px') .attr('height', scales.h.toString() + 'px') .append('scene'); scene .append('orthoviewpoint') .attr('id', 'ortho_viewpoint') .attr( 'position', `${scales.xcenter} ${scales.ycenter} ${2 * scales.range}` ) .attr('centerOfRotation', `${scales.xcenter} ${scales.ycenter} 0`) .attr( 'fieldOfView', `[${scales.xmin}, ${scales.ymin}, ${scales.xmax}, ${scales.ymax}]` ); scene .append('viewpoint') .attr('id', 'classic_viewpoint') .attr( 'position', `${scales.xcenter + 1.8 * scales.range * 0.894427} ${ scales.ycenter } ${1.8 * scales.range * 0.447214}` ) .attr('orientation', '0.465341 0.465341 0.752938 1.85084') .attr('centerOfRotation', `${scales.xcenter} ${scales.ycenter} 0`); let coord_string = solution_data.coords .map((p, i) => [p[0], p[1], solution_data.value_series[0][i]]) .toString() .replace(/,/g, ' '); let index_string = solution_data.cells .map(t => [t[0], t[1], t[2], -1]) .toString() .replace(/,/g, ' '); let color_string = solution_data.value_series[0] .map(x => rgb_to_r_g_b(d3.interpolateRdBu(scales.v_scale(x)))) .toString() .replace(/,/g, ' '); let graph = scene.append('transform').attr('scale', '1,1,0'); let faces = graph.append('shape'); let ifs = faces .append('indexedFaceSet') .attr('coordIndex', index_string) .attr('solid', false); ifs.append('Coordinate').attr('point', coord_string); ifs.append('Color').attr('color', color_string); let dv = (scales.max_value - scales.min_value) / 8; let segments = d3 .range(scales.min_value + dv / 2, scales.max_value, dv) .map(z => solution_data.cells .map(t => build_contours(t, z, 0, solution_data)) .filter(x => x != undefined) ) .flat(2); graph.append(() => create_indexedLineSet(segments)); let coordinate_overlay = div .append('div') .attr('class', 'overlay') .style('width', scales.w.toString() + 'px') .style('height', scales.h.toString() + 'px') .style('position', 'absolute') .style('top', '0px') .style('left', '0px'); let svg = coordinate_overlay .append('svg') .attr('id', 'coordinate_overlay') .attr('width', scales.w) .attr('height', scales.h); let hline = svg .append('line') .attr('id', 'hline') .attr('x1', 0) .attr('x2', scales.w) .attr('y1', 0) .attr('y2', 0) .attr('stroke', 'black') .attr('opacity', 0); let vline = svg .append('line') .attr('id', 'vline') .attr('x1', 0) .attr('x2', 0) .attr('y1', 0) .attr('y2', scales.h) .attr('stroke', 'black') .attr('opacity', 0); coordinate_overlay .on('mouseenter', function() { let selected_viewpoint = d3 .select(viewpoint_selector) .selectAll('input') .nodes() .filter(function(o) { return o.checked; })[0].value; if (selected_viewpoint == 'twoD') { coordinate_overlay.selectAll('line').style('opacity', 1); } }) .on('pointermove', function(evt) { let anchor; let xtext; if (scales.w - evt.layerX < 200) { anchor = 'end'; xtext = -5; } else { anchor = 'start'; xtext = 5; } svg .select('#hline') .attr('y1', `${evt.layerY}px`) .attr('y2', `${evt.layerY}px`); svg .select('#vline') .attr('x1', `${evt.layerX}px`) .attr('x2', `${evt.layerX}px`); let x0 = scales.x_scale.invert(evt.layerX); let y0 = scales.y_scale.invert(evt.layerY); let u0 = u(x0, y0, 0); svg.selectAll('.value').remove(); if (typeof u0 == 'number') { svg .append('text') .attr('class', 'value') .style('font-style', 'italic') .attr('x', evt.layerX + xtext) .attr('y', evt.layerY - 5) .attr('text-anchor', anchor) .text(`u(${ff(x0)}, ${ff(y0)}) = ${ff(u0)}`); } }) .on('mouseleave', function() { coordinate_overlay.selectAll('line').style('opacity', 0); coordinate_overlay.selectAll('.value').remove(); }); x3dom.reload(); } }36:T85e,function set_solution_pic(k) { let face_coord_string = solution_data.coords .map((p, i) => [p[0], p[1], solution_data.value_series[k][i]]) .toString() .replace(/,/g, ' '); let color_string = solution_data.value_series[k] .map(x => rgb_to_r_g_b(d3.interpolateRdBu(scales.v_scale(x)))) .toString() .replace(/,/g, ' '); let ifs = d3.select(animated_solution).select('indexedFaceSet'); ifs.select('Color').attr('color', color_string); ifs.select('Coordinate').attr('point', face_coord_string); let dv = (scales.max_value - scales.min_value) / 8; let segments = d3 .range(scales.min_value + dv / 2, scales.max_value, dv) .map(z => solution_data.cells .map(t => build_contours(t, z, k, solution_data)) .filter(x => x != undefined) ) .flat(2); let index_string = path_list_to_indexString(segments); let contour_coord_string = path_list_to_coordString(segments); d3.select(animated_solution) .select('indexedLineSet') .attr('coordIndex', index_string) .select('Coordinate') .attr('point', contour_coord_string); let coordinate_overlay = d3.select(animated_solution).select('.overlay'); let svg = coordinate_overlay.select('svg'); coordinate_overlay.on('pointermove', function(evt) { let anchor; let xtext; if (scales.w - evt.layerX < 200) { anchor = 'end'; xtext = -5; } else { anchor = 'start'; xtext = 5; } svg .select('#hline') .attr('y1', `${evt.layerY}px`) .attr('y2', `${evt.layerY}px`); svg .select('#vline') .attr('x1', `${evt.layerX}px`) .attr('x2', `${evt.layerX}px`); let x0 = scales.x_scale.invert(evt.layerX); let y0 = scales.y_scale.invert(evt.layerY); let u0 = u(x0, y0, k); svg.selectAll('.value').remove(); if (typeof u0 == 'number') { svg .append('text') .attr('class', 'value') .style('font-style', 'italic') .attr('x', evt.layerX + xtext) .attr('y', evt.layerY - 5) .attr('text-anchor', anchor) .text(`u(${ff(x0)}, ${ff(y0)}) = ${ff(u0)}`); } }); }37:T57c,// An object containing scale data that's used by both // initial_setup and set_solution_pic scales = { if (solution_data && solution_data.success) { let xs = solution_data.coords.map((p) => p[0]); let xmin = d3.min(xs); let xmax = d3.max(xs); let xcenter = (xmin + xmax) / 2; let xrange = xmax - xmin; let ys = solution_data.coords.map((p) => p[1]); let ymin = d3.min(ys); let ymax = d3.max(ys); let ycenter = (ymin + ymax) / 2; let yrange = ymax - ymin; let aspect = yrange / xrange; let range = d3.max([xrange, yrange]); let w = width < 800 ? width : 800; // 0.8 * width; w = w - 24; let h = aspect * w; let x_scale = d3.scaleLinear().domain([xmin, xmax]).range([0, w]); let y_scale = d3.scaleLinear().domain([ymin, ymax]).range([h, 0]); let min_value = d3.min(solution_data.value_series.flat()); let max_value = d3.max(solution_data.value_series.flat()); let v_scale = d3.scaleLinear().domain([max_value, min_value]).range([0, 1]); return { w: w, h: h, xmin: xmin, xmax: xmax, xrange: xrange, xcenter: xcenter, ymin: ymin, ymax: ymax, yrange: yrange, ycenter: ycenter, range: range, aspect: aspect, min_value: min_value, max_value: max_value, x_scale: x_scale, y_scale: y_scale, v_scale: v_scale }; } }38:T461,// Precomputed solutions solution_data = { let solution_data; if (example == "bar") { solution_data = await FileAttachment("bar@8.json").json(); } else if (example == "bar_with_insulated_hole") { solution_data = await FileAttachment( "bar_with_insulated_hole@4.json" ).json(); } else if (example == "bar_with_fixed_hole") { solution_data = await FileAttachment("bar_with_fixed_hole.json").json(); } else if (example == "punctured_disk") { solution_data = await FileAttachment("punctured_disk@3.json").json(); } else if (example == "annulus") { solution_data = await FileAttachment("annulus@3.json").json(); } else if (example == "relaxed_pringle") { solution_data = await FileAttachment("relaxed_pringle@6.json").json(); } else if (example == "kidney") { solution_data = await FileAttachment("kidney_heat@10.json").json(); solution_data.coords = solution_data.coords.map(a => a.map(parseFloat)); solution_data.value_series = solution_data.value_series.map(a => a.map(parseFloat) ); // solution_data.success = true; } return solution_data; }39:Ta06,commentary = ({ bar: `In the simplest example, we have a metal bar whose inital temperature distribution is cold throughout. The sides of the bar (top and bottom in the picture) are insulated but the ends are exposed. At time zero, the right end is brought into contact with a hot stove while the left remains in contact with a block of ice - effectively fixing the temperatures at the endpoints. We expect the heat to conduct from right to left until a uniform steady state is reached. Since the there is very little lateral variation, this is an essentially one-dimensional problem. Hit the start button below to visualize the process.`, bar_with_insulated_hole: "This is a lot like the simple bar but there's an insulated hole obstructing the heat flow. In addition, the boundary condition on the right is non-constant, which is easy to see in 3D. We again expect to see the heat flow from right to left but we also expect the hole to influence the flow.", bar_with_fixed_hole: "This is a lot like the bar with insulated hole, but now the sides of the hole are fixed to an intermediate temperature. I guess the resulting flow should be similar to the last example but the hole ought to impeed the flow a bit more.", punctured_disk: "We start with a disk that is uniformly cool throughout. At time zero, we poke out the center with a red hot poker leaving it there so that the edge of the small hole is set to a high temperature. We expect the heat to diffuse radially.", relaxed_pringle: `In this example, we start with a disk whose temperature varies throughout and has a maximum near the middle. At time zero, we hold the boundary constant and allow the heat to diffuse. The heat diffuses away from the maximum and, in the steady state, the temperature at the center is something like the average.`, annulus: `We have an annulus whose inner radius is 1/5 the size of the outer radius. At time zero, the temperature is zero throughout and both circular boundaries have a temperature that is fixed to zero, perhaps by a refrigerator coil. In the absence of any external influence, the temperature should remain zero throughout but in this problem, we introduce an external heat source - perhaps a heat lamp. We expect the temperature to rise in the interior of the annulus while remaining cool on the boundary.`, kidney: "The boundaries of this final example are bound by the countours of a slightly complicated function. It's meant to illustrate the fact that we can do all this for some fairly complicated shapes." })3a:T7b7,// Code for the svg illustrating the rectangle with hole. // { // let w = width < 600 ? width : 600; // let h = width < 600 ? width / 3 : 200; // let svg = d3 // .create('svg') // .attr('width', w) // .attr('height', h); // svg // .append('path') // .attr('d', d3.line()([[0, 0], [w, 0], [w, h], [0, h]]) + 'Z') // .attr('stroke', 'black') // .attr('stroke-width', 3) // .attr('fill', '#eee'); // svg // .append('circle') // .attr('cx', (5 * w) / 6) // .attr('cy', h / 2) // .attr('r', 50) // .attr('stroke', 'black') // .attr('stroke-width', 3) // .attr('fill', '#fff'); // svg // .append('g') // .attr('transform', `translate(${w / 5} ${0.42 * h}) scale(2)`) // .append(() => MathJax.tex2svg(String.raw`R`).querySelector("svg")); // svg // .append('g') // .attr('transform', `translate(${0.68 * w} ${0.17 * h}) scale(1.2)`) // .append(() => MathJax.tex2svg(String.raw`\partial R`).querySelector("svg")); // let arrow_group = svg.append('g'); // arrow_group // from http://thenewcode.com/1068/Making-Arrows-in-SVG // .append('svg:defs') // .append('marker') // .attr('id', 'arrowhead') // .attr("markerWidth", 10) // .attr("markerHeight", 7) // .attr("refX", 0) // .attr("refY", 3.5) // .attr("orient", "auto") // .append('polygon') // .attr('points', '0 0, 10 3.5, 0 7'); // arrow_group // .append('path') // .attr('d', d => d3.line()([[0.69 * w, 0.16 * h], [0.66 * w, 0.04 * h]])) // .style('stroke', 'black') // .style('stroke-width', 0.8) // .style('fill', 'none') // .attr("marker-end", "url(#arrowhead)"); // arrow_group // .append('path') // .attr('d', d => d3.line()([[0.72 * w, 0.27 * h], [0.75 * w, 0.345 * h]])) // .style('stroke', 'black') // .style('stroke-width', 0.8) // .style('fill', 'none') // .attr("marker-end", "url(#arrowhead)"); // return svg.node(); // }3b:[{"id":"bf74114bed94945754a295fa6857c71c1e5b069a8c2eda401066ab06741edc37083cc6490a60309d0042e16a09109e67213d6e452548cd771a4190d321b04e24","href":"https://static.observableusercontent.com/files/bf74114bed94945754a295fa6857c71c1e5b069a8c2eda401066ab06741edc37083cc6490a60309d0042e16a09109e67213d6e452548cd771a4190d321b04e24","name":"bar@4.json","type":"application/json","lastModified":1612149435713.383,"size":1693288},{"id":"79392bedc598c054aa37cd70f9047e8b304c4f0bccd8532c62d1ec7aa08302396dd95903621785392aa850cba12d0681a9297a22da6f4f7f32ca10f65ef5b075","href":"https://static.observableusercontent.com/files/79392bedc598c054aa37cd70f9047e8b304c4f0bccd8532c62d1ec7aa08302396dd95903621785392aa850cba12d0681a9297a22da6f4f7f32ca10f65ef5b075","name":"annulus@3.json","type":"application/json","lastModified":1612120413542.919,"size":712699},{"id":"e2bf74adb808e4fb461ac67e1d261b703529102668fab848df3aabb12f350f2fd74193c05237262267f35c09aeadd380beae6e2e7875c86524e0c274f0a11c1a","href":"https://static.observableusercontent.com/files/e2bf74adb808e4fb461ac67e1d261b703529102668fab848df3aabb12f350f2fd74193c05237262267f35c09aeadd380beae6e2e7875c86524e0c274f0a11c1a","name":"punctured_disk@3.json","type":"application/json","lastModified":1612150039814.739,"size":1266925},{"id":"181154312e0c1e2f1ae494bc894109251a8ebd885a024b26bc99ffc77516614ff2c7d549dc7e6ee30f2fc26e41307eca17c016c4b4ad109ca830d02ea0e4494e","href":"https://static.observableusercontent.com/files/181154312e0c1e2f1ae494bc894109251a8ebd885a024b26bc99ffc77516614ff2c7d549dc7e6ee30f2fc26e41307eca17c016c4b4ad109ca830d02ea0e4494e","name":"bar_with_insulated_hole@4.json","type":"application/json","lastModified":1612190499662.168,"size":1329255},{"id":"a6bc3b88f4c55c22ba8dc697b0dbc3efc695dab963de9c4114b444e2630d67fdf9fdcb33ac05bac9f9cc72f766a107399d4012bbdb90a2123bf5d66cc483325f","href":"https://static.observableusercontent.com/files/a6bc3b88f4c55c22ba8dc697b0dbc3efc695dab963de9c4114b444e2630d67fdf9fdcb33ac05bac9f9cc72f766a107399d4012bbdb90a2123bf5d66cc483325f","name":"bar_with_fixed_hole.json","type":"application/json","lastModified":1612190885150.583,"size":1330789},{"id":"b89fe9720f9c40a6771d907cc4ff67cebb16d87829cf5a8966a6d778728b6357e8e81e53a7b91f7640c0e2ec9dc78f12e1c7e0357f9475689bd4d64beb1733da","href":"https://static.observableusercontent.com/files/b89fe9720f9c40a6771d907cc4ff67cebb16d87829cf5a8966a6d778728b6357e8e81e53a7b91f7640c0e2ec9dc78f12e1c7e0357f9475689bd4d64beb1733da","name":"relaxed_pringle@6.json","type":"application/json","lastModified":1612205402271.261,"size":2053625},{"id":"fae59627703bcde941e02b4ace5592d12ac240ad38b7056a0cece1e09721028af4b32af6ddbf8e3a238dd9383f9f4bb2743a4774bc5fbfc8f74272568d93a447","href":"https://static.observableusercontent.com/files/fae59627703bcde941e02b4ace5592d12ac240ad38b7056a0cece1e09721028af4b32af6ddbf8e3a238dd9383f9f4bb2743a4774bc5fbfc8f74272568d93a447","name":"kidney_heat@10.json","type":"application/json","lastModified":1612377466404.408,"size":2925061},{"id":"f1e8aad963f317c4e39202305ca27d34dc5b10e36f65cd1dd9b14f2716a56b859eb9339873cf2be2e238acb9977b2e696609029a3334203f44ca12cc38b729b0","href":"https://static.observableusercontent.com/files/f1e8aad963f317c4e39202305ca27d34dc5b10e36f65cd1dd9b14f2716a56b859eb9339873cf2be2e238acb9977b2e696609029a3334203f44ca12cc38b729b0","name":"bar@7.json","type":"application/json","lastModified":1613046332318.532,"size":1255458},{"id":"94b8a40accd669675bd4102bebe43d52a6e63e419c9f07e9200fe7ea712ac5982ef715341930befaf5aad20e00d75c3852daffcfd02cbe40f9f12cf99f9af775","href":"https://static.observableusercontent.com/files/94b8a40accd669675bd4102bebe43d52a6e63e419c9f07e9200fe7ea712ac5982ef715341930befaf5aad20e00d75c3852daffcfd02cbe40f9f12cf99f9af775","name":"bar@8.json","type":"application/json","lastModified":1613048002165.931,"size":1402926},{"id":"efbc957c61111c327c808618a1ad9e4a68f0963079f4b78a43a80768effeaec6eadaa84228ca6c17e6221988d3132210ab697129c6bc7d56c67431a317b3768b","href":"https://static.observableusercontent.com/files/efbc957c61111c327c808618a1ad9e4a68f0963079f4b78a43a80768effeaec6eadaa84228ca6c17e6221988d3132210ab697129c6bc7d56c67431a317b3768b","name":"rect_with_hole.svg","type":"image/svg+xml","lastModified":1613056875769.49,"size":4046}] 2f:{"title":"Illustrations of two-dimensonal heat flow","cells":[{"id":507,"value":"md`# Illustrations of two-dimensonal heat flow`","pinned":false,"hidden":false,"mode":"ojs"},{"id":659,"value":"md`Here's a quick look at how heat might flow through a two-dimensional region - a topic of tremendous importance in physics, engineering, and applied mathematics. Ulimately, the objective is to understand animations like the following examples:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":662,"value":"viewof example = {\n let example = select({\n title: \"Example\",\n options: [\n { label: \"Bar heated on right and cooled on left\", value: \"bar\" },\n {\n label: \"Bar with insulated hole\",\n value: \"bar_with_insulated_hole\"\n },\n {\n label: \"Bar with fixed hole\",\n value: \"bar_with_fixed_hole\"\n },\n {\n label: \"Disk punctured with hot poker\",\n value: \"punctured_disk\"\n },\n { label: \"Relaxed pringle\", value: \"relaxed_pringle\" },\n { label: \"Heated annulus\", value: \"annulus\" },\n {\n label: \"A more complicated shape\",\n value: \"kidney\"\n }\n ]\n });\n\n d3.select(example).on('change', function() {\n clearInterval(global.interval_id);\n });\n return example;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":666,"value":"info = md`${commentary[example]}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":670,"value":"animated_solution = {\n let div = d3.create('div');\n yield div.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":674,"value":"start_stop_button = {\n let start_stop = d3.create('button').text('start');\n let running = false;\n // let interval_id;\n start_stop.on('click', function() {\n let n = 0;\n if (running) {\n clearInterval(global.interval_id);\n start_stop.text('start');\n running = false;\n } else {\n global.interval_id = setInterval(function() {\n let d3slider = d3.select(slider);\n n = parseInt(d3slider.property('value'));\n if (n >= solution_data.value_series.length - 1) {\n clearInterval(global.interval_id);\n start_stop.text('start');\n d3slider.property('value', 0);\n running = false;\n } else {\n let v = (n + 1) % solution_data.value_series.length;\n set_solution_pic(v);\n d3slider.property('value', v);\n }\n }, 20);\n running = true;\n start_stop.text('stop');\n }\n });\n return start_stop.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":678,"value":"slider = {\n example;\n let slider = d3\n .create('input')\n .attr('type', 'range')\n .attr('min', 0)\n .attr('max', solution_data.value_series.length - 1)\n .attr('step', 1)\n .attr('value', 0)\n .style('width', '400px')\n .on('input', function() {\n let v = parseInt(d3.select(this).property('value'));\n set_solution_pic(v);\n });\n\n return slider.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":682,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":614,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":438,"value":"// Gotta turn off the animation from multiple spots.\nglobal = ({ interval_id: 0 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":312,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":107,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":110,"value":"$37","pinned":true,"hidden":false,"mode":"ojs"},{"id":217,"value":"// // The actual solution used to display the value on hover over 2D\nfunction u(x, y, k) {\n let cc = solution_data.coords;\n let T0 = solution_data.cells.filter(T =>\n barycentric_coords([x, y], [cc[T[0]], cc[T[1]], cc[T[2]]])\n );\n if (T0.length > 0) {\n T0 = T0[0];\n let bcc = barycentric_coords([x, y], [cc[T0[0]], cc[T0[1]], cc[T0[2]]]);\n let vv = solution_data.value_series[k];\n return vv[T0[0]] * bcc[0] + vv[T0[1]] * bcc[1] + vv[T0[2]] * bcc[2];\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":84,"value":"function build_contours([a, b, c], z, k, region_data) {\n let contours = [];\n let i1 = find_intersection(a, b, z, k, region_data);\n let i2 = find_intersection(b, c, z, k, region_data);\n let i3 = find_intersection(c, a, z, k, region_data);\n if (i1 && i2) {\n contours.push([i1, i2]);\n }\n if (i2 && i3) {\n contours.push([i2, i3]);\n }\n if (i3 && i1) {\n contours.push([i3, i1]);\n }\n if (contours.length > 0) {\n return contours;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":82,"value":"// a and b should be integers specifying a segment in cells.\n// z is a real number specifying a contour value.\n// Output should be a point on the segment where the contour crosses,\n// together with the solution value there.\nfunction find_intersection(a, b, z, k, region_data) {\n let fa = region_data.value_series[k][a];\n let fb = region_data.value_series[k][b];\n let ax, ay, bx, by;\n if ((fa < z && z < fb) || (fb < z && z < fa)) {\n let s = (z - fa) / (fb - fa);\n [ax, ay] = region_data.coords[a];\n [bx, by] = region_data.coords[b];\n let cx = ax + (bx - ax) * s;\n let cy = ay + (by - ay) * s;\n let cz = fa + (fb - fa) * s;\n return [cx, cy, cz];\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":80,"value":"function rgb_to_r_g_b(rgb_string) {\n return String(\n rgb_string\n .split('(')[1]\n .split(')')[0]\n .split(',')\n .map(x => String(parseFloat(x) / 255))\n ).replace(/,/g, ' ');\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":77,"value":"// Used to interpolate solution throughout a cell\nfunction barycentric_coords(p, T) {\n let x = p[0];\n let y = p[1];\n let x1 = T[0][0];\n let y1 = T[0][1];\n let x2 = T[1][0];\n let y2 = T[1][1];\n let x3 = T[2][0];\n let y3 = T[2][1];\n let B = (x1 - x3) * (y2 - y3) - (x2 - x3) * (y1 - y3);\n if (Math.abs(B) == 0) {\n return false;\n }\n let lambda1 = ((y2 - y3) * (x - x3) + (x3 - x2) * (y - y3)) / B;\n let lambda2 = ((y3 - y1) * (x - x3) + (x1 - x3) * (y - y3)) / B;\n let lambda3 = 1 - lambda1 - lambda2;\n\n if (lambda1 > 0 && lambda2 > 0 && lambda3 > 0) {\n return [lambda1, lambda2, lambda3];\n } else {\n return false;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"$38","pinned":true,"hidden":false,"mode":"ojs"},{"id":442,"value":"$39","pinned":true,"hidden":false,"mode":"ojs"},{"id":221,"value":"ff = d3.format('0.5f')","pinned":true,"hidden":false,"mode":"ojs"},{"id":494,"value":"// interactive_url = {\n// let params = new URLSearchParams(location.search);\n// let locale = params.get(\"locale\");\n// if (locale == 'web') {\n// return 'https://marksmath.org/visualization/HeatExplorer2D.html';\n// } else {\n// return 'https://observablehq.com/d/ee5f334ac049a573';\n// }\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":604,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs"},{"id":305,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"import { select } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":686,"value":"import { create_indexedLineSet } from '@mcmcclur/x3dom-primitives'","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"import {\n path_list_to_coordString,\n path_list_to_indexString\n} from 'ba6b3d20e94e294f'","pinned":true,"hidden":false,"mode":"ojs"},{"id":530,"value":"MathJax = require('https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js').catch(\n () => window['MathJax']\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":67,"value":"x3dom = require('x3dom').catch(() => window['x3dom'])","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"d3 = require('d3@6')","pinned":true,"hidden":false,"mode":"ojs"},{"id":287,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W3b","stdlib":"1","titling":"auto"}