This article aims to point you to solutions for some common problems. There are potentially many reasons why your code is not displaying the data. Try some of these steps before you ask for help. Working with web content, epsecially in this genre, often means working continously with technical problems. Developing problem solving skills is essential so this is good practice, but there are also many pits to fall into at this stage so if you really are stuck don’t hesitate to contact me.
Problem: You see an empty D3 container, maybe with some elements placed in seemingly random places. This probably means the data file does not load, or maybe it loads but the contents are not formatted as expected by the component.
The first step is always to open the inspector. You can open the inspector in any of the following ways:
- right click > inspect
- F12(Win)
- Ctrl +Shift + i (Win)
- Cmd + Shift + i (Mac)
click the ‘console’ tab and look for javascript errors. These might seem cryptic at first but they ususally tell you exactly what the problem is in technical terms. Let’s look at some of the most common errors.
If you are using an internal data source as we started doing more i 2022 due to WordPress restrictions on json file uploads, skip to the section about troubleshooting d3.js components with internal data. If the data source is external / in WordPress media library read on.
D3.js components with external data
There are many potential reasons why an external datafile does not load. Here are some suggetsions:
1. When publishing in WordPress the url to datafile is not updated to an online version.
After spending some time testing your component with a virtual server you may have uploaded your d3.js component to the WordPress media library. If you haven’t published the datafile and retrieved its url from your WordPress site the D3 component is still looking for a local file on your system. Remember to first publish the datafile in the WordPress media library, then get the full url for that data file and then point to that datafile’s url in your d3 components function for loading data.
2. The url is wrong
The wordpress media library on our OsloMet sites only gives partial url’s. You have to add the url part from the media library to your sites main url. On my other sites I get a full url from the media library so this varies from site to site for reasons I don’t know. Anyway, your partial media library url might look something like:
/wp-content/uploads/2021/11/befolkning.txtSo add that to your sites url and get something like:
https://sitename.azurewebsites.net/wp-content/uploads/2021/11/befolkning.txtTest that this url actually loads your datafile first by testing it in a browser, then use as a parameter in the D3 function that might be called loadData, so that might look like this:
loadData("https://sitename.azurewebsites.net/wp-content/uploads/2021/11/befolkning.txt");3. You are testing the file locally without using a virtual server
A virtual server lets you test a web page / web app locally through a virtual machine. There are different rules for how applications can act on a web server and on your local machine. A web app can not access your local apps for security reasons, and also for security reasons a local html file will have restrictions when running in your local environment. In order to run a web app as if it was online we use a virtual server. Here is a guide for setting up a virtual server.
https://gauteheggen.com/setting-up-anaconda-virtual-server-for-d3-js/
D3.js components with internal data, or when loading the external file has been ruled out as the cause of your troubles.
1. Type errors
Type errors occur when the component is not getting the type of data it expects. A normal example is numbers that are of the datatype string (text). In class we talked about how operators can work with both numbers and strings but give different results. For example if you add together two variables of type number, 2 and 3, the result will be 5. If you add together strings “2” and “3” the result will be “23”. Strings have quotation marks around them and appear red in VS code. Look for this in the datafile. You can also check the type of any variable using the typeof keyword. (Linke to w3schools).. There are more types then string and number and you can read more about data types on w3schools or Mozilla developer network. Most modern programming languages require you to decide the datatype when creating a variable, but javascript does not. This means javascript apps are vulnerable to undetected type errors that can really mess up how your data is displayed, if it is displayed at all. So this is one error to be aware of. Here is my guide about javascript data types:
https://gauteheggen.com/javascript-basics/
2. Wrongly structured json data or code.
When copying and pasting json data it is so easy to miss a little ‘}’, ‘]’ or a ), or to leave a reaminder of some data that maybe was there before. This can make your json data not valid. In order to check your json data I reccommend using the simple web tool called jsonlint. Simply paste your json data and click validate and you will get your structure either approved or your errors highlighted.
If none of this solves your issues you can always send me an email. Let me know in the email what you hav tried so far, a short description will do. And make sure to include your project files and folders.