score:0
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?
score:1
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
score:2
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 });
}
}));
Source: stackoverflow.com
Related Query
- Prepare nested JSON data for D3 stacked bar chart
- Converting data structure of a JSON array for stacked bar chart
- d3 v4 nested data and stacked bar chart
- D3 Grouped Bar Chart with JSON nested data
- Is this JSON structure suitable for a stacked bar chart using d3.js?
- sort data for d3 stacked bar chart
- Proper data structure for D3 stacked bar chart
- Reshape data for D3 stacked bar chart
- Stacked bar chart with negative JSON data
- Accessing nested data in stacked bar chart
- Display Bar Chart for Last week, Last Month, and Last Year Data from JSON using D3.js
- d3 accessing nested data in grouped bar chart
- d3.js - group 2 data values in a stacked bar chart
- D3 Stacked Chart with array or JSON data
- How to modify axis labels in d3 for a stacked bar chart when the axis labels are mapped as part of the scale's domain
- d3 show labels only for ticks with data in a bar chart
- D3.js : How to read data from JSON in Grouped Bar Chart
- Javascript manipulate data into array of object for d3 stacked chart
- D3 V4 Rect bind data in stacked bar chart
- grouped bar chart from JSON data instead of CSV
- Using dc.js on nested JSON to create bar chart
- Using JSON in d3v4 stacked bar chart
- Stacked Bar Chart with Time Series Data
- How to prepare data for d3 stacked barchart using rollup
- Filtering in stacked bar chart using d3 v3.js by changing data on input selection
- d3.js - How to do data mapping and filter for Stacked Bar graph
- trying to get MySQL data into nested json file for d3?
- Transition for grouped bar chart in d3 when updating the data values
- How to add live data to stacked bar chart
- How do I set the X values for a singled stacked horizontal bar chart using d3.js?
More Query from same tag
- D3 Bar Graph: flipping the Y-axis flips my data
- D3 show tooltip on mouse over with a timeout
- Best way to arrange data in a csv for multiline chart in d3 that has categories
- breaking a line with d3/linechart
- Understanding why three nested functions are used in .attrTween
- Issue when trying to retrieve individual values from a csv file
- How do i access d3 element dom data?
- Dynamic Stacked Bar Chart in D3
- How to obtain percentage in tooltips of an nvd3 pie chart?
- Changing an html attribute based on its current value in D3
- Unable to create a bar chart from json data using d3.js
- d3 enumerating from the middle of a list?
- d3 stopPropagation - "mousedown.log"
- In Spotfire Mods is it possible to check what has updated or changed in the reader?
- d3.event.loaded in d3 version 4
- D3: Append duplicates of a selection
- Stacked bar plot with multiple data and respective data points as legend
- Text borders in svg and d3
- How to fill area with a vertical line chart?
- How to implement Javascript within Salesforce Visual Force?
- Javascript URL string adding %20 (space) after running grunt
- Alternatives for using forEeach() loop while converting data for D3.js
- How to increase separation between several nodes in D3.js and color them?
- D3 js force layout: setting node radius with link parameter
- Adding second click event listener within a click event listener
- D3 conditional styling of edges
- My right axis is cut off...how do I correct it?
- Stacked bar chart 24hr @ 15 minute data, to only display 2hr ticks
- Formatting text from axis ticks in plotly using tickformat
- D3.json setup cache to false