30:T5a7,pos_svg = { let width = 400 let height = 400 let svg = d3.select(DOM.svg(width, height)) let margin = { top: 20, right: 20, bottom: 30, left: 50, } let w = width - margin.left - margin.right, h = height - margin.top - margin.bottom let xScale = d3.scaleLinear().domain([-5, 5]).rangeRound([0, w]) let yScale = d3.scaleLinear().domain([0, 1]).rangeRound([h, 0]) let xAxis = d3.axisTop(xScale).tickFormat("").tickSize(0) let yAxis = d3.axisRight(yScale) let g = svg.append("g").attr("transform", "translate(" + margin.left + ", " + margin.top + ")") g.append("g").call(xAxis).attr("transform", "translate(0 ," + h + ")") // svg.append("g").call(yAxis) let plot = g.append("path").attr("id", "pos_plot") plot.datum(domain) .attr("d", d3.line() .x((d, i) => xScale(domain[i])) .y((d, i) => yScale(gaussian(domain[i], mu, sigma)))) .attr("stroke-width", 2) .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("shape-rendering", "auto") g.append("circle") .attr("fill", "palevioletred") .attr("cx", xScale(mu)) .attr("cy", yScale(gaussian(mu, mu, sigma))) .attr("r", 10) g.append("text") .attr("x", xScale(mu) - 70) .attr("y", yScale(gaussian(mu, mu, sigma)) - 20) .text("most likely position") return svg.node() }31:T5ae,mom_plot = { let width = 400 let height = 400 let svg = d3.select(DOM.svg(width, height)) let margin = { top: 20, right: 20, bottom: 30, left: 50, } let w = width - margin.left - margin.right, h = height - margin.top - margin.bottom let xScale = d3.scaleLinear().domain([-5, 5]).rangeRound([0, w]) let yScale = d3.scaleLinear().domain([0, 1]).rangeRound([h, 0]) let xAxis = d3.axisTop(xScale).tickFormat("").tickSize(0) let yAxis = d3.axisRight(yScale) let g = svg.append("g").attr("transform", "translate(" + margin.left + ", " + margin.top + ")") g.append("g").call(xAxis).attr("transform", "translate(0 ," + h + ")") // svg.append("g").call(yAxis) let plot = g.append("path").attr("id", "pos_plot") plot.datum(domain) .attr("d", d3.line() .x((d, i) => xScale(domain[i])) .y((d, i) => yScale(gaussian(domain[i], mu, 1/sigma)))) .attr("stroke-width", 2) .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("shape-rendering", "auto") g.append("circle") .attr("fill", "palevioletred") .attr("cx", xScale(mu)) .attr("cy", yScale(gaussian(mu, mu, 1/sigma))) .attr("r", 10) g.append("text") .attr("x", xScale(mu) - 80) .attr("y", yScale(gaussian(mu, mu, 1/sigma)) - 20) .text("most likely momentum") return svg.node() }32:T641,function interact(config) { let {form, type = "text", attributes = {}, action, getValue, title, description, format, submit, options} = config; if (!form) form = html``; const input = form.input; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) input.setAttribute(key, val); }); if (submit) form.append(html``); form.append(html``); if (title) form.prepend(html`

${title}

`); if (description) form.append(html`

${description}

`); if (format) format = d3format.format(format); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = (e) => { e && e.preventDefault(); const value = getValue ? getValue(input) : input.value; if (form.output) form.output.value = format ? format(value) : value; form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input")); }; if (verb !== "oninput") input.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = (e) => e && e.preventDefault(); form[verb](); } return form; }33:[] 2e:{"title":"Complementarity","cells":[{"id":0,"value":"md`# Complementarity`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`\nPosition and momentum are _complementary_ quantities (recall the seesaw image from earlier). Complementary quantities (or variables, or properties) are bound together, by the uncertainty principle, in a rigid give and take. This has a technical, mathematical origin that you can [learn about elsewhere](https://en.wikipedia.org/wiki/Fourier_transform), but the idea is pretty simple. The interactive below lets see how the momentum wavefunction changes when you adjust the uncertainty in position.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"viewof mu = slider({min: -3, max: 3, value: 0, step: 0.1, title: \"Most likely position\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"viewof sigma = slider({min: .44, max: 2.4, value: .6, step: 0.01, title: \"Uncertainty in position\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"min_uncertainty = {}","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"dft = () => {}","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"gaussian = (x, mu=0, sigma=1) => {\n return Math.exp(-(x-mu)*(x-mu)/(2*sigma*sigma))/Math.sqrt(2*Math.PI*sigma*sigma)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"domain = d3.range(-5, 5, precision)","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"precision = 1/1000","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"slider = function slider(config = {}) {\n let {value, min = 0, max = 1, step = \"any\", precision = 2, title, description, format, submit} = config;\n if (typeof config == \"number\") value = config;\n if (value == null) value = (max + min) / 2;\n precision = Math.pow(10, precision);\n return interact({\n type: \"range\", title, description, submit, format,\n attributes: {min, max, step, value},\n getValue: input => Math.round(input.valueAsNumber * precision) / precision\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"d3format = require('d3-format')","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}