dc.js: stacked area chart using reduceCount method
I'm fairly new to the dc.js/crossfilter/d3 trifecta, and have a question about grouping variables for building a stacked area chart. I've been following tutorials like this one that show how to generate a time series chart. This has been really useful, however my method of defining the .group() method of the chart is slightly different. In the example, the author has data of the form {'date': somedate, 'http_404': 20, 'total': 340 ... } where each type of http request has some sort of explicit value associated with the http key. It's then straightforward to employ the .reduceSum() method to group the number of overall http requests by date like so var hits = dateDim.group().reduceSum(function(d) {return d.total}) .
The author then defines a variable for each type of http request in order to define a series for each like so var http_404 = dateDim.group().reduceSum(function(d) {return d.http_404}) . These variables are then fed to the .group() and .stack() methods in the chart sections in the code. This makes sense to me. However, I'm using data where there is no pre-calculated value for variables I would like to plot, and instead I need to simply count the number of records in my data that contain a certain value. So I have something of the form:
'name', 'occupation', 'group', 'date_joined' 'John', 'plumber', 'A', '12/01/01' 'Jane', 'programmer', 'B', '12/22/04' 'Jim', 'manager', 'B', '1/8/05' 'Jill', 'motivational speaker', 'A', '5/14/12'
where I need to be able to count how many people are in a certain group and plot each as a series over time and use these as a .stack() in the time chart I'm creating. I know I need to use the .reduceCount() method, and this has worked for simply counting the total number of records split by day, but I'm unsure about how to split out the different groups. I suspect my misunderstanding stems from lack of overall knowledge about map-reduce heuristics, so any pointers on the basics of that, especially as they pertain to crossfilter, would be greatly appreciated. Any help would be greatly appreciated. Thanks for reading.
UPDATE: I've been able to plot multiple series, but I the resulting graph is incorrect. I've tried implementing a conditional that checks which group the records are in and assigns them to variables like so: var group_A = dateDim.group().reduceCount(function(d) {if (d.group == "A") {return d.group} }) and the same for the B group. However, when I plot these, I get two series that have the same values duplicated at each data point stacked on top of one another. Any insight on this problem would be greatly appreciated.
There are a number of ways to do this. To get it working the way you tried, you'll want your reduce function to (always) return a value, so
var group_A = dateDim.group().reduceCount(function(d) {
if (d.group == "A") return 1;
else return 0;
});
Another thing people commonly do is reduce all the values into one composite group:
var group = dateDim.group().reduce(function(p, d) {
p[d.group] = (p[d.group] || 0) + 1;
return p;
},
function(p, d) {
--p[d.group];
return p;
},
function() { return {}; }
);
Then you'd use accessors for your stack calls:
.stack(group, function(d) { return d["A"] || 0; })
上一篇: 更改dc.js折线图中的数据组并重绘它