d3.js: sort nested arrays

d3 nest sort
d3 sort data by date
d3 sort csv data
d3 data manipulation
javascript array sort
d3.group is not a function
d3 filter json data

How can I sort the nested arrays of an array like the one below please? I would like to sort array prob and then rearrange name accordingly so that relationship is maintained.

var records = [
{ num: 1, name: ["Sam", "Amy", "John"], prob: [0.3, 0.2, 0.5]},
{ num: 2, name: ["Nick", "Carol", "Sam"], prob: [0.5, 0.03, 0.47] },
{ num: 3, name: ["Ken", "Eric", "Ely"], prob: [0.1, 0.3, 0.6] },
{ num: 4, name: ["Amy", "Sam", "John"], prob: [0.6, 0.3, 0.1] },
{ num: 5, name: ["Chris", "Donna", "Jeff"], prob: [0.25, 0.55, 0.2] }
]

I would like to end-up with:

var records = [
{ num: 1, name: ["John", "Sam", "Amy"], prob: [0.5, 0.3, 0.2]},
{ num: 2, name: ["Nick", "Sam", "Carol"], prob: [0.5, 0.47, 0.03] },
{ num: 3, name: ["Ely", "Eric", "Ken"], prob: [0.6, 0.3, 0.1] },
{ num: 4, name: ["Amy", "Sam", "John"], prob: [0.6, 0.3, 0.1] },
{ num: 5, name: ["Donna", "Chris", "Jeff"], prob: [0.55, 0.25, 0.2] }
]

Thanks!


Here a solution: we could store names and prob in pairs and sorting both values at the same time, then we assign that names and probs sorted to the main object:

var records = [
{ num: 1, name: ["Sam", "Amy", "John"], prob: [0.3, 0.2, 0.5]},
{ num: 2, name: ["Nick", "Carol", "Sam"], prob: [0.5, 0.03, 0.47] },
{ num: 3, name: ["Ken", "Eric", "Ely"], prob: [0.1, 0.3, 0.6] },
{ num: 4, name: ["Amy", "Sam", "John"], prob: [0.6, 0.3, 0.1] },
{ num: 5, name: ["Chris", "Donna", "Jeff"], prob: [0.25, 0.55, 0.2] }
];

var pairs = records.map((e,i)=>
e.name.map((e2,i2)=>[e2,records[i].prob[i2]]).sort((a,b)=>b[1]-a[1])
);

records.map((e, i) => {
  e.name = pairs[i].map(o => o[0])
  e.prob = pairs[i].map(o => o[1])      
})

console.log(records)

d3 sortKeys in nest function, Shows behaviour of sortkeys and that date sort is sorting by the string create one array for each unique group var nested_data = d3.nest()  d3 sortKeys in nest function. GitHub Gist: instantly share code, notes, and snippets.


Refactoring Emeeus answer

var records = [
{ num: 1, name: ["Sam", "Amy", "John"], prob: [0.3, 0.2, 0.5]},
{ num: 2, name: ["Nick", "Carol", "Sam"], prob: [0.5, 0.03, 0.47] },
{ num: 3, name: ["Ken", "Eric", "Ely"], prob: [0.1, 0.3, 0.6] },
{ num: 4, name: ["Amy", "Sam", "John"], prob: [0.6, 0.3, 0.1] },
{ num: 5, name: ["Chris", "Donna", "Jeff"], prob: [0.25, 0.55, 0.2] }
];

records.forEach((e, i) => {
  var el = e.name.map((e2,i2)=>[e2,e.prob[i2]]);
  el.sort((a, b) => b[1] - a[1]);
  e.name = el.map(o => o[0]);
  e.prob = el.map(o => o[1]);
});

console.log(records);

D3 Nesting Examples, return d3.nest().key(function(d) { return d.status; }).entries(data); [ { "key": "​Complete", "values": [ { "id": Can't have two rollups, but can return an object/​array. d3-array. Data in JavaScript is often represented by an iterable (such as an array, set or generator), and so iterable manipulation is a common task when analyzing or visualizing data. For example, you might take a contiguous slice (subset) of an array, filter an array using a predicate function, or map an array to a parallel set of values using a transform function.


It's easiest if you turn your arrays of names and probs into objects to preserve the links between each name and the probability. The object's properties can then be sorted as if they were an array using a custom sort function.

records.forEach( function (d) {
  var temp = {};

  // create objects with key <name> and value <prob>
  // (this makes the assumption that prob values may not be unique, but names are)
  d.name.forEach( function(e,i) {
    temp[e] = d.prob[i];
  })

  // get an array of the object keys (the name), and sort them by the object values
  // (the corresponding prob), descending. Replace the existing `name` array with this.
  d.name = Object.keys(temp).sort(function(a, b){ 
    return temp[b] - temp[a];
  });

  // sort the prob values in descending order (with d3.descending, since you mentioned d3)
  d.prob = d.prob.sort(function(a,b){ return b - a; });
});

If you aren't using d3, replace d3.descending with the standard descending sort function.

d3.ascending, d3.descending / D3 / Observable, d3.ascending, d3.descending d3.ascending returns the natural order of a In modern JavaScript, array.sort is stable, meaning that if your  Count , max*10, nest and sorting csv; nested rollup data need to retrieve groups with zero results; Re: Preparing data for a dendrogram using nest; Enter() not appending all nested elements; nested data with if statement; G groups and transitions; re-bind data in event handler; d3.js bar chart sorting: can't figure out how to sort x-axis labels along with bars


Data manipulation in d3.js, A few code chuncks describing the most common data manipulation needed in d3.js. Includes filtering, sorting, nesting and more. The column that will used for sorting by default can be denoted by sort_column: true property. array of data. Array of data should be in the form of nested arrays. These should correspond to the array of columns, ie. the first item in the array (index 0) should correspond to index 0 in array of columns.


d3-3.x-api-reference/Arrays.md at master · d3/d3-3.x-api , That's because D3's canonical representation of data is an array. This is the comparator function for natural order, and can be used in Extracting keyed values in order can be useful for generating data arrays in nested selections. D3: Binding Multi-Dimensional Arrays and Deep Nested Data The easiest way to work with D3 data arrays is to create simple arrays. For example, to create a stacked array, represent each stack in a stacked bar by the a comma separated value in a row per bar.


d3/d3-array: Array manipulation, ordering, searching , d3-array. Data in JavaScript is often represented by an iterable (such as an the end of the array. array.reverse - Reverse the order of the elements of the array. Objects. A common data type in JavaScript is the associative array, or more simply the object, which has a set of named properties. The standard mechanism for iterating over the keys (or property names) in an associative array is the for…in loop. However, note that the iteration order is undefined.