How to access bl.ocks.org in Observable?

D3
1

The official D3 documentation and many of @mbostock’s older StackOverflow answers link to blocks, but unfortunately these get redirected back to Github.

It’s a shame those visualizations are not displayed automatically, but they can be shown with Observable.

For example, to see https://bl.ocks.org/950642, which redirects to https://gist.github.com/mbostock/950642, you’d have to replace gist.githubusercontent.com in the raw index.html file with gistcdn.githack.com

Then create a cell in your Observable notebook with the url:

html`<iframe src='https://gistcdn.githack.com/mbostock/950642/raw/4adf2bdd16745b4d2b05bde672768c8a83884c62/index.html' width='100%' height=520 frameBorder='0'/>`

Is there a plan to automatically redirect blocks to Observable using this method or does this have to be done manually for each block?

2

For the D3 documentation, see fix links to bl.ocks · Issue #3696 · d3/d3 · GitHub.

An alternative viewer is Adam Pearce’s service blocks.roadtolarissa.com (e.g., Colorize Alpha, Canvas by tmcw).

I personally miss the good ol’ bl.ocks.

1 Like
3

There’s also

1 Like
4

I also hit the issue of old bl.ocks.org links reverting to Gist and being disappointed about not immediately being able to see the visualizations in action, so I created an extension for Chrome and Firefox to redirect these links to the blocks.roadtolarissa.com clone @Fil mentioned.

Hope people find this useful :slight_smile:

1 Like