mirror of
https://github.com/d3/d3.git
synced 2025-12-08 19:46:24 +00:00
6d6c6792f1
* 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>
40 lines
1.8 KiB
Markdown
40 lines
1.8 KiB
Markdown
# Blurring data
|
|
|
|
A [box blur](https://en.wikipedia.org/wiki/Box_blur) implementation for 1D, 2D, and RGBA images; supports fractional radius.
|
|
|
|
## blur(*data*, *radius*) {#blur}
|
|
|
|
```js
|
|
const numbers = d3.cumsum({length: 1000}, () => Math.random() - 0.5);
|
|
d3.blur(numbers, 5); // a smoothed random walk
|
|
```
|
|
|
|
[Examples](https://observablehq.com/@d3/d3-blur) · [Source](https://github.com/d3/d3-array/blob/main/src/blur.js) · Blurs an array of *data* in-place by applying three iterations of a moving average transform (box filter) for a fast approximation of a Gaussian kernel of the given *radius*, a non-negative number. Returns the given *data*.
|
|
|
|
## blur2({data, width, height}, *rx*, *ry*) {#blur2}
|
|
|
|
```js
|
|
const matrix = {
|
|
width: 4,
|
|
height: 3,
|
|
data: [
|
|
1, 0, 0, 0,
|
|
0, 0, 0, 0,
|
|
0, 0, 0, 1
|
|
]
|
|
};
|
|
|
|
d3.blur2(matrix, 1);
|
|
```
|
|
|
|
[Examples](https://observablehq.com/@d3/d3-blur) · [Source](https://github.com/d3/d3-array/blob/main/src/blur.js) · Blurs a matrix of the given *width* and *height* in-place by applying a horizontal blur of radius *rx* and a vertical blur of radius *ry* (which defaults to *rx*). The matrix values *data* are stored in a flat (one-dimensional) array. If *height* is not specified, it is inferred from the given *width* and *data*.length. Returns the blurred matrix {data, width, height}.
|
|
|
|
## blurImage(*imageData*, *rx*, *ry*) {#blurImage}
|
|
|
|
```js
|
|
const imageData = context.getImageData(0, 0, width, height);
|
|
d3.blurImage(imageData, 5);
|
|
```
|
|
|
|
[Examples](https://observablehq.com/@d3/d3-blurimage) · [Source](https://github.com/d3/d3-array/blob/main/src/blur.js) · Blurs the given [ImageData](https://developer.mozilla.org/en-US/docs/Web/API/ImageData) in-place, blurring each of the RGBA layers independently by applying an horizontal blur of radius *rx* and a vertical blur of radius *ry* (which defaults to *rx*). Returns the blurred ImageData.
|