 Hey. So I just wanted to do a tutorial about how to embed D3 visualizations from the observable HQ platform in a React app. I had a lot of trouble with this. The instructions that are documented don't actually work for these notebooks. And so I just wanted to run through the steps of that. So I've got this visualization here. It's just a copy of one of their circle packing, zoomable, circle packing examples with my own data. So I've got that notebook here. And so the normal steps that it says in the documentation to embed this thing is to click on embed cells. And in this case, I just want to embed this chart. And here in the drop down, there's a runtime with react. So I'm using create react app. I'm going to choose this. And so the first step is it tells me to run these yarn commands, right? Or if you're using npm, you could use npm. So I would just run each one of these commands in my terminal. I've already run them. So I'm not going to do it here. There's that's the first one. This is the second one. And you notice in this path, this at hevers m mozilla ecosystem dot tgz question mark v3. Yours is going to be different than that, obviously. But what it does when you do that is in your node modules folder, you'll see whatever that is for you. Hevers m mozilla ecosystem. That's this whole notebook and all the files that it needs, right? So what the documentation tells you is this notebook uses file attachments, which may require work around C troubleshooting. So if you go to troubleshooting, and you see runtime with react, react, create react app. So if you click on that, it takes you to this. And in this example, it tells you to download your code, place it in the source folder and edit the file attachments. So this is what I downloaded for mine. So I'm in this file here, yours will be different. And it should have this string of numbers and letters. So this is what it has by default. Player two at two.json. This is just the name that you call it by. This could be whatever, but you need to make sure wherever it's referenced down in the code here, you would like here. You change that if you decide to change this. But then this is the actual file. Now, this is the part that create react app can't handle. It can't handle this new URL, import dot meta dot URL. So the workaround is to get rid of that whole new URL bit and the import dot meta, and just replace it with an absolute path. Notice, I've changed this long string of numbers when you download this thing. If you download it in the node modules, what you actually get here in this files directory, that's your JSON. But what it doesn't do is it doesn't name it with a dot JSON extension. So one of the things you got to do is you got to give it a JSON extension. Otherwise, you're going to get this like invalid JSON at line zero error thing. So first thing you got to do is save this thing. And where you want to save it is not in your node modules folder, but in your public directory, make a files folder and save it here. When you save it, make sure that instead of just all these things, you give it a dot JSON extension. So I've already saved it, you can see it here, got the dot JSON extension. That's where that thing needs to live. So I could delete this and from my node modules folder, more make a difference. It's not referencing that anymore, as long as I've made this change here. So make sure you rerun yarn start. There it is. Hopefully that helps you. Let me know if you're running into any issues.