I learned and used D3 several years ago. I’m trying to relearn it this year and found it redirects to observable and I’m no longer able to copy the example code directly and use them in my website.
Anyone figures out how to make D3 example code work again?
Hello,
I guess it depends on the examples you’re interested in. Some of them are written as functions that you can copy in their entirety and use directly.
Others are split into several cells, to make it easier to inspect and understand each step of the computation. In those cases you might have to copy each cell into a function, or an asynchronous function, and recreate the dependency logic. For example if you have:
data = d3.json(…)
and
a = d3.mean(data, d => d.value)
you could write this in vanilla javascript as:
const data = await d3.json(…);
const a = d3.mean(data, d => d.value);
Hope this helps. If there is a specific example for which you need guidance, please give us the URL.
Observable makes it easy to assemble lots of parts without having to think too much about where they come from. It also does an implicit await on any asynchronous cell, such as loading a dataset.
To make this notebook into a standalone application, we need to be explicit about everything. Let’s list what we’re going to use:
First, the notebook loads two datasets: walmart.tsv, which is a FileAttachment served by observable (we’ll copy it); and us.json, the shape for the map, which we can load from npm. There are also two libraries: d3 and topojson.
For the interactions, the notebook imports a “scrubber” function. That function in turns needs Observable’s htl and Inputs libraries.
Our stand-alone web page has to load all these resources, then create the map and the scrubber UI. And we’ll have to “plumb” all of this together, updating the map each time the scrubber values changes.
The original notebook does the plumbing with observable’s runtime, but in our case we’re going to listen to the scrubber’s “input” events directly, and call the chart’s update function whenever the scrubber changes.
We’re in luck, because the “update” technique has just been documented by @tophtucker in Update method on DOM node / Toph Tucker / Observable
Now, here’s the result: same contents, assembled on a single web page: Walmart's growth stand-alone - bl.ocks.org
Note that it doesn’t have the textual contents/introduction/presentation of the dataset, which is produced with the markdown component of observable’s stdlib. It would be possible to add that too, but I’ve left it as an exercise for the reader 
Thank you. I copied the script and it’s still not working probably because I don’t have wartmart.tsv. I tried to download the file from the observable webpage, but the file doesn’t have the date column.
Can you send me the link to get the file with date column?
I should have mentioned that you can download all the files by clicking the link at the top of the blocks page: Walmart's growth stand-alone · GitHub
Thank you. I found the file.