2c:null 2d:["$","title",null,{"children":"Towards Matrix Exponentiation eg. e[abcd]e^{\\left[\\begin{smallmatrix}a & b\\\\ c & d \\end{smallmatrix}\\right] }e[acbd] | Joe | Observable"}] 32:T894,pd = { const vectorScale = 10 const height = width //height of svg //Another direct method to create svg is DOM.svg(specific to Observables) const svg = d3.select(DOM.svg(width, height))//.viewBox(-width/2,-height/2,width,height) // const data = d3.cross(d3.range(-w,w,20),d3.range(-w,w,20)).flat(0) // const cdata = data.map(([x,y]) =>({...vector_field(x,y), x: x, y:y})) // const vScale = d3.scaleLinear().domain(d3.extent(cdata, ({n})=>n)).range([1,10]) const k = 20 const tx = 5 const ty = 5 svg.append("svg:defs").append("svg:marker") .attr("id", "triangle") .attr("refX", 5) .attr("refY", 0) .attr("markerWidth", 4) .attr("markerHeight", 4) .attr("markerUnits","strokeWidth") .attr("orient", "auto") .attr("viewBox","0 -5 10 10") .append("path") .attr("d", "M0,-5L10,0L0,5") .style("fill", "#f00"); // we need a background object to collect clicks const click = svg .append('rect') .attr('transform',`translate(${width/2}, ${height/2}) scale(1 -1)`) .attr('x',-width/2) .attr('y',-height/2) .attr('width', width) .attr('height', height) .attr('fill','white') const g = svg.append('g') .attr('transform',`translate(${width/2}, ${height/2}) scale(1 -1)`) g .selectAll('g') .data(cdata) .join('g') // .attr('transform',([x,y])=> `matrix(${m[0][0]} ${m[1][0]} ${m[0][1]} ${m[1][1]} ${x} ${y})`) .append('line') .attr('fill','none') .attr("marker-end", "url("+window.location+"#triangle)") .attr('stroke','black') // .attr('stroke-width',({n}) => Math.floor(n)) .attr('x1',({x}) => x) .attr('y1',({y}) => y) .attr('x2',({x,nx,n}) => x + vScale(n)*nx) .attr('y2',({y,ny,n}) => y + vScale(n)*ny) g .datum(pathFromInitial([2,-3])) .append("path") .attr('d', d=> d3.line()(d)) .attr('stroke','red') .attr('fill','none') click.on('click', e => { console.log('*********************88',e) const p = d3.pointer(e) g .datum(pathFromInitial(p)) .append("path") .attr('d', d=> d3.line()(d)) .attr('stroke','red') .attr('fill','none') }) return svg.node() }33:[] 30:{"id":"0e03f9c747065df9","slug":"towards-matrix-exponentiation-eg-e-abcd-e-left-begin-smallm","title":"Towards Matrix Exponentiation eg. e[abcd]e^{\\left[\\begin{smallmatrix}a & b\\\\ c & d \\end{smallmatrix}\\right] }e[acbd]","thumbnail":"8847ff2e437635197803edb8746a0ef9849a690f87069558fc8e3f051cd0ca45","access_level":"public","create_time":"$D2021-04-02T13:58:52.577Z","update_time":"$D2021-04-05T13:29:32.071Z","view_time":null,"first_public_time":"$D2021-04-03T18:24:17.562Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"d4bde6b3ee650269","login":"josephsmann","name":"Joe","avatar_url":"https://avatars-next.observableusercontent.com/8089eca3d0d1bfc18ba5f7492ea1574d05db45eebbc8e0f3af1c72105b236d4c","tier":"starter_2024"},"version":726,"publish_version":726,"role":null,"authored":false,"authors":[{"type":"individual","id":"fc88ff3942f7785e","login":"josephsmann","name":"Joe","avatar_url":"https://avatars-next.observableusercontent.com/8089eca3d0d1bfc18ba5f7492ea1574d05db45eebbc8e0f3af1c72105b236d4c","tier":null}],"members":[{"type":"individual","id":"fc88ff3942f7785e","login":"josephsmann","name":"Joe","avatar_url":"https://avatars-next.observableusercontent.com/8089eca3d0d1bfc18ba5f7492ea1574d05db45eebbc8e0f3af1c72105b236d4c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Towards Matrix Exponentiation eg. e[abcd]e^{\\left[\\begin{smallmatrix}a & b\\\\ c & d \\end{smallmatrix}\\right] }e[acbd]","cells":[{"id":0,"value":"md`# Towards Matrix Exponentiation eg. ${tex`e^{\\left[\\begin{smallmatrix}a & b\\\\ c & d \\end{smallmatrix}\\right] }`}\n\nas inspired by 3Blue1Brown's video: https://youtu.be/O85OWBJ2ayo\n\nYes, there's a ways to go but there always is...`\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":611,"value":"md`To Do List\n- disappear lines\n- implement real solution\n- ~~interface for matrix~~\n- ~~interface for ${tex`dt`}~~\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"md` ${\ntex`e^{\n\\begin{bmatrix}a & b\\\\ c & d \\end{bmatrix} \n}\n`\n} is **not** equal to ${tex`\\begin{bmatrix}e^a & e^b\\\\ e^c & e^d \\end{bmatrix} `}`\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"md` So in the 3blue1brown video you're given a differential equation like ${tex` x'= Ax`} where ${tex` A`} is fixed. We want to find solutions for this equation (or system of equations because ${tex` x`} is a vector)\n\nIn our diagram below, I want to plot the vectors ${tex`x'`} for a grid of ${tex `x`} values.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":637,"value":"md`\n${tex`\\frac{dp}{dt} = \n\\begin{bmatrix} \n${matrix.x11} & ${matrix.x12} & ${matrix.tx}\\\\\n${matrix.x21} & ${matrix.x22} & ${matrix.ty}\n\\end{bmatrix} p\n`}\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":619,"value":"viewof matrix = form(html`\n\n\n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":673,"value":"md`${tex`\\Delta t = ${deltaT} `}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":663,"value":"viewof deltaT = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":699,"value":"md`Max path length is ${maxPathLength}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":684,"value":"viewof maxPathLength = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":524,"value":"function nextPoint(x,y, jump = deltaT ) {\n const deltaP = vector_field(x,y)\n return [x + deltaP.nx*deltaP.n*jump, y + deltaP.ny*deltaP.n*jump]\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"m = [[1.03,0.24],[0.24,1.03]]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"// to control how long we want our arrows\nvScale = d3\n.scaleLinear()\n.domain(\n d3.extent(cdata, ({n})=>n))\n.range([5,20])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"d3.extent(cdata, ({n})=>n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":530,"value":"function pathFromInitial(pp=[2,3]) {\n \n\n let p = pp\n let path = [p]\n let i = maxPathLength\n while (Math.max(...p) < 400 && Math.min(...p) > -400 && i > 0){\n p = nextPoint(...path[path.length - 1])\n path.push(p)\n i--\n }\n return path\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"function vector_field(x,y) {\n const m = [[matrix.x11,matrix.x12, matrix.tx],\n [matrix.x21,matrix.x22, matrix.ty]]\n const rx = m[0][0]*x + m[0][1]*y + m[0][2]\n const ry = m[1][0]*x + m[1][1]*y + m[1][2]\n const norm = Math.sqrt(rx*rx + ry*ry)\n return {nx: rx/norm, ny: ry/norm, n: norm}\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"grid = d3.cross(d3.range(-w,w,20),d3.range(-w,w,20)).flat(0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"// compute the vectors for the grid\ncdata = grid.map(([x,y]) =>({...vector_field(x,y), x: x, y:y}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"{\n let tx=0, ty \n tx += 5* Math.random() \nd3.select(pd)\n .select('g') \n .selectAll('rect')\n .attr('transform', \n (d,i) => `matrix(\n${0.4 + 1.5 * r*r*i/50} 0 0 ${1.5+r} 0 0)`\n )\n return tx\n} // .attr('transform', \n // `scale(${1 + r})`\n // )\n\n \n\n \n // `matrix(${100* mutable r} 0 ${100 * mutable r} 0 1 0})`\n // .attr(\"fill\", ([x,y])=> d3.rgb(50+mutable r**2*100,255* Math.random(),255* Math.random()))\n // .attr(\"cx\", ([x,y]) => 400 + 20 * x * r + 10* Math.random())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":488,"value":"w=400","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"mutable r = {let i= 1e4\n while(i>0){\n i--\n // yield Promises.tick(100, Math.sin(i/6));\n yield Math.sin(i/60)\n }\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"d3.cross(d3.range(0,10,1),d3.range(0,10,1)).flat(0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"{\n const f = i => d3.range(0,1,0.2).map(d => [i,d]) \n return d3.range(0,1,0.2).map(d => f(d))\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"import { aq, op } from '@uwdata/arquero'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":617,"value":"import {form} from '@mbostock/form-input'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"