如何按值过滤行，然后计数并绘制饼图和直方图？

Question

我的数据是这样的：

{
    "raw_data": [
        {
            "agebracket": "",
            "currentstatus": "Hospitalized",
            "dateannounced": "05/06/2020",
            "gender": "",
            ....
        },
        {
            "agebracket": "",
            "currentstatus": "Recovered",
            "dateannounced": "05/06/2020",
            "gender": "",
            .........
        },
        {
            "agebracket": "",
            "currentstatus": "Hospitalized",
            "dateannounced": "05/06/2020",
            "gender": "",
            .......
        },

我能够为整个数据集绘制直流图。但是现在我想通过 "currentstatus" --> "Recovered", "Hospitalized", "Deceased".

来过滤它

现在看起来像这样： https://blockbuilder.org/ninjakx/3699d4c0efb0ac1d81636cf0e05eda2d

我正在尝试将其与 https://blockbuilder.org/ninjakx/fbbae54c3f4d8b2df8f9b981d46857b4 集成。

当我单击确认框时，饼图和直方图将显示与住院相关的结果。在上面的（仪表板）中，这三个图不必交叉过滤，所以我能够编写逻辑。但是我对这个感到困惑。我应该如何通过 "currentstatus" ("Hospitalized, "Recovered" etc)

过滤它

我希望它采用 "currentstatus" 变量和与之相关的 return 结果。

var group = dim.group(function(d) { 
    return binwidth * Math.floor(d/binwidth); });

这样我就可以做到:

    barChart
        .height(300)
        .width(500) //give it a width
        .dimension(dim)
        .group(group, currentstatus) //<------------------ Here
           .......

我正在考虑为 Hospitalized、Recovered 和 Deceased Resp 创建三个数组。但我认为可能有一些比走这么长的路更短的解决方案。

编辑：

我也试过了，但我不知道怎么数。

结果应该是（使用pandas计算）：

gender  currentstatus
F       Deceased           31
        Hospitalized     4225
        Recovered          33
M       Deceased           60
        Hospitalized     7570
        Recovered          50

但我明白了：

0:
key: "M"
value: {Hospitalized: 7549, Deceased: 51, Recovered: 13}
__proto__: Object
1: {key: "NA", value: {…}}
2:
key: "F"
value: {Hospitalized: 4200, Deceased: 25, Recovered: 7}
__proto__: Object
length: 3
__proto__: Array(0)

我怎么算？我知道下面的逻辑是错误的：

var group1 = pieTypeDimension.group().reduce(
    function(p, v) { // add
        p[v.currentstatus] = (p[v.currentstatus] || 0) + 1;
        return p;
    },
    function(p, v) { // remove
        p[v.currentstatus] -= 1;
        return p;
    },
    function() { // initial
        return {};
    });

log("group1:::", group1.top(Infinity));

也试过这个：

var group1 = pieTypeDimension.group().reduce(
    function(p, v) { // add
        ++p.count;
        log("count:::", p.count);
        p[v.currentstatus] = (p[v.currentstatus] || 0) + p.count;
        return p;
    },
    function(p, v) { // remove
        --p.count;
        p[v.currentstatus] -= p.count;
        return p;
    },
    function(p, v) { // initial
        return {count:0};
    });

得到这个：

0:
key: "M"
value:
count: 7613
Hospitalized: 28769566
Deceased: 173237
Recovered: 39888
__proto__: Object
__proto__: Object
1:
key: "NA"
value: {count: 3, Hospitalized: 6}
__proto__: Object
2:
key: "F"
value: {count: 4232, Hospitalized: 8903341, Deceased: 43001, Recovered: 10686}
__proto__: Object
length: 3
__proto__: Array(0)

编辑：

我没有考虑年龄段的问题。考虑到 Now 它与 dc.js 解决方案相匹配。所以这个逻辑是正确的。

gender  currentstatus
F       Deceased           25
        Hospitalized     4200
        Recovered           7
M       Deceased           51
        Hospitalized     7549
        Recovered          13
Name: currentstatus, dtype: int64

Answer 1

我会以过滤的方式回答，因为这是 dc.js 的主要用例。

我建议对堆叠图表使用惯用的交叉过滤器缩减，只是不要实际堆叠任何东西。

From the FAQ:

var group = dimension.group().reduce(
    function(p, v) { // add
        p[v.type] = (p[v.type] || 0) + v.value;
        return p;
    },
    function(p, v) { // remove
        p[v.type] -= v.value;
        return p;
    },
    function() { // initial
        return {};
    });

你的 type 是 currentstatus.

这将为您提供一个组，其中的值是按状态键入的对象。

如果你有每个 X 值的每个状态，那么每个值对象都会有所有状态作为键；如果没有，有些将是未定义的。

使用 valueAccessor 拉取图表所需的字段，如果未定义则默认为 0：

chart.valueAccessor(kv => kv.value[currentstatus] || 0)

如何按值过滤行，然后计数并绘制饼图和直方图？

How can I filter rows by value and then count and plot pie chart and histogram?

crossfilter

dc.js

编辑：

编辑：