Как реализовать pie chart в d3.js?

Question

[rinatoptimus]

Есть JSON-файл

[{
    "sex" : "male",
    "name" : "Ted",
    "age": 23
}, {
    "sex" : "male",
    "name" : "Mark",
    "age": 33
}, {
    "sex" : "female",
    "name" : "Mary",
    "age": 32
}, {
    "sex" : "male",
    "name" : "Valery",
    "age": 26
}, {
    "sex" : "female",
    "name " : "Olga",
    "age": 29
}]

Как создать на d3.js простой pie chart, чтобы он показывал соотношение мужчин и женщин в процентах? В данном случае, примерно 70% чарта будет Мужчины и 30% Женщины. Все примеры, которые я видел, строят чарт на основе числовых значений.
Вот нашел пример, который почти то, что нужно:
bl.ocks.org/phil-pedruco/a326c32fb44b10d979d2
- но в нем берутся данные из CSV-файла, пробовал отредактировать под JSON, почему-то не выводятся:
plnkr.co/edit/cE77QKAeDKi304666cWJ?p=preview

Comments

[Алексей Уколов]

пробовал отредактировать под JSON, почему-то не выводятся.

Наверное, вы что-то не так сделали.

Answer 1

[rinatoptimus]

Решение. Добавил такой код:

var data = d3.nest()
              .key(function(d) {
                  return d.sex;
              })
              .rollup(function(d) {
                  return d.length;
              }).entries(json_data); 
    
              data.forEach(function(d) {
                  d.percentage = d.values  / json_data.length;
              });

plnkr.co/edit/cE77QKAeDKi304666cWJ?p=preview