Binning ein Array in Javascript für ein Histogramm

Question

Ich habe unter Array in Javascript, die ich in 20 Eimer bin. Die Datenwerte liegen zwischen 0 und 1, so dass die Behältergröße 0,05 ist. Ich habe das Gefühl, dass es da draußen eine Funktion geben sollte, die zwei Argumente benötigt, ein Array und eine Bin-Größe, aber ich kann keine finden. Ich weiß, dass D3.js einige Funktionen hat, die beim Aufbau eines solchen Arrays helfen, aber ich kann nicht herausfinden, welche Funktion helfen könnte.

var arr = [ 
    "0.362743", "0.357969", "0.356322", "0.355757", "0.358511", 
    "0.357218", "0.356696", "0.354579", "0.828295", "0.391186", 
    "0.378577", "0.39372", "0.396416", "0.395641", "0.37573", 
    "0.379666", "0.377443", "0.391842", "0.402021", "0.377516", 
    "0.38936", "0.38936", "0.400883", "0.393171", "0.374419", 
    "0.400821", "0.380502", "0.396098", "0.388256", "0.398968", 
    "0.392525", "0.401858", "0.387297", "0.376471", "0.378183", 
    "0.379787", "0.382024", "0.387928", "0.395367", "0.391972", 
    "0.381295", "0.391183", "0.383598", "0.386424", "0.384338", 
    "0.401834", "0.406253", "0.392854", "0.399266", "0.400804", 
    "0.391146", "0.395441", "0.396265", "0.397894", "0.384822", 
    "0.385181", "0.395443", "0.400981", "0.401716", "0.406633", 
    "0.406887", "0.40694", "0.391219", "0.387946", "0.398858", 
    "0.402233", "0.388583", "0.389772", "0.397084", "0.711566", 
    "0.954557", "0.524007", "0.672288", "0.668441", "0.421726", 
    "0.549536", "0.932952", "0.397851", "0.395536", "0.354818", 
    "0.374355", "0.375257", "0.362613", "0.391271", "0.379219", 
    "0.363316", "0.866006", "0.862254", "0.864403", "0.861346", 
    "0.845225", "0.784467", "0.801275", "0.638579", "0.847282", 
    "0.847402", "0.847747", "0.790411", "0.835979", "0.838546" 
] 

Answer 1

Die gewünschte Funktion ist das Histogrammlayout. Sie können so etwas tun:

var data = d3.layout.histogram() 
    .bins(20) 
    (arr); 

Dies ist nur ein allgemeines Beispiel, Sie müssen die Werte anpassen. Überprüfen Sie die Dokumentation: https://github.com/d3/d3/wiki/Histogram-Layout

Answer 2

Die Bibliothek d3js verfügt über eine Funktion d3.layout.histogram(), die ein Histogrammlayoutobjekt zum Gruppieren von Daten in Bins zurückgibt. Das Layoutobjekt ist sowohl ein Objekt als auch eine Funktion. Sie können Methoden auf dem Layoutobjekt aufrufen, um das gewünschte Verhalten des Layouts festzulegen. Sie können dann das Layout-Objekt aufrufen, um die Daten in ein Array von Bins zu gruppieren. Jedes Bin ist ein Array von Werten. Jeder Behälter hat zusätzliche Eigenschaften von x, dx, dy.

Zum Beispiel kann die folgenden Code wird Gruppe der Daten in 20-Bins, die den Bereich von 0 bis 1.

var arr = ["0.362743", "0.357969", "0.356322", "0.355757", "0.358511", "0.357218", "0.356696", "0.354579", "0.828295", "0.391186", "0.378577", "0.39372", "0.396416", "0.395641", "0.37573", "0.379666", "0.377443", "0.391842", "0.402021", "0.377516", "0.38936", "0.38936", "0.400883", "0.393171", "0.374419", "0.400821", "0.380502", "0.396098", "0.388256", "0.398968", "0.392525", "0.401858", "0.387297", "0.376471", "0.378183", "0.379787", "0.382024", "0.387928", "0.395367", "0.391972", "0.381295", "0.391183", "0.383598", "0.386424", "0.384338", "0.401834", "0.406253", "0.392854", "0.399266", "0.400804", "0.391146", "0.395441", "0.396265", "0.397894", "0.384822", "0.385181", "0.395443", "0.400981", "0.401716", "0.406633", "0.406887", "0.40694", "0.391219", "0.387946", "0.398858", "0.402233", "0.388583", "0.389772", "0.397084", "0.711566", "0.954557", "0.524007", "0.672288", "0.668441", "0.421726", "0.549536", "0.932952", "0.397851", "0.395536", "0.354818", "0.374355", "0.375257", "0.362613", "0.391271", "0.379219", "0.363316", "0.866006", "0.862254", "0.864403", "0.861346", "0.845225", "0.784467", "0.801275", "0.638579", "0.847282", "0.847402", "0.847747", "0.790411", "0.835979", "0.838546"]; 
var bins = d3.layout.histogram() // create layout object 
    .bins(20)  // to use 20 bins 
    .range([0, 1]) // to cover range from 0 to 1 
    (arr);   // group the data into the bins 

