D3.js Tips and Tricks: The HTML Portion of a D3 Graph

Here's the HTML portions of the code;

<!DOCTYPE html>
<meta charset="utf-8">
<style>

    The CSS is in here

</style>
<body>
<script type="text/javascript" src="d3/d3.v3.js"></script>

<script>

    The D3 JavaScript code is here

</script>
</body>

Compare it with the full code. I kind of looks like a wrapping for the CSS and JavaScript. You can see that it really doesn't boil down to much at all (that doesn't mean it's not important).

There are plenty of good options for adding additional HTML stuff into this very basic part for the file, but for what we're going to be doing, we really don't need to bother too much.

One thing probably worth mentioning is the line;

<script type="text/javascript" src="d3/d3.v3.js"></script>

That's the line that identifies the file that needs to be loaded to get D3 up and running. In this case the file is stored in a folder called d3 which itself is in the same directory as the main html file. The D3 file is actually called d3.v3.js which may come as a bit of a surprise. That tells us that this is version 3 of the d3.js file (the .v3. part) and while that won't be the release number (you would want to check that in the zip file you downloaded earlier), it is an indication that it is separate from the v2 release, which, as I write is the main release, but the v3 version is being prepared for general use, so I thought it would be better to work with a pre release version of the file.

Later when doing things like implementing integration with bootstrap (a pretty layout framework) we will be doing a great deal more, but for now, that's the basics done.

The two parts that we left out are the CSS and the D3 JavaScript.