31:Tec8,form = { let input = _.cloneDeep(examples.get('spiral_in')); let form = html` `; let example = true; console.log(['example is', example]); let d3form = d3.select(form); d3form .select('#xp') .property('value', input.xp) .on('input', function() { example = false; console.log(['example is', example]); }); d3form.select('#yp').property('value', input.yp); d3form.select('#xmin').property('value', input.xmin); d3form.select('#xmax').property('value', input.xmax); d3form.select('#ymin').property('value', input.ymin); d3form.select('#ymax').property('value', input.ymax); d3form .select('select#example_menu') .property('value', 'spiral_in') .on('change', function() { example = true; let value = d3.select(this).property('value'); input = _.cloneDeep(examples.get(value)); d3form.select('#xp').property('value', input.xp); d3form.select('#yp').property('value', input.yp); d3form.select('#xmin').property('value', input.xmin); d3form.select('#xmax').property('value', input.xmax); d3form.select('#ymin').property('value', input.ymin); d3form.select('#ymax').property('value', input.ymax); d3.select(interactive_vector_plot) .selectAll('svg') .remove(); d3.select(interactive_vector_plot).append(() => make_plot(input)); }); d3form.select('button#plot').on('click', function() { if (!example) { d3form.select('select#example_menu').property('value', 'none'); } input.xp = d3form.select('#xp').property('value'); input.yp = d3form.select('#yp').property('value'); input.xmin = parseFloat(d3form.select('#xmin').property('value')); input.xmax = parseFloat(d3form.select('#xmax').property('value')); input.ymin = parseFloat(d3form.select('#ymin').property('value')); input.ymax = parseFloat(d3form.select('#ymax').property('value')); d3.select(interactive_vector_plot) .selectAll('svg') .remove(); d3.select(interactive_vector_plot).append(() => make_plot(input)); }); return form; }32:T1028,function make_plot(input) { let F, xp_parsed, xp, yp_parsed, yp; d3.select(parse_warning).html(''); try { try { xp_parsed = math.compile(input.xp); xp = (x, y) => xp_parsed.evaluate({ x: x, y: y }); yp_parsed = math.compile(input.yp); yp = (x, y) => yp_parsed.evaluate({ x: x, y: y }); F = ([x, y]) => [xp(x, y), yp(x, y)]; } catch (e1) { d3.select(parse_warning).html( 'Parse error' ); F = () => [0, 0]; } F([1, 2]); } catch (e2) { F = () => [0, 0]; let message; if (e2.toString().indexOf('not a function') != -1) { message = 'Parse error, consider using explicit multiplication - for example, write y*(t+1), instead of y(t+1).'; } else { message = e2; } d3.select(parse_warning).html( `${message}` ); F = () => [0, 0]; } let xmin = input.xmin; let xmax = input.xmax; let ymin = input.ymin; let ymax = input.ymax; let aspect = (ymax - ymin) / (xmax - xmin); let w = 0.9 * width; let h = aspect * w; let pad = 35; let xScale = d3 .scaleLinear() .domain([xmin, xmax]) .range([pad, w - pad]); let yScale = d3 .scaleLinear() .domain([ymin, ymax]) .range([h - pad, pad]); let pts_to_path = d3 .line() .x(function(d) { return xScale(d[0]); }) .y(function(d) { return yScale(d[1]); }); let dx = (xmax - xmin) / 10; let dy = dx; let grid = d3 .range(ymin + dy, ymax, dy) .map(y => d3.range(xmin + dx, xmax, dx).map(x => [x, y])); grid = grid.reduce(function(accumulated, currentValue) { return accumulated.concat(currentValue); }, []); let svg = d3 .create('svg') .attr('width', w) .attr('height', h) .style('background-color', 'white'); 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 .selectAll('path') .data(grid) .join('path') .attr('d', d => pts_to_path([d, add(d, mul(0.1, F(d)))])) .style('stroke', 'black') .style('stroke-width', 0.8) .style('fill', 'none') .attr("marker-end", function(d) { let Fd = F(d); let mag2 = Fd[0] ** 2 + Fd[1] ** 2; if (mag2 > 0.01) { return "url(#arrowhead)"; } else { return null; } }); function draw_solution([x0, y0]) { let pts = rk4(F, [x0, y0], 0, -10, 10, 500); svg.selectAll('.solution').remove(); let solution_group = svg.append('g').attr('class', 'solution'); solution_group .append('path') .attr('class', 'solution') .attr('d', pts_to_path(pts)) .style('stroke', '#1f77b4') .style('stroke-width', 4) .style('fill', 'none'); solution_group .append('circle') .attr('cx', xScale(x0)) .attr('cy', yScale(y0)) .attr('r', 5) .attr('fill', '#2ca02c') .attr('stroke', 'black'); } // draw_solution(); let tracking = true; svg .on('mousemove', function(evt) { if (tracking) { let [i, j] = d3.pointer(evt); let [x0, y0] = [xScale.invert(i), yScale.invert(j)]; draw_solution([x0, y0]); } }) .on('mouseleave', function() { if (tracking) { svg.selectAll('.solution').remove(); } }) .on('click', function(evt) { if (tracking) { tracking = false; } else { tracking = true; let [i, j] = d3.pointer(evt); let [x0, y0] = [xScale.invert(i), yScale.invert(j)]; draw_solution([x0, y0]); } }); svg .append('g') .attr('transform', `translate(0, ${h - pad})`) .call(d3.axisBottom(xScale)); svg .append('g') .attr('transform', `translate(${pad})`) .call(d3.axisLeft(yScale)); return svg.node(); }33:[] 2f:{"title":"First order, autonomous systems of ODEs","cells":[{"id":371,"value":"md`# First order, autonomous systems of ODEs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"description = md`A first order, autonomous system of two ordinary differential equations has the form\n${tex.block`\n\\begin{aligned}\n x'(t) &= f_1(x,y) \\\\\n y'(t) &= f_2(x,y).\n\\end{aligned}`}\nThe easiest way to get a quick, qualitative understanding of the behavior of solutions of such a system is to draw the vector field \n${tex.block`\\vec{F}(x,y) = \\langle f_1(x,y),f_2(x,y) \\rangle,`}\nstart your pencil somewhere on that vector field and follow the arrows. This interactive illustrates that process.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"// A little spot to let us know if parsing fails.\nparse_warning = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"interactive_vector_plot = {\n let div = d3.create('div');\n div.append(() => make_plot(examples.get('spiral_in')));\n return div.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":84,"value":"examples = {\n let examples = new Map();\n examples.set('identity', {\n xp: 'x',\n yp: 'y',\n xmin: -2,\n xmax: 2,\n ymin: -2,\n ymax: 2\n });\n examples.set('harmonic', {\n xp: 'y',\n yp: '-x',\n xmin: -2,\n xmax: 2,\n ymin: -2,\n ymax: 2\n });\n examples.set('spiral_in', {\n xp: 'y-x/2',\n yp: '-x-y/2',\n xmin: -2,\n xmax: 2,\n ymin: -2,\n ymax: 2\n });\n examples.set('damped_pendulum', {\n xp: 'y',\n yp: '-sin(x)-y',\n xmin: -2,\n xmax: 2,\n ymin: -2,\n ymax: 2\n });\n examples.set('lotka-volterra', {\n xp: 'x-x*y',\n yp: '-y+x*y',\n xmin: -0.2,\n xmax: 3,\n ymin: -0.2,\n ymax: 3\n });\n examples.set('circle_limit', {\n xp: 'y+x*(1-x^2-y^2)',\n yp: '-x+y*(1-x^2-y^2)',\n xmin: -1.5,\n xmax: 1.5,\n ymin: -1.5,\n ymax: 1.5\n });\n return examples;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":326,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"import { rk4, add, mul } from '@mcmcclur/runge-kutta-for-systems-of-odes'","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"math = require('mathjs@7.6.0')","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"d3 = require('d3-selection@2', 'd3-scale@3', 'd3-shape@2', 'd3-axis@2', 'd3-array@2')","pinned":true,"hidden":false,"mode":"ojs"},{"id":355,"value":"_ = require('lodash')","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}