Struggling with add.Series (CSV dataset) - dimple.js

Question

I’ll try to keep this short. I have a CSV with traffic counts for specific streets. So far I have plotted the street names on the (x) axis, and the total traffic count on the (y) axis. The CSV also contains counts for vehicles that travel for (< 15 min, 15-30 min, 30-45 min, 60 min, etc).
What I am trying to do is “split” the total count for each street in accordance with the (< 15, 15-30, etc) minute counts, kind of like categories. Essentially, I am trying to replicate this example:
http://dimplejs.org/examples_viewer.html?id=bars_vertical_grouped_stacked where the “Owner” category is instead the “Arterial” category from my dataset.
In short:
1. I can semi-successfully split some of the street names, however, some don’t seem to be split at all even though counts exist for the categories.
The tooltip is not showing category-specific counts. It seems to be shoving all of the counts into one tooltip regardless of hovering over a category.
For the legend, is there a way to ensure that it uses the street names? If I remove the “Commute” values and leave “Arterial” it uses the names correctly, but then I lose the ability to show the categories.
I hope this isn’t too confusing. I’d sincerely appreciate any help.
CODE:
var svg = dimple.newSvg("#chartContainer", 1280, 720);
d3.csv("../HTML/strippedData_v2.csv", function (data) {
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 45, 510, 315)
myChart.addCategoryAxis("x", ["Arterial"]);
myChart.addMeasureAxis("y", "Total");
myChart.addSeries(["Arterial", "Commute15", "Commute1530", "Commute3045", "Commute4560", "Commute60"], dimple.plot.bar);
myChart.addLegend(200, 10, 380, 20, "right");
myChart.draw();
});
IMAGES: (Don't have enough rep :/)
(Only the first 3 images of the gallery apply.)
http://imgur.com/a/8P2tN#0

Answer 1

I'm struggling to work out exactly how you would like the chart to look. I suspect the problem may be the CommuteXX fields. It sounds like you are trying to treat them as dimension values, whereas dimple treats columns as dimensions (and their row values as dimension values). Therefore you need to reorganise your data something like this:
Arterial |Commute |Population
Colfax Avenue |Commute15 |1380
Colfax Avenue |Commute1530 |1641
Colfax Avenue |Commute3045 |855
Etc...
This can be done in Javascript once the CSV is loaded. Here is a function to do that:
function unPivot(sourceData, valueFields, newCategoryField, newValueField) {
var returnData = [],
newRow,
key,
i,
j;
for (i = 0; i < sourceData.length; i += 1) {
for (j = 0; j < valueFields.length; j += 1) {
newRow = {}
for (key in sourceData[i]) {
if (sourceData[i].hasOwnProperty(key) && valueFields.indexOf(key === -1)) {
newRow[key] = sourceData[i][key];
}
}
newRow[newCategoryField] = valueFields[j];
newRow[newValueField] = sourceData[i][valueFields[j]];
returnData.push(newRow);
}
}
return returnData;
};
And here it is in a fiddle: http://jsfiddle.net/GeLng/15/
I'm not sure if this is the chart you are looking for, you mention a grouped bar but I'm not sure what you want to group by. Hopefully this will give you enough to create the chart the way you want.