2e:null 2f:["$","title",null,{"children":"Embed a notebook in a React app | digitizedbeing | Observable"}] 34:T41b,function on(mark, listeners = {}) { const render = mark.render; mark.render = function(facet, {x, y}) { // 🌶 I'd like to be allowed to read the facet // 🌶 data[i] may or may not be the datum, depending on transforms // (at this stage we only have access to the materialized channels we requested) // but in simple cases it works const data = this.data; // 🌶 since a point or band scale doesn't have an inverse, create one from its domain and range if (x.invert === undefined) x.invert = d3.scaleQuantize(x.range(), x.domain()); if (y && y.invert === undefined) y.invert = d3.scaleQuantize(y.range(), y.domain()); const g = render.apply(this, arguments); const r = d3.select(g).selectChildren(); for (const [type, callback] of Object.entries(listeners)) { r.on(type, function(event, i) { const p = d3.pointer(event, g); callback(event, {type, p, x: x.invert(p[0]), y: y && y.invert(p[1]), datum: data[i], facet, data}); }); } return g; } return mark; }35:[{"id":"d754d438bc02806b3a5368a37e7b3ccb160166f6300e15299115253d8299eb2733f49ae9c872019076087a0855b2abea15d2c176d21decba10d7a6a751ab31e9","href":"https://static.observableusercontent.com/files/d754d438bc02806b3a5368a37e7b3ccb160166f6300e15299115253d8299eb2733f49ae9c872019076087a0855b2abea15d2c176d21decba10d7a6a751ab31e9","name":"reactScreen.png","type":"image/png","lastModified":1677847800450.603,"size":152653},{"id":"d7ce7862eb2d56677c5af08178dd371adc810ce7316448b1e192fe7247c81a7c75d9ec336d554316cd06e731c204c5470838de1078dc8f06cd11b6317c70c2ae","href":"https://static.observableusercontent.com/files/d7ce7862eb2d56677c5af08178dd371adc810ce7316448b1e192fe7247c81a7c75d9ec336d554316cd06e731c204c5470838de1078dc8f06cd11b6317c70c2ae","name":"embed.mov","type":"video/quicktime","lastModified":1677847800450.603,"size":2198985},{"id":"87fcfbf749e8dee3c9fda9cfbb0a4bc75be57f699e5056ff899fc6641c93af8b7a08993b370dff2a46e1e2ea6a68cfa7b41733b9aa07c531d2e350fec6ed86dd","href":"https://static.observableusercontent.com/files/87fcfbf749e8dee3c9fda9cfbb0a4bc75be57f699e5056ff899fc6641c93af8b7a08993b370dff2a46e1e2ea6a68cfa7b41733b9aa07c531d2e350fec6ed86dd","name":"embed2.mov","type":"video/quicktime","lastModified":1677847800450.603,"size":900432},{"id":"18ffdd06a9c932456e10722920aa145718d4c55098ca26b7e56b995349b4eff2a283b4c2bc9f0b2339c50d3f60e2fbeee191ca848dbe38e59ebbd218d483df54","href":"https://static.observableusercontent.com/files/18ffdd06a9c932456e10722920aa145718d4c55098ca26b7e56b995349b4eff2a283b4c2bc9f0b2339c50d3f60e2fbeee191ca848dbe38e59ebbd218d483df54","name":"Screen Shot 2022-12-14 at 9.24.55 PM.png","type":"image/png","lastModified":1677847800450.603,"size":26872}] 32:{"id":"a7d9cc7110969d9b","slug":"embed-a-notebook-in-a-react-app-bridged","title":"Embed a notebook in a React app","thumbnail":"46750db1cf6c0c64467764e67ebc0d04199bd3a33ff8eea229621f2eea7cf0d3","access_level":"public","create_time":"$D2023-03-03T12:50:00.450Z","update_time":"$D2023-03-03T13:12:30.288Z","view_time":null,"first_public_time":"$D2023-03-03T12:50:00.450Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"508947c724ab2bc4","login":"digitizedbeing","name":"digitizedbeing","avatar_url":"https://avatars-next.observableusercontent.com/209a6fd530732df1256a9b20ef40ac20bd137a0cbf5368055bcd1ab0e01b4dc1","tier":"starter_2024"},"version":500,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"bb8f69d46b7ec3b6","login":"digitizedbeing","name":"digitizedbeing","avatar_url":"https://avatars-next.observableusercontent.com/209a6fd530732df1256a9b20ef40ac20bd137a0cbf5368055bcd1ab0e01b4dc1","tier":null}],"members":[{"type":"individual","id":"bb8f69d46b7ec3b6","login":"digitizedbeing","name":"digitizedbeing","avatar_url":"https://avatars-next.observableusercontent.com/209a6fd530732df1256a9b20ef40ac20bd137a0cbf5368055bcd1ab0e01b4dc1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Embed a notebook in a React app","cells":[{"id":0,"value":"# Embed a notebook in a React app\n\nSquinting at them from a certain distance, Observable notebooks and [React apps](https://reactjs.org/tutorial/tutorial.html) can look like close cousins: both are functional, reactive ways of writing UIs in JavaScript. Let’s see if we can get them to play nicely together, by embedding and controlling a notebook from React.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":478,"value":"embedDocsNote = note(htl.html`Note: You should read the Introduction to Embedding notebook before continuing.`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":497,"value":"md`\n## !!! 2 additional functions added\n* function *on* to capture mouse events which is hooked on each bar of a letter\n* function *clicked* to get executed on a captured mouseclick\n\nThe idea is now in the react code to redefine the function *clickec* with a function defined in react\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"clicked = (event, { datum }) => {\n d3.select(event.target).style(\"cursor\", \"default\");\n\n window\n .open(\n `https://google.com/search?q=${datum.letter}`,\n \"Searching for \" + datum.letter,\n \"width=400,height=250\"\n )\n .focus(); // \"_blank\"); // \"_self\")\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"Here we have a sample bar chart from the [Plot](https://observablehq.com/@observablehq/plot?collection=@observablehq/plot) snippets in the [cell menu](https://observablehq.com/@observablehq/adding-cells?collection=@observablehq/notebook-fundamentals#cell-558). ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":476,"value":"myBarChart = Plot.plot({\n marks: [\n on(\n Plot.barY(alphabet, {\n x: \"letter\",\n y: \"frequency\",\n sort: { x: \"y\", reverse: true }\n }),\n {\n click: clicked\n }\n ),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"Notice that I've named this cell so that it can be used for embeds. (Only named cells can be embedded.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":108,"value":"md`Now, let's start a brand new React app with [create-react-app](https://github.com/facebook/create-react-app). Open a terminal and run the following commands:\n\n\\`\\`\\`bash\n> npx create-react-app pretty-animation\n\n... (installation flies by) ...\n\n> cd pretty-animation\n> yarn start\n\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"Your browser quietly opens a new tab to [http://localhost:3000/](http://localhost:3000/), and the React start page appears:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":471,"value":"

\n \n

The React screen appears at http://localhost:3000.

\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":163,"value":"To now embed our bar chart into a React app, we will open up the embed pane for that cell and copy the instructions. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":469,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":468,"value":"md`Now take the code you just copied and run it in a terminal. The example below should be similar:\n\n\\`\\`\\`bash\n> yarn add @observablehq/runtime@5\nyarn add \"https://api.observablehq.com/d/2ea21d94adf9f376@475.tgz?v=3\"\n\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"note(htl.html`Note: Use the code you copied from the Embed pane.`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"Next we'll need the React code to create this component. You can also find this from the embed pane for the cell. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":465,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":215,"value":"md`Now we take the copied code and paste it into a new file for our React app. We'll call it *BarChart.js*. It should look like this:\n\n\\`\\`\\`js\nimport React, {useRef, useEffect} from \"react\";\nimport {Runtime, Inspector} from \"@observablehq/runtime\";\nimport notebook from \"2ea21d94adf9f376\";\n\nfunction Notebook() {\n const myBarChartRef = useRef();\n\n useEffect(() => {\n const runtime = new Runtime();\n runtime.module(notebook, name => {\n if (name === \"myBarChart\") return new Inspector(myBarChartRef.current);\n });\n return () => runtime.dispose();\n }, []);\n\n return (\n <>\n

Credit: Embed a notebook in a React app by Observable

\n \n );\n}\n\nexport default Notebook;\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"The last step is to add our new component to the *Index.js* file, to have it render on localhost:3000.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":462,"value":"md`\n\n\\`\\`\\`js\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport Notebook from './BarChart';\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(\n \n \n \n);\n\n\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"Now when you go to localhost:3000, you should see this:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":460,"value":"

\n \n

The chart appears at http://localhost:3000.

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"screenShot20221214At92455Pm","database":"$undefined"},{"id":459,"value":"Now you've learned how to embed an Observable cell within a React app. Again, if you haven’t already, check out our [introduction to downloading and embedding notebooks](/@observablehq/downloading-and-embedding-notebooks). That tutorial will provide more details how embeds work and what you can do with them. \n\nFor more examples of using Observable with React apps, including passing data, check out our [examples in Github](https://github.com/observablehq/examples). ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":458,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":457,"value":"// 2022.06: Fabian Iwand's suggested improvement for Note:\nnote = {\n const scope = DOM.uid(\"note\").id;\n const style = document.head.appendChild(htl.html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"