为D3堆积条形图准备嵌套JSON数据

Question

I have nested JSON data where the first level of keys is activity types (ride, hike, etc.) and the second level is the year. Each year has a value (distance in kilometers). My data structure looks like this:

I want to draw a stacked bar chart like this http://bl.ocks.org/mstanaland/6100713 from my data. How can I bring my data in a structure which is suitable for a D3 stacked bar chart?

Answer 1

This could be done as follows:

const data = [];
myData.forEach(a => a.values.forEach(v => {
    const element = data.find(e => e.year === v.key);
    if (element) {
        element[a.key] = v.values;
    } else {
        data.push({ year: v.key, [a.key]: v.values });
    }
}));

Answer 2

Based on @unminder's answer but just to get every property into the object:

Stakblitz example: https://stackblitz.com/edit/js-d5sitf

const entryArr = [
  {
    key: 'ride',
    values: [
      { key: '2008', value: 3234 },
      { key: '2009', value: 3234 },
      { key: '2010', value: 5000 },
      { key: '2011', value: 6000 },
      { key: '2012', value: 1456 },
      { key: '2013', value: 2453 }
    ]
  },
  {
    key: 'hike',
    values: [
      { key: '2006', value: 3234 },
      { key: '2009', value: 2420 },
      { key: '2010', value: 4530 },
      { key: '2011', value: 2000 },
      { key: '2012', value: 1900 },
      { key: '2013', value: 3700 }
    ]
  },
  {
    key: 'walk',
    values: [
      { key: '2009', value: 3001 },
      { key: '2010', value: 1090 },
      { key: '2011', value: 2020 },
      { key: '2012', value: 2000 },
      { key: '2013', value: 6000 }
    ]
  }
];

const getKeys = entryArr.map(x => x.key);
const result = [];
entryArr.forEach(a => a.values.forEach(v => {
  const element = result.find(e => e.year === v.key);
  if (element) {
    element[a.key] = v.value;
  } else {
    const obj = getKeys.reduce((acc, x) => ({ ...acc, year: v.key, [x]: a.key === x ? v.value : '' })
      , {});
    result.push(obj);
  }
}));

console.log(result)

Note: it can be improved using reducers to avoid global variables

Answer 3

This works good, but when combinations are missing, no entry is made, so it's not true wide data. I achieved it with this code:

// make data long
var flatdata = []
            distance_per_year.forEach(function(type) {
              type.values.forEach(function(typeYears) {
                flatdata.push({
                  type: type.key,
                  year: typeYears.key,
                  distance: typeYears.values,
                });
              });
            });

    // Unique activity types
    groups = Array.from(new Set(flatdata.map(({ type }) => type)));
    years = Array.from(new Set(flatdata.map(({ year }) => year)));

    // make wide data with 0 where value is missing
    var grouped = years.map(function(d) {
      var item = {
        year:  d
      };
      groups.forEach(function(e) {
        var itemForGroup = flatdata.filter(function(f) {
          return f.type === e && f.year === d;
        });
        if (itemForGroup.length) {
          item[e] = Number(itemForGroup[0].distance);
        } else {
          item[e] = 0;
        }
      })
      return item;
    })

This produces first an unnested long dataset first (3 columns), then reshapes it to wide and fills in 0s where distance is missing.

The source are these two questions: Reshape data for D3 stacked bar chart and d3: flatten nested data?