1

I have the following local csv file:

country,population,porcentage
China,15,1.1
India,86,4.1
United States,357,15.2
Indonesia,1207,51.2
Brazil,717,29.12

What I'm trying to do is to get the total value of population column in order to show it below my bar chart. I'm using d3 csv function to work with the data but the problem is that when I get the data the function is putting it in separate objects which is not allow me to add them up. This is how they look.

Link

I have tried first with reduce but it doesn't work.

import { csv, sum } from 'd3';

csv("./src/bardata.csv", (() => {
    var sum;
    return sum = (...args) => {
        return args.reduce((a, b) => a + b, 0);
    };
}))();

I have also tried using map function but my understanding is that this only works with arrays and my data is in separate objects. Anyway, I keep recieving "data.map is not a function " error. Any suggestions?

Juan Carlos Bellido Arenas
  • 119
  • 1
  • 10

2 Answers2

1

You already imported d3.sum() which can be used to sum an array of objects by providing an accessor function as the second argument:

d3.sum(iterable[, accessor])

Returns the sum of the given iterable of numbers. If the iterable contains no numbers, returns 0. An optional accessor function may be specified, which is equivalent to calling Array.from before computing the sum.

For your code this could be something along the following lines

import { csv, sum } from 'd3';

csv("./src/bardata.csv")
  .then(data => {
    const total = sum(data, d => d.population);
  });
Community
  • 1
  • 1
altocumulus
  • 21,179
  • 13
  • 61
  • 84
  • ok, this works, just to complement, I get what I want in the console, but when I put this way ```import { csv, sum } from 'd3'; var all = csv("./src/bardata.csv") .then(data => { const total = sum(data, d => d.population) }); console.log(all)``` in order to use the result to append my svg or whatever, it returns a promise and not the value. My question is if I have to code inside this function to append to my chart or if there a way to get the result out of the function and use it like a constant. – Juan Carlos Bellido Arenas Apr 20 '20 at 16:27
  • 1
    @JuanCarlosBellidoArenas Yes, everything that depends on the loaded file has to go into the handler function. You cannot return the value from an asynchronous function. There are numerous questions on SO dealing with this issue with most of them being closed as a duplicate of [*"How do I return the response from an asynchronous call?"*](/q/14220321). – altocumulus Apr 20 '20 at 16:44
0

Please try to use it as below:

import { csv, sum } from 'd3';

csv("./src/bardata.csv", (data) => {
    const result = sum(data, function(d) { return +d.population; })
});
Jasdeep Singh
  • 7,901
  • 1
  • 11
  • 28
  • ```import { csv, sum } from 'd3'; csv("./src/bardata.csv", (data) => { const result = sum(data, function(d) { return +d.population; }) console.log(result) });``` using this way the console returns (5) 0 . Using this way ```import { csv, sum } from 'd3'; var total = csv("./src/bardata.csv", (data) => { const result = sum(data, function(d) { return +d.population; }) }); console.log(total)```returns a promise with Array[0] and 3 columns. – Juan Carlos Bellido Arenas Apr 20 '20 at 15:53