I'm currently developing a user interface where individuals can select CSV names by clicking on corresponding buttons to visualize the combined data in a chart.
The setup involves adding the selected CSV names to an array (referred to as chosenData) with each button click. Subsequently, a for loop is used to iterate through the chosenData array, fetch the data from GitHub, and append all data into another array named allData.
Unfortunately, there seems to be an issue with the data not merging correctly. I've spent hours trying to troubleshoot this problem without success, so any assistance would be greatly appreciated!
Find the relevant code below, and you can also access the jsfiddle for reference.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<title>combine CSVs</title>
</head>
<body>
<button id="arr1" class="button">arr1</button>
<button id="arr2" class="button">arr2</button>
<button id="arr3" class="button">arr3</button>
<button id="arr4" class="button">arr4</button>
<button id="arr5" class="button">arr5</button>
<script>
var parseTime = d3.timeParse("%Y-%m")
let chosenData = []
let allData = []
$('.button').on('click', d => {
let data = event.target.id
console.log(data)
chosenData.push(data)
console.log('chosenData', chosenData)
obtainData(chosenData)
})
function obtainData(chosenData) {
for (i = 0; i < chosenData.length; i++) {
let arrayName = chosenData[i]
let dailyData = axios.get("https://raw.githubusercontent.com/sprucegoose1/sample-data/main/" + chosenData[i] + ".csv")
.then(content => {
let single = content.data
let singleCSV = d3.csvParse(single)
singleCSV.forEach(d => {
d.value = +d.value
d.interval = +d.interval
d.time = +d.time
d.code = arrayName
d.date = parseTime(d.date);
})
console.log('single data', singleCSV)
allData.push(singleCSV)
})
}
const merge = allData.flat(1);
chartData(merge);
}
function chartData(allData) {
console.log('all data', allData)
// create a chart with combined data here
}
</script>
</body>
</html>