CODEWITHSUNDEEP
javascriptjsoncsvd3.jscharts
microchip78
microchip78

Reputation: 2060

Consume nested data in d3

I am exploring d3. I am creating a bubble chart from very detailed and transactional csv data.

I have used d3.nest() and d3.rollup() remove unnecessary columns of the data and end up with final nested data structure. But I am not sure how to consume nested data in d3.

Here is the sample of my flat data ( Some columns are removed to display it better here on the post)

State,Date,Day,Month,Year,Dayweek,Crash Type,Number of Fatalities,Speed Limit

VIC,01-Jan-2015,1,January,2015,Thursday,Multiple vehicle,1,100

QLD,01-Jan-2015,1,January,2015,Thursday,Multiple vehicle,1,60

VIC,01-Jan-2015,1,January,2015,Thursday,Single vehicle,1,70

WA,01-Jan-2015,1,January,2015,Thursday,Single vehicle,1,110

TAS,01-Jan-2015,1,January,2015,Thursday,Single vehicle,1,40

SA,02-Jan-2015,2,January,2015,Friday,Multiple vehicle,1,60

QLD,03-Jan-2015,3,January,2015,Saturday,Multiple vehicle,1,100

NSW,04-Jan-2015,4,January,2015,Sunday,Single vehicle,1,100

WA,04-Jan-2015,4,January,2015,Sunday,Multiple vehicle,1,70

I converted above csv data to nested data using .nest() and .rollup() function. Converted data sample is as below

Object {
  key: "VIC",  // group by state
  values: [
    {
      key: "January",   // group by month
      values: [
        {
          key: "40"    // group by speed limit
          values: {
            accidents: 1
            fatalities: 1
          }
        }, {..}, {..}
      ]
    }, {..}, {..}, {..}, {..}, {..} ...
  ]

My question is how can I consume data directly ?

  1. Can I consume directly ?
  2. Do I have to flatten this nested data to consume in d3 ?

If possible please provide some example ...

Thanks

Upvotes: 0

Views: 307

Answers (1)

microchip78
microchip78

Reputation: 2060

I have figured it. I could not answer anywhere. People have posted half answers but no one has put a solution that show you a way to flatten nested data.

Q-1. Can I consume directly nested data?

A-1. Yes it can be consumed nested data by d3. You have to add a <svg:g></svg:g> element for each level and that will hold the __d__ value for the next level. And at any level, if you want to access the parent node data var parentData = d3.select(this.parentNode).datum();

Q-2. Do I have to flatten this data to consume in d3? And how to flatten nested data to consume?

A-2. This is much better approach, as it is one off operation, and all data available at each elements entered on SVG. Use .map() function to iterate though each level and flatten it.

Exmaple

var flatdata = [];

data.map(function (d) {
		d.values.map(function (s) {
			var tdata = s.values.map(function (t) {
				return {
					state: d.key,
					month: s.key,
					speed: t.key,
					accidents: t.values.accidents,
					fatalities: t.values.fatalities
				}
			})
			flatdata = flatdata.concat(tdata);
		})
	});

I dont know that is the best solution but it is working perfectly fine.

Hope this will be helpful.

Upvotes: 1

Related Questions