Nachdem der Code abdecken läuft ...

bins[i] is an array of values in the ith bin 
bins[i].x is the lower bounds of the ith bin 
bins[i].dx is the width of the ith bin 
bins[i].x + bins[i].dx is the upper bounds of the ith bin 
bins[i].y is the number of values in the ith bin 

Die Dokumentation das Histogramm Layout-Objekt ist bei ...

https://github.com/d3/d3/wiki/Histogram-Layout

Hinweis: Standardmäßig konvertiert das Layoutobjekt Zeichenfolgenwerte in Zahlenwerte. Daher funktioniert die Layout-Funktion mit Ihren String-Werten.

Answer 3

Mit der Veröffentlichung von D3.js v4 d3.layout.histogram hat superseded von d3.histogram() gewesen, die zur d3-array gehört jetzt Modul.

Zum bin Ihr Array zu erstellen Sie ein Histogramm-Generator:

var histGenerator = d3.histogram() 
    .domain([0,1]) // Set the domain to cover the entire intervall [0,1] 
    .thresholds(19); // number of thresholds; this will create 19+1 bins 

Es gibt einige weitere Optionen zur Verfügung configure your thresholds und damit Ihre Bins, aber dieser Generator wird genau das tun, was Sie gefragt. Sie rufen die berechneten Bins als Array durch den Generator mit dem Array von Werten Aufruf:

var bins = histGenerator(arr); 

Werfen Sie einen Blick auf dieses Arbeitsbeispiel:

var arr = [ 
 
    "0.362743", "0.357969", "0.356322", "0.355757", "0.358511", 
 
    "0.357218", "0.356696", "0.354579", "0.828295", "0.391186", 
 
    "0.378577", "0.39372", "0.396416", "0.395641", "0.37573", 
 
    "0.379666", "0.377443", "0.391842", "0.402021", "0.377516", 
 
    "0.38936", "0.38936", "0.400883", "0.393171", "0.374419", 
 
    "0.400821", "0.380502", "0.396098", "0.388256", "0.398968", 
 
    "0.392525", "0.401858", "0.387297", "0.376471", "0.378183", 
 
    "0.379787", "0.382024", "0.387928", "0.395367", "0.391972", 
 
    "0.381295", "0.391183", "0.383598", "0.386424", "0.384338", 
 
    "0.401834", "0.406253", "0.392854", "0.399266", "0.400804", 
 
    "0.391146", "0.395441", "0.396265", "0.397894", "0.384822", 
 
    "0.385181", "0.395443", "0.400981", "0.401716", "0.406633", 
 
    "0.406887", "0.40694", "0.391219", "0.387946", "0.398858", 
 
    "0.402233", "0.388583", "0.389772", "0.397084", "0.711566", 
 
    "0.954557", "0.524007", "0.672288", "0.668441", "0.421726", 
 
    "0.549536", "0.932952", "0.397851", "0.395536", "0.354818", 
 
    "0.374355", "0.375257", "0.362613", "0.391271", "0.379219", 
 
    "0.363316", "0.866006", "0.862254", "0.864403", "0.861346", 
 
    "0.845225", "0.784467", "0.801275", "0.638579", "0.847282", 
 
    "0.847402", "0.847747", "0.790411", "0.835979", "0.838546" 
 
]; 
 

 
var histGenerator = d3.histogram() 
 
    .domain([0,1]) // Set the domain to cover the entire intervall [0;] 
 
    .thresholds(19); // number of thresholds; this will create 19+1 bins 
 

 
var bins = histGenerator(arr); 
 
console.log(bins);

<script src="http://d3js.org/d3.v4.js"></script>