CODEWITHSUNDEEP
javascriptd3.jschart.js
Vlad
Vlad

Reputation: 73

Nest function not summarising values

I want get sum values for my column "Country", i write this code, but i don't see summarize values

<html>
    <head>
        <meta charset="utf-8" />
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
    </head>
    <body>
        <canvas id="barchart" width="100%" height="40%"></canvas>
        <canvas id="piechart" width="100%" height="40%"></canvas>
        <script>
            d3.csv("brokenstone copy.csv", function(csv_data) {
                var nested_data = d3.nest()
                                    .key(function(d) {return d.Country})
                                    .rollup(function(s){
                                                 return d3.sum(s,function(d) {
                                                                  return d.Amount;
                                                              })
                                    })
                                    .entries([csv_data]);
                  console.log(nested_data);
                 return csv_data;
            }).then(makechart);

            function colorGen() {
                const r = Math.floor(Math.random() * 256);
                const g = Math.floor(Math.random() * 256);
                const b = Math.floor(Math.random() * 256);
                const transparent = '0.6';

                return "rgb(" + r + "," + g + "," + b + "," + transparent + ")";
                }

            function makechart(csv_data){
               // console.log(csv_data);

                var prd = [], 
                    amt = [], 
                    frac = [];

                    csv_data.forEach(element => {
                    prd.push(element.Country);
                    amt.push(element.Amount);

                });

                var alldata = {};
                alldata['datasets'] = [];
                alldata['labels'] = ['Amount, тн'];

                csv_data.forEach(element => {
                    var sample = {};
                        sample['data'] = [element.Amount];
                        sample['backgroundColor'] = colorGen();
                        sample['label'] = element.Country;
                        alldata['datasets'].push(sample);
                });

               var barchart = new Chart('barchart', {
                    type: 'bar',
                    data: alldata,

                    options: {
                        responsive: true,
                        legend: {
                            position: 'top',
                    },

                    title: {
                        display: true,
                        fontSize: 16,
                        text: 'Country by amount, тн'
                        }                  
                    }
                });
        </script>
    </body>
</html>

My data: 

Year,Month,Country,Amount  
2019,2,Germany,70    
2019,3,Germany,65
2019,1,Germany,61 
2019,1,Germany,39
2019,1,Italy,11966 
2019,5,Italy,2489 
2019,1,Italy,2262
2019,6,Germany,139 
2019,4,Germany,111
2019,5,Germany,69 
2019,6,Germany,67

Upvotes: 1

Views: 47

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102194

The problem here is quite simple: all your nested_data nest is inside the row function.

The row function is called for each row in your CSV. As the API says,

If a row conversion function is specified, the specified function is invoked for each row, being passed an object representing the current row (d), the index (i) starting at zero for the first non-header row, and the array of column names.

However, that simply won't work for the nest. The nest() method needs to get all the data array.

That being said, just move the nest to inside the then. As you can see, your nest itself has no issues:

const csv = `Year,Month,Country,Amount
2019,2,Germany,70 2019,3,Germany,65
2019,1,Germany,61
2019,1,Germany,39
2019,1,Italy,11966
2019,5,Italy,2489
2019,1,Italy,2262
2019,6,Germany,139
2019,4,Germany,111
2019,5,Germany,69
2019,6,Germany,67`;

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

const nested_data = d3.nest()
  .key(function(d) {
    return d.Country
  })
  .rollup(function(s) {
    return d3.sum(s, function(d) {
      return d.Amount;
    })
  })
  .entries(data);

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

Upvotes: 1

Related Questions