🏠 back to Observable

how do i embed the notebook in react

I have tried to embed this notebook here in react by looking at the instruction . But have been unsuccessful, how do i embed the notebook so as to display the graph in my react based webapp’s screen?

hi @mespsar, could you share more which problem have you encountered?

Looking at your notebook now, I guess it might be related to the the FileAttachment and import.meta.url, specially if you’re using create-react-app which uses webpack.

One quick hack is to edit the downloaded notebook, if you’ve followed the instructions you did

yarn add https://api.observablehq.com/d/84fe095e25ec38a2.tgz?v=3

then you’ll have your notebook at node_modules/84fe095e25ec38a2/84fe095e25ec38a2@3060.js

edit and replace the line related to FileAtachments

  const fileAttachments = new Map([["Terminal_1_1st_Aug.csv", new URL("./files/624eff0ddb0053eaac7843157607c51fa2ec90a0637be46099091c2abd02dfce8a004711402a07a363fc0c59f575965754a438a3752f8f32beaf50e26df1b88a", import.meta.url)]]);
  const fileAttachments = new Map([["Terminal_1_1st_Aug.csv", require("./files/624eff0ddb0053eaac7843157607c51fa2ec90a0637be46099091c2abd02dfce8a004711402a07a363fc0c59f575965754a438a3752f8f32beaf50e26df1b88a")]]);

the idea is to replace the not supported import.meta.url with require('./') then webpack loaders will take care to copy and link the corrected file attachment.

1 Like

HEY thanks! @radames, that was exactly the problem i was facing, that particular error has been fixed but the screen of the react app is now empty, it is not showing th graph


can you help me with what changes i should make to make the graph appear,
thanks!
Edit: so by changing (name==“aniamtion”) to (name==“chart”) i was able to display the graph.
But how do i get

1 Like

hi @mespsar , yes I notice you were not matching an existing cell name on your notebook. Make sure you’re naming the cells you want to mount on your app.