CODEWITHSUNDEEP
javascriptcsvd3.jsmapping
DDanggle
DDanggle

Reputation: 11

d3 read csv with d3.map and d3 queue() function

I want to mapping to data city to each province.

This is my sample csv data. (a.k.a 'city.csv')

citycode,province,name
3704051,ProvinceA,city1
3704052,ProvinceA,city2
3704054,ProvinceA,city3
3704062,ProvinceA,city4
3704056,ProvinceA,city5
3704058,ProvinceA,city6
3704059,ProvinceA,city7
3704060,ProvinceB,city8
3704061,ProvinceB,city9
3704063,ProvinceB,city10
3702011,ProvinceC,city11
3702012,ProvinceC,city12

After mapping, I want to get all stuffs with province. For example, If I put the value, 'ProvinceA', return '3704051', '3704052' ..etc

First, I have to read data like this.

var popByProvinceName = d3.map()

queue()
  .defer(d3.json, "municipalities.json")
  .defer(d3.csv, "city.csv", function(d) {
    d.citycode = +d.citycode;
    popByProvinceName.set(d.province, + d.citycode);
  }).await(ready);

function ready(error, data1) {
  console.log(popByProvinceName.get("ProvinceA");
}

is return only one citycode by province.

 3704059

How can I fix it? please help!

Upvotes: 1

Views: 424

Answers (1)

Mark
Mark

Reputation: 108567

You are overwriting the value with each iteration. You need to push them into an array:

queue()
  //.defer(d3.json, "municipalities.json")
  .defer(d3.csv, "city.csv", function(d) {
    d.citycode = +d.citycode;
    // first time we've seen province
    if (!popByProvinceName.has(d.province)) {
      popByProvinceName.set(d.province, []);
    }
    // get the array and add to it
    popByProvinceName.get(d.province).push(d.citycode);
  }).await(ready);

Full code.

An alternate and slightly cleaner way to do this would be to use d3.nest in your ready function:

function ready(error, data1) {
  var nest = d3.nest()
    .key(function(d) { return d.province; })
    .rollup(function(r){
      return r.map(function(d){
        return +d.citycode;
      });
    })
    .entries(data1);

Full code.

Upvotes: 1

Related Questions