Crossfilter Grouping

I've just started getting to grips with Crossfilter (used with D3 and DC) and I'm running in to a problem trying to group data and output a chart based on that grouping. I have some data which records a date, a start and end time, and an activity. What I'm trying to acheive is a pie chart which will show the proportion of time spent on each activity, and a stacked bar chart which should break down the activities by day with the stack being composed of the time spent on each activity on a given day. Here is the code I have so far (with a small sample dataset):

var data = [
    {
      "starttime": 1470322800,
      "endtime": 1470330000,
      "activity": "Other",
      "capturedate": 1470268800
    },
    {
      "starttime": 1470391200,
      "endtime": 1470410400,
      "activity": "Photography",
      "capturedate": 1470355200
    },
    {
      "starttime": 1470411000,
      "endtime": 1470414600,
      "activity": "Admin",
      "capturedate": 1470355200
    },
];

function doTime(t){
    var d = moment.duration(t, 'seconds');
    var hours = Math.floor(d.asHours());
    var mins = Math.floor(d.asMinutes()) - hours * 60;
    goTime = hours + " Hours " + mins + " Mins";
    return goTime;
}

data.forEach(function(d) {
    d.capturedate = new Date(d.capturedate * 1000);
    d.Day=d.metacapturedate.getDate();
    d.Month=d.metacapturedate.getMonth();
    d.Year=d.metacapturedate.getFullYear();

    var dur = d.endtime - d.starttime;
    d.duration = doTime(dur);
});


var activityLog = crossfilter(data);

var actDim = activityLog.dimension(function(d){return d.activity;});
var dayDim = activityLog.dimension(function(d){return +d.Day;});

var myPho = dayDim.group().reduceCount(function(d){if(d.activity == "School Photography"){return d.duration}else{return 0;}});
var myAdm = dayDim.group().reduceCount(function(d){if(d.activity == "Activity"){return d.duration}else{return 0;}});
var myOth = dayDim.group().reduceCount(function(d){if(d.activity == "Other"){return d.duration}else{return 0;}});
var countMeasure = actDim.group().reduceCount();

var actRingChart   = dc.pieChart("#chart-ring-act");
var actBarChart   = dc.barChart("#chart-bar-act");

actRingChart
    .width(320).height(320)
    .dimension(actDim)
    .group(countMeasure)
    .legend(dc.legend().x(110).y(120).itemHeight(13).gap(5))
    .renderLabel(false)
    .innerRadius(80);

// set up the bar chart
actBarChart
    .width(800).height(400)
    .dimension(dayDim)
    .group(myPho,"Photography")
    .stack(myAdm,"Admin")
    .stack(myOth,"Other")
    .x(d3.scale.linear().domain([1,8]))
    .yAxisLabel("Time Spent Per Day");

// render all charts
dc.renderAll();

This is giving me a pie chart showing the proportion of the number of times an activity has been carried out (rather than a proportion of time spent) and a bar chart which similarly shows a count of activities rather than a duration. I'm still a bit hazy on how grouping and map-reduce stuff works in Crossfilter, so I'm unclear on how to interogate the data properly. Any help or nudges in the right direction would be very gratefully received.

(I'm also using Moment.js to handle the date/time format stuff, but not having any issues with doing that).

Thanks

链接地址: http://www.djcxy.com/p/32706.html

上一篇: dc.js和crossfilter二级聚合到每小时平均计数

下一篇: Crossfilter分组