25:["$","title",null,{"children":"Function plot | Jack Verstappen | Observable"}] 49:[] 29:{"id":"6be8370ddd131e37","slug":null,"title":"Function plot","thumbnail":"aef3ac4b793c390c5d11ef864b8f775dbe5e9a926bbf594e1bf8d2ebad03e035","access_level":"public","create_time":"$D2023-05-07T09:35:33.385Z","update_time":"$D2024-04-10T04:22:03.413Z","view_time":null,"first_public_time":"$D2023-05-07T09:35:33.385Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"a6a1e4b9e523112f","login":"jackverstappen","name":"Jack Verstappen","avatar_url":"https://avatars-next.observableusercontent.com/eef162d47242ef1943dcd344ae5eac7ad3ef7f08e43632320ff154d7c1ceddc5","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":156,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cf6b5a97ab314cb8","login":"jackverstappen","name":"Jack Verstappen","avatar_url":"https://avatars-next.observableusercontent.com/eef162d47242ef1943dcd344ae5eac7ad3ef7f08e43632320ff154d7c1ceddc5","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"cf6b5a97ab314cb8","login":"jackverstappen","name":"Jack Verstappen","avatar_url":"https://avatars-next.observableusercontent.com/eef162d47242ef1943dcd344ae5eac7ad3ef7f08e43632320ff154d7c1ceddc5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Function plot","cells":[{"id":0,"value":"# Function plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":57,"value":"\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"f = (x) => 2 * x + 5;\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"scope= [-5, 5];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"N=100","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"\nfunction funcPlot(func, scope,dash) {return Plot.plot({\n width:400, height:400,\n inset:10,\n marks: [\n Plot.frame(),\n Plot.line(Array.apply(null, {length: N+1}).map((d,i)=>{return i}),{\n x:d=>scope[0]+((scope[1]-scope[0])*d/N),\n y:d=>func(scope[0]+((scope[1]-scope[0])*d/N)),\n strokeDasharray:dash ? \"4,4\" : \"1\",\n strokeDashoffset:dash ? Math.floor(now /100) %8:0,\n }),\n Plot.axisX({ y: 0 }),\n Plot.axisY({ x: 0 }),\n Plot.ruleX([0]),\n Plot.ruleY([0])\n ]\n })}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"{\n window.addEventListener(\"keydown\",(e)=> {if (e.key === 'Alt') mutable altDown = true});\n window.addEventListener(\"keyup\",(e)=> {if (e.key === 'Alt') mutable altDown = false});\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"mutable altDown = false; ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"mutable keyState = null;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"chart = {\n const container = htl.html`

`;\n console.log(\"refresh\");\n const chart = funcPlot((x)=>x*Math.pow(x-1,2)*Math.sin(x-3),[-10,10],altDown)\n container.appendChild(chart);\n chart.setAttribute(\"tabindex\",0);\n chart.addEventListener('mouseenter', event => {\n //mutable keyState = chart.getAttributeNames();\n });\n chart.addEventListener('mouseleave', event => {\n //mutable keyState = '';\n });\n return container;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"fPlot = funcPlot((x)=>x*Math.pow(x-1,2)*Math.sin(x-3),[-10,10],altDown)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"{\n const c = cube.cloneNode(true);\n \n c.setAttribute(\"stroke\",\"green\");\n \n \n return c;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"logSVG(icon);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"cube = htl.svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"svgIcon = htl.svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"icon = {\n const icon = svgIcon.cloneNode(true);\n icon.setAttribute(\"color\",\"red\");\n icon.setAttribute(\"stroke\",\"yellow\");\n\nreturn icon;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"function logSVG(svg) {\n // @ts-ignore\n const clientRect = svg.getBoundingClientRect();\n const width = clientRect.width;\n const height = clientRect.height / 2;\n\n // Get svg data\n var xml = new XMLSerializer().serializeToString(svg);\n\n // Make it base64\n var svg64 = btoa(xml);\n var b64Start = \"data:image/svg+xml;base64,\";\n\n // Prepend a \"header\"\n var image64 = b64Start + svg64;\n\n const style =\n \"font-size: 1px; padding: \" +\n Math.floor(height / 2) +\n \"px \" +\n Math.floor(width / 2) +\n \"px; line-height: \" +\n height +\n \"px;\";\n\n // Logging part\n console.log(\n \"%c\" + \"+\",\n style +\n \"background-image: url(\" +\n image64 +\n \"); background-size: \" +\n width +\n \"px \" +\n height +\n \"px; background-size: 100% 100%; background-repeat: norepeat; color: #fff;\"\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 24:null