列中有键的叠加图表

Question

我正试图用世卫组织的一些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"])

然而，根据世卫组织的这一特定数据格式，我希望对数据进行分类的相关“关键”实际上都在“政府”一栏中。以上数据的格式如下：

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加载和解析后的数据结构转换为您想要的数据结构，适合传递给堆栈生成器。

在这个解决方案中，我首先消除了带有行函数的不必要列.

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())。