Embed code is a nightmare

Feedback
1

I built some visualizations using ObservableHQ and I was hoping I could embed them on a website I’m working on. However, everything is so hard!

  1. When clicking in embed code, it gives only the HTML code. Where is React/other frameworks? Needed to dive into this. Ok…
  2. Following that tutorial, I got multiple errors because I used FileAttachment and it is incompatible with Babel/WebPack (it uses import.meta which they don’t like).
  3. So I needed to download it and fix manually. Where are the name for the files? Wouldn’t it be easier to have “scrubber.js” instead of something like “3df1b33bb2cfcd3c@431.js”?
  4. Changed FileAttachment with d3.csv to a local file, ok. But this will hunt me again if I make changes in ObservableHQ and download it again. Actually, everything is going to hunt me again. I’ll need to rename those files again and etc. The site even renames a “pr.json” to a bunch of random characters with no extension, everything to make life harder.
  5. Will it fetch d3, topojson, etc for each chart? Shouldn’t it be easier to just import them via npm? That was actually the easy part. But, again, it will hunt me again. Should have a toggle to do this automatically.
  6. Where is style/CSS support? I couldn’t figure out a way to make it work (from styled-components to modular css, but then I tried this and was also weird, so it is not my issue).

image
image1786×1248 105 KB

7. Where are animations support? I thought by picking a map cell and a picker cell it would route them together, but it doesn’t. Do I need to manually do like this every time? It is weird because my picker’s range comes from the data, so should I fetch the data and use it to recreate the picker that is going to modify the map? Seems like a lot of boilerplate.

TL;DR:
Overall, I would update the code embed to:

  • Have an option to remove markdown when exporting. I want only the map and those `md are a lot of boilerplate to remove.
  • Export to React/others.
  • Replace the require(d3) with import d3 from npm.
  • Replace FileAttachment with d3.csv()? (maybe)
  • Stop with those cryptographic names.
  • Alert the user when animations will be broke (or that he needs to declare some fields).

Edit: after help on twitter, styles and side effects are working! So I have a new suggestion. Add a warning that you need to name them when you are exporting, else they won’t work?