score:1
Your desired outcome is not exactly clear because you didn't show us how do you want to position the inner array for different eng
in the same uni
.
Therefore, here is an solution (out of many), check the console to see the array's structure:
var csv = `name,na,profile,one,two,three,four,
uni1,eng,impact,4,5,3,1
uni1,eng,overall,10,5,3,1
uni1,fr,impact,4,5,7,1
uni1,fr,overall,20,5,7,1
uni1,ger,impact,4,5,3,1
uni1,ger,overall,18,5,18,1
uni1,eng,impact,4,5,3,1
uni2,eng,overall,4,5,3,1
uni2,fr,impact,4,5,3,30
uni2,fr,overall,4,5,3,1
uni2,ger,impact,4,5,3,1
uni2,ger,overall,4,21,3,1
uni2,spain,impact,4,5,3,1
uni2,spain,overall,4,5,3,1
uni2,spain,impact,4,20,3,1
uni2,lat,overall,4,19,3,1
uni2,lat,impact,4,5,17,1`;
var data = d3.csvParse(csv, function(d) {
d.one = +d.one;
d.two = +d.two;
d.three = +d.three;
d.four = +d.four;
return d;
});
var filteredData = data.filter(function(d) {
return d.profile === "overall"
});
var nestedData = d3.nest()
.key(function(d) {
return d.name;
})
.sortKeys(d3.ascending)
.key(function(d) {
return d.na
})
.rollup(function(v) {
return v[0].one + v[0].two + v[0].three + v[0].four
})
.entries(filteredData);
console.log(nestedData)
<script src="https://d3js.org/d3.v4.min.js"></script>
PS: I know it's just me, but I was never a great fan of d3.nest()
. I prefer to manipulate the data array the way I want with plain JavaScript functions... it's more versatile and you can structure the outcome exactly as you need.
EDIT: answering the Friday-challenge, this is the vanilla JavaScript to create the outcome described by OP (almost, because the inner objects have to be inside an array):
var finalArray = [];
[...new Set(filteredData.map(function(d) {
return d.name
}))].forEach(function(d) {
var tempObj = {
[d]: []
};
filteredData.filter(function(e) {
return e.name === d;
}).forEach(function(e) {
tempObj[d].push({
[e.na]: e.one + e.two + e.three + e.four
})
});
finalArray.push(tempObj)
});
Here is the demo:
var csv = `name,na,profile,one,two,three,four,
uni1,eng,impact,4,5,3,1
uni1,eng,overall,10,5,3,1
uni1,fr,impact,4,5,7,1
uni1,fr,overall,20,5,7,1
uni1,ger,impact,4,5,3,1
uni1,ger,overall,18,5,18,1
uni1,eng,impact,4,5,3,1
uni2,eng,overall,4,5,3,1
uni2,fr,impact,4,5,3,30
uni2,fr,overall,4,5,3,1
uni2,ger,impact,4,5,3,1
uni2,ger,overall,4,21,3,1
uni2,spain,impact,4,5,3,1
uni2,spain,overall,4,5,3,1
uni2,spain,impact,4,20,3,1
uni2,lat,overall,4,19,3,1
uni2,lat,impact,4,5,17,1`;
var data = d3.csvParse(csv, function(d) {
d.one = +d.one;
d.two = +d.two;
d.three = +d.three;
d.four = +d.four;
return d;
});
var filteredData = data.filter(function(d) {
return d.profile === "overall"
});
var finalArray = [];
[...new Set(filteredData.map(function(d) {
return d.name
}))].forEach(function(d) {
var tempObj = {
[d]: []
};
filteredData.filter(function(e) {
return e.name === d;
}).forEach(function(e) {
tempObj[d].push({
[e.na]: e.one + e.two + e.three + e.four
})
});
finalArray.push(tempObj)
});
console.log(finalArray)
<script src="https://d3js.org/d3.v4.min.js"></script>
Source: stackoverflow.com
Related Query
- d3.nest return sum of values for each row
- Sum of multiple column values for each row in d3.js
- Return multiple values from a crossfilter dimension for a pie chart
- Preview d3 bar chart such that it sorted by values for each x value
- numberDisplay in dc.js that shows the total sum of values in the row chart
- How do I add bubbles on each of the y-axis values that I have and how do I add mouseover function for each of them?
- How to plot multiple lines one for each element of an array contains y values in vega spec data?
- Sum the values for the same dates
- How to draw a scatter plot with multiple y values for each x value?
- Adding sum to each element in an object and return top N key/value pairs in Javascript
- Get sum total for each column in d3.js
- Return React component for each D3 datum
- d3.js How to create one paragraph element for sum of all json object values
- D3 stacked bar chart: unique bar for each row (stack only one row)
- In d3js, how to plot line chart from csv file, taking data from seperate columns for each row
- how to draw rectangles for each column in a row in d3.js
- How to get values for each bar in json data?
- Appending multiple non-nested elements for each data member with D3.js
- D3.js binding an object to data and appending for each key
- D3: Create a continuous color scale with many strings/inputs for the range and dynamically changing values of the domain
- D3.js - why mouseover and mouse out fired for each child elements?
- d3 on how to sum values
- How can I get "call" to execute for each data element in D3?
- Filter for multiple discrete values in crossfilter
- d3.js, using d3.extent to find min/max of nest json values
- Why my D3 line graphs shows black areas for each entity?
- Special donut chart with different rings/arcs for positive and negative values
- Where can I get the .geojson file for India and not separate files for each state/territory or any other distinction?
- What do the nodes, groups, and values mean in the JSON for a d3 force-directed graph?
- What is the shorthand in d3 for the identity function ("function(d) { return d; }")?
More Query from same tag
- how to get the radial gradient to start from the centre of the pie chart?
- d3.js - ordering two series by values of one of them
- D3-tip and NPM: "TypeError: m.tip is not a function"
- How to find a DOM element by its text content?
- How to integrate dc.js with d3 horizon chart for data rendering?
- How to get exact DIV size with defined maximal-width to simulate text flow in SVG?
- Plot within a tooltip in d3.js
- How to use d3 with bootstrap
- Appended text not showing in d3 v4
- Make a chart with area charts having both positive and negative y axis in dc or d3.js
- Why is my click event on my dynamically added D3 node not firing?
- Load multiple files using the d3-fetch module
- Reading CSV file in D3
- Update the angular d3 text onclick
- How to disable legend in nvd3 or limit it's size
- How to use nested Python dictionaries and D3.js?
- I cannot generate a bar chart from csv file in d3.js
- D3 not able to show line
- Mouse events stop working after d3 graph, zoom loads
- Loop only through nested elements of the array item from D3 selectAll creation from data()
- SCRIPT438: Object doesn't support property or method 'attr'
- Viewbox of the map SVG is smaller than of a circle marker to display
- Create color range with radial gradients using d3.js
- HTML element hides D3.js SVG
- cant access like `d3.svg(), d3.scale()` and some others properties in d3js with angular2
- Tooltip in d3 js (Bullet charts)
- How to move the chart to the right side with d3.js?
- d3.js realtime line chart with circle
- How do I make sure the zoom doesn't go below zero and avoid the zoomed points touching the y and z axis? d3.zoom v4
- How to solve ƒ Object() { [native code] } error while process word tokens?