Сложенная диаграмма с ключами в столбцах

Я пытаюсь построить диаграмму с накоплением областей, используя некоторые данные 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 времени?

Спасибо за вашу помощь!

Источник

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

Источник
Другие вопросы по тегам