D3 Introduction

d3_introduction.html ● d3.min.js

D3 and Version

In the beginning we have seen some examples of d3-graphs. Now we will start to work on graphs on our own. But remember: We are using D3 v6.7.0 in this course. Please be aware of that. Older versions of D3 are not compatile with this version. So always look for D3V6 if you browse the internet! If you are unsure, just use the d3.min.js-file from this project folder.

Recap SVG

Remember the SVG we had at the beginning: This one is plain HTML:

Sample text

But we can build the same also with D3: (look at the code)

What did we do?

The first thing was to put the d3-library file into our project folder and link it to our HTML:

<script src="./scripts/d3.min.js"></script>

Then we created an empty SVG with the id="d3svg", in which we will later bind the elements. After that we opened a script-tag to write Code into our HTML-file.

With d3.select we selected the SVG we've created (The selection works in the same way as we learned it with CSS) and saved it into a variable. With .append() we added Child-Tags to it. And we can add attributes to these tags with .attr(). With this we have created exactly the same SVG as before. Only dynamically with D3, easy, isn't it?

More about D3