列中带有键的堆积图

Question

我正在尝试使用来自 WHO 的一些 CSV 数据构建堆积面积图，格式如下：

date,governate,cases,deaths,fatalRate,attackRate,english
05/22/17,Abyan,1068,10,0.9,1.75,Abyan
05/22/17,Aden,489,12,2.5,0.51,Aden
05/22/17,Al Bayda,1498,6,0.4,1.95,Al Bayda
05/22/17,Al Dhale'e,1401,8,0.6,1.86,Al Dhale'e
05/22/17,Al-Hudaydah,1397,32,2.3,0.42,Al Hudaydah
05/22/17,Al_Jawf,189,3,1.6,0.29,Al Jawf
05/22/17,Al Mahwit,2486,34,1.4,3.27,Al Mahwit
05/22/17,Amanat Al Asimah,9216,33,0.4,2.79,Amanat Al Asimah
05/22/17,Amran,3743,45,1.2,2.45,Amran
05/22/17,Dhamar,1617,33,2,0.76,Dhamar
05/22/17,Hajjah,4664,42,0.9,2.1,Hajjah
05/22/17,Ibb,1378,37,2.7,0.45,Ibb
...

我已经成功地嵌套了数据，并构建了一个折线图，显示每个省份的死亡人数，随着时间的推移。但是，我想显示一段时间内的累积死亡人数，这需要一个堆积面积图，就像这里的这个例子：https://bl.ocks.org/greencracker/e08d5e789737e91d6e73d7dcc34969bf

我之前创建了堆积面积图，但通常数据在顶部都有相关键，就像在我发布链接的示例中一样，或者像这样的数据：

day,titanic,avatar,akira,frozen,deliverance,avengers
1,20,8,3,0,0,0
2,18,5,1,13,0,0
3,14,3,1,10,0,0
4,7,3,0,5,27,15
5,4,3,0,2,20,14
6,3,1,0,0,10,13
7,2,0,0,0,8,12

为面积堆栈图格式化数据只需要我运行d3.stack().keys(["titanic","avatar","akira","frozen","deliverance","avengers"])

但是，使用 WHO 的这种特殊数据格式，我希望对数据进行排序的相关“键”实际上都在“治理”列中。就好像上面的数据是这样格式化的：

day,movie,value
1,titanic,20
1,avatar,8
1,akira,3
1,frozen,0
1,deliverance,0
1,avengers,0
2,titanic,18
2,avatar,5
2,akira,1
2,frozen,13
...etc

我如何格式化数据，以便它可以按省在 x 时间轴上堆叠？

感谢您的帮助！

Answer 1

最简单和最懒惰的解决方案是简单地将d3.csv加载并解析该CSV之后的数据结构转换为您想要的数据结构，适合传递给堆栈生成器。

在这个解决方案中，我首先用行函数去掉了不必要的列...

function(d) {
    return {
        date: d.date,
        governate: d.governate,
        deaths: +d.deaths
    }
}

然后我使用这个 sn-p（其中 rawData 是 d3.csv 解析的数据）来获取唯一日期和这些日期的所有值：

var data = [...new Set(rawData.map(function(d) {
    return d.date
}))].map(function(d) {
    var obj = {};
    rawData.forEach(function(e) {
        if (e.date === d) {
            obj[e.governate] = e.deaths
        }
        obj.date = d;
    })
    return obj;
})

这里是演示：

var csv = `date,governate,cases,deaths,fatalRate,attackRate,english
05/22/17,Abyan,1068,10,0.9,1.75,Abyan
05/22/17,Aden,489,12,2.5,0.51,Aden
05/22/17,Al Bayda,1498,6,0.4,1.95,Al Bayda
05/22/17,Al Dhale'e,1401,8,0.6,1.86,Al Dhale'e
05/22/17,Al-Hudaydah,1397,32,2.3,0.42,Al Hudaydah
05/22/17,Al_Jawf,189,3,1.6,0.29,Al Jawf
05/22/17,Al Mahwit,2486,34,1.4,3.27,Al Mahwit
05/22/17,Amanat Al Asimah,9216,33,0.4,2.79,Amanat Al Asimah
05/22/17,Amran,3743,45,1.2,2.45,Amran
05/22/17,Dhamar,1617,33,2,0.76,Dhamar
05/22/17,Hajjah,4664,42,0.9,2.1,Hajjah
05/22/17,Ibb,1378,37,2.7,0.45,Ibb
05/23/17,Abyan,1068,9,9.9,1.75,Abyan
05/23/17,Aden,489,92,9.5,0.51,Aden
05/23/17,Al Bayda,1498,9,0.4,1.95,Al Bayda
05/23/17,Al Dhale'e,1401,9,0.6,1.86,Al Dhale'e
05/23/17,Al-Hudaydah,1397,92,2.3,0.42,Al Hudaydah
05/23/17,Al_Jawf,189,9,1.6,0.29,Al Jawf
05/23/17,Al Mahwit,2486,94,1.4,3.27,Al Mahwit
05/23/17,Amanat Al Asimah,9216,93,0.4,2.79,Amanat Al Asimah
05/23/17,Amran,3743,95,1.2,2.45,Amran
05/23/17,Dhamar,1617,93,2,0.76,Dhamar
05/23/17,Hajjah,4664,92,0.9,2.1,Hajjah
05/23/17,Ibb,1378,97,2.7,0.45,Ibb`;

var rawData = d3.csvParse(csv, function(d) {
  return {
    date: d.date,
    governate: d.governate,
    deaths: +d.deaths
  }
});

var data = [...new Set(rawData.map(function(d) {
  return d.date
}))].map(function(d) {
  var obj = {};
  rawData.forEach(function(e) {
    if (e.date === d) {
      obj[e.governate] = e.deaths
    }
    obj.date = d;
  })
  return obj;
})

console.log(data)

<script src="https://d3js.org/d3.v4.min.js"></script>

现在，有了这个 data 数组结构，您可以使用堆栈生成器 (d3.stack())。