Troubleshooting D3.js Issues - 🐦¶

Preface¶

I have run into 1000s of issues during my development time with D3.js. This page will be a growing document to express the more common problems and basics of debugging.

Debugging¶

I will provide a perspective from Chrome, but these ideas will also carry through other browsers.

What is a debugger?¶

There are much better places to learn more about debuggers, but you use them to debug your code at a high level. To be honest, it is mostly used to see errors or warnings (usually, errors). Especially when you expect to see something and that something does not show up.

When you have Chrome (or another browser open), and you create your code and…! Nothing happens. Your first stop should be to find the Developer Tools.

Note

You can also use the short-cut:

Chrome:
- Shift + ⌘ + I (on macOS) or Ctrl + Shift + I (on Windows/Linux)
Firefox:
- Shift + ⌘ + I (on macOS) or Shift + CTRL + I (on Windows/Linux)

What is this Screen?¶

There is a lot to unpack in this screen, but we will focus on the Console for our conversation. I would highly recommend learning more about what is available in the Developer Tools, but this is a bit too much for our discussion today. Please, see Chrome Developer Tools for more information.

For now, we will stick with only the debugger located in the Console (highlighted below).

Finding the Developer Tools (Console highlighted)

In the console, we will see errors pop up when running code. Let’s see an example.

Example Error and Developer Tool¶

%%html
<script type="module">
    
    someVariable + 2 
    
</script>

↑ Code will not run ↑

Let’s take a look at the Console.

The error will specify two critical things:

What the error is (good for Google Searching)
- In this case, “Uncaught ReferenceError: someVariable is not defined.”
Where the error occurred
- In this case, line 3.

Now, you may ask yourself, isn’t

someVariable + 2 

on line 3? You would be correct, but our first line tells Jupyter to run HTML code. So, start counting after

%%html

Console Logs¶

The next big thing related to the Console or the Debugging Tools, is the ability

Your Turn¶

Create a new cell and run the following code. Then use the Console to see the error and resolve it.

%%html
<script type="module">
    
    var someVariable = 2 
    someVariable = someVariable * 2
    someVariable = somevariable - 1
    console.log(someVariable)
    
</script>

D3.js + Jupyter Lab