score:1
Accepted answer
Lots of ways to do this; here's a couple examples. The first uses d3.nest and turns the data into an array of arrays with the outer key being the name of the fruit. The second is a little hand-rolled code, which returns an object with properties of each fruit. What works best really depends on your larger use case.
<!DOCTYPE html>
<html>
<head>
<script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<script>
var data = [{
"Fruits": 5,
"Stores": 22,
"Names of Fruits": "oranges"
}, {
"Fruits": 100,
"Stores": 3,
"Names of Fruits": "apple"
},
{
"Fruits": 10,
"Stores": 300,
"Names of Fruits": "pear"
},
{
"Fruits": 10,
"Stores": 300,
"Names of Fruits": "apple"
}
];
console.log(
d3.nest()
.key(function(d) { return d["Names of Fruits"]; })
.entries(data)
);
var rv = {};
data.forEach(function(d){
if (!rv[d["Names of Fruits"]]) rv[d["Names of Fruits"]] = [];
rv[d["Names of Fruits"]].push(d);
});
console.log(rv);
</script>
</body>
</html>
Source: stackoverflow.com
Related Query
- javascript d3 create datasets from one set of data
- Create map that combines data from two files with common column - but data doesn't match one to one
- D3.Js- passing data set from C# to javascript does not work
- Reload data from a drop down box created by script without having to delete the element and create another one
- Select data from a CSV before loading it with javascript (d3 library)
- Using Javascript D3 library, how can I determine mouse position in data set of an area element on mousemove event?
- Display only values from the data set into X axis ticks
- javascript d3.js: initialize brush with brush.extent and stop data from spilling over margin
- Create data visualizations using Express and get data from a PostgreSQL database
- D3 js set data from data-attribute
- Contour plot from scattered data in JavaScript
- How to create d3 graph using data from Rails database
- Create d3.js graph from data on mongodb server
- Do I have to re-join the whole data set even if only one property in one item changed?
- How to add filter to create single path from one bar to another bar (not in a loop)
- Enter() statement with a function from one data array to multiple arrays? (Adding multiple Gradient Paths)
- Edit the data in a pie chart rather than create a new one
- Javascript / Momentjs: Elegant way to find the min and max time from a set of dates?
- Javascript d3 pie chart doesn't pull data from JSON file with list of dictionaries
- Creating a continuous data set from irregular, dated rows
- Javascript / D3.js - draw large data set - improve the speed of zoom and pan in svg chart ploted by d3.js
- How to reshaping Data in Javascript from array to object without losing some of the data
- Create multinested JSON from URL in Javascript for d3.js
- d3.js touch and hold to create a line from one element to another
- Set domain on ordinal scale from tsv data
- D3 JavaScript return data value plus variable from anonymous function
- bubble chart width and height set dynamically from json data in d3.js
- JavaScript D3 bar chart data will not update when new source is selected from drop down filter
- How to convert D3 data array-of-objects from long-format to wide-format in JavaScript and D3?
- How to create a new array using the data from the old one?
More Query from same tag
- Zoomable Treemap with more than two levels, D3plus?
- Simple d3 line not working with Angular 8
- Filtering array in d3
- D3 v4 Scatterplot chart data points are not updating on zoom
- Multiple Y-Axis with JSON data in C3
- D3.js updating a stacked bar chart
- Highlighting individual rings in ring chart
- stacked d3 bar chart - specify x/y values
- d3 handle data in multiple arrays
- d3.js color ordinal scale using wildcards?
- Unable to get values of d in d3.js
- d3 voronoi arc Map - control attributes of the .arcs
- Using D3, how can I update circles on a map after panning?
- I can't access the _groups property in angular/d3js
- d3.js v4 minimap or how to have shared zoom on two elements?
- CSV/TSV comment lines d3
- d3 get x, y values on click
- dc.js responive geojson US map
- Disappeared cubism.js rule
- d3 multi line chart is overflowing
- D3 graph not loading.. Showing blank page D3.Js and python
- D3 time formatting locale
- d3.js interferes with form element?
- d3.js mouse events not working
- D3 leaves wrong elements on screen
- D3.js v5 Get data from value
- d3.js v5 : Unable to get data points to show on map of US
- Unable to deploy a Rails 6 app using d3. Runs locally but Heroku build breaks: ModuleNotFoundError: Module not found: Error: Can't resolve 'd3'
- How to filter objects in GeoJson based on an object?
- How to plot svg circles on curved line in d3 js?