I'm trying to create a dashboard using data from 2 csv files. The csv are exactly the same except for two of the columns (score and total) contain different values. Because of dc.js limitations, I had to aggregate them. However, when rendering the charts, the counts were doubled (one for each csv). My csv looks similar to this:
"data1.csv"
agegroup gender group scores total
18-24 M 1 0.04 1
45-54 F 2 2.23 13
25-34 M 1 0.74 6
25-34 M 2 1.47 8
18-24 F 1 2.88 7
35-44 F 2 3.98 14
"data2.csv"
agegroup gender group scores total
45-54 F 1 4.93 8
35-44 M 2 1.13 4
18-24 M 1 5.28 9
25-34 M 2 1.95 20
18-24 F 1 0.52 18
Ideally what I would like is to still make a dashboard that could sum up the totals and scores depending on if I select data1.csv
or data2.csv
, but if I were to select both, it wouldn't sum up my total
and scores
column twice.
//using queue.js to load data
var q = queue()
.defer(d3.csv, "data1.csv")
.defer(d3.csv, "data2.csv");
q.await(function(error, data1, data2){
//initiatizing crossfilter and ingesting data
var ndx = crossfilter();
ndx.add(data1.map(function(d){
return { age: d.age,
gender: d.gender,
scores: +d.scores,
total: +d.total,
type: 'data1'};
}));
ndx.add(data2.map(function(d){
return { age: d.age,
gender: d.gender,
scores: +d.scores,
total: +d.total,
type: 'data2'};
}));
//initializing charts
totalDisplay = dc.numberDisplay("#total-display");
totalScores = dc.numberDisplay("#total-scores");
//groupAll function to sum up the values.
var scoresGroup = ndx.groupAll().reduceSum(function(d) {
return d.scores;
});
var totalGroup = ndx.groupAll().reduceSum(function(d) {
return d.total;
});
//parameters for the number display. Currently it is returning NaN
totalDisplay
.formatNumber(d3.format(","))
.valueAccessor(function(d) {
return d;
})
.group(totalGroup);
totalScores
.formatNumber(d3.format(",f"))
.valueAccessor(function(d) {
return d;
})
.group(scoresGroup);