Можно ли нарисовать сгруппированную гистограмму с помощью Dc.js?

Question

Можно ли нарисовать сгруппированную гистограмму с помощью Dc.js?

здесь образец моих данных (CSV):

English_GPA,English_level,GPA,Total_Distance,Math_GPA,Math_level 
2.533333333,C+,3.27,53,3.825,A- 
2.85,B-,2,92,1.425,D+ 
1.766666667,C-,2.81,42,2.675,B- 
2,C,2.33,92.5,2.925,B- 
1,D,1.43,16,0.666666667,F 
2.666666667,C+,1.88,147,1.675,C- 
2.866666667,B-,3.49,42,3.175,B 
1.65,D+,2.11,67,1,D 
3.9,A-,2.31,42,1.9,C- 
1,D,2.34,32,2.9,B- 
2,C,2,49,1.675,C- 
2.3,C,1.91,37.5,2,C 
1.7,C-,2.14,7,0.85,F 
3.2,B,3.38,43,3.4,B+ 

Я новичок в этой библиотеке, я хочу, чтобы вычислить среднее ГПД затем положить его в оси у и (English_level и Math_level) в x-axis, так возможно в этой библиотеке?

Я пытался использовать compositeChart с 2 измерения, но он не работает для меня ..

вот моя попытка:

function grid (selector,data) { 
    var ndx = crossfilter(data), 
     all = ndx.groupAll(); 

    var bar_Math_level = dc.compositeChart(selector + " .Math_level"); 
    var bartry = dc.barChart(selector + " .English_level"); 
    var Math_level = ndx.dimension(function(d) { 
     if (typeof d.Math_level == "undefined") return ""; 
     return d.Math_level; 
     }); 
    var English_level = ndx.dimension(function(d) { 
     if (typeof d.English_level == "undefined") return ""; 
     return d.English_level; 
     }); 
    var Math_levelGroup1 = Math_level.group().reduce(
    function(p, v) { 
    ++p.count; 
     p.total += v.GPA; 
     if (p.count == 0) { 
      p.average = 0; 
     } else { 
      p.average = p.total/p.count; 
     }; 
     return p; 
    }, 
    function (p, v) { 

    --p.count; 
     p.total -= v.GPA; 
     if (p.count == 0) { 
      p.average = 0; 
     } else { 
      p.average = p.total/p.count; 
     }; 
     return p; 
    }, 
    function (p, v) { 
    return { 
      count: 0, 
      total: 0, 
      average: 0 
     }; 
    } 
); 

var English_levelGroup2 = English_level.group().reduce(
    function(p, v) { 

    ++p.count; 
     p.total += v.GPA; 
     if (p.count == 0) { 
      p.average = 0; 
     } else { 
      p.average = p.total/p.count; 
     }; 
     return p; 
    }, 
    function (p, v) { 

    --p.count; 
     p.total -= v.GPA; 
     if (p.count == 0) { 
      p.average = 0; 
     } else { 
      p.average = p.total/p.count; 
     }; 
     return p; 
    }, 
    function (p, v) { 
    return { 
      count: 0, 
      total: 0, 
      average: 0 
     }; 
    } 
); 



    bar_Math_level 
    .width(650) 
    .height(200) 
    .dimension(Math_level) 
    .group(Math_level.group()) 

    .compose([ 
    dc.barChart(bar_Math_level) 
     .dimension(Math_level) 
     .gap(50) 
     .group(Math_levelGroup1, 'Math', function(d) { 
     return d.value.average; 
     }) 
     .colors('red'), 
    dc.barChart(bartry) 
     .dimension(English_level) 
     .outerPadding(0) 

     .group(English_levelGroup2, 'English', function(d) { 
     return d.value.average; 
     }) 
     .outerPadding(0) 
     .gap(80) 
     .colors('blue') 
    ]) 

    .yAxisLabel('Total_GPA') 

    .x(d3.scale.ordinal()) 
    .xUnits(dc.units.ordinal) 

    .xAxisLabel('Level'); 
bar_Math_level.render(); 

dc.renderAll(); 
} 

Вот что я получил:

и я хочу сделать один из них:

Если это невозможно, Я использую другую библиотеку и связываю ее с другими графиками dc.js? и как?

Answer 1

Существует два запроса на тягу с этой функциональностью. Пожалуйста, попробуйте один или оба и комментарии в ССБ с опытом:

https://github.com/dc-js/dc.js/pull/1043

https://github.com/dc-js/dc.js/pull/984

EDIT: Я построил каждой из предложенных реципиентов на своих собственных филиалов и добавлены инструкции по загрузке промелькивает ,