Hi everyone,
I am super new to both D3 and especially to ObservableHQ. Just finished my class on Data Visualization in school and wanted to upload my D3 final project here to have it for future reference. However, I found that a simple copy paste does not work.
What could I do to transfer/convert my d3 code from an html file to ObservableHQ? Are there any shortcuts?
There is not a shortcut
You can take a look at Chart Template to get an idea how ObservableHQ works
There are some introductory notebooks in Introduction collection
I think this Introduction to html notebook will help you most
Also, this notebook may be more familiar for you, if you are just starting out and don’t know how d3 visualization can be displayed on ObservableHQ
Thank you for the response.
Yeah I’ve checked all those before getting to the forum. It seems to be pretty different from my HTML file. It’s like 800 lines of code and pretty complicated dynamic visual, so it will take me a ton of time to figure out how to convert that. Especially knowing the fact that I’ll probably never use it again, since I am doing more of business data viz, and those are easily done with Tableau.
I might be better off just finding a freelancer, who might help.
Is there any particular reason why you want it to convert to ObservableHQ?
If you just want it to be accessible online, there are other ways
My favorite one is to upload it to Github repository and enable Github pages in setting, then you can access it as follows
yourUsername.github.io/repositoryName/index.html
Other way is to use blockbuilder.org
If you can split your code into multiple stateless functions or self-contained modules you should have a good basis for your port.
Also, giving advice might be easier if we were able to see your current code.
I linked to some hopefully helpful resources / examples in this recent thread (though the focus there is mostly on going in the other direction, from Observable to standalone JS).
Early on, when I was learning both D3 and Observable, I wrote this notebook, which tries to explain the steps I took in converting a block to Observable:
You can find a bunch of other examples where folks converted ordinary JS / HTML to Observable notebooks if you search for notebooks containing “bl.ocks.org”.
If you post your code someone can offer concrete advice.
It should be possible to put all of your markup and code into a single cell without too much troule, but that doesn’t really take advantage of Observable; with more effort you can split things up into reactive pieces, which can make it easier to play with, give more places for adding additional explanation, etc.