# Having hard time to understand d3.js logic

**URL:** <https://talk.observablehq.com/t/having-hard-time-to-understand-d3-js-logic/5811>\
**Category:** Help\
**Created:** [November 14, 2021, 3:30am UTC](https://talk.observablehq.com/t/having-hard-time-to-understand-d3-js-logic/5811 "2021-11-14T03:30:50Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![EthernalHusky](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/ethernalhusky/32/5770_2.png) [@EthernalHusky](https://talk.observablehq.com/u/EthernalHusky)\
**Post date:** [November 14, 2021, 3:30am UTC](https://talk.observablehq.com/t/having-hard-time-to-understand-d3-js-logic/5811/1 "2021-11-14T03:30:50Z")

</div>

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

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

```

but when I click examples it leads me to [Gallery / D3 / Observable](https://observablehq.com/@d3/gallery) which is confusing for me and when I download source code of graphs, code DOES NOT HAVE ANY:

```auto
<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

```auto
<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?

---

<div class="post-metadata">

**Author:** ![martinnormark](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/martinnormark/32/5767_2.png) [@martinnormark](https://talk.observablehq.com/u/martinnormark)\
**Post date:** [November 14, 2021, 1:15pm UTC](https://talk.observablehq.com/t/having-hard-time-to-understand-d3-js-logic/5811/2 "2021-11-14T13:15:14Z")

</div>

D3.js was originally created by [Mike Bostock](https://twitter.com/mbostock), 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:

 ![Screenshot 2021-11-14 at 14.14.22](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/a/ae50c20120f66c87855a94fca29efc8318d38b81.jpeg)

Anyway, if you want to start in a flat HTML file, the gist here will get you started: [Minimal D3 Example · GitHub](https://gist.github.com/alexsb/8565055)

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [November 15, 2021, 11:49pm UTC](https://talk.observablehq.com/t/having-hard-time-to-understand-d3-js-logic/5811/3 "2021-11-15T23:49:27Z")

</div>

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:

> **[D3 Charts](https://observablehq.com/@d3/charts)**
>
> A guide to D3’s reusable example charts D3 Charts help you get started quickly with D3. To use these charts in your application, copy-paste or import the chart function into your code, then pass the chart function your data and any options. The chart...