mirror of
https://github.com/d3/d3.git
synced 2025-12-08 19:46:24 +00:00
* checkpoint vitepress docs * edits * edits * hero drop shadow * d3-array edits * resolve d3 * split d3-array * move d3-array stuff around * d3-array is collapsed: true * italicize parameter names * searching edits * update dependencies * d3-array edits * array edits * array edits * array edits * array edits * array edits * move files * array edits * array edits * array edits * getting started edits * modules page * array edits * more structure * live example * dsv edits * fetch edits * dsv edits * random edits * time format edits * time edits * time edits * modules edits * color edits * color edits * interpolate edits * scale-chromatic edits * selection edits * break up d3-interpolate * scale edits * time scale edits * scale edits * scale edits * band edits * band edits * more descriptive titles * band and point edits * sequential edits * diverging edits * quantize edits * quantile edits * threshold edits * doc edits * fix titles * sequential edits * axis edits * axis edits * axis edits * shape edits * shape edits * dark mode chart * dark mode chart * curve edits * interpolate edits * line edits * link edits * radial edits * pie edits * symbol edits * stack edits * stack examples * path edits * polygon edits * quadtree edits * random examples * ease edits * ease edits * ease edits * timer edits * delaunay edits * quadtree find example * voronoi edits * dispatch edits * contour edits * chord edits * chord edits * fix find highlight * quadtree animation * transition edits * transition edits * transition edits * zoom edits * drag edits * brush edits * force edits * voronoi neighbors example * hierarchy edits * api edits * community edits * getting started edits * geo edits * Add short "D3 in React" section (#3659) * Add short "D3 in React" section I know you removed the TODO but I was already trying to fill it in! I think just making the distinction of modules that touch the DOM and those that don't was super clarifying for me personally when I figured that out. And I always forget the most basic ref pattern (and still might've messed it up here). I don't think we should get into updating or interactivity or whatever, but I think just this much goes a long way toward demystifying (and showing just the most basic best practices). * forgot i made data generic, rm reference to normal distribution * useEffect cleans up after itself Co-authored-by: Mike Bostock <mbostock@gmail.com> * Update getting-started.md --------- Co-authored-by: Mike Bostock <mbostock@gmail.com> * build fixes * index edits --------- Co-authored-by: Toph Tucker <tophtucker@gmail.com>
125 lines
6.5 KiB
Markdown
125 lines
6.5 KiB
Markdown
# Binning data
|
||
|
||
Bin quantitative values into consecutive, non-overlapping intervals, as in histograms. (See also Observable Plot’s [bin transform](https://observablehq.com/plot/transforms/bin).)
|
||
|
||
## bin() {#bin}
|
||
|
||
```js
|
||
const bin = d3.bin().value((d) => d.culmen_length_mm);
|
||
```
|
||
|
||
[Examples](https://observablehq.com/@d3/d3-bin) · [Source](https://github.com/d3/d3-array/blob/main/src/bin.js) · Constructs a new bin generator with the default settings. The returned bin generator supports method chaining, so this constructor is typically chained with [*bin*.value](#bin_value) to assign a value accessor. The returned generator is also a function; [pass it data](#_bin) to bin.
|
||
|
||
## *bin*(*data*) {#_bin}
|
||
|
||
```js
|
||
const bins = d3.bin().value((d) => d.culmen_length_mm)(penguins);
|
||
```
|
||
|
||
Bins the given iterable of *data* samples. Returns an array of bins, where each bin is an array containing the associated elements from the input *data*. Thus, the `length` of the bin is the number of elements in that bin. Each bin has two additional attributes:
|
||
|
||
* `x0` - the lower bound of the bin (inclusive).
|
||
* `x1` - the upper bound of the bin (exclusive, except for the last bin).
|
||
|
||
Any null or non-comparable values in the given *data*, or those outside the [domain](#bin_domain), are ignored.
|
||
|
||
## *bin*.value(*value*) {#bin_value}
|
||
|
||
```js
|
||
const bin = d3.bin().value((d) => d.culmen_length_mm);
|
||
```
|
||
|
||
If *value* is specified, sets the value accessor to the specified function or constant and returns this bin generator.
|
||
|
||
```js
|
||
bin.value() // (d) => d.culmen_length_mm
|
||
```
|
||
|
||
If *value* is not specified, returns the current value accessor, which defaults to the identity function.
|
||
|
||
When bins are [generated](#_bin), the value accessor will be invoked for each element in the input data array, being passed the element `d`, the index `i`, and the array `data` as three arguments. The default value accessor assumes that the input data are orderable (comparable), such as numbers or dates. If your data are not, then you should specify an accessor that returns the corresponding orderable value for a given datum.
|
||
|
||
This is similar to mapping your data to values before invoking the bin generator, but has the benefit that the input data remains associated with the returned bins, thereby making it easier to access other fields of the data.
|
||
|
||
## *bin*.domain(*domain*) {#bin_domain}
|
||
|
||
```js
|
||
const bin = d3.bin().domain([0, 1]);
|
||
```
|
||
|
||
If *domain* is specified, sets the domain accessor to the specified function or array and returns this bin generator.
|
||
|
||
```js
|
||
bin.domain() // [0, 1]
|
||
```
|
||
|
||
If *domain* is not specified, returns the current domain accessor, which defaults to [extent](./summarize.md#extent). The bin domain is defined as an array [*min*, *max*], where *min* is the minimum observable value and *max* is the maximum observable value; both values are inclusive. Any value outside of this domain will be ignored when the bins are [generated](#_bin).
|
||
|
||
For example, to use a bin generator with a [linear scale](../d3-scale.md#linear-scales) `x`, you might say:
|
||
|
||
```js
|
||
const bin = d3.bin().domain(x.domain()).thresholds(x.ticks(20));
|
||
```
|
||
|
||
You can then compute the bins from an array of numbers like so:
|
||
|
||
```js
|
||
const bins = bin(numbers);
|
||
```
|
||
|
||
If the default [extent](./summarize.md#extent) domain is used and the [thresholds](#bin_thresholds) are specified as a count (rather than explicit values), then the computed domain will be [niced](./ticks.md#nice) such that all bins are uniform width.
|
||
|
||
Note that the domain accessor is invoked on the materialized array of [values](#bin_value), not on the input data array.
|
||
|
||
## *bin*.thresholds(*count*) {#bin_thresholds}
|
||
|
||
```js
|
||
const bin = d3.bin().thresholds([0, 0.5, 1]);
|
||
```
|
||
|
||
If *thresholds* is specified, sets the [threshold generator](#bin-thresholds) to the specified function or array and returns this bin generator.
|
||
|
||
```js
|
||
bin.thresholds() // () => [0, 0.5, 1]
|
||
```
|
||
|
||
If *thresholds* is not specified, returns the current threshold generator, which by default implements [Sturges’ formula](#thresholdSturges). (Thus by default, the values to be binned must be numbers!) Thresholds are defined as an array of values [*x0*, *x1*, …]. Any value less than *x0* will be placed in the first bin; any value greater than or equal to *x0* but less than *x1* will be placed in the second bin; and so on. Thus, the [generated bins](#_bin) will have *thresholds*.length + 1 bins.
|
||
|
||
Any threshold values outside the [domain](#bin_domain) are ignored. The first *bin*.x0 is always equal to the minimum domain value, and the last *bin*.x1 is always equal to the maximum domain value.
|
||
|
||
```js
|
||
const bin = d3.bin().thresholds(20);
|
||
```
|
||
|
||
If a *count* is specified instead of an array of *thresholds*, then the [domain](#bin_domain) will be uniformly divided into approximately *count* bins; see [ticks](#ticks).
|
||
|
||
```js
|
||
const bin = d3.bin().thresholds((values) => [d3.median(values)]);
|
||
```
|
||
|
||
You may also implement your own threshold generator taking three arguments: the array of input [*values*](#bin_value) derived from the data, and the [domain](#bin_domain) represented as *min* and *max*. The generator may then return either the array of numeric thresholds or the *count* of bins; in the latter case the domain is divided uniformly into approximately *count* bins; see [ticks](./ticks.md#ticks). For instance, you might want to use time ticks when binning time-series data; see [example](https://observablehq.com/@d3/d3-bin-time-thresholds).
|
||
|
||
## thresholdFreedmanDiaconis(*values*, *min*, *max*) {#thresholdFreedmanDiaconis}
|
||
|
||
```js
|
||
const bin = d3.bin().thresholds(d3.thresholdFreedmanDiaconis);
|
||
```
|
||
|
||
[Source](https://github.com/d3/d3-array/blob/main/src/threshold/freedmanDiaconis.js) · Returns the number of bins according to the [Freedman–Diaconis rule](https://en.wikipedia.org/wiki/Histogram#Mathematical_definition); the input *values* must be numbers.
|
||
|
||
## thresholdScott(*values*, *min*, *max*) {#thresholdScott}
|
||
|
||
```js
|
||
const bin = d3.bin().thresholds(d3.thresholdScott);
|
||
```
|
||
|
||
[Source](https://github.com/d3/d3-array/blob/main/src/threshold/scott.js) · Returns the number of bins according to [Scott’s normal reference rule](https://en.wikipedia.org/wiki/Histogram#Mathematical_definition); the input *values* must be numbers.
|
||
|
||
## thresholdSturges(*values*, *min*, *max*) {#thresholdSturges}
|
||
|
||
```js
|
||
const bin = d3.bin().thresholds(d3.thresholdSturges);
|
||
```
|
||
|
||
[Source](https://github.com/d3/d3-array/blob/main/src/threshold/sturges.js) · Returns the number of bins according to [Sturges’ formula](https://en.wikipedia.org/wiki/Histogram#Mathematical_definition); the input *values* must be numbers.
|