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
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
require('./') then webpack loaders will take care to copy and link the corrected file attachment.
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,
Edit: so by changing (name==“aniamtion”) to (name==“chart”) i was able to display the graph.
But how do i get
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.