为每个类别创建直方图图表

Question

我正在尝试创建具有 ages 的直方图 (0-10), (10-20), ...(90,100)

数据集如下所示：

0: {agebracket: "20", currentstatus: "Recovered", dateannounced: "30/01/2020"}
1: {agebracket: "45", currentstatus: "Confirmed", dateannounced: "02/03/2020"}
2: {agebracket: "24", currentstatus: "Recovered", dateannounced: "02/03/2020"}
.
.
.
99: {agebracket: "58", currentstatus: "Hospitalized", dateannounced: "20/03/2020"}

我能够创建直方图，但那是在整个数据集上。我没有考虑

"currentstatus" --> "Recovered", "Hospitalized", "Deceased"

在整个数据集上：

我试图通过 currentstatus 创建直方图，但它看起来像这样：

这是我试过的：

var binwidth = 10;
var dim = cf.dimension(function(d) { 
    return parseInt(d.agebracket); });

var age_by_cases= dim.group().reduce(
// add
    (p, v) => {

      p[v.currentstatus] = (p[v.currentstatus] || 0) + 1;
      return p;
    },
// remove
    (p, v) => {
      p[v.currentstatus] -= 1;
      return p;
},
// init
    () => ({})
);

barChart
    .height(300)
    .width(500) //give it a width
    .dimension(dim)
    .group(age_by_cases, type)
    .elasticY(true)
    .valueAccessor(function(p) { 
        return p.value[type_c];
        // return (binwidth * Math.floor(parseInt(p.value[type_c])/binwidth)) ; 
        })  
    .x(d3.scaleLinear().domain([1,101]))
    .xUnits(dc.units.fp.precision(binwidth))

    .elasticX(true);

行号。 170-184 和 行号。 227-243 https://blockbuilder.org/ninjakx/8e2c0b407fdb1991c9cc5e81e447ebe2

我刚刚被这个严重打击了。不知道怎么解决。

Answer 1

通常您会在维度键函数中定义分箱：

var dim = cf.dimension(function(d) { 
    return binwidth * Math.floor(parseInt(p.agebracket)/binwidth);
};

然后，使用 xUnits 中的 bin 宽度（或其他 binning 规范），正如您所拥有的：

.xUnits(dc.units.fp.precision(binwidth))

这会导致 crossfilter 将每一行按 binwidth 向下舍入的值排序到 bin 中，并告诉 dc.js 也使用 binwidth 计算条形宽度。

为每个类别创建直方图图表

Creating a histogram chart for each category

dc.js