🏠 back to Observable

Having hard time to understand d3.js logic

Well my problem is that I am interested in learning d3.js in https://d3js.org/ and site said that all I need to start coding is to add this:

<script src="https://d3js.org/d3.v7.min.js"></script>

but when I click examples it leads me to Gallery / D3 / Observable which is confusing for me and when I download source code of graphs, code DOES NOT HAVE ANY:

<script src="https://d3js.org/d3.v7.min.js"></script>

just a runtime.js and stuff like observable stuff.

How can I give usefulness to

<script src="https://d3js.org/d3.v7.min.js"></script>

because downloaded code from examples does not have it. I mean after all I just want to learn d3.js not observable stuff because I find this complex. Or are you linked to d3.js?

D3.js was originally created by Mike Bostock, who founded ObservableHQ. So the two are at least related.

D3.js is baked into Observable, meaning you don’t have to do any imports in a notebook to start using D3.

If you want to play around with data visualisation I can highly recommend doing it here in Observable notebooks. You get a lot of things for free and the documentation is really good. Use the Snippets pane at upper right side of your notebook to help insert charts, input elements, tables etc:

Anyway, if you want to start in a flat HTML file, the gist here will get you started: Minimal D3 Example · GitHub

1 Like

Note that some of the examples have been rewritten to make them easier to use outside of Observable. You can find an overview of these updated charts here:

1 Like