31:T56e,chart = { const outerHeight = height + margin.top + margin.bottom; const outerWidth = width + margin.left + margin.right; const svg = d3.select(DOM.svg(outerWidth, outerHeight)); svg.append("clipPath") .attr("id", "chartAreaClip") .append("svg:rect") .attr("width", width) .attr("height", height); const chartCoordinates = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`); const chartArea = chartCoordinates.append("g") .attr("clip-path", "url(#chartAreaClip)"); // Background rect to capture clicks chartArea.append("rect") .attr("width", width) .attr("height", height) .attr("fill", "hsla(0, 0%, 0%, 0)") .attr("pointer-events", "all"); // Light cone chartArea.append("line") .datum([{x: 0.0, t: 0.0}, {x: 3.0, t: 3.0}]) .call(scaledLine) .attr("stroke", "yellow"); chartArea.append("g").call(primeCoordinateLines(0)); chartArea.append("g").call(primeCoordinateLines(1)); chartArea.call(pointCoordinates(pointA)); chartArea.on("click", e => { const [rangeX, rangeY] = d3.mouse(chartArea.node()); const domainPos = { x: scaleX.invert(rangeX), t: scaleY.invert(rangeY), }; mutable pointA = domainPos; }); chartCoordinates.append("g").call(axisX); chartCoordinates.append("g").call(axisY); return svg.node(); }32:Tdd5,md` ## About this diagram The black lines represent the coordinate system ${tex`(x, t)`} of the "stationary" observer along one space dimesion and one* time dimension. The blue lines are the coordinate system ${tex`(x', t')`} of the second observer moving at a velocity ${tex`v`} as measured by the first observer. We can also express this velocity as ${tex`\beta`}, a fraction of the speed of light ${tex`c`}. At the origin of the diagram, both observers are in the same place, and their time coordinates match: ${tex`x = x' = 0`} and ${tex`t = t' = 0`}. The red dot illustrates an event ${tex`a`}—something happening at a specific place in a specific time—seen by both observers. The two observers disagree about where and when this happens. The first observer sees the event at coordinates ${tex`(x_a, t_a)`}, while the second observer measures the event at ${tex`(x'_a, t'_a)`}. You can use the [Lorentz transformation](https://en.wikipedia.org/wiki/Lorentz_transformation) to find the relationship between the coordinates, but the dotted lines in the diagram also show how the two observers make different measurements. Although the observers see space and time differently, they always agree about some crucial aspects: * All light rays move along diagonal paths with the same angle. The yellow line illustrates the path of a light ray that started at the origin. (In two space dimensions, and factoring in the light moving in the other direction, this becomes a [light cone](https://en.wikipedia.org/wiki/Light_cone).) * Any event below the light cone in one reference frame is below the light cone in _all_ reference frames. The path between the origin and this point is called a _space-like_ line, because the space distance ${tex`\Delta x > 0`} no matter the observer, even if they may disagree on whether ${tex`\Delta t`} is ${tex`>`}, ${tex`=`}, or ${tex`< 0`}. * A similar rule holds true for points above the light cone, where the path between the origin and the point is called _time-like_. A point directly on the line is called _light-like_. * They can combine their space and time coordinates into a single _spacetime distance_ that will be the same to all observers: ${tex.block`\Delta \sigma = \sqrt{\Delta x^2 + \Delta y^2 + \Delta z^2 - c \Delta t^2}`} Notice the similarity to the normal Euclidian distance formula: ${tex.block`\Delta s = \sqrt{\Delta x^2 + \Delta y^2 + \Delta z^2}`} This spacetime distance or _proper distance_ ${tex`\Delta \sigma`} is exactly equal to the space distance measured by an observer where the events are simulaneous (${tex`\Delta t = 0`}). (See if you can illustrate this with the diagram.) Of course, if the path between the origin and the point is time-like, then there is no reference frame where ${tex`\Delta t = 0`}. In these cases, ${tex`\Delta \sigma`} will be imaginary, but we can define another real quantity called the _proper time interval_ by flipping the sign under the square root: ${tex.block`\Delta \tau = i \Delta \sigma = \sqrt{c \Delta t^2 - \Delta x^2 - \Delta y^2 - \Delta z^2}`} This distance is exactly equal to the time distance measured by an observer where the events happen in the same place (${tex`\Delta x = \Delta y = \Delta z = 0`}). \\* The, uh, only time dimension. `33:[] 2f:{"title":"Minkowski Diagram","cells":[{"id":0,"value":"md`\n# Minkowski Diagram\n\nA [Minkowski diagram](https://en.wikipedia.org/wiki/Minkowski_diagram) shows the relationship between the spacetime coordinates of two observers moving at different velocities, illustrating the effects of special relativity.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":641,"value":"md`\n_Click on the diagram to reposition the event ${tex`\\mathrm{a}`}. Use the slider to change the relative velocity ${tex`\\mathrm{\\beta}`}._\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"tex.block`\\beta = \\frac{v}{c} = ${d3.format(\".1f\")(beta*100)}\\% \\textrm{ speed of light}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":521,"value":"viewof beta = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"tex.block`\\gamma = \\frac{1}{\\sqrt{1 - \\beta^2}} = ${d3.format(\".4f\")(gamma)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":479,"value":"tex.block`\n\\begin{aligned}\nx_a &= ${fmtTwo(pointA.x)} \\; \\text{light-seconds} \\\\\nt_a &= ${fmtTwo(pointA.t)} \\; \\text{seconds} \\\\\nx'_a &= \\gamma(x_a - \\beta ct_a) = ${fmtTwo(pointAPrime.x)} \\; \\text{light-seconds} \\\\\nt'_a &= \\frac{\\gamma}{c}(ct_a - \\beta x_a) = ${fmtTwo(pointAPrime.t)} \\; \\text{seconds} \\\\\n\\end{aligned}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":563,"value":"{\n let intro = \"The path between the origin and point *a* is\";\n if (pointA.x == pointA.t)\n return md`${intro} **light-like**.`;\n else if (pointA.x < pointA.t)\n return md`${intro} **time-like** with proper time interval ${tex`\\Delta\\tau = ${fmtTwo(properDistance)}`} seconds.`;\n else\n return md`${intro} **space-like** with proper distance ${tex`\\Delta\\sigma = ${fmtTwo(properDistance)}`} light-seconds.`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":688,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":695,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":704,"value":"md`### Math`","pinned":false,"hidden":false,"mode":"ojs"},{"id":561,"value":"properDistance = Math.sqrt(Math.abs(pointA.t**2 - pointA.x**2))","pinned":false,"hidden":false,"mode":"ojs"},{"id":432,"value":"gamma = 1/Math.sqrt(1 - beta**2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":343,"value":"mutable pointA = ({x: 1.4, t: 1.2})","pinned":false,"hidden":false,"mode":"ojs"},{"id":475,"value":"pointAPrime = lorentzTransform(pointA)","pinned":false,"hidden":false,"mode":"ojs"},{"id":503,"value":"lorentzTransform = point => ({\n x: gamma * (point.x - point.t * beta),\n t: gamma * (point.t - point.x * beta),\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":469,"value":"md`### Drawing`","pinned":false,"hidden":false,"mode":"ojs"},{"id":480,"value":"fmtTwo = d3.format(\".2f\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":552,"value":"pointCoordinates = (point) => (chartArea) => {\n const gammaSq = 1/(1 - beta**2);\n \n const originPoints = [\n {x: 0, t: point.t},\n {x: point.x, t: 0},\n {x: (point.x - point.t*beta)*gammaSq, t: (point.x - point.t*beta)*gammaSq*beta},\n {x: (point.t - point.x*beta)*gammaSq*beta, t: (point.t - point.x*beta)*gammaSq},\n ];\n \n chartArea.append(\"g\")\n .selectAll(\"line\")\n .data(originPoints.map(point0 => [point0, point]))\n .enter().append(\"line\")\n .call(scaledLine)\n .attr(\"stroke\", d => d[0].x == 0 || d[0].t == 0 ? \"black\" : \"blue\")\n .attr(\"stroke-dasharray\", \"4\");\n \n chartArea.append(\"circle\")\n .attr(\"cx\", scaleX(point.x))\n .attr(\"cy\", scaleY(point.t))\n .attr(\"r\", 2.5)\n .attr(\"fill\", \"red\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":370,"value":"scaledLine = line => {\n line\n .attr(\"x1\", d => scaleX(d[0].x))\n .attr(\"y1\", d => scaleY(d[0].t))\n .attr(\"x2\", d => scaleX(d[1].x))\n .attr(\"y2\", d => scaleY(d[1].t));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":329,"value":"primeCoordinateLines = mainAxis => g => {\n let lines = d3.range(-3.0, 6.0, 0.2)\n .map(a => a / gamma)\n .map(mainAxisInitial => {\n let points = [\n [mainAxisInitial, 0.0],\n [mainAxisInitial + 3.0*beta, 3.0],\n ];\n return points.map(([main, cross]) => {\n return mainAxis == 0 ? {x: main, t: cross} : {x: cross, t: main};\n });\n })\n \n return g.selectAll(\"line\")\n .data(lines)\n .enter().append(\"line\")\n .call(scaledLine)\n .attr(\"opacity\", d => d[0].x == 0 && d[0].t == 0 ? 1.0 : 0.15)\n .attr(\"stroke\", \"blue\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"axisX = g => g\n .call(d3.axisBottom(scaleX))\n .attr(\"transform\", `translate(0,${height})`)\n .append(\"text\")\n .attr(\"x\", d3.mean(scaleX.range()))\n .attr(\"y\", 35)\n .attr(\"fill\", \"currentColor\")\n .attr(\"font-size\", 14)\n .text(\"x (light-seconds)\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"axisY = g => g\n .call(d3.axisLeft(scaleY))\n .append(\"text\")\n .attr(\"x\", -d3.mean(scaleY.range()))\n .attr(\"y\", -35)\n .attr(\"transform\", \"rotate(-90)\")\n .attr(\"fill\", \"currentColor\")\n .attr(\"font-size\", 14)\n .attr(\"text-anchor\", \"middle\")\n .text(\"t (seconds)\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"scaleX = d3.scaleLinear()\n .domain([0, 3.0])\n .range([0, width])","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"scaleY = d3.scaleLinear()\n .domain([0, 3.0])\n .range([width, 0]) // same as x, but reversed","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"width = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"margin = ({top: 20, bottom: 50, left: 50, right: 20})","pinned":false,"hidden":false,"mode":"ojs"},{"id":699,"value":"md`### Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":590,"value":"import {slider} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}