I am new to working with d3 and loading in data, and I had an error I could not find any solution for. I am trying to read a few csv files at once, filter them, and allow for them to be used later on with drawing my graphs. Note, the code below is simplified with the datafile names and variable names.
Promise.all([
d3.dsv(";", "data/data1.csv"),
d3.dsv(";", "data/data2.csv"),
d3.dsv(";", "data/data3.csv"),
]).then(function(data) {
var var1 = data[0].filter(d => d => d.Date_statistics.includes("-2-"));
var var2 = data[1].filter(d => d => d.Municipality_name.includes("Amsterdam"));
var var3 = data[2].filter(d => parseInt(d["Total Population"]) > 50000);
console.log("result 1: ", var1)
console.log("result 2: ", var2)
console.log("result 3: ", var3)
}).catch(function(err) {
// handle error here
console.log(err)
});
The problem I am facing, is that when I have added this to my js file, and have that added in my HTML, the console returns to me with a GET error 404, "data/data2.csv" not found(and the same for data3.csv). I'm not sure why I'm getting a 404 error here, because as far as I can tell, I'm loading the data properly as a csv, after which I'm trying to do some filtering to print.
I have tried to make the files that I put in as a variable, and use the path as the value, but that did not work either. Putting all the dsv reading functions with their individual filtering and logging separately, so not in a Promise.all() function, gives me the same result, except for the fact that it now does print the content of the first filtering.
Is there something wrong with how I'm approaching the problem(as in, I should not use Promise.all() here), or am I missing something that results in these 404 errors?