How to convert Tidy Tree to straight Javascript plus d3

[bgchen]

You can’t directly use Observable notebook code as JS, since …

JavaScript cell | Observable documentation

So you’ll have to do some conversion. A while back, I linked to some (hopefully helpful) resources for Observable to JS porting in this post:

I want to learn D3. I don`t want to learn Observable. Is that ok?

This sounds like a cool idea! A tool would be awesome, but I’m not sure how it could be done. On the tutorial side, maybe something like the “inverse” of this notebook: These two forum posts of mine come to mind – maybe they’d be useful as case studies. I also just found this notebook, which goes through the code of a D3 bar chart in 3 different styles (as a single Observable cell, as multiple Observable cells, and as it would be embedded in a standalone HTML page): (I don’t like the “…

See particularly the two forum posts of mine I also linked there:

How do I work with the D3 Sankey Example?

Hi! Code in Observable notebooks is indeed written in JavaScript, but in general, you can’t just copy and paste the code into an ordinary script. Notebooks are executed using the Observable “runtime”. See the tutorials “How Observable Runs” and “Downloading and Embedding Notebooks” for some more info. As explained on the latter page, the easiest and most general way to get a copy of a notebook running on another page is to click the menu in the top right and choose the “Download tarball” link, …

Notebook to Vanilla JavaScript Steps

You’re lucky, this particular example is really simple. In particular, it really only has one main visualization cell, and one data fetching cell and the rest are just helper functions / variables. Here is a port to a “block”. To get to this, I worked roughly from bottom to top. First, I added a script tags to index.html which import the d3 and d3-require libraries as well as the Observable standard library: <script src="https://d3js.org/d3.v5.min.js"></script> <script src="https://unpkg.com/…