Ok, big disclaimer: I'm a novice programmer, and this is my first time ever with javascript and d3.js.
I'm working on a project using d3.js. I have 100 datasets(all stored locally in a folder) of different cryptocurrencies, and I'd like to build graphs to study them. I've implemented nice functions to draw interactive graphs and to preprocess data. Everything works just fine as long as I decide to work with a single dataset. Why? Because I'm basically doing all the things that I'd like to do with my data inside the callback of the d3.csv(path,callback(data){...}).
Since I'd like to change dynamically the datasets(a.k.a. the path), for example with a dropdown menu, I'd like to have a way to load the csv like I'd do in python:
with open('testfile.csv', newline='') as csvfile:
data = list(csv.reader(csvfile))
I thought that a possible solution would have been to create a global variable and filling it with the preprocessed data inside the callback... but if I try to print or to use in any way these data inside the global variable, this is not working(I readed every stackoverflow post about this and I'm 99.9% saying that it's an asynchronicity issue)(check snippet of code down here).
// SNIPPET OF CODE THAT IT DOES **NOT** WORK
var my_global_variable = {"name": keyword,"date": [], "high": [],"low": [],"market cap": [],"open": [],"close": [],"volume": []};
var _data_ = d3.csv(path, function(data) {
my_global_variable = FunctionToProcessData(data)
})
console.log(my_global_variable)
The print I get is the following(sorry,not enough reputation on SO for posting an image):
{name: "Dogecoin", date: Array(0), high: Array(0), low: Array(0), market cap: Array(0), …}
But it's weird because if I click the dropdown arrow on the console of my browser where I'm running the code, even though here it is written that each array inside the keys of my_global_variable is empty( 0), after clicking it I WILL SEE ELEMENTS, like if they get created only when I specifically requested it:
{name: "Dogecoin", date: Array(0), high: Array(0), low: Array(0), market cap: Array(0), …}
close: (1378) ["0.000772", "0.000755", "0.000862", …]
date: (1378) [Fri Sep 22 2017 00:00:00 GMT+0200 (Ora legale dell’Europa centrale), …]
market cap: (1378) ["84749600", "94429700", "97923500", …]
name: "Dogecoin"
open: (1378) ["0.000762", "0.00085", "0.000881", …]
volume: (1378) ["3758470", "3157030", "4641920", …]
__proto__: Object
I'm not an expert of javascript: is there a way to load data from a local folder and use them as I would do simply in python? A.K.A. : Can anyone give me a solution for this?
I report here my code to clear any possible doubt: HTML FILE:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<script src="test.js" defer></script>
</head>
<body>
<div id="my_dataviz">
</div>
</body>
Javascript test.js file:
var keyword = "Dogecoin";
var path = `archive/${keyword}.csv`;
var data_final = {"key": keyword,"values": []}
var svg = d3.select("#my_dataviz").append("svg").attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom).append("g").attr("transform","translate(" + margin.left + "," + margin.top + ")").attr("id", 1)
var margin = {top: 10, right: 30, bottom: 30, left: 60},
width = 460 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
var _data_ = d3.csv(path, function(data) {
data_final = FunctionToProcessData(data)
draw_time_chart(svg,margin,data_final,attr)
})
function FunctionToProcessData(data){
// do stuff with my data.
// It's quite long and not the point of this question,
// so I won't copypaste it here
return data_final
}
function draw_time_chart(svg,margin,data_final,attr){
// do stuff to draw a graph with my data.
// It's quite long and not the point of this question,
// so I won't copypaste it here
}
P.S. Yes,I have already checked d3: make the d3.csv function syncronous , but this didn't solve my issue.
