D3 V4 Setup
FREE     Duration: 1:38
Part of Course: D3 V4 Tutorial
 

Takeaways:

  • D3.js is a JavaScript Library
  • D3 can be downloaded and included in your web server / CDN
  • D3 can be directly linked-to and used from the d3js.org website
  • d3.version tells you the D3.js version you are using

Resources:

Transcript:

D3 V4 Setup

D3 is a JavaScript library that you include in your webpage.

Two ways to add the library to your webpage are downloading the latest version and including it in your website or linking directly to the latest release.

A special note: if you download the latest version and you used the non-minified version, you need to make sure that you specify the character set.

Otherwise, the D3 library won't work because there are some issues with the browser not knowing how to use different math symbols that D3 uses.


To add D3 to the HTML document, the customary thing is to add it to the "<head>" section.

So you would use a "script" tag and then specify the "src", which is the d3js.org website and the D3 version that you are using.

<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>

And again, specify the character set.


We're going to take this code.

We're going to put it into a text editor.

And save it.

Then we're going to open the Chrome web-browser.

Open the developer tools.

And we're going to look at the version.

This tests to make sure we have the right version setup.


Here I'm looking at the Sublime Text Editor.

We have HTML.

<!DOCTYPE html>
<html>
  <head>
  	<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
  </head>
  <body>
  </body>
</html>

And again, we're putting the "script" in the "<head>".

We save that.


Now we go to the Chrome Developer Tools and we see the elements.

We see the that we have the "script" tag here which is loading the D3 library.

So we can type out "d3.version;"

d3.version;


And we see that we have d3 version 4.8.0.

<< Back To D3 Screencast and Written Tutorials Index