javascript - 在列中包含键的堆积图

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的这种特殊数据格式，我希望对数据进行排序的相关“键”实际上都在“governate”列中。就好像上面的数据是这样格式化的:

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
    }
}

然后我使用此代码段(其中 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())。