D3 and Incompatible Versions
Different versions of D3 don’t play along well. If you are following a book or tutorials, make sure to check which version of D3 is used or some things won’t work as expected.
Here is an example of loading a CSV file.
D3 and Incompatible Versions/Syntax
Loading a CSV file in D3 changes with different versions of D3
and this incompatibility is very confusing.
As shown in this blog post about promises
syntax. There are differences in D3 loading a CSV
in D3.v4
and D3.v5
.
For D3.v4
you can use this syntax:
d3.csv("file.csv", function(data) {
somethingHappens(data);
console.log(data);
});
Create these files as shown in Setup D3 Step by Step:
index.html
main.css
project.js
Create a CSV file called file.csv
that has year
and population
as shown:
year,population
1950,5
1951,10
1955,15
1959,20
The index.html
is using this source https://d3js.org/d3.v5.min.js
.
Add this code to project.js
:
d3.csv("file.csv", function(data) {
console.log(data);
});
Reload the browser and look at the console:
Navigated to http://127.0.0.1:8888/index.html
project.js:2 {year: "1950", population: "5"}
project.js:2 {year: "1951", population: "10"}
project.js:2 {year: "1955", population: "15"}
project.js:2 {year: "1959", population: "20"}
This works so far and we are using the source for D3.v5
instead of v4
.
Clear the console with Ctrl + L
or type clear()
(this won’t clear if you set Preserve log
).
This syntax from D3 v4
won’t work on v5
as shown on D3 API docs. Actually this documentation is pretty confusing as it doesn’t specify which D3 version is used in the examples:
d3.csv("file.csv", function(data) {
}).then(function(data) {
console.log(data);
});
The data is not loaded and the console shows this:
Navigated to http://127.0.0.1:8888/index.html
[columns: Array(2)]
columns: Array(2)
0: "year"
1: "population"
length: 2
__proto__: Array(0)
...
...
This doesn’t work either:
var mydata = d3.csv("file.csv", function(data) {
});
First it returns undefined
. Then calling the variable:
mydata
Shows this:
Promise {<resolved>: Array(0)}
__proto__: Promise
[[PromiseStatus]]: "resolved"
[[PromiseValue]]: Array(0)
columns: (2) ["year", "population"]
length: 0
__proto__: Array(0)
Make sure to check which version of D3 is used since errors will drive you crazy. More about promises
in D3 Load a CSV file with Promises