PostgreSQL logo

Table of Contents

Super Quick Setup

Make a project folder for your D3 goodness:

mkdir folder_name

Download the following D3 files and put them in the project folder.

Main d3.js file

D3 Selection Multi file

Or add links in the relevant html file (update the version numbers):

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>

The selection-multi file lets you bundle property/value pairs into a single group using attrs instead of calling a single attr for every propery/value pair. It's also nice that you won't have to use quotes for the key (property) name when you bundle them into an object. Same goes for style vs styles and property vs properties.

Navigate to your project folder:

cd path/to/project-folder

Start a Python web server:

python -m SimpleHTTPServer 8888 &

Make sure to start the server in the folder with the files you want served.

If the port number is already in use, kill the process or use a different port number.

To kill a process, first find the id of the process (PID) using the port:

sudo lsof -i:port_number

And then end the process:

kill PID_number

Example:

sudo lsof -i:8888
kill 13651

Add an index.html file to the project folder:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Awesome D3 Goodness</title>
        <script type="text/javascript" src="../path/to/d3.js"></script>
        <script type="text/javascript" src="../path/to/d3-selection-multi.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            // Where the D3 magic will happen!
        </script>
    </body>
</html>

Load Data

General format:

d3.csv("filename.csv", callbackFunction);
d3.json("filename.json", callbackFunction);

Example:

const dataset;

d3.csv("pets.csv", function(error, data) {

    if (error) { console.log(error); }
    else {
        dataset = data;
        // Do stuff with the data.
    }
});

References