Search code examples
javascriptd3.jsrollup

Rollup returns undefined or array with value when using map

I'm currently working with a rather large dataset so I'm looking to make the data variable smaller by nesting the data in a new variable 'nested_data'.

This is the data I'm using:

Landen,"Perioden","SITC","Onderwerpen_1","Waarde eenheid","Waarde"
Afghanistan,"2012","0 Voeding en levende dieren","Invoerwaarde","mln euro","1"
Afghanistan,"2012","1 Dranken en tabak","Invoerwaarde","mln euro","0"
Afghanistan,"2012","2 Grondstoffen niet eetbaar behalve...","Invoerwaarde","mln euro","."
Afghanistan,"2012","3 Minerale brandstoffen smeermiddele...","Invoerwaarde","mln euro","."
Afghanistan,"2012","4 Dierlijke en plantaardige oliën en ...","Invoerwaarde","mln euro","."
Afghanistan,"2012","5 Chemische producten","Invoerwaarde","mln euro","0"
Afghanistan,"2012","6 Fabricaten hoofdzakelijk gerangschi...","Invoerwaarde","mln euro","0"
Afghanistan,"2012","7 Machines en vervoermaterieel","Invoerwaarde","mln euro","1"
Afghanistan,"2012","8 Diverse gefabriceerde goederen","Invoerwaarde","mln euro","1"
Afghanistan,"2012","9 Niet afzonderlijk genoemde goederen","Invoerwaarde","mln euro","0"

I want this to be the result of the rollup:

[
{
  "key": "0 Voeding en levende dieren",
  "value": 1
},
{
  "key": "1 Dranken en tabak",
  "value": 0
},
{
  "key": "2 Grondstoffen niet eetbaar behalve...",
  "value": 7
},
{
  "key": "3 Minerale brandstoffen smeermiddele...",
  "value": 1
},
{
  "key": "4 Dierlijke en plantaardige oliën en ...",
  "value": 9
},
{
  "key": "5 Chemische producten",
  "value": 4
},
{
  "key": "6 Fabricaten hoofdzakelijk gerangschi...",
  "value": 12
},
{
  "key": "7 Machines en vervoermaterieel",
  "value": 3
},
{
  "key": "8 Diverse gefabriceerde goederen",
  "value": 0
},
{
  "key": "9 Niet afzonderlijk genoemde goederen",
  "value": 13
}
]

I've tried using d3 rollup like this:

.rollup(function(d){
    return d.Waarde;
})

This has the following result:

result1

My second attempt was using 'map', as follows:

.rollup(function(value){
        return value.map(function(d){
            return d.Waarde;
        })
   })

I liked that result much better but it's still not what I'm looking for:

result2

While this method does add the correct value to the object, it puts it into an array (which 'map' obviously does). However I would like it to not place the value into an array but simply as the value of the key.

Solution

  • In your rollup method, that first argument...

    .rollup(function(d){
    return d.Waarde;
})

    ...is not an object: it's an array instead. Therefore, you almost got it right when you used map...

    .rollup(function(value){
    return value.map(function(d){
        return d.Waarde;
    })
})

    ...but the problem is that map will return an array, and that's not what you want. You want a sum:

    .rollup(function(d) {
    return d3.sum(d, function(e) {
        return e.Waarde
    });
})

    Here is a demo with some changes in your data (you have "." as the value in some rows, which makes little sense here):

    const csv = `Landen,"Perioden","SITC","Onderwerpen_1","Waarde eenheid","Waarde"
Afghanistan,"2012","0 Voeding en levende dieren","Invoerwaarde","mln euro","1"
Afghanistan,"2012","1 Dranken en tabak","Invoerwaarde","mln euro","0"
Afghanistan,"2012","2 Grondstoffen niet eetbaar behalve...","Invoerwaarde","mln euro","4"
Afghanistan,"2012","3 Minerale brandstoffen smeermiddele...","Invoerwaarde","mln euro","2"
Afghanistan,"2012","4 Dierlijke en plantaardige oliën en ...","Invoerwaarde","mln euro","7"
Afghanistan,"2012","5 Chemische producten","Invoerwaarde","mln euro","0"
Afghanistan,"2012","6 Fabricaten hoofdzakelijk gerangschi...","Invoerwaarde","mln euro","0"
Afghanistan,"2012","7 Machines en vervoermaterieel","Invoerwaarde","mln euro","1"
Afghanistan,"2012","8 Diverse gefabriceerde goederen","Invoerwaarde","mln euro","1"
Afghanistan,"2012","9 Niet afzonderlijk genoemde goederen","Invoerwaarde","mln euro","0"
Afghanistan,"2012","9 Niet afzonderlijk genoemde goederen","Invoerwaarde","mln euro","5"
Afghanistan,"2012","9 Niet afzonderlijk genoemde goederen","Invoerwaarde","mln euro","2"
Afghanistan,"2012","9 Niet afzonderlijk genoemde goederen","Invoerwaarde","mln euro","9"`;

const data = d3.csvParse(csv, d3.autoType);

const nest = d3.nest()
  .key(function(d) {
    return d.SITC
  })
  .rollup(function(d) {
    return d3.sum(d, function(e) {
      return e.Waarde
    });
  })
  .entries(data)

console.log(nest)
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>