CODEWITHSUNDEEP
javascriptcsvd3.js
AncientSwordRage
AncientSwordRage

Reputation: 7615

Can I normalise CSV data with D3?

I have this sort of data in my original CSV:

id, lat, long, data_type_1, data_type_2, data_type_3
1 , 50,  1,    10,          20,          40

And I need to transform it to this kind of structure:

id, lat, long, data_type, value,
1 , 50,  1,    1,          10,
1 , 50,  1,    2,          20,
1 , 50,  1,    3,          40,

I've looked at the devdocs for d3.csv and a question or two.

I've got this code, pinched/modified from this bl.ocks.org page.

d3.csv("traffic_data.csv", function(d) {
                numericColHeaders.forEach(header => d[header] = parseInt(d[height]));
                console.error(d); // to inspect in the console
                return d;
            }, function(error, data) {
                if (error) throw error;
                var root = d3.stratify()
                    .id(function(d) {
                        return d.data_type;
                    })
                    .parentId(function(d) {
                        return d.id;
                    })
                    (data)
                    .sum(function(d) {
                        return d.value;
                    })
                    .sort(function(a, b) {
                        return b.height - a.height || b.value - a.value;
                    });

                treemap(root);
                // do more stuff
            })

When I've console'd out the data, it prints a row, but to get to my data normalised I need to 'expand' this into multiple rows, and I can't get my head round how to do this. I can't think of how to do this with map, filter or reduce.... If anything I want the opposite of reduce.

How can I achieve this?

Upvotes: 1

Views: 217

Answers (1)

George
George

Reputation: 915

You can do this without D3 using the builtin map and reduce functions like so:

rows.map(row => {
  const { id, lat, long, data_type_1, data_type_2, data_type_3 } = row

  return [
    {
      id, lat, long,
      data_type: '1',
      value: data_type_1
    },
    {
      id, lat, long,
      data_type: '2',
      value: data_type_2
    },
    {
      id, lat, long,
      data_type: '3',
      value: data_type_3
    }
  ]
}).reduce((prev, next) => prev.concat(next), [])

long being a reserved word, this code won't completely work. But should give you the right idea.

Upvotes: 2

Related Questions