├── img ├── axis-v3.png ├── axis-v4.png ├── pack-v3.png ├── pack-v4.png └── stratify.png ├── bundle.js ├── docs ├── public │ ├── logo.png │ └── logo.svg ├── components │ ├── quadtreeNodes.js │ ├── ColorSwatches.vue │ ├── ColorRamp.vue │ ├── ColorSpan.vue │ ├── ExampleAxis.vue │ ├── deferRender.js │ ├── quadtreeVisitParent.js │ ├── ExampleEase.vue │ ├── ExampleBlankChart.vue │ ├── ExampleCurve.vue │ ├── ExampleCollideForce.vue │ ├── UsMap.vue │ ├── ExampleArcs.vue │ ├── quadtreeFindVisited.js │ ├── LogoDiagram.vue │ ├── ExampleAnimatedQuadtree.vue │ ├── WorldMap.vue │ ├── ExampleLinkForce.vue │ ├── ExampleDisjointForce.vue │ └── ExampleChord.vue ├── data │ └── volcano.data.js ├── .vitepress │ └── theme │ │ ├── index.ts │ │ ├── gallery.data.js │ │ ├── CustomLayout.vue │ │ ├── custom.css │ │ ├── ObservablePromo.vue │ │ └── ExamplesGrid.vue ├── d3-scale-chromatic.md ├── d3-array.md ├── d3-contour.md ├── d3-selection │ ├── namespaces.md │ ├── locals.md │ └── control-flow.md ├── d3-scale-chromatic │ ├── cyclical.md │ └── categorical.md ├── d3-shape │ ├── radial-link.md │ └── radial-line.md ├── d3-interpolate │ ├── transform.md │ └── zoom.md ├── d3-selection.md ├── d3-delaunay.md ├── d3-scale │ ├── symlog.md │ ├── pow.md │ ├── diverging.md │ ├── threshold.md │ ├── quantize.md │ └── log.md ├── d3-scale.md ├── d3-interpolate.md ├── d3-force │ ├── center.md │ ├── collide.md │ └── many-body.md ├── d3-array │ ├── blur.md │ ├── intern.md │ ├── sets.md │ ├── add.md │ ├── transform.md │ ├── bisect.md │ └── ticks.md ├── d3-shape.md ├── d3-transition.md ├── d3-chord.md ├── d3-force.md ├── d3-hierarchy.md ├── d3-hierarchy │ ├── partition.md │ ├── cluster.md │ ├── tree.md │ ├── pack.md │ └── stratify.md ├── community.md ├── d3-polygon.md ├── d3-geo │ ├── stream.md │ ├── azimuthal.md │ ├── cylindrical.md │ ├── conic.md │ └── math.md ├── d3-geo.md ├── d3-transition │ └── timing.md ├── d3-dispatch.md └── d3-chord │ └── chord.md ├── API.md ├── .eslintrc.json ├── test ├── .eslintrc.json ├── d3-test.js └── docs-test.js ├── .github ├── eslint.json └── workflows │ ├── test.yml │ └── deploy.yml ├── LICENSE ├── README.md ├── src └── index.js ├── rollup.config.js └── package.json /img/axis-v3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanveerpot/d3/HEAD/img/axis-v3.png -------------------------------------------------------------------------------- /img/axis-v4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanveerpot/d3/HEAD/img/axis-v4.png -------------------------------------------------------------------------------- /img/pack-v3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanveerpot/d3/HEAD/img/pack-v3.png -------------------------------------------------------------------------------- /img/pack-v4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanveerpot/d3/HEAD/img/pack-v4.png -------------------------------------------------------------------------------- /img/stratify.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanveerpot/d3/HEAD/img/stratify.png -------------------------------------------------------------------------------- /bundle.js: -------------------------------------------------------------------------------- 1 | export {version} from "./package.json"; 2 | export * from "./src/index.js"; 3 | -------------------------------------------------------------------------------- /docs/public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanveerpot/d3/HEAD/docs/public/logo.png -------------------------------------------------------------------------------- /API.md: -------------------------------------------------------------------------------- 1 | # D3 API Reference 2 | 3 | The [API Reference](https://d3js.org/api) is now part of the documentation website. -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "eslint:recommended", 3 | "parserOptions": { 4 | "sourceType": "module", 5 | "ecmaVersion": 8 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /docs/components/quadtreeNodes.js: -------------------------------------------------------------------------------- 1 | export default function quadtree_nodes() { 2 | const nodes = []; 3 | this.visit((node, x1, y1, x2, y2) => void nodes.push({x1, y1, x2, y2})); 4 | return nodes; 5 | } 6 | -------------------------------------------------------------------------------- /docs/data/volcano.data.js: -------------------------------------------------------------------------------- 1 | import fs from "node:fs"; 2 | 3 | export default { 4 | watch: ["../public/data/volcano.json"], 5 | load([file]) { 6 | return JSON.parse(fs.readFileSync(file, "utf-8")); 7 | } 8 | }; 9 | -------------------------------------------------------------------------------- /test/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "eslint:recommended", 3 | "parserOptions": { 4 | "sourceType": "module", 5 | "ecmaVersion": 11 6 | }, 7 | "env": { 8 | "es6": true, 9 | "browser": true, 10 | "mocha": true 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /.github/eslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "problemMatcher": [ 3 | { 4 | "owner": "eslint-compact", 5 | "pattern": [ 6 | { 7 | "regexp": "^(.+):\\sline\\s(\\d+),\\scol\\s(\\d+),\\s(Error|Warning|Info)\\s-\\s(.+)\\s\\((.+)\\)$", 8 | "file": 1, 9 | "line": 2, 10 | "column": 3, 11 | "severity": 4, 12 | "message": 5, 13 | "code": 6 14 | } 15 | ] 16 | } 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/index.ts: -------------------------------------------------------------------------------- 1 | import DefaultTheme from "vitepress/theme-without-fonts"; 2 | import * as d3 from "d3"; 3 | import {useData} from "vitepress"; 4 | import CustomLayout from "./CustomLayout.vue"; 5 | import "./custom.css"; 6 | 7 | export default { 8 | extends: DefaultTheme, 9 | Layout: CustomLayout, 10 | enhanceApp({app, router}) { 11 | globalThis.d3 = d3; // for console testing! 12 | Object.defineProperty(app.config.globalProperties, "$dark", {get: () => useData().isDark.value}); 13 | } 14 | }; 15 | -------------------------------------------------------------------------------- /.github/workflows/test.yml: -------------------------------------------------------------------------------- 1 | name: Test 2 | 3 | on: 4 | push: 5 | branches: [main] 6 | pull_request: 7 | branches: [main] 8 | 9 | jobs: 10 | build: 11 | runs-on: ubuntu-latest 12 | steps: 13 | - uses: actions/checkout@v3 14 | - uses: actions/setup-node@v3 15 | with: 16 | node-version: 16 17 | cache: 'yarn' 18 | - run: yarn --frozen-lockfile 19 | - run: | 20 | echo ::add-matcher::.github/eslint.json 21 | yarn run eslint src test --format=compact 22 | - run: yarn test 23 | - run: yarn prepublishOnly 24 | - run: yarn docs:build 25 | -------------------------------------------------------------------------------- /docs/components/ColorSwatches.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 30 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/gallery.data.js: -------------------------------------------------------------------------------- 1 | import {Runtime} from "@observablehq/runtime"; 2 | 3 | export default { 4 | async load() { 5 | const runtime = new Runtime(); 6 | const module = runtime.module((await import("https://api.observablehq.com/@d3/gallery.js?v=4")).default); 7 | const data = []; 8 | module.define("md", () => String.raw); 9 | module.redefine("previews", () => (chunk) => data.push(...chunk)); 10 | const values = []; 11 | for (const output of module._resolve("previews")._outputs) { 12 | if (output._name) { 13 | values.push(module.value(output._name)); 14 | } 15 | } 16 | await Promise.all(values); 17 | return data; 18 | } 19 | }; 20 | -------------------------------------------------------------------------------- /test/d3-test.js: -------------------------------------------------------------------------------- 1 | import assert from "assert"; 2 | import {readFileSync} from "fs"; 3 | import {resolve, dirname} from "path"; 4 | import {fileURLToPath} from "url"; 5 | import * as d3 from "../src/index.js"; 6 | 7 | const packagePath = resolve(dirname(fileURLToPath(import.meta.url)), "../package.json"); 8 | const packageData = JSON.parse(readFileSync(packagePath)); 9 | 10 | for (const moduleName in packageData.dependencies) { 11 | it(`d3 exports everything from ${moduleName}`, async () => { 12 | const module = await import(moduleName); 13 | for (const propertyName in module) { 14 | if (propertyName !== "version") { 15 | assert(propertyName in d3, `${moduleName} exports ${propertyName}`); 16 | } 17 | } 18 | }); 19 | } 20 | -------------------------------------------------------------------------------- /docs/components/ColorRamp.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 31 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright 2010-2023 Mike Bostock 2 | 3 | Permission to use, copy, modify, and/or distribute this software for any purpose 4 | with or without fee is hereby granted, provided that the above copyright notice 5 | and this permission notice appear in all copies. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH 8 | REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND 9 | FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, 10 | INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS 11 | OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER 12 | TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF 13 | THIS SOFTWARE. 14 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # D3: Data-Driven Documents 2 | 3 | 4 | 5 | **D3** (or **D3.js**) is a free, open-source JavaScript library for visualizing data. Its low-level approach built on web standards offers unparalleled flexibility in authoring dynamic, data-driven graphics. For more than a decade D3 has powered groundbreaking and award-winning visualizations, become a foundational building block of higher-level chart libraries, and fostered a vibrant community of data practitioners around the world. 6 | 7 | ## Resources 8 | 9 | * [Documentation](https://d3js.org) 10 | * [Examples](https://observablehq.com/@d3/gallery) 11 | * [Releases](https://github.com/d3/d3/releases) 12 | * [Getting help](https://d3js.org/community) 13 | -------------------------------------------------------------------------------- /docs/d3-scale-chromatic.md: -------------------------------------------------------------------------------- 1 | # d3-scale-chromatic 2 | 3 | This module provides sequential, diverging and categorical color schemes designed to work with [d3-scale](./d3-scale.md)’s [d3.scaleOrdinal](./d3-scale/ordinal.md) and [d3.scaleSequential](./d3-scale/sequential.md). Most of these schemes are derived from Cynthia A. Brewer’s [ColorBrewer](http://colorbrewer2.org). Since ColorBrewer publishes only discrete color schemes, the sequential and diverging scales are interpolated using [uniform B-splines](https://observablehq.com/@d3/colorbrewer-splines). 4 | 5 | See one of: 6 | 7 | * [Categorical schemes](./d3-scale-chromatic/categorical.md) 8 | * [Cyclical schemes](./d3-scale-chromatic/cyclical.md) 9 | * [Diverging schemes](./d3-scale-chromatic/diverging.md) 10 | * [Sequential schemes](./d3-scale-chromatic/sequential.md) 11 | -------------------------------------------------------------------------------- /docs/components/ColorSpan.vue: -------------------------------------------------------------------------------- 1 | 6 | 28 | 31 | -------------------------------------------------------------------------------- /docs/components/ExampleAxis.vue: -------------------------------------------------------------------------------- 1 | 26 | 33 | -------------------------------------------------------------------------------- /docs/components/deferRender.js: -------------------------------------------------------------------------------- 1 | // TODO Consolidate with PlotRender. 2 | export default function deferRender(node, render) { 3 | let observer; 4 | let idling; 5 | 6 | function disconnect() { 7 | if (observer) observer.disconnect(); 8 | if (idling) idling = void cancelIdleCallback(idling); 9 | } 10 | 11 | const rect = node.getBoundingClientRect(); 12 | if (rect.bottom > 0 && rect.top < window.innerHeight) { 13 | render(); 14 | } else { 15 | observer = new IntersectionObserver( 16 | ([entry]) => { 17 | if (entry.isIntersecting) { 18 | disconnect(); 19 | render(); 20 | } 21 | }, 22 | {rootMargin: "100px"} 23 | ); 24 | observer.observe(node); 25 | if (typeof requestIdleCallback === "function") { 26 | idling = requestIdleCallback(() => { 27 | disconnect(); 28 | render(); 29 | }); 30 | } 31 | } 32 | 33 | return disconnect; 34 | } 35 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | export * from "d3-array"; 2 | export * from "d3-axis"; 3 | export * from "d3-brush"; 4 | export * from "d3-chord"; 5 | export * from "d3-color"; 6 | export * from "d3-contour"; 7 | export * from "d3-delaunay"; 8 | export * from "d3-dispatch"; 9 | export * from "d3-drag"; 10 | export * from "d3-dsv"; 11 | export * from "d3-ease"; 12 | export * from "d3-fetch"; 13 | export * from "d3-force"; 14 | export * from "d3-format"; 15 | export * from "d3-geo"; 16 | export * from "d3-hierarchy"; 17 | export * from "d3-interpolate"; 18 | export * from "d3-path"; 19 | export * from "d3-polygon"; 20 | export * from "d3-quadtree"; 21 | export * from "d3-random"; 22 | export * from "d3-scale"; 23 | export * from "d3-scale-chromatic"; 24 | export * from "d3-selection"; 25 | export * from "d3-shape"; 26 | export * from "d3-time"; 27 | export * from "d3-time-format"; 28 | export * from "d3-timer"; 29 | export * from "d3-transition"; 30 | export * from "d3-zoom"; 31 | -------------------------------------------------------------------------------- /docs/components/quadtreeVisitParent.js: -------------------------------------------------------------------------------- 1 | export default function quadtree_visitParent(callback) { 2 | let quads = [], q, node = this._root, parent, child, x0, y0, x1, y1, xm, ym; 3 | if (node) quads.push({node, x0: this._x0, y0: this._y0, x1: this._x1, y1: this._y1}); 4 | while ((q = quads.pop())) { 5 | node = q.node, parent = q.parent; 6 | if (parent) callback(parent.x0, parent.y0, parent.x1, parent.y1); 7 | if (!node.length) continue; 8 | x0 = q.x0, y0 = q.y0, x1 = q.x1, y1 = q.y1, xm = (x0 + x1) / 2, ym = (y0 + y1) / 2; 9 | if ((child = node[3])) quads.push({parent: q, node: child, x0: xm, y0: ym, x1: x1, y1: y1}); 10 | if ((child = node[2])) quads.push({parent: q, node: child, x0: x0, y0: ym, x1: xm, y1: y1}); 11 | if ((child = node[1])) quads.push({parent: q, node: child, x0: xm, y0: y0, x1: x1, y1: ym}); 12 | if ((child = node[0])) quads.push({parent: q, node: child, x0: x0, y0: y0, x1: xm, y1: ym}); 13 | } 14 | return this; 15 | } 16 | -------------------------------------------------------------------------------- /.github/workflows/deploy.yml: -------------------------------------------------------------------------------- 1 | name: Deploy 2 | 3 | on: 4 | workflow_dispatch: {} 5 | push: 6 | branches: [main] 7 | 8 | jobs: 9 | deploy: 10 | runs-on: ubuntu-latest 11 | permissions: 12 | pages: write 13 | id-token: write 14 | environment: 15 | name: github-pages 16 | url: ${{ steps.deployment.outputs.page_url }} 17 | steps: 18 | - uses: actions/checkout@v3 19 | - uses: actions/checkout@v3 20 | with: 21 | repository: d3/d3.github.com 22 | path: build/d3.github.com 23 | - uses: actions/setup-node@v3 24 | with: 25 | node-version: 16 26 | cache: 'yarn' 27 | - run: yarn --frozen-lockfile 28 | - run: yarn prepublishOnly 29 | - run: yarn docs:build 30 | - uses: actions/configure-pages@v3 31 | - uses: actions/upload-pages-artifact@v1 32 | with: 33 | path: docs/.vitepress/dist 34 | - name: Deploy 35 | id: deployment 36 | uses: actions/deploy-pages@v1 37 | -------------------------------------------------------------------------------- /docs/d3-array.md: -------------------------------------------------------------------------------- 1 | # d3-array 2 | 3 | Array manipulation, ordering, searching, summarizing, *etc.* 4 | 5 | See one of: 6 | 7 | * [Adding numbers](./d3-array/add.md) - Add floating point values with full precision. 8 | * [Binning data](./d3-array/bin.md) - Bin discrete samples into continuous, non-overlapping intervals. 9 | * [Bisecting data](./d3-array/bisect.md) - Quickly find a value in a sorted array. 10 | * [Blurring data](./d3-array/blur.md) - Blur quantitative values in one or two dimensions. 11 | * [Grouping data](./d3-array/group.md) - Group discrete values. 12 | * [Interning values](./d3-array/intern.md) - Create maps and sets with non-primitive values such as dates. 13 | * [Set operations](./d3-array/sets.md) - Logical operations on sets. 14 | * [Sorting data](./d3-array/sort.md) - Sort and reorder arrays of values. 15 | * [Summarizing data](./d3-array/summarize.md) - Compute summary statistics. 16 | * [Ticks](./d3-array/ticks.md) - Generate representative values from a continuous interval. 17 | * [Transforming data](./d3-array/transform.md) - Derive new arrays. 18 | -------------------------------------------------------------------------------- /docs/components/ExampleEase.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 21 | 22 | 37 | -------------------------------------------------------------------------------- /docs/d3-contour.md: -------------------------------------------------------------------------------- 1 | 8 | 9 | # d3-contour 10 | 11 |
12 | 26 | Fork ↗︎ 27 |
28 | 29 | This module computes contour polygons by applying [marching squares](https://en.wikipedia.org/wiki/Marching_squares) to a rectangular grid of numeric values. For example, the contours above show the topography of [Maungawhau](https://en.wikipedia.org/wiki/Maungawhau_/_Mount_Eden). 30 | 31 | See one of: 32 | 33 | - [Contours](./d3-contour/contour.md) 34 | - [Density estimation](./d3-contour/density.md) 35 | -------------------------------------------------------------------------------- /docs/d3-selection/namespaces.md: -------------------------------------------------------------------------------- 1 | # Namespaces 2 | 3 | XML namespaces are fun! Right? 🤪 Fortunately you can mostly ignore them. 4 | 5 | ## namespace(*name*) {#namespace} 6 | 7 | [Source](https://github.com/d3/d3-selection/blob/main/src/namespace.js) · Qualifies the specified *name*, which may or may not have a namespace prefix. 8 | 9 | ```js 10 | d3.namespace("svg:text") // {space: "http://www.w3.org/2000/svg", local: "text"} 11 | ``` 12 | 13 | If the name contains a colon (`:`), the substring before the colon is interpreted as the namespace prefix, which must be registered in [d3.namespaces](#namespaces). Returns an object `space` and `local` attributes describing the full namespace URL and the local name. If the name does not contain a colon, this function merely returns the input name. 14 | 15 | ## namespaces 16 | 17 | [Source](https://github.com/d3/d3-selection/blob/main/src/namespaces.js) · The map of registered namespace prefixes. The initial value is: 18 | 19 | ```js 20 | { 21 | svg: "http://www.w3.org/2000/svg", 22 | xhtml: "http://www.w3.org/1999/xhtml", 23 | xlink: "http://www.w3.org/1999/xlink", 24 | xml: "http://www.w3.org/XML/1998/namespace", 25 | xmlns: "http://www.w3.org/2000/xmlns/" 26 | } 27 | ``` 28 | 29 | Additional prefixes may be assigned as needed to create elements or attributes in other namespaces. 30 | -------------------------------------------------------------------------------- /docs/d3-scale-chromatic/cyclical.md: -------------------------------------------------------------------------------- 1 | 7 | 8 | # Cyclical schemes 9 | 10 | To create a cyclical continuous color scale using the [Rainbow](#interpolateRainbow) color scheme: 11 | 12 | ```js 13 | const color = d3.scaleSequential(d3.interpolateRainbow); 14 | ``` 15 | 16 | ## interpolateRainbow(*t*) {#interpolateRainbow} 17 | 18 | 19 | 20 | [Source](https://github.com/d3/d3-scale-chromatic/blob/main/src/sequential-multi/rainbow.js) · Given a number *t* in the range [0,1], returns the corresponding color from [d3.interpolateWarm](./sequential.md#interpolateWarm) scale from [0.0, 0.5] followed by the [d3.interpolateCool](./sequential.md#interpolateCool) scale from [0.5, 1.0], thus implementing the cyclical [less-angry rainbow](https://observablehq.com/@mbostock/sinebow) color scheme. 21 | 22 | ## interpolateSinebow(*t*) {#interpolateSinebow} 23 | 24 | 25 | 26 | [Source](https://github.com/d3/d3-scale-chromatic/blob/main/src/sequential-multi/sinebow.js) · Given a number *t* in the range [0,1], returns the corresponding color from the “sinebow” color scheme by [Jim Bumgardner](https://krazydad.com/tutorials/makecolors.php) and [Charlie Loyd](http://basecase.org/env/on-rainbows). 27 | -------------------------------------------------------------------------------- /docs/d3-shape/radial-link.md: -------------------------------------------------------------------------------- 1 | # Radial links 2 | 3 | A radial link generator is like the Cartesian [link generator](./link.md) except the [x](./link.md#link_x) and [y](./link.md#link_y) accessors are replaced with [angle](#linkRadial_angle) and [radius](#linkRadial_radius) accessors. Radial links are positioned relative to the origin; use a [transform](http://www.w3.org/TR/SVG/coords.html#TransformAttribute) to change the origin. 4 | 5 | ## linkRadial() {#linkRadial} 6 | 7 | [Source](https://github.com/d3/d3-shape/blob/main/src/link.js) · Returns a new [link generator](./link.md#_link) with radial tangents. For example, to visualize [links](../d3-hierarchy/hierarchy.md#node_links) in a [tree diagram](../d3-hierarchy/tree.md) rooted in the center of the display, you might say: 8 | 9 | ```js 10 | const link = d3.linkRadial() 11 | .angle((d) => d.x) 12 | .radius((d) => d.y); 13 | ``` 14 | 15 | ## *linkRadial*.angle(*angle*) {#linkRadial_angle} 16 | 17 | [Source](https://github.com/d3/d3-shape/blob/main/src/link.js) · Equivalent to [*link*.x](./link.md#link_x), except the accessor returns the angle in radians, with 0 at -*y* (12 o’clock). 18 | 19 | ## *linkRadial*.radius(*radius*) {#linkRadial_radius} 20 | 21 | [Source](https://github.com/d3/d3-shape/blob/main/src/link.js) · Equivalent to [*link*.y](./link.md#link_y), except the accessor returns the radius: the distance from the origin. 22 | -------------------------------------------------------------------------------- /docs/components/ExampleBlankChart.vue: -------------------------------------------------------------------------------- 1 | 46 | 47 | 50 | -------------------------------------------------------------------------------- /docs/components/ExampleCurve.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 19 | 20 | 36 | -------------------------------------------------------------------------------- /docs/public/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /docs/d3-interpolate/transform.md: -------------------------------------------------------------------------------- 1 | # Transform interpolation 2 | 3 | Interpolators for CSS and SVG transforms. The interpolation method is standardized by CSS: see [matrix decomposition for animation](http://www.w3.org/TR/css3-2d-transforms/#matrix-decomposition). 4 | 5 | ## interpolateTransformCss(*a*, *b*) {#interpolateTransformCss} 6 | 7 | ```js 8 | d3.interpolateTransformCss("translateY(12px) scale(2)", "translateX(30px) rotate(5deg)")(0.5) // "translate(15px,6px) rotate(2.5deg) scale(1.5,1.5)" 9 | ``` 10 | 11 | [Examples](https://observablehq.com/@d3/d3-interpolatetransformcss) · [Source](https://github.com/d3/d3-interpolate/blob/main/src/transform/index.js) · Returns an interpolator between the two 2D CSS transforms represented by *a* and *b*. Each transform is decomposed to a standard representation of translate, rotate, *x*-skew and scale; these component transformations are then interpolated. 12 | 13 | ## interpolateTransformSvg(*a*, *b*) {#interpolateTransformSvg} 14 | 15 | ```js 16 | d3.interpolateTransformSvg("skewX(-60)", "skewX(60) translate(280,0)") // "translate(140,0) skewX(0)" 17 | ``` 18 | 19 | [Examples](https://observablehq.com/@d3/d3-interpolatetransformcss) · [Source](https://github.com/d3/d3-interpolate/blob/main/src/transform/index.js) · Returns an interpolator between the two 2D SVG transforms represented by *a* and *b*. Each transform is decomposed to a standard representation of translate, rotate, *x*-skew and scale; these component transformations are then interpolated. 20 | -------------------------------------------------------------------------------- /docs/d3-selection.md: -------------------------------------------------------------------------------- 1 | # d3-selection 2 | 3 | Selections allow powerful data-driven transformation of the document object model (DOM): set [attributes](./d3-selection/modifying.md#selection_attr), [styles](./d3-selection/modifying.md#selection_style), [properties](./d3-selection/modifying.md#selection_property), [HTML](./d3-selection/modifying.md#selection_html) or [text](./d3-selection/modifying.md#selection_text) content, and more. Using the [data join](./d3-selection/joining.md)’s [enter](./d3-selection/joining.md#selection_enter) and [exit](./d3-selection/joining.md#selection_enter) selections, you can also [add](./d3-selection/modifying.md#selection_append) or [remove](./d3-selection/modifying.md#selection_remove) elements to correspond to data. 4 | 5 | See one of: 6 | 7 | * [Selecting elements](./d3-selection/selecting.md) - querying for DOM elements. 8 | * [Modifying elements](./d3-selection/modifying.md) - modifying attributes of selected elements. 9 | * [Joining data](./d3-selection/joining.md) - joining data to selected elements for visualization. 10 | * [Handling events](./d3-selection/events.md) - declaring event listeners for interaction. 11 | * [Control flow](./d3-selection/control-flow.md) - iterating over selected elements. 12 | * [Local variables](./d3-selection/locals.md) - attaching state to elements. 13 | * [Namespaces](./d3-selection/namespaces.md) - dealing with XML namespaces. 14 | 15 | For more, see [the d3-selection collection on Observable](https://observablehq.com/collection/@d3/d3-selection). 16 | -------------------------------------------------------------------------------- /docs/d3-delaunay.md: -------------------------------------------------------------------------------- 1 | 12 | 13 | # d3-delaunay 14 | 15 | 27 | 28 | This is a fast library for computing the [Voronoi diagram](https://en.wikipedia.org/wiki/Voronoi_diagram) of a set of two-dimensional points. It is based on [Delaunator](https://github.com/mapbox/delaunator), a fast library for computing the [Delaunay triangulation](https://en.wikipedia.org/wiki/Delaunay_triangulation) using [sweep algorithms](https://github.com/mapbox/delaunator/blob/main/README.md#papers). The Voronoi diagram is constructed by connecting the circumcenters of adjacent triangles in the Delaunay triangulation. 29 | 30 | See one of: 31 | 32 | - [Delaunay triangulations](./d3-delaunay/delaunay.md) 33 | - [Voronoi diagrams](./d3-delaunay/voronoi.md) 34 | 35 | For an interactive explanation of how this library works, see [The Delaunay’s Dual](https://observablehq.com/@mbostock/the-delaunays-dual). 36 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import {readFileSync} from "fs"; 2 | import json from "@rollup/plugin-json"; 3 | import nodeResolve from "@rollup/plugin-node-resolve"; 4 | import terser from "@rollup/plugin-terser"; 5 | import meta from "./package.json" assert {type: "json"}; 6 | 7 | // Extract copyrights from the LICENSE. 8 | const copyright = readFileSync("./LICENSE", "utf-8") 9 | .split(/\n/g) 10 | .filter(line => /^Copyright\s+/.test(line)) 11 | .map(line => line.replace(/^Copyright\s+/, "")) 12 | .join(", "); 13 | 14 | const config = { 15 | input: "bundle.js", 16 | output: { 17 | file: `dist/${meta.name}.js`, 18 | name: "d3", 19 | format: "umd", 20 | indent: false, 21 | extend: true, 22 | banner: `// ${meta.homepage} v${meta.version} Copyright ${copyright}` 23 | }, 24 | plugins: [ 25 | nodeResolve(), 26 | json() 27 | ], 28 | onwarn(message, warn) { 29 | if (message.code === "CIRCULAR_DEPENDENCY") return; 30 | warn(message); 31 | } 32 | }; 33 | 34 | export default [ 35 | config, 36 | { 37 | ...config, 38 | output: { 39 | ...config.output, 40 | file: `dist/${meta.name}.mjs`, 41 | format: "esm" 42 | } 43 | }, 44 | { 45 | ...config, 46 | output: { 47 | ...config.output, 48 | file: `dist/${meta.name}.min.js` 49 | }, 50 | plugins: [ 51 | ...config.plugins, 52 | terser({ 53 | output: { 54 | preamble: config.output.banner 55 | }, 56 | mangle: { 57 | reserved: [ 58 | "InternMap", 59 | "InternSet" 60 | ] 61 | } 62 | }) 63 | ] 64 | } 65 | ]; 66 | -------------------------------------------------------------------------------- /docs/d3-interpolate/zoom.md: -------------------------------------------------------------------------------- 1 | # Zoom interpolation 2 | 3 | An interpolator for zooming smoothly between two views of a two-dimensional plane based on [“Smooth and efficient zooming and panning”](http://www.win.tue.nl/~vanwijk/zoompan.pdf) by Jarke J. van Wijk and Wim A.A. Nuij. 4 | 5 | ## interpolateZoom(*a*, *b*) {#interpolateZoom} 6 | 7 | ```js 8 | d3.interpolateZoom([30, 30, 40], [135, 85, 60])(0.5) // [72, 52, 126.04761005270991] 9 | ``` 10 | 11 | [Examples](https://observablehq.com/@d3/d3-interpolatezoom) · [Source](https://github.com/d3/d3-interpolate/blob/main/src/zoom.js) · Returns an interpolator between the two views *a* and *b*. Each view is defined as an array of three numbers: *cx*, *cy* and *width*. The first two coordinates *cx*, *cy* represent the center of the viewport; the last coordinate *width* represents the size of the viewport. 12 | 13 | The returned interpolator exposes a *interpolate*.duration property which encodes the recommended transition duration in milliseconds. This duration is based on the path length of the curved trajectory through *xy* space. If you want a slower or faster transition, multiply this by an arbitrary scale factor (V as described in the original paper). 14 | 15 | ## *interpolateZoom*.rho(*rho*) {#interpolateZoom_rho} 16 | 17 | ```js 18 | d3.interpolateZoom.rho(0.5)([30, 30, 40], [135, 85, 60])(0.5) // [72, 52, 51.09549882328188] 19 | ``` 20 | 21 | [Source](https://github.com/d3/d3-interpolate/blob/main/src/zoom.js) · Given a [zoom interpolator](#interpolateZoom), returns a new zoom interpolator using the specified curvature *rho*. When *rho* is close to 0, the interpolator is almost linear. The default curvature is sqrt(2). 22 | -------------------------------------------------------------------------------- /docs/d3-scale/symlog.md: -------------------------------------------------------------------------------- 1 | # Symlog scales 2 | 3 | See [A bi-symmetric log transformation for wide-range data](https://www.researchgate.net/profile/John_Webber4/publication/233967063_A_bi-symmetric_log_transformation_for_wide-range_data/links/0fcfd50d791c85082e000000.pdf) by Webber for details. Unlike a [log scale](./log.md), a symlog scale domain can include zero. 4 | 5 | ## scaleSymlog(*domain*, *range*) {#scaleSymlog} 6 | 7 | [Examples](https://observablehq.com/@d3/continuous-scales) · [Source](https://github.com/d3/d3-scale/blob/main/src/symlog.js) · Constructs a new continuous scale with the specified [domain](./linear.md#linear_domain) and [range](./linear.md#linear_range), the [constant](#symlog_constant) 1, the [default](../d3-interpolate/value.md#interpolate) [interpolator](./linear.md#linear_interpolate) and [clamping](./linear.md#linear_clamp) disabled. 8 | 9 | ```js 10 | const x = d3.scaleSymlog([0, 100], [0, 960]); 11 | ``` 12 | 13 | If a single argument is specified, it is interpreted as the *range*. If either *domain* or *range* are not specified, each defaults to [0, 1]. 14 | 15 | ```js 16 | const color = d3.scaleSymlog(["red", "blue"]) // default domain of [0, 1] 17 | ``` 18 | 19 | ## *symlog*.constant(*constant*) {#symlog_constant} 20 | 21 | [Examples](https://observablehq.com/@d3/continuous-scales) · [Source](https://github.com/d3/d3-scale/blob/main/src/symlog.js) · If *constant* is specified, sets the symlog constant to the specified number and returns this scale. The constant defaults to 1. 22 | 23 | ```js 24 | const x = d3.scaleSymlog([0, 100], [0, 960]).constant(2); 25 | ``` 26 | 27 | If *constant* is not specified, returns the current value of the symlog constant. 28 | 29 | ```js 30 | x.constant() // 2 31 | ``` 32 | -------------------------------------------------------------------------------- /docs/d3-scale.md: -------------------------------------------------------------------------------- 1 | # d3-scale 2 | 3 | Scales map a dimension of abstract data to a visual representation. Although most often used for encoding data as position, say to map time and temperature to a horizontal and vertical position in a scatterplot, scales can represent virtually any visual encoding, such as color, stroke width, or symbol size. Scales can also be used with virtually any type of data, such as named categorical data or discrete data that requires sensible breaks. 4 | 5 | See one of: 6 | 7 | * [Linear scales](./d3-scale/linear.md) - for quantitative data 8 | * [Time scales](./d3-scale/time.md) - for time-series data 9 | * [Pow scales](./d3-scale/pow.md) - for quantitative data (that has a wide range) 10 | * [Log scales](./d3-scale/log.md) - for quantitative data (that has a wide range) 11 | * [Symlog scales](./d3-scale/symlog.md) - for quantitative data (that has a wide range) 12 | * [Ordinal scales](./d3-scale/ordinal.md) - for categorical or ordinal data 13 | * [Band scales](./d3-scale/band.md) - for categorical or ordinal data as a position encoding 14 | * [Point scales](./d3-scale/point.md) - for categorical or ordinal data as a position encoding 15 | * [Sequential scales](./d3-scale/sequential.md) - for quantitative data as a sequential color encoding 16 | * [Diverging scales](./d3-scale/diverging.md) - for quantitative data as a diverging color encoding 17 | * [Quantile scales](./d3-scale/quantile.md) - for quantitative data as a discrete encoding 18 | * [Quantize scales](./d3-scale/quantize.md) - for quantitative data as a discrete encoding 19 | * [Threshold scales](./d3-scale/threshold.md) - for quantitative data as a discrete encoding 20 | 21 | For visualizing the scale’s encoding, see [d3-axis](./d3-axis.md), as well as [*scale*.ticks](./d3-scale/linear.md#linear_ticks) and [*scale*.tickFormat](./d3-scale/linear.md#linear_tickFormat). For color schemes, see [d3-scale-chromatic](./d3-scale-chromatic.md). 22 | -------------------------------------------------------------------------------- /docs/components/ExampleCollideForce.vue: -------------------------------------------------------------------------------- 1 | 46 | 52 | -------------------------------------------------------------------------------- /docs/components/UsMap.vue: -------------------------------------------------------------------------------- 1 | 8 | 46 | 53 | -------------------------------------------------------------------------------- /docs/d3-interpolate.md: -------------------------------------------------------------------------------- 1 | 7 | 8 | # d3-interpolate 9 | 10 | This module provides a variety of interpolation methods for blending between two values. Values may be numbers, colors, strings, arrays, or even deeply-nested objects. For example: 11 | 12 | ```js 13 | const i = d3.interpolateNumber(10, 20); 14 | i(0.0); // 10 15 | i(0.2); // 12 16 | i(0.5); // 15 17 | i(1.0); // 20 18 | ``` 19 | 20 | The returned function `i` is an *interpolator*. Given a starting value *a* and an ending value *b*, it takes a parameter *t* typically in [0, 1] and returns the corresponding interpolated value. An interpolator typically returns a value equivalent to *a* at *t* = 0 and a value equivalent to *b* at *t* = 1. 21 | 22 | You can interpolate more than just numbers. To find the perceptual midpoint between steelblue and brown: 23 | 24 | ```js 25 | d3.interpolateLab("steelblue", "brown")(0.5); // "rgb(142, 92, 109)" 26 | ``` 27 | 28 | Or, as a color ramp from *t* = 0 to *t* = 1: 29 | 30 | 31 | 32 | Here’s a more elaborate example demonstrating type inference used by [interpolate](./d3-interpolate/value.md#interpolate): 33 | 34 | ```js 35 | const i = d3.interpolate({colors: ["red", "blue"]}, {colors: ["white", "black"]}); 36 | i(0.0); // {colors: ["rgb(255, 0, 0)", "rgb(0, 0, 255)"]} 37 | i(0.5); // {colors: ["rgb(255, 128, 128)", "rgb(0, 0, 128)"]} 38 | i(1.0); // {colors: ["rgb(255, 255, 255)", "rgb(0, 0, 0)"]} 39 | ``` 40 | 41 | Note that the generic value interpolator detects not only nested objects and arrays, but also color strings and numbers embedded in strings! 42 | 43 | See one of: 44 | 45 | * [Value interpolation](./d3-interpolate/value.md) 46 | * [Color interpolation](./d3-interpolate/color.md) 47 | * [Transform interpolation](./d3-interpolate/transform.md) 48 | * [Zoom interpolation](./d3-interpolate/zoom.md) 49 | -------------------------------------------------------------------------------- /docs/d3-force/center.md: -------------------------------------------------------------------------------- 1 | # Center force 2 | 3 | The center force translates nodes uniformly so that the mean position of all nodes (the center of mass if all nodes have equal weight) is at the given position ⟨[*x*](#center_x),[*y*](#center_y)⟩. This force modifies the positions of nodes on each application; it does not modify velocities, as doing so would typically cause the nodes to overshoot and oscillate around the desired center. This force helps keep nodes in the center of the viewport, and unlike the [position forces](./position.md), it does not distort their relative positions. 4 | 5 | ## forceCenter(*x*, *y*) {#forceCenter} 6 | 7 | [Source](https://github.com/d3/d3-force/blob/main/src/center.js) · Creates a new center force with the specified [*x*-](#center_x) and [*y*-](#center_y) coordinates. If *x* and *y* are not specified, they default to ⟨0,0⟩. 8 | 9 | ```js 10 | const center = d3.forceCenter(width / 2, height / 2); 11 | ``` 12 | 13 | ## *center*.x(*x*) {#center_x} 14 | 15 | [Source](https://github.com/d3/d3-force/blob/main/src/center.js) · If *x* is specified, sets the *x*-coordinate of the centering position to the specified number and returns this force. If *x* is not specified, returns the current *x*-coordinate, which defaults to zero. 16 | 17 | ## *center*.y(*y*) {#center_y} 18 | 19 | [Source](https://github.com/d3/d3-force/blob/main/src/center.js) · If *y* is specified, sets the y coordinate of the centering position to the specified number and returns this force. If *y* is not specified, returns the current y coordinate, which defaults to zero. 20 | 21 | ## *center*.strength(*strength*) {#center_strength} 22 | 23 | [Examples](https://observablehq.com/@d3/forcecenter-strength) · [Source](https://github.com/d3/d3-force/blob/main/src/center.js) · If *strength* is specified, sets the center force’s strength. A reduced strength of e.g. 0.05 softens the movements on interactive graphs in which new nodes enter or exit the graph. If *strength* is not specified, returns the force’s current strength, which defaults to 1. 24 | -------------------------------------------------------------------------------- /docs/components/ExampleArcs.vue: -------------------------------------------------------------------------------- 1 | 73 | 74 | 77 | -------------------------------------------------------------------------------- /docs/d3-array/blur.md: -------------------------------------------------------------------------------- 1 | # Blurring data 2 | 3 | A [box blur](https://en.wikipedia.org/wiki/Box_blur) implementation for 1D, 2D, and RGBA images; supports fractional radius. 4 | 5 | ## blur(*data*, *radius*) {#blur} 6 | 7 | ```js 8 | const numbers = d3.cumsum({length: 1000}, () => Math.random() - 0.5); 9 | d3.blur(numbers, 5); // a smoothed random walk 10 | ``` 11 | 12 | [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*. 13 | 14 | ## blur2({data, width, height}, *rx*, *ry*) {#blur2} 15 | 16 | ```js 17 | const matrix = { 18 | width: 4, 19 | height: 3, 20 | data: [ 21 | 1, 0, 0, 0, 22 | 0, 0, 0, 0, 23 | 0, 0, 0, 1 24 | ] 25 | }; 26 | 27 | d3.blur2(matrix, 1); 28 | ``` 29 | 30 | [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}. 31 | 32 | ## blurImage(*imageData*, *rx*, *ry*) {#blurImage} 33 | 34 | ```js 35 | const imageData = context.getImageData(0, 0, width, height); 36 | d3.blurImage(imageData, 5); 37 | ``` 38 | 39 | [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. 40 | -------------------------------------------------------------------------------- /docs/d3-array/intern.md: -------------------------------------------------------------------------------- 1 | # Interning values 2 | 3 | The [InternMap](#InternMap) and [InternSet](#InternSet) classes extend the native JavaScript Map and Set classes, respectively, allowing Dates and other non-primitive keys by bypassing the [SameValueZero algorithm](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness) when determining key equality. [d3.group](./group.md#group), [d3.rollup](./group.md#rollup) and [d3.index](./group.md#index) use an InternMap rather than a native Map. 4 | 5 | ## new InternMap(*iterable*, *key*) {#InternMap} 6 | 7 | ```js 8 | const valueByDate = new d3.InternMap([ 9 | [new Date("2021-01-01"), 42], 10 | [new Date("2022-01-01"), 12], 11 | [new Date("2023-01-01"), 45] 12 | ]); 13 | ``` 14 | 15 | [Examples](https://observablehq.com/@mbostock/internmap) · [Source](https://github.com/mbostock/internmap/blob/main/src/index.js) · Constructs a new Map given the specified *iterable* of [*key*, *value*] entries. The keys are interned using the specified *key* function which defaults to [*object*.valueOf](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf) for non-primitive values. For example, to retrieve a value keyed by a given date: 16 | 17 | ```js 18 | valueByDate.get(new Date("2022-01-01")) // 12 19 | ``` 20 | 21 | ## new InternSet(*iterable*, *key*) {#InternSet} 22 | 23 | ```js 24 | const dates = new d3.InternSet([ 25 | new Date("2021-01-01"), 26 | new Date("2022-01-01"), 27 | new Date("2023-01-01") 28 | ]); 29 | ``` 30 | 31 | [Examples](https://observablehq.com/@mbostock/internmap) · [Source](https://github.com/mbostock/internmap/blob/main/src/index.js) · Constructs a new Set given the specified *iterable* of values. The values are interned using the specified *key* function which defaults to [*object*.valueOf](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf) for non-primitive values. For example, to query for a given date: 32 | 33 | ```js 34 | dates.has(new Date("2022-01-01")) // true 35 | ``` 36 | -------------------------------------------------------------------------------- /docs/d3-array/sets.md: -------------------------------------------------------------------------------- 1 | # Set operations 2 | 3 | Logical set operations for any iterable. 4 | 5 | ## difference(*iterable*, ...*others*) {#difference} 6 | 7 | [Source](https://github.com/d3/d3-array/blob/main/src/difference.js) · Returns a new [InternSet](./intern.md#InternSet) containing every value in *iterable* that is not in any of the *others* iterables. 8 | 9 | ```js 10 | d3.difference([0, 1, 2, 0], [1]) // Set {0, 2} 11 | ``` 12 | 13 | ## union(...*iterables*) {#union} 14 | 15 | [Source](https://github.com/d3/d3-array/blob/main/src/union.js) · Returns a new [InternSet](./intern.md#InternSet) containing every (distinct) value that appears in any of the given *iterables*. The order of values in the returned set is based on their first occurrence in the given *iterables*. 16 | 17 | ```js 18 | d3.union([0, 2, 1, 0], [1, 3]) // Set {0, 2, 1, 3} 19 | ``` 20 | 21 | ## intersection(...*iterables*) {#intersection} 22 | 23 | [Source](https://github.com/d3/d3-array/blob/main/src/intersection.js) · Returns a new [InternSet](./intern.md#InternSet) containing every (distinct) value that appears in all of the given *iterables*. The order of values in the returned set is based on their first occurrence in the given *iterables*. 24 | 25 | ```js 26 | d3.intersection([0, 2, 1, 0], [1, 3]) // Set {1} 27 | ``` 28 | 29 | ## superset(*a*, *b*) {#superset} 30 | 31 | [Source](https://github.com/d3/d3-array/blob/main/src/superset.js) · Returns true if *a* is a superset of *b*: if every value in the given iterable *b* is also in the given iterable *a*. 32 | 33 | ```js 34 | d3.superset([0, 2, 1, 3, 0], [1, 3]) // true 35 | ``` 36 | 37 | ## subset(*a*, *b*) {#subset} 38 | 39 | [Source](https://github.com/d3/d3-array/blob/main/src/subset.js) · Returns true if *a* is a subset of *b*: if every value in the given iterable *a* is also in the given iterable *b*. 40 | 41 | ```js 42 | d3.subset([1, 3], [0, 2, 1, 3, 0]) // true 43 | ``` 44 | 45 | ## disjoint(*a*, *b*) {#disjoint} 46 | 47 | [Source](https://github.com/d3/d3-array/blob/main/src/disjoint.js) · Returns true if *a* and *b* are disjoint: if *a* and *b* contain no shared value. 48 | 49 | ```js 50 | d3.disjoint([1, 3], [2, 4]) // true 51 | ``` 52 | -------------------------------------------------------------------------------- /docs/d3-shape.md: -------------------------------------------------------------------------------- 1 | # d3-shape 2 | 3 | Visualizations can be represented by discrete graphical marks such as [symbols](./d3-shape/symbol.md), [arcs](./d3-shape/arc.md), [lines](./d3-shape/line.md), and [areas](./d3-shape/area.md). While the rectangles of a bar chart may sometimes be simple, other shapes are complex, such as rounded annular sectors and Catmull–Rom splines. The d3-shape module provides a variety of shape generators for your convenience. 4 | 5 | As with other aspects of D3, these shapes are driven by data: each shape generator exposes accessors that control how the input data are mapped to a visual representation. For example, you might define a line generator for a time series by [scaling](./d3-scale.md) fields of your data to fit the chart: 6 | 7 | ```js 8 | const line = d3.line() 9 | .x((d) => x(d.date)) 10 | .y((d) => y(d.value)); 11 | ``` 12 | 13 | This line generator can then be used to compute the `d` attribute of an SVG path element: 14 | 15 | ```js 16 | path.datum(data).attr("d", line); 17 | ``` 18 | 19 | Or you can use it to render to a Canvas 2D context: 20 | 21 | ```js 22 | line.context(context)(data); 23 | ``` 24 | 25 | See one of: 26 | 27 | - [Arcs](./d3-shape/arc.md) - circular or annular sectors, as in a pie or donut chart. 28 | - [Areas](./d3-shape/area.md) - an area defined by a bounding topline and baseline, as in an area chart. 29 | - [Curves](./d3-shape/curve.md) - interpolate between points to produce a continuous shape. 30 | - [Lines](./d3-shape/line.md) - a spline or polyline, as in a line chart. 31 | - [Links](./d3-shape/link.md) - a smooth cubic Bézier curve from a source to a target. 32 | - [Pies](./d3-shape/pie.md) - compute angles for a pie or donut chart. 33 | - [Stacks](./d3-shape/stack.md) - stack adjacent shapes, as in a stacked bar chart. 34 | - [Symbols](./d3-shape/symbol.md) - a categorical shape encoding, as in a scatterplot. 35 | - [Radial areas](./d3-shape/radial-area.md) - like [area](./d3-shape/area.md), but in polar coordinates. 36 | - [Radial lines](./d3-shape/radial-line.md) - like [line](./d3-shape/line.md), but in polar coordinates. 37 | - [Radial links](./d3-shape/radial-link.md) - like [link](./d3-shape/link.md), but in polar coordinates. 38 | -------------------------------------------------------------------------------- /docs/d3-transition.md: -------------------------------------------------------------------------------- 1 | # d3-transition 2 | 3 | A transition is a [selection](./d3-selection.md)-like interface for animating changes to the DOM. Instead of applying changes instantaneously, transitions smoothly interpolate the DOM from its current state to the desired target state over a given duration. 4 | 5 | To apply a transition, select elements, call [*selection*.transition](./d3-transition/selecting.md#selection_transition), and then make the desired changes. For example: 6 | 7 | ```js 8 | d3.select("body") 9 | .transition() 10 | .style("background-color", "red"); 11 | ``` 12 | 13 | Transitions support most selection methods (such as [*transition*.attr](./d3-transition/modifying.md#transition_attr) and [*transition*.style](./d3-transition/modifying.md#transition_style) in place of [*selection*.attr](./d3-selection/modifying.md#selection_attr) and [*selection*.style](./d3-selection/modifying.md#selection_style)), but not all methods are supported; for example, you must [append](./d3-selection/modifying.md#selection_append) elements or [bind data](./d3-selection/joining.md) before a transition starts. A [*transition*.remove](./d3-transition/modifying.md#transition_remove) operator is provided for convenient removal of elements when the transition ends. 14 | 15 | To compute intermediate state, transitions leverage a variety of [built-in interpolators](./d3-interpolate.md). [Colors](./d3-interpolate/color.md#interpolateRgb), [numbers](./d3-interpolate/value.md#interpolateNumber), and [transforms](./d3-interpolate/transform.md) are automatically detected. [Strings](./d3-interpolate/value.md#interpolateString) with embedded numbers are also detected, as is common with many styles (such as padding or font sizes) and paths. To specify a custom interpolator, use [*transition*.attrTween](./d3-transition/modifying.md#transition_attrTween), [*transition*.styleTween](./d3-transition/modifying.md#transition_styleTween) or [*transition*.tween](./d3-transition/modifying.md#transition_tween). 16 | 17 | See one of: 18 | 19 | * [Selecting elements](./d3-transition/selecting.md) 20 | * [Modifying elements](./d3-transition/modifying.md) 21 | * [Timing](./d3-transition/timing.md) 22 | * [Control flow](./d3-transition/control-flow.md) 23 | -------------------------------------------------------------------------------- /docs/d3-chord.md: -------------------------------------------------------------------------------- 1 | 7 | 8 | # d3-chord 9 | 10 | 11 | 12 | Chord diagrams visualize flow between a set of nodes in a graph, such as transition probabilities between finite states. The diagram above shows a fake dataset from [Circos](http://circos.ca/guide/tables/) of people who dyed their hair. 13 | 14 | D3’s chord layout represents flow using a square *matrix* of size *n*×*n*, where *n* is the number of nodes in the graph. Each value *matrix*[*i*][*j*] represents the flow from the *i*th node to the *j*th node. (Each number *matrix*[*i*][*j*] must be nonnegative, though it can be zero if there is no flow from node *i* to node *j*.) 15 | 16 | Above, each row and column represents a hair color (, , , ); each value represents a number of people who dyed their hair from one color to another color. For example, 5,871 people had hair and dyed it , while 1,951 people had hair and dyed it . The matrix diagonal represents people who kept the same color. 17 | 18 | ```js 19 | const matrix = [ 20 | // to black, blond, brown, red 21 | [11975, 5871, 8916, 2868], // from black 22 | [ 1951, 10048, 2060, 6171], // from blond 23 | [ 8010, 16145, 8090, 8045], // from brown 24 | [ 1013, 990, 940, 6907] // from red 25 | ]; 26 | ``` 27 | 28 | A chord diagram visualizes these transitions by [arranging](./d3-chord/chord.md) the population by starting color along the circumference of a circle and drawing [ribbons](./d3-chord/ribbon.md) between each color. The starting and ending width of the ribbon is proportional to the number of people that had the respective starting and ending color. The color of the ribbon, arbitrarily, is the color with the larger of the two values. 29 | 30 | See one of: 31 | 32 | - [Chords](./d3-chord/chord.md) - a layout for chord diagrams 33 | - [Ribbons](./d3-chord/ribbon.md) - a shape primitive for chord diagrams 34 | -------------------------------------------------------------------------------- /docs/d3-force.md: -------------------------------------------------------------------------------- 1 | 6 | 7 | # d3-force 8 | 9 | 10 | 11 | This module implements a [velocity Verlet](https://en.wikipedia.org/wiki/Verlet_integration) numerical integrator for simulating physical forces on particles. Force simulations can be used to visualize [networks](https://observablehq.com/@d3/force-directed-graph/2?intent=fork) and [hierarchies](https://observablehq.com/@d3/force-directed-tree?intent=fork), and to resolve [collisions](./d3-force/collide.md) as in [bubble charts](http://www.nytimes.com/interactive/2012/09/06/us/politics/convention-word-counts.html). 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | To use this module, create a [simulation](./d3-force/simulation.md) for an array of [nodes](./d3-force/simulation.md#simulation_nodes) and apply the desired [forces](./d3-force/simulation.md#simulation_force). Then [listen](./d3-force/simulation.md#simulation_on) for tick events to render the nodes as they update in your preferred graphics system, such as Canvas or SVG. 24 | 25 | See one of: 26 | 27 | * [Force simulations](./d3-force/simulation.md) 28 | * [Center force](./d3-force/center.md) 29 | * [Collide force](./d3-force/collide.md) 30 | * [Link force](./d3-force/link.md) 31 | * [Many-body force](./d3-force/many-body.md) 32 | * [Position forces](./d3-force/position.md) 33 | -------------------------------------------------------------------------------- /docs/d3-array/add.md: -------------------------------------------------------------------------------- 1 | # Adding numbers 2 | 3 | Add floating point numbers with full precision. 4 | 5 | ## new Adder() {#Adder} 6 | 7 | ```js 8 | const adder = new d3.Adder(); 9 | ``` 10 | 11 | [Examples](https://observablehq.com/@d3/d3-fsum) · [Source](https://github.com/d3/d3-array/blob/main/src/fsum.js) · Creates a new adder with an initial value of 0. 12 | 13 | ## *adder*.add(*number*) {#adder_add} 14 | 15 | ```js 16 | adder.add(42) 17 | ``` 18 | 19 | Adds the specified *number* to the adder’s current value and returns the adder. 20 | 21 | ## *adder*.valueOf() {#adder_valueOf} 22 | 23 | ```js 24 | adder.valueOf() // 42 25 | ``` 26 | 27 | Returns the IEEE 754 double-precision representation of the adder’s current value. Most useful as the short-hand notation `+adder`, or when coercing as `Number(adder)`. 28 | 29 | ## fsum(*values*, *accessor*) {#fsum} 30 | 31 | ```js 32 | d3.fsum([0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1]) // 1 33 | ``` 34 | 35 | [Examples](https://observablehq.com/@d3/d3-fsum) · [Source](https://github.com/d3/d3-array/blob/main/src/fsum.js) · Returns a full-precision summation of the given *values*. Although slower, d3.fsum can replace [d3.sum](./summarize.md#sum) wherever greater precision is needed. 36 | 37 | ```js 38 | d3.fsum(penguins, (d) => d.body_mass_g) // 1437000 39 | ``` 40 | 41 | If an *accessor* is specified, invokes the given function for each element in the input *values*, being passed the element `d`, the index `i`, and the array `data` as three arguments; the returned values will then be added. 42 | 43 | ## fcumsum(*values*, *accessor*) {#fcumsum} 44 | 45 | ```js 46 | d3.fcumsum([1, 1e-14, -1]) // [1, 1.00000000000001, 1e-14] 47 | ``` 48 | 49 | [Examples](https://observablehq.com/@d3/d3-fcumsum) · [Source](https://github.com/d3/d3-array/blob/main/src/fsum.js) · Returns a full-precision cumulative sum of the given *values* as a Float64Array. Although slower, d3.fcumsum can replace [d3.cumsum](./summarize.md#cumsum) when greater precision is needed. 50 | 51 | ```js 52 | d3.fcumsum(penguins, (d) => d.body_mass_g) // [3750, 7550, 10800, 10800, 14250, …] 53 | ``` 54 | 55 | If an *accessor* is specified, invokes the given function for each element in the input *values*, being passed the element `d`, the index `i`, and the array `data` as three arguments; the returned values will then be added. 56 | -------------------------------------------------------------------------------- /docs/d3-scale/pow.md: -------------------------------------------------------------------------------- 1 | # Power scales 2 | 3 | Power (“pow”) scales are similar to [linear scales](./linear.md), except an exponential transform is applied to the input domain value before the output range value is computed. Each range value *y* can be expressed as a function of the domain value *x*: *y* = *mx^k* + *b*, where *k* is the [exponent](#pow_exponent) value. Power scales also support negative domain values, in which case the input value and the resulting output value are multiplied by -1. 4 | 5 | ### scalePow(*domain*, *range*) {#scalePow} 6 | 7 | [Examples](https://observablehq.com/@d3/continuous-scales) · [Source](https://github.com/d3/d3-scale/blob/main/src/pow.js) · Constructs a new pow scale with the specified [domain](./linear.md#linear_domain) and [range](./linear.md#linear_range), the [exponent](#pow_exponent) 1, the [default](../d3-interpolate/value.md#interpolate) [interpolator](./linear.md#linear_interpolate) and [clamping](./linear.md#linear_clamp) disabled. 8 | 9 | ```js 10 | const x = d3.scalePow([0, 100], ["red", "blue"]).exponent(2); 11 | ``` 12 | 13 | If either *domain* or *range* are not specified, each defaults to [0, 1]. 14 | 15 | ### scaleSqrt(*domain*, *range*) {#scaleSqrt} 16 | 17 | [Examples](https://observablehq.com/@d3/continuous-scales) · [Source](https://github.com/d3/d3-scale/blob/main/src/pow.js) · Constructs a new pow scale with the specified [domain](./linear.md#linear_domain) and [range](./linear.md#linear_range), the [exponent](#pow_exponent) 0.5, the [default](../d3-interpolate/value.md#interpolate) [interpolator](./linear.md#linear_interpolate) and [clamping](./linear.md#linear_clamp) disabled. 18 | 19 | ```js 20 | const x = d3.scaleSqrt([0, 100], ["red", "blue"]); 21 | ``` 22 | 23 | If either *domain* or *range* are not specified, each defaults to [0, 1]. This is a convenience method equivalent to `d3.scalePow(…).exponent(0.5)`. 24 | 25 | ### *pow*.exponent(*exponent*) {#pow_exponent} 26 | 27 | [Examples](https://observablehq.com/@d3/continuous-scales) · [Source](https://github.com/d3/d3-scale/blob/main/src/pow.js) · If *exponent* is specified, sets the current exponent to the given numeric value and returns this scale. 28 | 29 | ```js 30 | const x = d3.scalePow([0, 100], ["red", "blue"]).exponent(2); 31 | ``` 32 | 33 | If *exponent* is not specified, returns the current exponent, which defaults to 1. 34 | 35 | ```js 36 | x.exponent() // 2 37 | ``` 38 | 39 | If the *exponent* is 1, the pow scale is effectively a [linear](./linear.md) scale. 40 | -------------------------------------------------------------------------------- /docs/components/quadtreeFindVisited.js: -------------------------------------------------------------------------------- 1 | // An instrumented version of quadtree.find that shows the visited nodes. 2 | export default function quadtree_findVisited(x, y, radius) { 3 | var visited = [], 4 | x0 = this._x0, 5 | y0 = this._y0, 6 | x1, 7 | y1, 8 | x2, 9 | y2, 10 | x3 = this._x1, 11 | y3 = this._y1, 12 | quads = [], 13 | node = this._root, 14 | q, 15 | i; 16 | 17 | if (node) quads.push(new Quad(node, x0, y0, x3, y3, 1, 1, -1, -1)); 18 | if (radius == null) radius = Infinity; 19 | else { 20 | x0 = x - radius, y0 = y - radius; 21 | x3 = x + radius, y3 = y + radius; 22 | radius *= radius; 23 | } 24 | 25 | while ((q = quads.pop())) { 26 | 27 | // Stop searching if this quadrant can’t contain a closer node. 28 | if (!(node = q.node) 29 | || (x1 = q.x0) > x3 30 | || (y1 = q.y0) > y3 31 | || (x2 = q.x1) < x0 32 | || (y2 = q.y1) < y0) continue; 33 | 34 | visited.push(q); 35 | 36 | // Bisect the current quadrant. 37 | if (node.length) { 38 | var xm = (x1 + x2) / 2, 39 | ym = (y1 + y2) / 2; 40 | 41 | // 0 1 42 | // 2 3 43 | quads.push( 44 | new Quad(node[3], xm, ym, x2, y2, 1, 1, q.dx1 - 1, q.dy1 - 1), 45 | new Quad(node[2], x1, ym, xm, y2, q.dx0 + 1, 1, -1, q.dy1 - 1), 46 | new Quad(node[1], xm, y1, x2, ym, 1, q.dy0 + 1, q.dx1 - 1, -1), 47 | new Quad(node[0], x1, y1, xm, ym, q.dx0 + 1, q.dy0 + 1, -1, -1) 48 | ); 49 | 50 | // Visit the closest quadrant first. 51 | if ((i = (y >= ym) << 1 | (x >= xm))) { 52 | q = quads[quads.length - 1]; 53 | quads[quads.length - 1] = quads[quads.length - 1 - i]; 54 | quads[quads.length - 1 - i] = q; 55 | } 56 | } 57 | 58 | // Visit this point. (Visiting coincident points isn’t necessary!) 59 | else { 60 | var dx = x - +this._x.call(null, node.data), 61 | dy = y - +this._y.call(null, node.data), 62 | d2 = dx * dx + dy * dy; 63 | if (d2 < radius) { 64 | var d = Math.sqrt(radius = d2); 65 | x0 = x - d, y0 = y - d; 66 | x3 = x + d, y3 = y + d; 67 | } 68 | } 69 | } 70 | 71 | return visited; 72 | } 73 | 74 | function Quad(node, x0, y0, x1, y1, dx0, dy0, dx1, dy1) { 75 | this.node = node; 76 | this.x0 = x0; 77 | this.y0 = y0; 78 | this.x1 = x1; 79 | this.y1 = y1; 80 | this.dx0 = dx0; 81 | this.dy0 = dy0; 82 | this.dx1 = dx1; 83 | this.dy1 = dy1; 84 | } 85 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/CustomLayout.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 28 | 29 | 50 | -------------------------------------------------------------------------------- /docs/d3-hierarchy.md: -------------------------------------------------------------------------------- 1 | # d3-hierarchy 2 | 3 | Many datasets are intrinsically hierarchical: [geographic entities](https://www.census.gov/programs-surveys/geography/guidance/hierarchy.html), such as census blocks, census tracts, counties and states; the command structure of businesses and governments; file systems; software packages. And even non-hierarchical data may be arranged hierarchically as with [*k*-means clustering](https://en.wikipedia.org/wiki/K-means_clustering) or [phylogenetic trees](https://observablehq.com/@d3/tree-of-life). A good hierarchical visualization facilitates rapid multiscale inference: micro-observations of individual elements and macro-observations of large groups. 4 | 5 | This module implements several popular techniques for visualizing hierarchical data: 6 | 7 | **Node-link diagrams** show topology using discrete marks for nodes and links, such as a circle for each node and a line connecting each parent and child. The [“tidy” tree](./d3-hierarchy/tree.md) is delightfully compact, while the [dendrogram](./d3-hierarchy/cluster.md) places leaves at the same level. (These have both polar and Cartesian forms.) [Indented trees](https://observablehq.com/@d3/indented-tree) are useful for interactive browsing. 8 | 9 | **Adjacency diagrams** show topology through the relative placement of nodes. They may also encode a quantitative dimension in the area of each node, for example to show revenue or file size. The [“icicle” diagram](./d3-hierarchy/partition.md) uses rectangles, while the “sunburst” uses annular segments. 10 | 11 | **Enclosure diagrams** also use an area encoding, but show topology through containment. A [treemap](./d3-hierarchy/treemap.md) recursively subdivides area into rectangles. [Circle-packing](./d3-hierarchy/pack.md) tightly nests circles; this is not as space-efficient as a treemap, but perhaps more readily shows topology. 12 | 13 | See one of: 14 | 15 | - [Hierarchies](./d3-hierarchy/hierarchy.md) - represent and manipulate hierarchical data 16 | - [Stratify](./d3-hierarchy/stratify.md) - organize tabular data into a [hierarchy](./d3-hierarchy/hierarchy.md) 17 | - [Tree](./d3-hierarchy/tree.md) - construct “tidy” tree diagrams of hierarchies 18 | - [Cluster](./d3-hierarchy/cluster.md) - construct tree diagrams that place leaf nodes at the same depth 19 | - [Partition](./d3-hierarchy/partition.md) - construct space-filling adjacency diagrams 20 | - [Pack](./d3-hierarchy/pack.md) - construct enclosure diagrams by tightly nesting circles 21 | - [Treemap](./d3-hierarchy/treemap.md) - recursively subdivide rectangles by quantitative value 22 | -------------------------------------------------------------------------------- /docs/components/LogoDiagram.vue: -------------------------------------------------------------------------------- 1 | 46 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "d3", 3 | "version": "7.8.5", 4 | "description": "Data-Driven Documents", 5 | "homepage": "https://d3js.org", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/d3/d3.git" 9 | }, 10 | "keywords": [ 11 | "d3", 12 | "dom", 13 | "visualization", 14 | "svg", 15 | "animation", 16 | "canvas" 17 | ], 18 | "license": "ISC", 19 | "author": { 20 | "name": "Mike Bostock", 21 | "url": "https://bost.ocks.org/mike" 22 | }, 23 | "type": "module", 24 | "files": [ 25 | "dist/d3.js", 26 | "dist/d3.min.js", 27 | "src/**/*.js" 28 | ], 29 | "module": "src/index.js", 30 | "main": "src/index.js", 31 | "jsdelivr": "dist/d3.min.js", 32 | "unpkg": "dist/d3.min.js", 33 | "exports": { 34 | "umd": "./dist/d3.min.js", 35 | "default": "./src/index.js" 36 | }, 37 | "dependencies": { 38 | "d3-array": "3", 39 | "d3-axis": "3", 40 | "d3-brush": "3", 41 | "d3-chord": "3", 42 | "d3-color": "3", 43 | "d3-contour": "4", 44 | "d3-delaunay": "6", 45 | "d3-dispatch": "3", 46 | "d3-drag": "3", 47 | "d3-dsv": "3", 48 | "d3-ease": "3", 49 | "d3-fetch": "3", 50 | "d3-force": "3", 51 | "d3-format": "3", 52 | "d3-geo": "3", 53 | "d3-hierarchy": "3", 54 | "d3-interpolate": "3", 55 | "d3-path": "3", 56 | "d3-polygon": "3", 57 | "d3-quadtree": "3", 58 | "d3-random": "3", 59 | "d3-scale": "4", 60 | "d3-scale-chromatic": "3", 61 | "d3-selection": "3", 62 | "d3-shape": "3", 63 | "d3-time": "3", 64 | "d3-time-format": "4", 65 | "d3-timer": "3", 66 | "d3-transition": "3", 67 | "d3-zoom": "3" 68 | }, 69 | "devDependencies": { 70 | "@observablehq/plot": "^0.6.7", 71 | "@observablehq/runtime": "^5.7.3", 72 | "@rollup/plugin-json": "6", 73 | "@rollup/plugin-node-resolve": "15", 74 | "@rollup/plugin-terser": "^0.4.0", 75 | "eslint": "8", 76 | "mocha": "10", 77 | "rollup": "3", 78 | "topojson-client": "^3.1.0", 79 | "vitepress": "^1.0.0-beta.2" 80 | }, 81 | "scripts": { 82 | "test": "mocha 'test/**/*-test.js' && eslint src test", 83 | "prepublishOnly": "rm -rf dist && rollup -c", 84 | "postpublish": "git push && git push --tags", 85 | "docs:dev": "node --experimental-network-imports node_modules/vitepress/dist/node/cli.js dev docs", 86 | "docs:build": "./prebuild.sh && node --experimental-network-imports node_modules/vitepress/dist/node/cli.js build docs", 87 | "docs:preview": "vitepress preview docs" 88 | }, 89 | "engines": { 90 | "node": ">=12" 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /docs/d3-hierarchy/partition.md: -------------------------------------------------------------------------------- 1 | # Partition {#Partition} 2 | 3 | [Partition](https://observablehq.com/@d3/icicle/2?intent=fork) 4 | 5 | [Examples](https://observablehq.com/@d3/icicle/2?intent=fork) · The partition layout produces adjacency diagrams: a space-filling variant of a [node-link tree diagram](./tree.md). Rather than drawing a link between parent and child in the hierarchy, nodes are drawn as solid areas (either arcs or rectangles), and their placement relative to other nodes reveals their position in the hierarchy. The size of the nodes encodes a quantitative dimension that would be difficult to show in a node-link diagram. 6 | 7 | ## partition() {#partition} 8 | 9 | [Source](https://github.com/d3/d3-hierarchy/blob/main/src/partition.js) · Creates a new partition layout with the default settings. 10 | 11 | ## *partition*(*root*) {#_partition} 12 | 13 | [Source](https://github.com/d3/d3-hierarchy/blob/main/src/partition.js) · Lays out the specified *root* [hierarchy](./hierarchy.md), assigning the following properties on *root* and its descendants: 14 | 15 | * *node*.x0 - the left edge of the rectangle 16 | * *node*.y0 - the top edge of the rectangle 17 | * *node*.x1 - the right edge of the rectangle 18 | * *node*.y1 - the bottom edge of the rectangle 19 | 20 | You must call [*root*.sum](./hierarchy.md#node_sum) before passing the hierarchy to the partition layout. You probably also want to call [*root*.sort](./hierarchy.md#node_sort) to order the hierarchy before computing the layout. 21 | 22 | ## *partition*.size(*size*) {#partition_size} 23 | 24 | [Source](https://github.com/d3/d3-hierarchy/blob/main/src/partition.js) · If *size* is specified, sets this partition layout’s size to the specified two-element array of numbers [*width*, *height*] and returns this partition layout. If *size* is not specified, returns the current size, which defaults to [1, 1]. 25 | 26 | ## *partition*.round(*round*) {#partition_round} 27 | 28 | [Source](https://github.com/d3/d3-hierarchy/blob/main/src/partition.js) · If *round* is specified, enables or disables rounding according to the given boolean and returns this partition layout. If *round* is not specified, returns the current rounding state, which defaults to false. 29 | 30 | ## *partition*.padding(*padding*) {#partition_padding} 31 | 32 | [Source](https://github.com/d3/d3-hierarchy/blob/main/src/partition.js) · If *padding* is specified, sets the padding to the specified number and returns this partition layout. If *padding* is not specified, returns the current padding, which defaults to zero. The padding is used to separate a node’s adjacent children. 33 | -------------------------------------------------------------------------------- /docs/components/ExampleAnimatedQuadtree.vue: -------------------------------------------------------------------------------- 1 | 7 | 53 | 59 | -------------------------------------------------------------------------------- /docs/components/WorldMap.vue: -------------------------------------------------------------------------------- 1 | 8 | 70 | 78 | -------------------------------------------------------------------------------- /docs/community.md: -------------------------------------------------------------------------------- 1 | # Community 🏠 {#community} 2 | 3 | Learning D3? Love data visualization? Don’t go it alone! Join our community to get help, be inspired, and do the same for others. 4 | 5 | ## Staying up-to-date 6 | 7 | If you like D3, please star ⭐️ our [GitHub repo](https://github.com/d3/d3) to show appreciation and to see updates on your GitHub dashboard. 8 | 9 | And of course, follow us on [Observable](https://observablehq.com/@observablehq?tab=profile), [Mastodon](https://vis.social/@observablehq), [Twitter](https://twitter.com/observablehq), and [LinkedIn](https://www.linkedin.com/company/observable)! 10 | 11 | ## Getting help 12 | 13 | We recommend asking for help on the [Observable forum](https://talk.observablehq.com). Or if you prefer chat, join the [Observable community Slack](https://observablehq.com/slack/join). 14 | 15 | We encourage you to share your work, no matter how messy, on [Observable](https://observablehq.com). Sharing live code is the easiest way to let people see what you see, and to debug your problem. Strive for a [minimal, reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) — it helps people hone in on your problem more quickly. 16 | 17 | When asking for help, don’t just post your code and ask people to fix it. Provide context, and say what you want help with. For example: 18 | 19 | - What are you trying to achieve? What is your goal? 20 | - What other solutions have you tried? 21 | - What behavior are you currently seeing? 22 | - Is the current behavior not what you expect? 23 | 24 | If you think you’ve found a bug in D3, please file a [GitHub issue](https://github.com/d3/d3/issues). But don’t use an issue to ask for help — you’ll have better luck on the forum or Slack. 25 | 26 | ## Getting involved 27 | 28 | We’d love for you to join the community! Here are some ways to participate: 29 | 30 | * Share your work on [Observable](https://observablehq.com). Working in public is a great way to help others learn and be inspired. Don’t worry if your code is messy or unfinished; sharing drafts normalizes the challenges that everyone experiences doing data visualization. 31 | 32 | * Upvote 👍 or comment on [GitHub issues](https://github.com/d3/d3/issues). We’d love your input on what to build next. If your desired feature isn’t already there, or if you’ve found a bug, file an issue and tell us about it. 33 | 34 | * Answer questions or participate in discussions on the [Observable forum](https://talk.observablehq.com/) and the [Observable community Slack](https://observablehq.com/slack/join). You’ll help others, and might learn something yourself, too. 35 | 36 | Please help us maintain a positive environment for all by adhering to our [code of conduct](https://github.com/observablehq/.github/blob/master/CODE_OF_CONDUCT.md). Thank you! 37 | -------------------------------------------------------------------------------- /test/docs-test.js: -------------------------------------------------------------------------------- 1 | import assert from "assert"; 2 | import {readdir, readFile, stat} from "fs/promises"; 3 | 4 | it("documentation links point to existing internal anchors", async () => { 5 | const root = "docs"; 6 | 7 | // Crawl all files, read their links and anchors. 8 | const anchors = new Map(); 9 | const links = []; 10 | for await (const file of readMarkdownFiles(root)) { 11 | const text = await readMarkdownSource(root + file); 12 | anchors.set(file, getAnchors(text)); 13 | for (const {pathname, hash} of getLinks(file, text)) { 14 | links.push({source: file, target: pathname, hash}); 15 | } 16 | } 17 | 18 | // Check for broken links. 19 | let errors = []; 20 | for (let {source, target, hash} of links) { 21 | if (!target.endsWith(".md")) { 22 | errors.push(`- ${source} points to ${target} instead of ${target}.md.`); 23 | target += ".md"; 24 | } 25 | if (anchors.get(target)?.includes(hash.slice(1))) continue; 26 | errors.push(`- ${source} points to missing ${target}${hash}.`); 27 | } 28 | assert(errors.length === 0, new Error(`${errors.length} broken links:\n${errors.join("\n")}`)); 29 | }); 30 | 31 | // Anchors can be derived from headers, or explicitly written as {#names}. 32 | function getAnchors(text) { 33 | const anchors = [""]; // empty string for non-fragment links 34 | for (const [, header] of text.matchAll(/^#+ ([*\w][*().,\w\d -]+)\n/gm)) { 35 | anchors.push( 36 | header 37 | .replaceAll(/[^\w\d\s]+/g, " ") 38 | .trim() 39 | .replaceAll(/ +/g, "-") 40 | .toLowerCase() 41 | ); 42 | } 43 | for (const [, anchor] of text.matchAll(/ \{#([\w\d-]+)\}/g)) { 44 | anchors.push(anchor); 45 | } 46 | return anchors; 47 | } 48 | 49 | // Internal links. 50 | function getLinks(file, text) { 51 | const links = []; 52 | for (const match of text.matchAll(/\[[^\]]+\]\(([^)]+)\)/g)) { 53 | const [, link] = match; 54 | if (/^\w+:/.test(link)) continue; // absolute link with protocol 55 | const {pathname, hash} = new URL(link, new URL(file, "https://example.com/")); 56 | links.push({pathname, hash}); 57 | } 58 | return links; 59 | } 60 | 61 | // In source files, ignore comments. 62 | async function readMarkdownSource(f) { 63 | return (await readFile(f, "utf8")).replaceAll(//gs, ""); 64 | } 65 | 66 | // Recursively find all md files in the directory. 67 | async function* readMarkdownFiles(root, subpath = "/") { 68 | for (const fname of await readdir(root + subpath)) { 69 | if (fname.startsWith(".")) continue; // ignore .vitepress etc. 70 | if ((await stat(root + subpath + fname)).isDirectory()) yield* readMarkdownFiles(root, subpath + fname + "/"); 71 | else if (fname.endsWith(".md")) yield subpath + fname; 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/custom.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --vp-c-brand: hsl(20 85% 57%); 3 | --vp-c-brand-light: hsl(20 85% 70%); 4 | --vp-c-brand-lighter: hsl(20 85% 80%); 5 | --vp-c-brand-dark: hsl(20 85% 57%); 6 | --vp-c-brand-darker: hsl(20 85% 40%); 7 | --vp-font-family-base: -apple-system, BlinkMacSystemFont, "avenir next", avenir, helvetica, "helvetica neue", ubuntu, roboto, noto, "segoe ui", arial, sans-serif; 8 | } 9 | 10 | .vp-doc figcaption { 11 | line-height: 20px; 12 | font-size: 12px; 13 | font-weight: 500; 14 | color: var(--vp-c-text-2); 15 | } 16 | 17 | .VPMenuGroup .title { 18 | line-height: 28px; 19 | font-size: 12px; 20 | font-weight: 500; 21 | color: var(--vp-c-text-2); 22 | } 23 | 24 | .vp-doc :not(pre) > code { 25 | line-height: 1.5; 26 | } 27 | 28 | .label-input { 29 | font-size: smaller; 30 | display: inline-flex; 31 | align-items: center; 32 | margin-right: 1em; 33 | } 34 | 35 | .label-input > label { 36 | display: inline-flex; 37 | align-items: center; 38 | } 39 | 40 | .label-input > input, 41 | .label-input > select { 42 | all: revert; 43 | margin: 0 0.5em !important; 44 | accent-color: var(--vp-c-brand); 45 | } 46 | 47 | .vp-doc td { 48 | white-space: nowrap; 49 | } 50 | 51 | .vp-doc p:hover .header-anchor { 52 | opacity: 1; 53 | } 54 | 55 | .vp-doc .plot { 56 | margin-top: 1em; 57 | margin-bottom: 1em; 58 | } 59 | 60 | .vp-doc .plot, 61 | .vp-doc .plot-ramp { 62 | background: none; 63 | overflow: visible; 64 | position: relative; 65 | z-index: 1; 66 | } 67 | 68 | :root [aria-label="tip"][fill="white"], 69 | :root [aria-label="tip"] [fill="white"] { 70 | fill: var(--vp-c-bg-alt); 71 | } 72 | 73 | :root.dark marker[stroke="white"], 74 | :root.dark [aria-label^="crosshair"][stroke="white"] { 75 | stroke: var(--vp-c-bg); 76 | } 77 | 78 | :root.dark marker[fill="white"] { 79 | fill: var(--vp-c-bg); 80 | } 81 | 82 | .vp-doc .plot a:hover { 83 | text-decoration: initial; 84 | } 85 | 86 | .vp-doc sub { 87 | line-height: 1; 88 | } 89 | 90 | .bg-alt { 91 | background: var(--vp-c-bg-alt); 92 | } 93 | 94 | .lh-normal { 95 | line-height: normal; 96 | } 97 | 98 | .flex { 99 | display: flex; 100 | } 101 | 102 | .flex-grow-1 { 103 | flex-grow: 1; 104 | } 105 | 106 | .ma4 { 107 | margin: 2rem; 108 | } 109 | 110 | .ml1 { 111 | margin-left: 1rem; 112 | } 113 | 114 | .mb2 { 115 | margin-bottom: 0.5rem; 116 | } 117 | 118 | .f12 { 119 | font-size: 12px; 120 | } 121 | 122 | .f14 { 123 | font-size: 14px; 124 | } 125 | 126 | .fw6 { 127 | font-weight: 600; 128 | } 129 | 130 | .fb6 { 131 | flex-basis: 10rem; 132 | } 133 | 134 | @media screen and (min-width: 960px) { 135 | .flex-l { 136 | display: flex; 137 | } 138 | } 139 | -------------------------------------------------------------------------------- /docs/d3-shape/radial-line.md: -------------------------------------------------------------------------------- 1 | # Radial lines 2 | 3 | [Examples](https://observablehq.com/@d3/d3-lineradial) · A radial line generator is like the Cartesian [line generator](./line.md) except the [x](./line.md#line_x) and [y](./line.md#line_y) accessors are replaced with [angle](#lineRadial_angle) and [radius](#lineRadial_radius) accessors. Radial lines are positioned relative to the origin; use a [transform](http://www.w3.org/TR/SVG/coords.html#TransformAttribute) to change the origin. 4 | 5 | ## lineRadial() {#lineRadial} 6 | 7 | [Source](https://github.com/d3/d3-shape/blob/main/src/lineRadial.js) · Constructs a new radial line generator with the default settings. 8 | 9 | ```js 10 | const line = d3.lineRadial(); 11 | ``` 12 | 13 | ## *lineRadial*(*data*) {#_lineRadial} 14 | 15 | [Source](https://github.com/d3/d3-shape/blob/main/src/lineRadial.js) · Equivalent to [*line*](./line.md#_line). 16 | 17 | ```js 18 | svg.append("path").attr("d", line(data)).attr("stroke", "currentColor"); 19 | ``` 20 | 21 | ## *lineRadial*.angle(*angle*) {#lineRadial_angle} 22 | 23 | [Source](https://github.com/d3/d3-shape/blob/main/src/lineRadial.js) · Equivalent to [*line*.x](./line.md#line_x), except the accessor returns the angle in radians, with 0 at -*y* (12 o’clock). 24 | 25 | ```js 26 | const line = d3.lineRadial().angle((d) => a(d.Date)); 27 | ``` 28 | 29 | ## *lineRadial*.radius(*radius*) {#lineRadial_radius} 30 | 31 | [Source](https://github.com/d3/d3-shape/blob/main/src/lineRadial.js) · Equivalent to [*line*.y](./line.md#line_y), except the accessor returns the radius: the distance from the origin. 32 | 33 | ```js 34 | const line = d3.lineRadial().radius((d) => r(d.temperature)); 35 | ``` 36 | 37 | ## *lineRadial*.defined(*defined*) {#lineRadial_defined} 38 | 39 | [Source](https://github.com/d3/d3-shape/blob/main/src/lineRadial.js) · Equivalent to [*line*.defined](./line.md#line_defined). 40 | 41 | ```js 42 | const line = d3.lineRadial().defined((d) => !isNaN(d.temperature)); 43 | ``` 44 | 45 | ## *lineRadial*.curve(*curve*) {#lineRadial_curve} 46 | 47 | [Source](https://github.com/d3/d3-shape/blob/main/src/lineRadial.js) · Equivalent to [*line*.curve](./line.md#line_curve). Note that [curveMonotoneX](../d3-shape/curve.md#curveMonotoneX) or [curveMonotoneY](../d3-shape/curve.md#curveMonotoneY) are not recommended for radial lines because they assume that the data is monotonic in *x* or *y*, which is typically untrue of radial lines. 48 | 49 | ```js 50 | const line = d3.lineRadial().curve(d3.curveBasis); 51 | ``` 52 | 53 | ## *lineRadial*.context(*context*) {#lineRadial_context} 54 | 55 | [Source](https://github.com/d3/d3-shape/blob/main/src/lineRadial.js) · Equivalent to [*line*.context](./line.md#line_context). 56 | 57 | ```js 58 | const context = canvas.getContext("2d"); 59 | const line = d3.lineRadial().context(context); 60 | ``` 61 | -------------------------------------------------------------------------------- /docs/components/ExampleLinkForce.vue: -------------------------------------------------------------------------------- 1 | 84 | 90 | -------------------------------------------------------------------------------- /docs/components/ExampleDisjointForce.vue: -------------------------------------------------------------------------------- 1 | 82 | 91 | -------------------------------------------------------------------------------- /docs/components/ExampleChord.vue: -------------------------------------------------------------------------------- 1 | 47 | 72 | -------------------------------------------------------------------------------- /docs/d3-selection/locals.md: -------------------------------------------------------------------------------- 1 | # Local variables 2 | 3 | D3 locals allow you to define local state independent of data. For instance, when rendering [small multiples](https://gist.github.com/mbostock/e1192fe405703d8321a5187350910e08) of time-series data, you might want the same x scale for all charts but distinct y scales to compare the relative performance of each metric. D3 locals are scoped by DOM elements: on set, the value is stored on the given element; on get, the value is retrieved from given element or the nearest ancestor that defines it. 4 | 5 | :::warning CAUTION 6 | Locals are rarely used; you may find it easier to store whatever state you need in the selection’s data. 7 | ::: 8 | 9 | ## local() {#local} 10 | 11 | [Source](https://github.com/d3/d3-selection/blob/main/src/local.js) · Declares a new local variable. 12 | 13 | ```js 14 | const foo = d3.local(); 15 | ``` 16 | 17 | Like `var`, each local is a distinct symbolic reference; unlike `var`, the value of each local is also scoped by the DOM. 18 | 19 | ## *local*.set(*node*, *value*) {#local_set} 20 | 21 | [Source](https://github.com/d3/d3-selection/blob/main/src/local.js) · Sets the value of this local on the specified *node* to the *value*, and returns the specified *value*. This is often performed using [*selection*.each](./control-flow.md#selection_each): 22 | 23 | ```js 24 | selection.each(function(d) { 25 | foo.set(this, d.value); 26 | }); 27 | ``` 28 | 29 | If you are just setting a single variable, consider using [*selection*.property](./modifying.md#selection_property): 30 | 31 | ```js 32 | selection.property(foo, (d) => d.value); 33 | ``` 34 | 35 | ## *local*.get(*node*) {#local_get} 36 | 37 | [Source](https://github.com/d3/d3-selection/blob/main/src/local.js) · Returns the value of this local on the specified *node*. 38 | 39 | ```js 40 | selection.each(function() { 41 | const value = foo.get(this); 42 | }); 43 | ``` 44 | 45 | If the *node* does not define this local, returns the value from the nearest ancestor that defines it. Returns undefined if no ancestor defines this local. 46 | 47 | ## *local*.remove(*node*) {#local_remove} 48 | 49 | [Source](https://github.com/d3/d3-selection/blob/main/src/local.js) · Deletes this local’s value from the specified *node*. 50 | 51 | ```js 52 | selection.each(function() { 53 | foo.remove(this); 54 | }); 55 | ``` 56 | 57 | Returns true if the *node* defined this local prior to removal, and false otherwise. If ancestors also define this local, those definitions are unaffected, and thus [*local*.get](#local_get) will still return the inherited value. 58 | 59 | ## *local*.toString() {#local_toString} 60 | 61 | [Source](https://github.com/d3/d3-selection/blob/main/src/local.js) · Returns the automatically-generated identifier for this local. This is the name of the property that is used to store the local’s value on elements, and thus you can also set or get the local’s value using *element*[*local*] or by using [*selection*.property](./modifying.md#selection_property). 62 | -------------------------------------------------------------------------------- /docs/d3-polygon.md: -------------------------------------------------------------------------------- 1 | 11 | 12 | # d3-polygon 13 | 14 | This module provides a few basic geometric operations for two-dimensional polygons. Each polygon is represented as an array of two-element arrays [​[*x0*, *y0*], [*x1*, *y1*], …], and may either be closed (wherein the first and last point are the same) or open (wherein they are not). Typically polygons are in counterclockwise order, assuming a coordinate system where the origin is in the top-left corner. 15 | 16 | ## polygonArea(*polygon*) {#polygonArea} 17 | 18 | ```js 19 | d3.polygonArea([[1, 1], [1.5, 0], [2, 1]]) // -0.5 20 | ``` 21 | 22 | [Source](https://github.com/d3/d3-polygon/blob/main/src/area.js) · Returns the signed area of the specified *polygon*. If the vertices of the polygon are in counterclockwise order (assuming a coordinate system where the origin is in the top-left corner), the returned area is positive; otherwise it is negative, or zero. 23 | 24 | ## polygonCentroid(*polygon*) {#polygonCentroid} 25 | 26 | ```js 27 | d3.polygonArea([[1, 1], [1.5, 0], [2, 1]]) // [1.5, 0.6666666666666666] 28 | ``` 29 | 30 | [Source](https://github.com/d3/d3-polygon/blob/main/src/centroid.js) · Returns the [centroid](https://en.wikipedia.org/wiki/Centroid) of the specified *polygon*. 31 | 32 | ## polygonHull(*points*) {#polygonHull} 33 | 34 | 42 | 43 | ```js 44 | d3.polygonHull(points) // [[3.0872864263338777, -1.300100095019402], [1.6559368816733773, -2.5092525689499605], …] 45 | ``` 46 | 47 | [Source](https://github.com/d3/d3-polygon/blob/main/src/hull.js) · Returns the [convex hull](https://en.wikipedia.org/wiki/Convex_hull) of the specified *points* using [Andrew’s monotone chain algorithm](http://en.wikibooks.org/wiki/Algorithm_Implementation/Geometry/Convex_hull/Monotone_chain). The returned hull is represented as an array containing a subset of the input *points* arranged in counterclockwise order. Returns null if *points* has fewer than three elements. 48 | 49 | ## polygonContains(*polygon*, *point*) {#polygonContains} 50 | 51 | ```js 52 | d3.polygonContains([[1, 1], [1.5, 0], [2, 1]], [1.5, 0.667]) // true 53 | ``` 54 | 55 | [Source](https://github.com/d3/d3-polygon/blob/main/src/contains.js) · Returns true if and only if the specified *point* is inside the specified *polygon*. 56 | 57 | ## polygonLength(*polygon*) {#polygonLength} 58 | 59 | ```js 60 | d3.polygonLength([[1, 1], [1.5, 0], [2, 1]]) // 3.23606797749979 61 | ``` 62 | 63 | [Source](https://github.com/d3/d3-polygon/blob/main/src/length.js) · Returns the length of the perimeter of the specified *polygon*. 64 | -------------------------------------------------------------------------------- /docs/d3-geo/stream.md: -------------------------------------------------------------------------------- 1 | # Streams 2 | 3 | Rather than materializing intermediate representations, streams transform geometry through function calls to minimize overhead. Streams must implement several methods to receive input geometry. Streams are inherently stateful; the meaning of a [point](#stream_point) depends on whether the point is inside of a [line](#stream_lineStart), and likewise a line is distinguished from a ring by a [polygon](#stream_polygonStart). Despite the name “stream”, these method calls are currently synchronous. 4 | 5 | ## geoStream(*object*, *stream*) {#geoStream} 6 | 7 | [Source](https://github.com/d3/d3-geo/blob/main/src/stream.js) · Streams the specified [GeoJSON](http://geojson.org) *object* to the specified [projection *stream*](#streams). While both features and geometry objects are supported as input, the stream interface only describes the geometry, and thus additional feature properties are not visible to streams. 8 | 9 | ## *stream*.point(*x*, *y*, *z*) {#stream_point} 10 | 11 | Indicates a point with the specified coordinates *x* and *y* (and optionally *z*). The coordinate system is unspecified and implementation-dependent; for example, [projection streams](./projection.md#projection_stream) require spherical coordinates in degrees as input. Outside the context of a polygon or line, a point indicates a point geometry object ([Point](http://www.geojson.org/geojson-spec.html#stream_point) or [MultiPoint](http://www.geojson.org/geojson-spec.html#multipoint)). Within a line or polygon ring, the point indicates a control point. 12 | 13 | ## *stream*.lineStart() {#stream_lineStart} 14 | 15 | Indicates the start of a line or ring. Within a polygon, indicates the start of a ring. The first ring of a polygon is the exterior ring, and is typically clockwise. Any subsequent rings indicate holes in the polygon, and are typically counterclockwise. 16 | 17 | ## *stream*.lineEnd() {#stream_lineEnd} 18 | 19 | Indicates the end of a line or ring. Within a polygon, indicates the end of a ring. Unlike GeoJSON, the redundant closing coordinate of a ring is *not* indicated via [point](#stream_point), and instead is implied via lineEnd within a polygon. Thus, the given polygon input: 20 | 21 | ```json 22 | { 23 | "type": "Polygon", 24 | "coordinates": [[[0, 0], [0, 1], [1, 1], [1, 0], [0, 0]]] 25 | } 26 | ``` 27 | 28 | Will produce the following series of method calls on the stream: 29 | 30 | ```js 31 | stream.polygonStart(); 32 | stream.lineStart(); 33 | stream.point(0, 0); 34 | stream.point(0, 1); 35 | stream.point(1, 1); 36 | stream.point(1, 0); 37 | stream.lineEnd(); 38 | stream.polygonEnd(); 39 | ``` 40 | 41 | ## *stream*.polygonStart() {#stream_polygonStart} 42 | 43 | Indicates the start of a polygon. The first line of a polygon indicates the exterior ring, and any subsequent lines indicate interior holes. 44 | 45 | ## *stream*.polygonEnd() {#stream_polygonEnd} 46 | 47 | Indicates the end of a polygon. 48 | 49 | ## *stream*.sphere() {#stream_sphere} 50 | 51 | Indicates the sphere (the globe; the unit sphere centered at ⟨0,0,0⟩). 52 | -------------------------------------------------------------------------------- /docs/d3-force/collide.md: -------------------------------------------------------------------------------- 1 | 6 | 7 | # Collide force 8 | 9 | 10 | 11 | The collide force treats nodes as circles with a given [radius](#collide_radius), rather than points, and prevents nodes from overlapping. More formally, two nodes *a* and *b* are separated so that the distance between *a* and *b* is at least *radius*(*a*) + *radius*(*b*). To reduce jitter, this is by default a “soft” constraint with a configurable [strength](#collide_strength) and [iteration count](#collide_iterations). 12 | 13 | ## forceCollide(*radius*) {#forceCollide} 14 | 15 | [Source](https://github.com/d3/d3-force/blob/main/src/collide.js) · Creates a new circle collide force with the specified [*radius*](#collide_radius). If *radius* is not specified, it defaults to the constant one for all nodes. 16 | 17 | ```js 18 | const collide = d3.forceCollide((d) => d.r); 19 | ``` 20 | 21 | ## *collide*.radius(*radius*) {#collide_radius} 22 | 23 | [Source](https://github.com/d3/d3-force/blob/main/src/collide.js) · If *radius* is specified, sets the radius accessor to the specified number or function, re-evaluates the radius accessor for each node, and returns this force. If *radius* is not specified, returns the current radius accessor, which defaults to: 24 | 25 | ```js 26 | function radius() { 27 | return 1; 28 | } 29 | ``` 30 | 31 | The radius accessor is invoked for each [node](./simulation.md#simulation_nodes) in the simulation, being passed the *node* and its zero-based *index*. The resulting number is then stored internally, such that the radius of each node is only recomputed when the force is initialized or when this method is called with a new *radius*, and not on every application of the force. 32 | 33 | ## *collide*.strength(*strength*) {#collide_strength} 34 | 35 | [Source](https://github.com/d3/d3-force/blob/main/src/collide.js) · If *strength* is specified, sets the force strength to the specified number in the range [0,1] and returns this force. If *strength* is not specified, returns the current strength which defaults to 1. 36 | 37 | Overlapping nodes are resolved through iterative relaxation. For each node, the other nodes that are anticipated to overlap at the next tick (using the anticipated positions ⟨*x* + *vx*,*y* + *vy*⟩) are determined; the node’s velocity is then modified to push the node out of each overlapping node. The change in velocity is dampened by the force’s strength such that the resolution of simultaneous overlaps can be blended together to find a stable solution. 38 | 39 | ## *collide*.iterations(*iterations*) {#collide_iterations} 40 | 41 | [Source](https://github.com/d3/d3-force/blob/main/src/collide.js) · If *iterations* is specified, sets the number of iterations per application to the specified number and returns this force. If *iterations* is not specified, returns the current iteration count which defaults to 1. Increasing the number of iterations greatly increases the rigidity of the constraint and avoids partial overlap of nodes, but also increases the runtime cost to evaluate the force. 42 | -------------------------------------------------------------------------------- /docs/d3-scale-chromatic/categorical.md: -------------------------------------------------------------------------------- 1 | 7 | 8 | # Categorical schemes 9 | 10 | For example, to create a categorical color scale using the [Accent](#schemeAccent) color scheme: 11 | 12 | ```js 13 | const color = d3.scaleOrdinal(d3.schemeAccent); 14 | ``` 15 | 16 | ## schemeCategory10 {#schemeCategory10} 17 | 18 | 19 | 20 | [Source](https://github.com/d3/d3-scale-chromatic/blob/main/src/categorical/category10.js) · An array of ten categorical colors represented as RGB hexadecimal strings. 21 | 22 | ## schemeAccent {#schemeAccent} 23 | 24 | 25 | 26 | [Source](https://github.com/d3/d3-scale-chromatic/blob/main/src/categorical/Accent.js) · An array of eight categorical colors represented as RGB hexadecimal strings. 27 | 28 | ## schemeDark2 {#schemeDark2} 29 | 30 | 31 | 32 | [Source](https://github.com/d3/d3-scale-chromatic/blob/main/src/categorical/Dark2.js) · An array of eight categorical colors represented as RGB hexadecimal strings. 33 | 34 | ## schemePaired {#schemePaired} 35 | 36 | 37 | 38 | [Source](https://github.com/d3/d3-scale-chromatic/blob/main/src/categorical/Paired.js) · An array of twelve categorical colors represented as RGB hexadecimal strings. 39 | 40 | ## schemePastel1 {#schemePastel1} 41 | 42 | 43 | 44 | [Source](https://github.com/d3/d3-scale-chromatic/blob/main/src/categorical/Pastel1.js) · An array of nine categorical colors represented as RGB hexadecimal strings. 45 | 46 | ## schemePastel2 {#schemePastel2} 47 | 48 | 49 | 50 | [Source](https://github.com/d3/d3-scale-chromatic/blob/main/src/categorical/Pastel2.js) · An array of eight categorical colors represented as RGB hexadecimal strings. 51 | 52 | ## schemeSet1 {#schemeSet1} 53 | 54 | 55 | 56 | [Source](https://github.com/d3/d3-scale-chromatic/blob/main/src/categorical/Set1.js) · An array of nine categorical colors represented as RGB hexadecimal strings. 57 | 58 | ## schemeSet2 {#schemeSet2} 59 | 60 | 61 | 62 | [Source](https://github.com/d3/d3-scale-chromatic/blob/main/src/categorical/Set2.js) · An array of eight categorical colors represented as RGB hexadecimal strings. 63 | 64 | ## schemeSet3 {#schemeSet3} 65 | 66 | 67 | 68 | [Source](https://github.com/d3/d3-scale-chromatic/blob/main/src/categorical/Set3.js) · An array of twelve categorical colors represented as RGB hexadecimal strings. 69 | 70 | ## schemeTableau10 {#schemeTableau10} 71 | 72 | 73 | 74 | [Source](https://github.com/d3/d3-scale-chromatic/blob/main/src/categorical/Tableau10.js) · An array of ten categorical colors authored by Tableau as part of [Tableau 10](https://www.tableau.com/about/blog/2016/7/colors-upgrade-tableau-10-56782) represented as RGB hexadecimal strings. 75 | -------------------------------------------------------------------------------- /docs/d3-geo/azimuthal.md: -------------------------------------------------------------------------------- 1 | 10 | 11 | # Azimuthal projections 12 | 13 | Azimuthal projections project the sphere directly onto a plane. 14 | 15 | ## geoAzimuthalEqualArea() {#geoAzimuthalEqualArea} 16 | 17 | 18 | 19 | [Source](https://github.com/d3/d3-geo/blob/main/src/projection/azimuthalEqualArea.js) · The azimuthal equal-area projection. 20 | 21 | 22 | 23 | ## geoAzimuthalEquidistant() {#geoAzimuthalEquidistant} 24 | 25 | 26 | 27 | [Source](https://github.com/d3/d3-geo/blob/main/src/projection/azimuthalEquidistant.js) · The azimuthal equidistant projection. 28 | 29 | 30 | 31 | ## geoGnomonic() {#geoGnomonic} 32 | 33 | 34 | 35 | [Source](https://github.com/d3/d3-geo/blob/main/src/projection/gnomonic.js) · The gnomonic projection. 36 | 37 | 38 | 39 | ## geoOrthographic() {#geoOrthographic} 40 | 41 | 42 | 43 | [Source](https://github.com/d3/d3-geo/blob/main/src/projection/orthographic.js) · The orthographic projection. 44 | 45 | 46 | 47 | ## geoStereographic() {#geoStereographic} 48 | 49 | 50 | 51 | [Source](https://github.com/d3/d3-geo/blob/main/src/projection/stereographic.js) · The stereographic projection. 52 | 53 | 54 | -------------------------------------------------------------------------------- /docs/d3-selection/control-flow.md: -------------------------------------------------------------------------------- 1 | # Control flow 2 | 3 | For advanced usage, selections provide methods for custom control flow. 4 | 5 | ## *selection*.each(*function*) {#selection_each} 6 | 7 | [Source](https://github.com/d3/d3-selection/blob/main/src/selection/each.js) · Invokes the specified *function* for each selected element, in order, being passed the current datum (*d*), the current index (*i*), and the current group (*nodes*), with *this* as the current DOM element (*nodes*[*i*]). This method can be used to invoke arbitrary code for each selected element, and is useful for creating a context to access parent and child data simultaneously, such as: 8 | 9 | ```js 10 | parent.each(function(p, j) { 11 | d3.select(this) 12 | .selectAll(".child") 13 | .text(d => `child ${d.name} of ${p.name}`); 14 | }); 15 | ``` 16 | 17 | See [sized donut multiples](https://observablehq.com/@d3/sized-donut-multiples) for an example. 18 | 19 | ## *selection*.call(*function*, ...*arguments*) {#selection_call} 20 | 21 | [Source](https://github.com/d3/d3-selection/blob/main/src/selection/call.js) · Invokes the specified *function* exactly once, passing in this selection along with any optional *arguments*. Returns this selection. This is equivalent to invoking the function by hand but facilitates method chaining. For example, to set several styles in a reusable function: 22 | 23 | ```js 24 | function name(selection, first, last) { 25 | selection 26 | .attr("first-name", first) 27 | .attr("last-name", last); 28 | } 29 | ``` 30 | 31 | Now say: 32 | 33 | ```js 34 | d3.selectAll("div").call(name, "John", "Snow"); 35 | ``` 36 | 37 | This is roughly equivalent to: 38 | 39 | ```js 40 | name(d3.selectAll("div"), "John", "Snow"); 41 | ``` 42 | 43 | The only difference is that *selection*.call always returns the *selection* and not the return value of the called *function*, `name`. 44 | 45 | ## *selection*.empty() {#selection_empty} 46 | 47 | [Source](https://github.com/d3/d3-selection/blob/main/src/selection/empty.js) · Returns true if this selection contains no (non-null) elements. 48 | 49 | ```js 50 | d3.selectAll("p").empty() // false, here 51 | ``` 52 | 53 | ## *selection*.nodes() {#selection_nodes} 54 | 55 | [Source](https://github.com/d3/d3-selection/blob/main/src/selection/nodes.js) · Returns an array of all (non-null) elements in this selection. 56 | 57 | ```js 58 | d3.selectAll("p").nodes() // [p, p, p, …] 59 | ``` 60 | 61 | Equivalent to: 62 | 63 | ```js 64 | Array.from(selection) 65 | ``` 66 | 67 | ## *selection*[Symbol.iterator]\(\) {#selection_iterator} 68 | 69 | [Source](https://github.com/d3/d3-selection/blob/main/src/selection/iterator.js) · Returns an iterator over the selected (non-null) elements. For example, to iterate over the selected elements: 70 | 71 | ```js 72 | for (const element of selection) { 73 | console.log(element); 74 | } 75 | ``` 76 | 77 | To flatten the selection to an array: 78 | 79 | ```js 80 | const elements = [...selection]; 81 | ``` 82 | 83 | ## *selection*.node() {#selection_node} 84 | 85 | [Source](https://github.com/d3/d3-selection/blob/main/src/selection/node.js) · Returns the first (non-null) element in this selection. If the selection is empty, returns null. 86 | 87 | ## *selection*.size() {#selection_size} 88 | 89 | [Source](https://github.com/d3/d3-selection/blob/main/src/selection/size.js) · Returns the total number of (non-null) elements in this selection. 90 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/ObservablePromo.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 30 | 31 | 132 | -------------------------------------------------------------------------------- /docs/d3-hierarchy/cluster.md: -------------------------------------------------------------------------------- 1 | 16 | 17 | # Cluster {#Cluster} 18 | 19 | 28 | 29 | [Examples](https://observablehq.com/@d3/cluster-dendrogram) · The cluster layout produces [dendrograms](http://en.wikipedia.org/wiki/Dendrogram): node-link diagrams that place leaf nodes of the tree at the same depth. Dendrograms are typically less compact than [tidy trees](./tree.md), but are useful when all the leaves should be at the same level, such as for hierarchical clustering or [phylogenetic tree diagrams](https://observablehq.com/@d3/tree-of-life). 30 | 31 | ## cluster() {#cluster} 32 | 33 | [Source](https://github.com/d3/d3-hierarchy/blob/main/src/cluster.js) · Creates a new cluster layout with default settings. 34 | 35 | ## *cluster*(*root*) {#_cluster} 36 | 37 | [Source](https://github.com/d3/d3-hierarchy/blob/main/src/cluster.js) · Lays out the specified *root* [hierarchy](./hierarchy.md), assigning the following properties on *root* and its descendants: 38 | 39 | * *node*.x - the *x*-coordinate of the node 40 | * *node*.y - the y coordinate of the node 41 | 42 | The coordinates *x* and *y* represent an arbitrary coordinate system; for example, you can treat *x* as an angle and *y* as a radius to produce a [radial layout](https://observablehq.com/@d3/radial-dendrogram). You may want to call [*root*.sort](./hierarchy.md#node_sort) before passing the hierarchy to the cluster layout. 43 | 44 | ## *cluster*.size(*size*) {#cluster_size} 45 | 46 | [Source](https://github.com/d3/d3-hierarchy/blob/main/src/cluster.js) · If *size* is specified, sets this cluster layout’s size to the specified two-element array of numbers [*width*, *height*] and returns this cluster layout. If *size* is not specified, returns the current layout size, which defaults to [1, 1]. A layout size of null indicates that a [node size](#cluster_nodeSize) will be used instead. The coordinates *x* and *y* represent an arbitrary coordinate system; for example, to produce a [radial layout](https://observablehq.com/@d3/radial-dendrogram), a size of [360, *radius*] corresponds to a breadth of 360° and a depth of *radius*. 47 | 48 | ## *cluster*.nodeSize(*size*) {#cluster_nodeSize} 49 | 50 | [Source](https://github.com/d3/d3-hierarchy/blob/main/src/cluster.js) · If *size* is specified, sets this cluster layout’s node size to the specified two-element array of numbers [*width*, *height*] and returns this cluster layout. If *size* is not specified, returns the current node size, which defaults to null. A node size of null indicates that a [layout size](#cluster_size) will be used instead. When a node size is specified, the root node is always positioned at ⟨0, 0⟩. 51 | 52 | ## *cluster*.separation(*separation*) {#cluster_separation} 53 | 54 | [Source](https://github.com/d3/d3-hierarchy/blob/main/src/cluster.js) · If *separation* is specified, sets the separation accessor to the specified function and returns this cluster layout. If *separation* is not specified, returns the current separation accessor, which defaults to: 55 | 56 | ```js 57 | function separation(a, b) { 58 | return a.parent == b.parent ? 1 : 2; 59 | } 60 | ``` 61 | 62 | The separation accessor is used to separate neighboring leaves. The separation function is passed two leaves *a* and *b*, and must return the desired separation. The nodes are typically siblings, though the nodes may be more distantly related if the layout decides to place such nodes adjacent. 63 | -------------------------------------------------------------------------------- /docs/d3-geo.md: -------------------------------------------------------------------------------- 1 | # d3-geo 2 | 3 | Map projections are sometimes implemented as point transformations: a function that takes a given longitude *lambda* and latitude *phi*, and returns the corresponding *xy* position on the plane. For instance, here is the spherical Mercator projection (in radians): 4 | 5 | ```js 6 | function mercator(lambda, phi) { 7 | const x = lambda; 8 | const y = Math.log(Math.tan(Math.PI / 4 + phi / 2)); 9 | return [x, y]; 10 | } 11 | ``` 12 | 13 | This is a reasonable approach if your geometry consists only of points. But what about discrete geometry such as polygons and polylines? 14 | 15 | Discrete geometry introduces new challenges when projecting from the sphere to the plane. The edges of a spherical polygon are [geodesics](https://en.wikipedia.org/wiki/Geodesic) (segments of great circles), not straight lines. Geodesics become curves in all map projections except [gnomonic](./d3-geo/azimuthal.md#geoGnomonic), and thus accurate projection requires interpolation along each arc. D3 uses [adaptive sampling](https://observablehq.com/@d3/adaptive-sampling) inspired by [Visvalingam’s line simplification method](https://bost.ocks.org/mike/simplify/) to balance accuracy and performance. 16 | 17 | The projection of polygons and polylines must also deal with the topological differences between the sphere and the plane. Some projections require cutting geometry that [crosses the antimeridian](https://observablehq.com/@d3/antimeridian-cutting), while others require [clipping geometry to a great circle](https://observablehq.com/@d3/orthographic-shading). Spherical polygons also require a [winding order convention](https://observablehq.com/@d3/winding-order) to determine which side of the polygon is the inside: the exterior ring for polygons smaller than a hemisphere must be clockwise, while the exterior ring for polygons [larger than a hemisphere](https://observablehq.com/@d3/oceans) must be anticlockwise. Interior rings representing holes must use the opposite winding order of their exterior ring. 18 | 19 | 20 | 21 | D3 uses spherical [GeoJSON](http://geojson.org/geojson-spec.html) to represent geographic features in JavaScript. D3 supports a wide variety of [common](./d3-geo/projection.md) and [unusual](https://github.com/d3/d3-geo-projection) map projections. And because D3 uses spherical geometry to represent data, you can apply any aspect to any projection by rotating geometry. 22 | 23 | See one of: 24 | 25 | - [Paths](./d3-geo/path.md) - generate SVG path data from GeoJSON 26 | - [Projections](./d3-geo/projection.md) - project spherical geometry to the plane 27 | - [Streams](./d3-geo/stream.md) - transform (either spherical or planar) geometry 28 | - [Shapes](./d3-geo/shape.md) - generate circles, lines, and other spherical geometry 29 | - [Spherical math](./d3-geo/math.md) - low-level methods for spherical geometry 30 | 31 | :::tip 32 | To convert shapefiles to GeoJSON, use [shp2json](https://github.com/mbostock/shapefile/blob/main/README.md#shp2json), part of the [shapefile package](https://github.com/mbostock/shapefile). See [Command-Line Cartography](https://medium.com/@mbostock/command-line-cartography-part-1-897aa8f8ca2c) for an introduction to d3-geo and related tools. See also [TopoJSON](https://github.com/topojson), an extension of GeoJSON that is significantly more compact and encodes topology. 33 | ::: 34 | 35 | :::warning CAUTION 36 | D3’s winding order convention is also used by [TopoJSON](https://github.com/topojson) and [ESRI shapefiles](https://github.com/mbostock/shapefile); however, it is the opposite convention of GeoJSON’s [RFC 7946](https://tools.ietf.org/html/rfc7946#section-3.1.6). Also note that standard GeoJSON WGS84 uses planar equirectangular coordinates, not spherical coordinates, and thus may require [stitching](https://github.com/d3/d3-geo-projection/blob/main/README.md#geostitch) to remove antimeridian cuts. 37 | ::: 38 | -------------------------------------------------------------------------------- /docs/d3-hierarchy/tree.md: -------------------------------------------------------------------------------- 1 | 16 | 17 | # Tree {#Tree} 18 | 19 | 28 | 29 | [Examples](https://observablehq.com/@d3/tidy-tree) · The tree layout produces tidy node-link diagrams of trees using the [Reingold–Tilford “tidy” algorithm](http://reingold.co/tidier-drawings.pdf), improved to run in linear time by [Buchheim *et al.*](http://dirk.jivas.de/papers/buchheim02improving.pdf) Tidy trees are typically more compact than [dendrograms](./cluster.md). 30 | 31 | ## tree() {#tree} 32 | 33 | [Source](https://github.com/d3/d3-hierarchy/blob/main/src/tree.js) · Creates a new tree layout with default settings. 34 | 35 | ## *tree*(*root*) {#_tree} 36 | 37 | [Source](https://github.com/d3/d3-hierarchy/blob/main/src/tree.js) · Lays out the specified *root* [hierarchy](./hierarchy.md), assigning the following properties on *root* and its descendants: 38 | 39 | * *node*.x - the *x*-coordinate of the node 40 | * *node*.y - the y coordinate of the node 41 | 42 | The coordinates *x* and *y* represent an arbitrary coordinate system; for example, you can treat *x* as an angle and *y* as a radius to produce a [radial layout](https://observablehq.com/@d3/radial-tidy-tree). You may want to call [*root*.sort](./hierarchy.md#node_sort) before passing the hierarchy to the tree layout. 43 | 44 | ## *tree*.size(*size*) {#tree_size} 45 | 46 | [Source](https://github.com/d3/d3-hierarchy/blob/main/src/tree.js) · If *size* is specified, sets this tree layout’s size to the specified two-element array of numbers [*width*, *height*] and returns this tree layout. If *size* is not specified, returns the current layout size, which defaults to [1, 1]. A layout size of null indicates that a [node size](#tree_nodeSize) will be used instead. The coordinates *x* and *y* represent an arbitrary coordinate system; for example, to produce a [radial layout](https://observablehq.com/@d3/radial-tidy-tree), a size of [360, *radius*] corresponds to a breadth of 360° and a depth of *radius*. 47 | 48 | ## *tree*.nodeSize(*size*) {#tree_nodeSize} 49 | 50 | [Source](https://github.com/d3/d3-hierarchy/blob/main/src/tree.js) · If *size* is specified, sets this tree layout’s node size to the specified two-element array of numbers [*width*, *height*] and returns this tree layout. If *size* is not specified, returns the current node size, which defaults to null. A node size of null indicates that a [layout size](#tree_size) will be used instead. When a node size is specified, the root node is always positioned at ⟨0, 0⟩. 51 | 52 | ## *tree*.separation(*separation*) {#tree_separation} 53 | 54 | [Source](https://github.com/d3/d3-hierarchy/blob/main/src/tree.js) · If *separation* is specified, sets the separation accessor to the specified function and returns this tree layout. If *separation* is not specified, returns the current separation accessor, which defaults to: 55 | 56 | ```js 57 | function separation(a, b) { 58 | return a.parent == b.parent ? 1 : 2; 59 | } 60 | ``` 61 | 62 | A variation that is more appropriate for radial layouts reduces the separation gap proportionally to the radius: 63 | 64 | ```js 65 | function separation(a, b) { 66 | return (a.parent == b.parent ? 1 : 2) / a.depth; 67 | } 68 | ``` 69 | 70 | The separation accessor is used to separate neighboring nodes. The separation function is passed two nodes *a* and *b*, and must return the desired separation. The nodes are typically siblings, though the nodes may be more distantly related if the layout decides to place such nodes adjacent. 71 | -------------------------------------------------------------------------------- /docs/d3-geo/cylindrical.md: -------------------------------------------------------------------------------- 1 | 10 | 11 | # Cylindrical projections 12 | 13 | Cylindrical projections project the sphere onto a containing cylinder, and then unroll the cylinder onto the plane. [Pseudocylindrical projections](https://web.archive.org/web/20150928042327/http://www.progonos.com/furuti/MapProj/Normal/ProjPCyl/projPCyl.html) are a generalization of cylindrical projections. 14 | 15 | ## geoEquirectangular() {#geoEquirectangular} 16 | 17 | 18 | 19 | [Source](https://github.com/d3/d3-geo/blob/main/src/projection/equirectangular.js) · The equirectangular (plate carrée) projection. 20 | 21 | 22 | 23 | ## geoMercator() {#geoMercator} 24 | 25 | 26 | 27 | [Source](https://github.com/d3/d3-geo/blob/main/src/projection/mercator.js) · The spherical Mercator projection. Defines a default [*projection*.clipExtent](./projection.md#projection_clipExtent) such that the world is projected to a square, clipped to approximately ±85° latitude. 28 | 29 | 30 | 31 | ## geoTransverseMercator() {#geoTransverseMercator} 32 | 33 | 34 | 35 | [Source](https://github.com/d3/d3-geo/blob/main/src/projection/transverseMercator.js) · The transverse spherical Mercator projection. Defines a default [*projection*.clipExtent](./projection.md#projection_clipExtent) such that the world is projected to a square, clipped to approximately ±85° latitude. 36 | 37 | 38 | 39 | ## geoEqualEarth() {#geoEqualEarth} 40 | 41 | 42 | 43 | [Source](https://github.com/d3/d3-geo/blob/main/src/projection/equalEarth.js) · The Equal Earth projection, an equal-area projection, by Bojan Šavrič _et al._, 2018. 44 | 45 | 46 | 47 | ## geoNaturalEarth1() {#geoNaturalEarth1} 48 | 49 | 50 | 51 | [Source](https://github.com/d3/d3-geo/blob/main/src/projection/naturalEarth1.js) · The [Natural Earth projection](http://www.shadedrelief.com/NE_proj/) is a pseudocylindrical projection designed by Tom Patterson. It is neither conformal nor equal-area, but appealing to the eye for small-scale maps of the whole world. 52 | 53 | 54 | -------------------------------------------------------------------------------- /docs/d3-scale/diverging.md: -------------------------------------------------------------------------------- 1 | # Diverging scales 2 | 3 | Diverging scales are similar to [linear scales](./linear.md) in that they map a continuous, numeric input domain to a continuous output range. Unlike linear scales, the input domain and output range of a diverging scale always have exactly three elements, and the output range is typically specified as an interpolator rather than an array of values. Diverging scales are typically used for a color encoding; see also [d3-scale-chromatic](../d3-scale-chromatic.md). These scales do not expose [invert](./linear.md#linear_invert) and [interpolate](./linear.md#linear_interpolate) methods. There are also [log](#scaleDivergingLog), [pow](#scaleDivergingPow), and [symlog](#scaleDivergingSymlog) variants of diverging scales. 4 | 5 | ## scaleDiverging(*domain*, *interpolator*) {#scaleDiverging} 6 | 7 | [Examples](https://observablehq.com/@d3/diverging-scales) · [Source](https://github.com/d3/d3-scale/blob/main/src/diverging.js) · Constructs a new diverging scale with the specified [*domain*](./linear.md#linear_domain) and [*interpolator*](#diverging_interpolator) function or array. 8 | 9 | ```js 10 | const color = d3.scaleDiverging([-1, 0, 1], d3.interpolateRdBu); 11 | ``` 12 | 13 | If *domain* is not specified, it defaults to [0, 0.5, 1]. 14 | 15 | ```js 16 | const color = d3.scaleDiverging(d3.interpolateRdBu); 17 | ``` 18 | 19 | If *interpolator* is not specified, it defaults to the identity function. 20 | 21 | ```js 22 | const identity = d3.scaleDiverging(); 23 | ``` 24 | 25 | When the scale is applied, the interpolator will be invoked with a value typically in the range [0, 1], where 0 represents the extreme negative value, 0.5 represents the neutral value, and 1 represents the extreme positive value. 26 | 27 | If *interpolator* is an array, it represents the scale’s three-element output range and is converted to an interpolator function using [d3.interpolate](../d3-interpolate/value.md#interpolate) and [d3.piecewise](../d3-interpolate/value.md#piecewise). 28 | 29 | ```js 30 | const color = d3.scaleDiverging(["blue", "white", "red"]); 31 | ``` 32 | 33 | A diverging scale’s domain must be numeric and must contain exactly three values. 34 | 35 | ## *diverging*.interpolator(*interpolator*) {#diverging_interpolator} 36 | 37 | If *interpolator* is specified, sets the scale’s interpolator to the specified function. 38 | 39 | ```js 40 | const color = d3.scaleDiverging().interpolator(d3.interpolateRdBu); 41 | ``` 42 | 43 | If *interpolator* is not specified, returns the scale’s current interpolator. 44 | 45 | ```js 46 | color.interpolator() // d3.interpolateRdBu 47 | ``` 48 | 49 | ## *diverging*.range(*range*) {#diverging_range} 50 | 51 | See [*linear*.range](./linear.md#linear_range). If *range* is specified, the given three-element array is converted to an interpolator function using [piecewise](../d3-interpolate/value.md#piecewise). 52 | 53 | ```js 54 | const color = d3.scaleDiverging().range(["blue", "white", "red"]); 55 | ``` 56 | 57 | The above is equivalent to: 58 | 59 | ```js 60 | const color = d3.scaleDiverging(d3.piecewise(["blue", "white", "red"])); 61 | ``` 62 | 63 | ## *diverging*.rangeRound(*range*) {#diverging_rangeRound} 64 | 65 | See [*linear*.range](./linear.md#linear_rangeRound). If *range* is specified, implicitly uses [interpolateRound](../d3-interpolate/value.md#interpolateRound) as the interpolator. 66 | 67 | ## scaleDivergingLog(*domain*, *range*) {#scaleDivergingLog} 68 | 69 | Returns a new diverging scale with a logarithmic transform, analogous to a [log scale](./log.md). 70 | 71 | ## scaleDivergingPow(*domain*, *range*) {#scaleDivergingPow} 72 | 73 | Returns a new diverging scale with an exponential transform, analogous to a [power scale](./pow.md). 74 | 75 | ## scaleDivergingSqrt(*domain*, *range*) {#scaleDivergingSqrt} 76 | 77 | Returns a new diverging scale with a square-root transform, analogous to a [sqrt scale](./pow.md#scaleSqrt). 78 | 79 | ## scaleDivergingSymlog(*domain*, *range*) {#scaleDivergingSymlog} 80 | 81 | Returns a new diverging scale with a symmetric logarithmic transform, analogous to a [symlog scale](./symlog.md). 82 | -------------------------------------------------------------------------------- /docs/d3-force/many-body.md: -------------------------------------------------------------------------------- 1 | # Many-body force 2 | 3 | The many-body (or *n*-body) force applies mutually amongst all [nodes](./simulation.md#simulation_nodes). It can be used to simulate gravity (attraction) if the [strength](#manyBody_strength) is positive, or electrostatic charge (repulsion) if the strength is negative. This implementation uses a quadtree and the [Barnes–Hut approximation](https://en.wikipedia.org/wiki/Barnes–Hut_simulation) to greatly improve performance; the accuracy can be customized using the [theta](#manyBody_theta) parameter. 4 | 5 | Unlike the [link force](./link.md), which only affect two linked nodes, the charge force is global: every node affects every other node, even if they are on disconnected subgraphs. 6 | 7 | ## forceManyBody() {#forceManyBody} 8 | 9 | [Source](https://github.com/d3/d3-force/blob/main/src/manyBody.js) · Creates a new many-body force with the default parameters. 10 | 11 | ```js 12 | const manyBody = d3.forceManyBody().strength(-100); 13 | ``` 14 | 15 | ## *manyBody*.strength(*strength*) {#manyBody_strength} 16 | 17 | [Source](https://github.com/d3/d3-force/blob/main/src/manyBody.js) · If *strength* is specified, sets the strength accessor to the specified number or function, re-evaluates the strength accessor for each node, and returns this force. A positive value causes nodes to attract each other, similar to gravity, while a negative value causes nodes to repel each other, similar to electrostatic charge. If *strength* is not specified, returns the current strength accessor, which defaults to: 18 | 19 | ```js 20 | function strength() { 21 | return -30; 22 | } 23 | ``` 24 | 25 | The strength accessor is invoked for each [node](./simulation.md#simulation_nodes) in the simulation, being passed the *node* and its zero-based *index*. The resulting number is then stored internally, such that the strength of each node is only recomputed when the force is initialized or when this method is called with a new *strength*, and not on every application of the force. 26 | 27 | ## *manyBody*.theta(*theta*) {#manyBody_theta} 28 | 29 | [Source](https://github.com/d3/d3-force/blob/main/src/manyBody.js) · If *theta* is specified, sets the Barnes–Hut approximation criterion to the specified number and returns this force. If *theta* is not specified, returns the current value, which defaults to 0.9. 30 | 31 | To accelerate computation, this force implements the [Barnes–Hut approximation](http://en.wikipedia.org/wiki/Barnes–Hut_simulation) which takes O(*n* log *n*) per application where *n* is the number of [nodes](./simulation.md#simulation_nodes). For each application, a [quadtree](../d3-quadtree.md) stores the current node positions; then for each node, the combined force of all other nodes on the given node is computed. For a cluster of nodes that is far away, the charge force can be approximated by treating the cluster as a single, larger node. The *theta* parameter determines the accuracy of the approximation: if the ratio *w* / *l* of the width *w* of the quadtree cell to the distance *l* from the node to the cell’s center of mass is less than *theta*, all nodes in the given cell are treated as a single node rather than individually. 32 | 33 | ## *manyBody*.distanceMin(*distance*) {#manyBody_distanceMin} 34 | 35 | [Source](https://github.com/d3/d3-force/blob/main/src/manyBody.js) · If *distance* is specified, sets the minimum distance between nodes over which this force is considered. If *distance* is not specified, returns the current minimum distance, which defaults to 1. A minimum distance establishes an upper bound on the strength of the force between two nearby nodes, avoiding instability. In particular, it avoids an infinitely-strong force if two nodes are exactly coincident; in this case, the direction of the force is random. 36 | 37 | ## *manyBody*.distanceMax(*distance*) {#manyBody_distanceMax} 38 | 39 | [Source](https://github.com/d3/d3-force/blob/main/src/manyBody.js) · If *distance* is specified, sets the maximum distance between nodes over which this force is considered. If *distance* is not specified, returns the current maximum distance, which defaults to infinity. Specifying a finite maximum distance improves performance and produces a more localized layout. 40 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/ExamplesGrid.vue: -------------------------------------------------------------------------------- 1 | 48 | 49 | 58 | 59 | 133 | -------------------------------------------------------------------------------- /docs/d3-transition/timing.md: -------------------------------------------------------------------------------- 1 | # Timing 2 | 3 | The [easing](#transition_ease), [delay](#transition_delay) and [duration](#transition_duration) of a transition is configurable. For example, a per-element delay can be used to [stagger the reordering](https://observablehq.com/@d3/sortable-bar-chart) of elements, improving perception. See [Animated Transitions in Statistical Data Graphics](http://vis.berkeley.edu/papers/animated_transitions/) for recommendations. 4 | 5 | ## *transition*.delay(*value*) {#transition_delay} 6 | 7 | [Source](https://github.com/d3/d3-transition/blob/main/src/transition/delay.js) · For each selected element, sets the transition delay to the specified *value* in milliseconds. 8 | 9 | ```js 10 | transition.delay(250); 11 | ``` 12 | 13 | The *value* may be specified either as a constant or a function. If a function, it is immediately evaluated for each selected element, in order, being passed the current datum (*d*), the current index (*i*), and the current group (*nodes*), with *this* as the current DOM element. The function’s return value is then used to set each element’s transition delay. If a delay is not specified, it defaults to zero. 14 | 15 | If a *value* is not specified, returns the current value of the delay for the first (non-null) element in the transition. This is generally useful only if you know that the transition contains exactly one element. 16 | 17 | ```js 18 | transition.delay() // 250 19 | ``` 20 | 21 | Setting the delay to a multiple of the index `i` is a convenient way to stagger transitions across a set of elements. For example: 22 | 23 | ```js 24 | transition.delay((d, i) => i * 10); 25 | ``` 26 | 27 | Of course, you can also compute the delay as a function of the data, or [sort the selection](../d3-selection/modifying.md#selection_sort) before computed an index-based delay. 28 | 29 | ## *transition*.duration(*value*) {#transition_duration} 30 | 31 | [Source](https://github.com/d3/d3-transition/blob/main/src/transition/duration.js) · For each selected element, sets the transition duration to the specified *value* in milliseconds. 32 | 33 | ```js 34 | transition.duration(750); 35 | ``` 36 | 37 | The *value* may be specified either as a constant or a function. If a function, it is immediately evaluated for each selected element, in order, being passed the current datum (*d*), the current index (*i*), and the current group (*nodes*), with *this* as the current DOM element. The function’s return value is then used to set each element’s transition duration. If a duration is not specified, it defaults to 250ms. 38 | 39 | If a *value* is not specified, returns the current value of the duration for the first (non-null) element in the transition. This is generally useful only if you know that the transition contains exactly one element. 40 | 41 | ```js 42 | transition.duration() // 750 43 | ``` 44 | 45 | ## *transition*.ease(*value*) {#transition_ease} 46 | 47 | [Source](https://github.com/d3/d3-transition/blob/main/src/transition/ease.js) · Specifies the transition [easing function](../d3-ease.md) for all selected elements. 48 | 49 | ```js 50 | transition.ease(d3.easeCubic); 51 | ``` 52 | 53 | The *value* must be specified as a function. The easing function is invoked for each frame of the animation, being passed the normalized time *t* in the range [0, 1]; it must then return the eased time *tʹ* which is typically also in the range [0, 1]. A good easing function should return 0 if *t* = 0 and 1 if *t* = 1. If an easing function is not specified, it defaults to [easeCubic](../d3-ease.md#easeCubic). 54 | 55 | If a *value* is not specified, returns the current easing function for the first (non-null) element in the transition. This is generally useful only if you know that the transition contains exactly one element. 56 | 57 | ```js 58 | transition.ease() // d3.easeCubic 59 | ``` 60 | 61 | ## *transition*.easeVarying(*factory*) {#transition_easeVarying} 62 | 63 | [Examples](https://observablehq.com/@d3/transition-easevarying) · [Source](https://github.com/d3/d3-transition/blob/main/src/transition/easeVarying.js) · Specifies a factory for the transition [easing function](../d3-ease.md). 64 | 65 | ```js 66 | transition.easeVarying((d) => d3.easePolyIn.exponent(d.exponent)); 67 | ``` 68 | 69 | The *factory* must be a function. It is invoked for each node of the selection, being passed the current datum (*d*), the current index (*i*), and the current group (*nodes*), with *this* as the current DOM element. It must return an easing function. 70 | -------------------------------------------------------------------------------- /docs/d3-dispatch.md: -------------------------------------------------------------------------------- 1 | # d3-dispatch 2 | 3 | Dispatching is a low-level interaction mechanism that allows you to register named callbacks and then call them with arbitrary arguments. A variety of D3 interaction components, such as [d3-drag](./d3-drag.md), use [dispatch](#dispatch) to emit events to listeners. Think of this as [EventTarget](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget) except every listener has a well-defined name so it’s easy to remove or replace them. 4 | 5 | For example, to create a dispatch for *start* and *end* events: 6 | 7 | ```js 8 | const dispatch = d3.dispatch("start", "end"); 9 | ``` 10 | 11 | You can then register callbacks for these events using [*dispatch*.on](#dispatch_on): 12 | 13 | ```js 14 | dispatch.on("start", callback1); 15 | dispatch.on("start.foo", callback2); 16 | dispatch.on("end", callback3); 17 | ``` 18 | 19 | Then, you can invoke all the *start* callbacks using [*dispatch*.call](#dispatch_call) or [*dispatch*.apply](#dispatch_apply): 20 | 21 | ```js 22 | dispatch.call("start"); 23 | ``` 24 | 25 | Like *function*.call, you may also specify the `this` context and any arguments: 26 | 27 | ```js 28 | dispatch.call("start", {about: "I am a context object"}, "I am an argument"); 29 | ``` 30 | 31 | 32 | 33 | ## dispatch(...*types*) {#dispatch} 34 | 35 | [Source](https://github.com/d3/d3-dispatch/blob/main/src/dispatch.js) · Creates a new dispatch for the specified event *types*. Each *type* is a string, such as `"start"` or `"end"`. 36 | 37 | ## *dispatch*.on(*typenames*, *callback*) {#dispatch_on} 38 | 39 | [Source](https://github.com/d3/d3-dispatch/blob/main/src/dispatch.js) · Adds, removes or gets the *callback* for the specified *typenames*. If a *callback* function is specified, it is registered for the specified (fully-qualified) *typenames*. If a callback was already registered for the given *typenames*, the existing callback is removed before the new callback is added. 40 | 41 | The specified *typenames* is a string, such as `start` or `end.foo`. The type may be optionally followed by a period (`.`) and a name; the optional name allows multiple callbacks to be registered to receive events of the same type, such as `start.foo` and `start.bar`. To specify multiple typenames, separate typenames with spaces, such as `start end` or `start.foo start.bar`. 42 | 43 | To remove all callbacks for a given name `foo`, say `dispatch.on(".foo", null)`. 44 | 45 | If *callback* is not specified, returns the current callback for the specified *typenames*, if any. If multiple typenames are specified, the first matching callback is returned. 46 | 47 | ## *dispatch*.copy() {#dispatch_copy} 48 | 49 | [Source](https://github.com/d3/d3-dispatch/blob/main/src/dispatch.js) · Returns a copy of this dispatch object. Changes to this dispatch do not affect the returned copy and *vice versa*. 50 | 51 | ## *dispatch*.call(*type*, *that*, ...*arguments*) {#dispatch_call} 52 | 53 | [Source](https://github.com/d3/d3-dispatch/blob/main/src/dispatch.js) · Like [*function*.call](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call), invokes each registered callback for the specified *type*, passing the callback the specified *...*argument**, with *that* as the `this` context. See [*dispatch*.apply](#dispatch_apply) for more information. 54 | 55 | ## *dispatch*.apply(*type*, *that*, *arguments*) {#dispatch_apply} 56 | 57 | [Source](https://github.com/d3/d3-dispatch/blob/main/src/dispatch.js) · Like [*function*.apply](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call), invokes each registered callback for the specified *type*, passing the callback the specified *arguments*, with *that* as the `this` context. For example, if you wanted to dispatch your *custom* callbacks after handling a native *click* event, while preserving the current `this` context and arguments, you could say: 58 | 59 | ```js 60 | selection.on("click", function() { 61 | dispatch.apply("custom", this, arguments); 62 | }); 63 | ``` 64 | 65 | You can pass whatever arguments you want to callbacks; most commonly, you might create an object that represents an event, or pass the current datum (*d*) and index (*i*). See [function.call](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/Call) and [function.apply](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/Apply) for further information. 66 | -------------------------------------------------------------------------------- /docs/d3-geo/conic.md: -------------------------------------------------------------------------------- 1 | 11 | 12 | # Conic projections 13 | 14 | Conic projections project the sphere onto a cone, and then unroll the cone onto the plane. Conic projections have [two standard parallels](#conic_parallels). 15 | 16 | ## *conic*.parallels(*parallels*) {#conic_parallels} 17 | 18 | [Source](https://github.com/d3/d3-geo/blob/main/src/projection/conic.js) · The [two standard parallels](https://en.wikipedia.org/wiki/Map_projection#Conic) that define the map layout in conic projections. 19 | 20 | ## geoConicConformal() {#geoConicConformal} 21 | 22 | 23 | 24 | [Source](https://github.com/d3/d3-geo/blob/main/src/projection/conicConformal.js) · The conic conformal projection. The parallels default to [30°, 30°] resulting in flat top. 25 | 26 | 27 | 28 | ## geoConicEqualArea() {#geoConicEqualArea} 29 | 30 | 31 | 32 | [Source](https://github.com/d3/d3-geo/blob/main/src/projection/conicEqualArea.js) · The Albers’ equal-area conic projection. 33 | 34 | 35 | 36 | ## geoConicEquidistant() {#geoConicEquidistant} 37 | 38 | 39 | 40 | [Source](https://github.com/d3/d3-geo/blob/main/src/projection/conicEquidistant.js) · The conic equidistant projection. 41 | 42 | 43 | 44 | ## geoAlbers() {#geoAlbers} 45 | 46 | 47 | 48 | [Source](https://github.com/d3/d3-geo/blob/main/src/projection/albers.js) · The Albers’ equal area-conic projection. This is a U.S.-centric configuration of [geoConicEqualArea](#geoConicEqualArea). 49 | 50 | ## geoAlbersUsa() {#geoAlbersUsa} 51 | 52 | 53 | 54 | [Source](https://github.com/d3/d3-geo/blob/main/src/projection/albersUsa.js) · This is a U.S.-centric composite projection of three [geoConicEqualArea](#geoConicEqualArea) projections: [geoAlbers](#geoAlbers) is used for the lower forty-eight states, and separate conic equal-area projections are used for Alaska and Hawaii. The scale for Alaska is diminished: it is projected at 0.35× its true relative area. See [Albers USA with Territories](https://www.npmjs.com/package/geo-albers-usa-territories) for an extension to all US territories, and [d3-composite-projections](http://geoexamples.com/d3-composite-projections/) for more examples. 55 | 56 | The constituent projections have fixed clip, center and rotation, and thus this projection does not support [*projection*.center](./projection.md#projection_center), [*projection*.rotate](./projection.md#projection_rotate), [*projection*.clipAngle](./projection.md#projection_clipAngle), or [*projection*.clipExtent](./projection.md#projection_clipExtent). 57 | -------------------------------------------------------------------------------- /docs/d3-array/transform.md: -------------------------------------------------------------------------------- 1 | # Transforming data 2 | 3 | Transform arrays and generate new arrays. 4 | 5 | ## cross(...*iterables*, *reducer*) {#cross} 6 | 7 | [Examples](https://observablehq.com/@d3/d3-cross) · [Source](https://github.com/d3/d3-array/blob/main/src/cross.js) · Returns the [Cartesian product](https://en.wikipedia.org/wiki/Cartesian_product) of the specified *iterables*. 8 | 9 | ```js 10 | d3.cross([1, 2], ["x", "y"]) // [[1, "x"], [1, "y"], [2, "x"], [2, "y"]] 11 | ``` 12 | 13 | If a *reducer* is specified, it is invoked for each combination of elements from each of the given *iterables*, and returns the corresponding reduced value. 14 | 15 | ```js 16 | d3.cross([1, 2], ["x", "y"], (a, b) => a + b) // ["1x", "1y", "2x", "2y"] 17 | ``` 18 | 19 | ## merge(*iterables*) {#merge} 20 | 21 | [Examples](https://observablehq.com/@d3/d3-merge) · [Source](https://github.com/d3/d3-array/blob/main/src/merge.js) · Merges the specified iterable of *iterables* into a new flat array. This method is similar to the built-in [*array*.concat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat) method, but is more convenient when you have an array of arrays or an iterable of iterables. 22 | 23 | ```js 24 | d3.merge([[1], [2, 3]]) // [1, 2, 3] 25 | ``` 26 | 27 | ```js 28 | d3.merge(new Set([new Set([1]), new Set([2, 3])])) // [1, 2, 3] 29 | ``` 30 | 31 | ## pairs(*iterable*, *reducer*) {#pairs} 32 | 33 | [Examples](https://observablehq.com/@d3/d3-pairs) · [Source](https://github.com/d3/d3-array/blob/main/src/pairs.js) · Returns an array of adjacent pairs of elements from the specified *iterable*, in order. If the specified iterable has fewer than two elements, returns the empty array. 34 | 35 | ```js 36 | d3.pairs([1, 2, 3, 4]) // [[1, 2], [2, 3], [3, 4]] 37 | ``` 38 | 39 | If a *reducer* function is specified, it is successively passed an element *i - 1* and element *i* from the *iterable*. 40 | 41 | ```js 42 | d3.pairs([1, 1, 2, 3, 5], (a, b) => b - a) // [0, 1, 1, 2] 43 | ``` 44 | 45 | ## transpose(*matrix*) {#transpose} 46 | 47 | [Examples](https://observablehq.com/@d3/d3-transpose) · [Source](https://github.com/d3/d3-array/blob/main/src/transpose.js) · Uses the [zip](#zip) operator as a two-dimensional [matrix transpose](http://en.wikipedia.org/wiki/Transpose). 48 | 49 | ```js 50 | d3.transpose([["Alice", "Bob", "Carol"], [32, 13, 14]]) // [["Alice", 32], ["Bob", 13], ["Carol", 14]] 51 | ``` 52 | ```js 53 | d3.transpose([["Alice", 32], ["Bob", 13], ["Carol", 14]]) // [["Alice", "Bob", "Carol"], [32, 13, 14]] 54 | ``` 55 | 56 | ## zip(...*arrays*) {#zip} 57 | 58 | [Examples](https://observablehq.com/@d3/d3-transpose) · [Source](https://github.com/d3/d3-array/blob/main/src/zip.js) · Returns an array of arrays, where the *i*th array contains the *i*th element from each of the argument *arrays*. The returned array is truncated in length to the shortest array in *arrays*. If *arrays* contains only a single array, the returned array contains one-element arrays. With no arguments, the returned array is empty. 59 | 60 | ```js 61 | d3.zip(["Alice", "Bob", "Carol"], [32, 13, 14]) // [["Alice", 32], ["Bob", 13], ["Carol", 14]] 62 | ``` 63 | 64 | ## filter(*iterable*, *test*) {#filter} 65 | 66 | [Source](https://github.com/d3/d3-array/blob/main/src/filter.js) · Returns a new array containing the values from *iterable*, in order, for which the given *test* function returns true. 67 | 68 | ```js 69 | d3.filter(new Set([0, 2, 3, 4]), (d) => d & 1) // [3] 70 | ``` 71 | 72 | Like [*array*.filter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), but works with any iterable. 73 | 74 | ## map(*iterable*, *mapper*) {#map} 75 | 76 | [Source](https://github.com/d3/d3-array/blob/main/src/map.js) · Returns a new array containing the mapped values from *iterable*, in order, as defined by given *mapper* function. 77 | 78 | ```js 79 | d3.map(new Set([0, 2, 3, 4]), (d) => d & 1) // [0, 0, 1, 0] 80 | ``` 81 | 82 | Like [*array*.map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map), but works with any iterable. 83 | 84 | ## reduce(*iterable*, *reducer*, *initialValue*) {#reduce} 85 | 86 | [Source](https://github.com/d3/d3-array/blob/main/src/reduce.js) · Returns the reduced value defined by given *reducer* function, which is repeatedly invoked for each value in *iterable*, being passed the current reduced value and the next value. 87 | 88 | ```js 89 | d3.reduce(new Set([0, 2, 3, 4]), (p, v) => p + v, 0) // 9 90 | ``` 91 | 92 | Like [*array*.reduce](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce), but works with any iterable. 93 | -------------------------------------------------------------------------------- /docs/d3-geo/math.md: -------------------------------------------------------------------------------- 1 | # Spherical math 2 | 3 | Low-level utilities for spherical geometry. 4 | 5 | ## geoArea(*object*) {#geoArea} 6 | 7 | [Source](https://github.com/d3/d3-geo/blob/main/src/area.js) · Returns the spherical area of the specified GeoJSON *object* in [steradians](https://en.wikipedia.org/wiki/Steradian). This is the spherical equivalent of [*path*.area](./path.md#path_area). 8 | 9 | ## geoBounds(*object*) {#geoBounds} 10 | 11 | [Source](https://github.com/d3/d3-geo/blob/main/src/bounds.js) · Returns the [spherical bounding box](https://www.jasondavies.com/maps/bounds/) for the specified GeoJSON *object*. The bounding box is represented by a two-dimensional array: \[\[*left*, *bottom*], \[*right*, *top*\]\], where *left* is the minimum longitude, *bottom* is the minimum latitude, *right* is maximum longitude, and *top* is the maximum latitude. All coordinates are given in degrees. (Note that in projected planar coordinates, the minimum latitude is typically the maximum *y*-value, and the maximum latitude is typically the minimum *y*-value.) This is the spherical equivalent of [*path*.bounds](./path.md#path_bounds). 12 | 13 | ## geoCentroid(*object*) {#geoCentroid} 14 | 15 | [Source](https://github.com/d3/d3-geo/blob/main/src/centroid.js) · Returns the spherical centroid of the specified GeoJSON *object*. This is the spherical equivalent of [*path*.centroid](./path.md#path_centroid). 16 | 17 | ## geoDistance(*a*, *b*) {#geoDistance} 18 | 19 | [Source](https://github.com/d3/d3-geo/blob/main/src/distance.js) · Returns the great-arc distance in [radians](http://mathworld.wolfram.com/Radian.html) between the two points *a* and *b*. Each point must be specified as a two-element array \[*longitude*, *latitude*\] in degrees. This is the spherical equivalent of [*path*.measure](./path.md#path_measure) given a LineString of two points. 20 | 21 | ## geoLength(*object*) {#geoLength} 22 | 23 | [Source](https://github.com/d3/d3-geo/blob/main/src/length.js) · Returns the great-arc length of the specified GeoJSON *object* in [radians](http://mathworld.wolfram.com/Radian.html). For polygons, returns the perimeter of the exterior ring plus that of any interior rings. This is the spherical equivalent of [*path*.measure](./path.md#path_measure). 24 | 25 | ## geoInterpolate(*a*, *b*) {#geoInterpolate} 26 | 27 | [Source](https://github.com/d3/d3-geo/blob/main/src/interpolate.js) · Returns an interpolator function given two points *a* and *b*. Each point must be specified as a two-element array \[*longitude*, *latitude*\] in degrees. The returned interpolator function takes a single argument *t*, where *t* is a number ranging from 0 to 1; a value of 0 returns the point *a*, while a value of 1 returns the point *b*. Intermediate values interpolate from *a* to *b* along the great arc that passes through both *a* and *b*. If *a* and *b* are antipodes, an arbitrary great arc is chosen. 28 | 29 | ## geoContains(*object*, *point*) {#geoContains} 30 | 31 | [Source](https://github.com/d3/d3-geo/blob/main/src/contains.js) · Returns true if and only if the specified GeoJSON *object* contains the specified *point*, or false if the *object* does not contain the *point*. The point must be specified as a two-element array \[*longitude*, *latitude*\] in degrees. For Point and MultiPoint geometries, an exact test is used; for a Sphere, true is always returned; for other geometries, an epsilon threshold is applied. 32 | 33 | ## geoRotation(*angles*) {#geoRotation} 34 | 35 | [Source](https://github.com/d3/d3-geo/blob/main/src/rotation.js) · Returns a [rotation function](#_rotation) for the given *angles*, which must be a two- or three-element array of numbers [*lambda*, *phi*, *gamma*] specifying the rotation angles in degrees about [each spherical axis](https://observablehq.com/@d3/three-axis-rotation). (These correspond to [yaw, pitch and roll](https://en.wikipedia.org/wiki/Aircraft_principal_axes).) If the rotation angle *gamma* is omitted, it defaults to 0. See also [*projection*.rotate](./projection.md#projection_rotate). 36 | 37 | ### *rotation*(*point*) {#_rotation} 38 | 39 | [Source](https://github.com/d3/d3-geo/blob/main/src/rotation.js) · Returns a new array \[*longitude*, *latitude*\] in degrees representing the rotated point of the given *point*. The point must be specified as a two-element array \[*longitude*, *latitude*\] in degrees. 40 | 41 | ### *rotation*.invert(*point*) {#rotation_invert} 42 | 43 | [Source](https://github.com/d3/d3-geo/blob/main/src/rotation.js) · Returns a new array \[*longitude*, *latitude*\] in degrees representing the point of the given rotated *point*; the inverse of [*rotation*](#_rotation). The point must be specified as a two-element array \[*longitude*, *latitude*\] in degrees. 44 | -------------------------------------------------------------------------------- /docs/d3-array/bisect.md: -------------------------------------------------------------------------------- 1 | # Bisecting data 2 | 3 | Bisection, or binary search, quickly finds a given value in a sorted array. It is often used to find the position at which to insert a new value into an array while maintaining sorted order. 4 | 5 | ## bisector(*accessor*) {#bisector} 6 | 7 | [Examples](https://observablehq.com/@d3/d3-bisect) · [Source](https://github.com/d3/d3-array/blob/main/src/bisector.js) · Returns a new bisector using the specified *accessor* function. 8 | 9 | ```js 10 | const bisector = d3.bisector((d) => d.Date); 11 | ``` 12 | 13 | If the given *accessor* takes two arguments, it is interpreted as a comparator function for comparing an element *d* in the data with a search value *x*. Use a comparator rather than an accessor if you want values to be sorted in an order different than natural order, such as in descending rather than ascending order. The above is equivalent to: 14 | 15 | ```js 16 | const bisector = d3.bisector((d, x) => d.Date - x); 17 | ``` 18 | 19 | The bisector can be used to bisect sorted arrays of objects (in contrast to [bisect](#bisect), which is for bisecting primitives). 20 | 21 | ## *bisector*.right(*array*, *x*, *lo*, *hi*) {#bisector_right} 22 | 23 | ```js 24 | d3.bisector((d) => d.Date).right(aapl, new Date("2014-01-02")) // 163 25 | ``` 26 | 27 | Like [bisectRight](#bisectRight), but using this bisector’s accessor. The code above finds the index of the row immediately following Jan. 2, 2014 in the [*aapl* sample dataset](https://observablehq.com/@observablehq/sample-datasets#aapl). 28 | 29 | ## *bisector*.left(*array*, *x*, *lo*, *hi*) {#bisector_left} 30 | 31 | ```js 32 | d3.bisector((d) => d.Date).left(aapl, new Date("2014-01-02")) // 162 33 | ``` 34 | 35 | Like [bisectLeft](#bisectLeft), but using this bisector’s accessor. The code above finds the index of the row for Jan. 2, 2014 in the [*aapl* sample dataset](https://observablehq.com/@observablehq/sample-datasets#aapl). 36 | 37 | ## *bisector*.center(*array*, *x*, *lo*, *hi*) {#bisector_center} 38 | 39 | ```js 40 | d3.bisector((d) => d.Date).center(aapl, new Date("2013-12-31")) // 161 41 | ``` 42 | 43 | Returns the index of the closest value to *x* in the given sorted *array*. This expects that the bisector’s accessor returns a quantitative value, or that the bisector’s comparator returns a signed distance; otherwise, this method is equivalent to [*bisector*.left](#bisector_left). The arguments *lo* (inclusive) and *hi* (exclusive) may be used to specify a subset of the array which should be considered; by default the entire array is used. 44 | 45 | ## bisect(*array*, *x*, *lo*, *hi*) {#bisect} 46 | 47 | ```js 48 | d3.bisect(aapl.map((d) => d.Date), new Date("2014-01-02")) // 163 49 | ``` 50 | 51 | Alias for [bisectRight](#bisectRight). 52 | 53 | ## bisectRight(*array*, *x*, *lo*, *hi*) {#bisectRight} 54 | 55 | ```js 56 | d3.bisectRight(aapl.map((d) => d.Date), new Date("2014-01-02")) // 163 57 | ``` 58 | 59 | Like [bisectLeft](#bisectLeft), but returns an insertion point which comes after (to the right of) any existing entries equivalent to *x* in *array*. The returned insertion point *i* partitions the *array* into two halves so that all *v* <= *x* for *v* in *array*.slice(*lo*, *i*) for the left side and all *v* > *x* for *v* in *array*.slice(*i*, *hi*) for the right side. See also [*bisector*.right](#bisector_right). 60 | 61 | ## bisectLeft(*array*, *x*, *lo*, *hi*) {#bisectLeft} 62 | 63 | ```js 64 | d3.bisectLeft(aapl.map((d) => d.Date), new Date("2014-01-02")) // 162 65 | ``` 66 | 67 | Returns the insertion point for *x* in *array* to maintain sorted order. The arguments *lo* and *hi* may be used to specify a subset of the array which should be considered; by default the entire array is used. If *x* is already present in *array*, the insertion point will be before (to the left of) any existing entries. The return value is suitable for use as the first argument to [*array*.splice](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) assuming that *array* is already sorted. The returned insertion point *i* partitions the *array* into two halves so that all *v* < *x* for *v* in *array*.slice(*lo*, *i*) for the left side and all *v* >= *x* for *v* in *array*.slice(*i*, *hi*) for the right side. See also [*bisector*.left](#bisector_left). 68 | 69 | ## bisectCenter(*array*, *x*, *lo*, *hi*) {#bisectCenter} 70 | 71 | ```js 72 | d3.bisectCenter(aapl.map((d) => d.Date), new Date("2013-12-31")) // 161 73 | ``` 74 | 75 | Returns the index of the value closest to *x* in the given *array* of numbers. The arguments *lo* (inclusive) and *hi* (exclusive) may be used to specify a subset of the array which should be considered; by default the entire array is used. See also [*bisector*.center](#bisector_center). 76 | -------------------------------------------------------------------------------- /docs/d3-hierarchy/pack.md: -------------------------------------------------------------------------------- 1 | # Pack {#Pack} 2 | 3 | [Circle-Packing](https://observablehq.com/@d3/circle-packing) 4 | 5 | [Examples](https://observablehq.com/@d3/circle-packing) · Enclosure diagrams use containment (nesting) to represent a hierarchy. The size of the leaf circles encodes a quantitative dimension of the data. The enclosing circles show the approximate cumulative size of each subtree, but due to wasted space there is some distortion; only the leaf nodes can be compared accurately. Although [circle packing](http://en.wikipedia.org/wiki/Circle_packing) does not use space as efficiently as a [treemap](./treemap.md), the “wasted” space more prominently reveals the hierarchical structure. 6 | 7 | ## pack() {#pack} 8 | 9 | [Source](https://github.com/d3/d3-hierarchy/blob/main/src/pack/index.js) · Creates a new pack layout with the default settings. 10 | 11 | ### *pack*(*root*) {#_pack} 12 | 13 | [Source](https://github.com/d3/d3-hierarchy/blob/main/src/pack/index.js) · Lays out the specified *root* [hierarchy](./hierarchy.md), assigning the following properties on *root* and its descendants: 14 | 15 | * *node*.x - the *x*-coordinate of the circle’s center 16 | * *node*.y - the y coordinate of the circle’s center 17 | * *node*.r - the radius of the circle 18 | 19 | You must call [*root*.sum](./hierarchy.md#node_sum) before passing the hierarchy to the pack layout. You probably also want to call [*root*.sort](./hierarchy.md#node_sort) to order the hierarchy before computing the layout. 20 | 21 | ## *pack*.radius(*radius*) {#pack_radius} 22 | 23 | [Source](https://github.com/d3/d3-hierarchy/blob/main/src/pack/index.js) · If *radius* is specified, sets the pack layout’s radius accessor to the specified function and returns this pack layout. If *radius* is not specified, returns the current radius accessor, which defaults to null. If the radius accessor is null, the radius of each leaf circle is derived from the leaf *node*.value (computed by [*node*.sum](./hierarchy.md#node_sum)); the radii are then scaled proportionally to fit the [layout size](#pack_size). If the radius accessor is not null, the radius of each leaf circle is specified exactly by the function. 24 | 25 | ## *pack*.size(*size*) {#pack_size} 26 | 27 | [Source](https://github.com/d3/d3-hierarchy/blob/main/src/pack/index.js) · If *size* is specified, sets this pack layout’s size to the specified two-element array of numbers [*width*, *height*] and returns this pack layout. If *size* is not specified, returns the current size, which defaults to [1, 1]. 28 | 29 | ## *pack*.padding(*padding*) {#pack_padding} 30 | 31 | [Source](https://github.com/d3/d3-hierarchy/blob/main/src/pack/index.js) · If *padding* is specified, sets this pack layout’s padding accessor to the specified number or function and returns this pack layout. If *padding* is not specified, returns the current padding accessor, which defaults to the constant zero. When siblings are packed, tangent siblings will be separated by approximately the specified padding; the enclosing parent circle will also be separated from its children by approximately the specified padding. If an [explicit radius](#pack_radius) is not specified, the padding is approximate because a two-pass algorithm is needed to fit within the [layout size](#pack_size): the circles are first packed without padding; a scaling factor is computed and applied to the specified padding; and lastly the circles are re-packed with padding. 32 | 33 | ## packSiblings(*circles*) {#packSiblings} 34 | 35 | [Source](https://github.com/d3/d3-hierarchy/blob/main/src/pack/siblings.js) · Packs the specified array of *circles*, each of which must have a *circle*.r property specifying the circle’s radius. Assigns the following properties to each circle: 36 | 37 | * *circle*.x - the *x*-coordinate of the circle’s center 38 | * *circle*.y - the y coordinate of the circle’s center 39 | 40 | The circles are positioned according to the front-chain packing algorithm by [Wang *et al.*](https://dl.acm.org/citation.cfm?id=1124851) 41 | 42 | ## packEnclose(*circles*) {#packEnclose} 43 | 44 | [Examples](https://observablehq.com/@d3/d3-packenclose) · [Source](https://github.com/d3/d3-hierarchy/blob/main/src/pack/enclose.js) · Computes the [smallest circle](https://en.wikipedia.org/wiki/Smallest-circle_problem) that encloses the specified array of *circles*, each of which must have a *circle*.r property specifying the circle’s radius, and *circle*.x and *circle*.y properties specifying the circle’s center. The enclosing circle is computed using the [Matoušek-Sharir-Welzl algorithm](http://www.inf.ethz.ch/personal/emo/PublFiles/SubexLinProg_ALG16_96.pdf). (See also [Apollonius’ Problem](https://observablehq.com/@d3/apollonius-problem).) 45 | -------------------------------------------------------------------------------- /docs/d3-scale/threshold.md: -------------------------------------------------------------------------------- 1 | # Threshold scales 2 | 3 | Threshold scales are similar to [quantize scales](./quantize.md), except they allow you to map arbitrary subsets of the domain to discrete values in the range. The input domain is still continuous, and divided into slices based on a set of threshold values. See [this choropleth](https://observablehq.com/@d3/threshold-choropleth) for an example. 4 | 5 | ## scaleThreshold(*domain*, *range*) {#scaleThreshold} 6 | 7 | [Examples](https://observablehq.com/@d3/quantile-quantize-and-threshold-scales) · [Source](https://github.com/d3/d3-scale/blob/main/src/threshold.js) · Constructs a new threshold scale with the specified [*domain*](#threshold_domain) and [*range*](#threshold_range). 8 | 9 | ```js 10 | const color = d3.scaleThreshold([0, 1], ["red", "white", "blue"]); 11 | ``` 12 | 13 | If *domain* is not specified, it defaults to [0.5]. 14 | 15 | ```js 16 | const color = d3.scaleThreshold(["red", "blue"]); 17 | color(0); // "red" 18 | color(1); // "blue" 19 | ``` 20 | 21 | If *range* is not specified, it defaults to [0, 1]. 22 | 23 | ## *threshold*(*value*) {#_threshold} 24 | 25 | [Examples](https://observablehq.com/@d3/quantile-quantize-and-threshold-scales) · [Source](https://github.com/d3/d3-scale/blob/main/src/threshold.js) · Given a *value* in the input [domain](#threshold_domain), returns the corresponding value in the output [range](#threshold_range). For example: 26 | 27 | ```js 28 | const color = d3.scaleThreshold([0, 1], ["red", "white", "green"]); 29 | color(-1); // "red" 30 | color(0); // "white" 31 | color(0.5); // "white" 32 | color(1); // "green" 33 | color(1000); // "green" 34 | ``` 35 | 36 | ## *threshold*.invertExtent(*value*) {#threshold_invertExtent} 37 | 38 | [Source](https://github.com/d3/d3-scale/blob/main/src/threshold.js) · Returns the extent of values in the [domain](#threshold_domain) [x0, x1] for the corresponding *value* in the [range](#threshold_range), representing the inverse mapping from range to domain. 39 | 40 | ```js 41 | const color = d3.scaleThreshold([0, 1], ["red", "white", "green"]); 42 | color.invertExtent("red"); // [undefined, 0] 43 | color.invertExtent("white"); // [0, 1] 44 | color.invertExtent("green"); // [1, undefined] 45 | ``` 46 | 47 | This method is useful for interaction, say to determine the value in the domain that corresponds to the pixel location under the mouse. The extent below the lowest threshold is undefined (unbounded), as is the extent above the highest threshold. 48 | 49 | ## *threshold*.domain(*domain*) {#threshold_domain} 50 | 51 | [Examples](https://observablehq.com/@d3/quantile-quantize-and-threshold-scales) · [Source](https://github.com/d3/d3-scale/blob/main/src/threshold.js) · If *domain* is specified, sets the scale’s domain to the specified array of values. 52 | 53 | ```js 54 | const color = d3.scaleThreshold(["red", "white", "green"]).domain([0, 1]); 55 | ``` 56 | 57 | The values must be in ascending order or the behavior of the scale is undefined. The values are typically numbers, but any naturally ordered values (such as strings) will work; a threshold scale can be used to encode any type that is ordered. If the number of values in the scale’s range is *n* + 1, the number of values in the scale’s domain must be *n*. If there are fewer than *n* elements in the domain, the additional values in the range are ignored. If there are more than *n* elements in the domain, the scale may return undefined for some inputs. 58 | 59 | If *domain* is not specified, returns the scale’s current domain. 60 | 61 | ```js 62 | color.domain() // [0, 1] 63 | ``` 64 | 65 | ## *threshold*.range(*range*) {#threshold_range} 66 | 67 | [Examples](https://observablehq.com/@d3/quantile-quantize-and-threshold-scales) · [Source](https://github.com/d3/d3-scale/blob/main/src/threshold.js) · If *range* is specified, sets the scale’s range to the specified array of values. 68 | 69 | ```js 70 | const color = d3.scaleThreshold().range(["red", "white", "green"]); 71 | ``` 72 | 73 | If the number of values in the scale’s domain is *n*, the number of values in the scale’s range must be *n* + 1. If there are fewer than *n* + 1 elements in the range, the scale may return undefined for some inputs. If there are more than *n* + 1 elements in the range, the additional values are ignored. The elements in the given array need not be numbers; any value or type will work. 74 | 75 | If *range* is not specified, returns the scale’s current range. 76 | 77 | ```js 78 | color.range() // ["red", "white", "green"] 79 | ``` 80 | 81 | ## *threshold*.copy() {#threshold_copy} 82 | 83 | [Examples](https://observablehq.com/@d3/quantile-quantize-and-threshold-scales) · [Source](https://github.com/d3/d3-scale/blob/main/src/threshold.js) · Returns an exact copy of this scale. 84 | 85 | ```js 86 | const c1 = d3.scaleThreshold(d3.schemeBlues[5]); 87 | const c2 = c1.copy(); 88 | ``` 89 | 90 | Changes to this scale will not affect the returned scale, and vice versa. 91 | -------------------------------------------------------------------------------- /docs/d3-chord/chord.md: -------------------------------------------------------------------------------- 1 | # Chords 2 | 3 | The chord layout computes angles to generate a [chord diagram](../d3-chord.md). 4 | 5 | ## chord() {#chord} 6 | 7 | [Source](https://github.com/d3/d3-chord/blob/main/src/chord.js) · Constructs a new chord layout with the default settings. 8 | 9 | ```js 10 | const chord = d3.chord(); 11 | ``` 12 | 13 | ## *chord*(*matrix*) {#_chord} 14 | 15 | [Source](https://github.com/d3/d3-chord/blob/main/src/chord.js) · Computes the chord layout for the specified square *matrix* of size *n*×*n*, where the *matrix* represents the directed flow amongst a network (a complete digraph) of *n* nodes. 16 | 17 | The return value of *chord*(*matrix*) is an array of *chords*, where each chord represents the combined bidirectional flow between two nodes *i* and *j* (where *i* may be equal to *j*) and is an object with the following properties: 18 | 19 | * `source` - the source subgroup 20 | * `target` - the target subgroup 21 | 22 | Each source and target subgroup is also an object with the following properties: 23 | 24 | * `startAngle` - the start angle in radians 25 | * `endAngle` - the end angle in radians 26 | * `value` - the flow value *matrix*[*i*][*j*] 27 | * `index` - the node index *i* 28 | 29 | The chords are typically passed to [ribbon](./ribbon.md) to display the network relationships. 30 | 31 | The returned array includes only chord objects for which the value *matrix*[*i*][*j*] or *matrix*[*j*][*i*] is non-zero. Furthermore, the returned array only contains unique chords: a given chord *ij* represents the bidirectional flow from *i* to *j* *and* from *j* to *i*, and does not contain a duplicate chord *ji*; *i* and *j* are chosen such that the chord’s source always represents the larger of *matrix*[*i*][*j*] and *matrix*[*j*][*i*]. 32 | 33 | The *chords* array also defines a secondary array of length *n*, *chords*.groups, where each group represents the combined outflow for node *i*, corresponding to the elements *matrix*[*i*][0 … *n* - 1], and is an object with the following properties: 34 | 35 | * `startAngle` - the start angle in radians 36 | * `endAngle` - the end angle in radians 37 | * `value` - the total outgoing flow value for node *i* 38 | * `index` - the node index *i* 39 | 40 | The groups are typically passed to [arc](../d3-shape/arc.md) to produce a donut chart around the circumference of the chord layout. 41 | 42 | ## *chord*.padAngle(*angle*) {#chord_padAngle} 43 | 44 | [Source](https://github.com/d3/d3-chord/blob/main/src/chord.js) · If *angle* is specified, sets the pad angle between adjacent groups to the specified number in radians and returns this chord layout. If *angle* is not specified, returns the current pad angle, which defaults to zero. 45 | 46 | ## *chord*.sortGroups(*compare*) {#chord_sortGroups} 47 | 48 | [Source](https://github.com/d3/d3-chord/blob/main/src/chord.js) · If *compare* is specified, sets the group comparator to the specified function or null and returns this chord layout. If *compare* is not specified, returns the current group comparator, which defaults to null. If the group comparator is non-null, it is used to sort the groups by their total outflow. See also [ascending](../d3-array/sort.md#ascending) and [descending](../d3-array/sort.md#descending). 49 | 50 | ## *chord*.sortSubgroups(*compare*) {#chord_sortSubgroups} 51 | 52 | [Source](https://github.com/d3/d3-chord/blob/main/src/chord.js) · If *compare* is specified, sets the subgroup comparator to the specified function or null and returns this chord layout. If *compare* is not specified, returns the current subgroup comparator, which defaults to null. If the subgroup comparator is non-null, it is used to sort the subgroups corresponding to *matrix*[*i*][0 … *n* - 1] for a given group *i* by their total outflow. See also [ascending](../d3-array/sort.md#ascending) and [descending](../d3-array/sort.md#descending). 53 | 54 | ## *chord*.sortChords(*compare*) {#chord_sortChords} 55 | 56 | [Source](https://github.com/d3/d3-chord/blob/main/src/chord.js) · If *compare* is specified, sets the chord comparator to the specified function or null and returns this chord layout. If *compare* is not specified, returns the current chord comparator, which defaults to null. If the chord comparator is non-null, it is used to sort the [chords](#_chord) by their combined flow; this only affects the *z*-order of the chords. See also [ascending](../d3-array/sort.md#ascending) and [descending](../d3-array/sort.md#descending). 57 | 58 | ## chordDirected() {#chordDirected} 59 | 60 | [Examples](https://observablehq.com/@d3/directed-chord-diagram) · [Source](https://github.com/d3/d3-chord/blob/main/src/chord.js) · A chord layout for unidirectional flows. The chord from *i* to *j* is generated from the value in *matrix*[*i*][*j*] only. 61 | 62 | ## chordTranspose() {#chordTranspose} 63 | 64 | [Source](https://github.com/d3/d3-chord/blob/main/src/chord.js) · A transposed chord layout. Useful to highlight outgoing (rather than incoming) flows. 65 | -------------------------------------------------------------------------------- /docs/d3-array/ticks.md: -------------------------------------------------------------------------------- 1 | # Ticks {#Ticks} 2 | 3 | Generate representative values from a continuous interval. 4 | 5 | ## ticks(*start*, *stop*, *count*) {#ticks} 6 | 7 | [Examples](https://observablehq.com/@d3/d3-ticks) · [Source](https://github.com/d3/d3-array/blob/main/src/ticks.js) · Returns an array of approximately *count* + 1 uniformly-spaced, nicely-rounded values between *start* and *stop* (inclusive). Each value is a power of ten multiplied by 1, 2 or 5. 8 | 9 | ```js 10 | d3.ticks(1, 9, 5) // [2, 4, 6, 8] 11 | ``` 12 | ```js 13 | d3.ticks(1, 9, 20) // [1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9] 14 | ``` 15 | 16 | Ticks are inclusive in the sense that they may include the specified *start* and *stop* values if (and only if) they are exact, nicely-rounded values consistent with the inferred [step](#tickStep). More formally, each returned tick *t* satisfies *start* ≤ *t* and *t* ≤ *stop*. 17 | 18 | ## tickIncrement(*start*, *stop*, *count*) {#tickIncrement} 19 | 20 | [Source](https://github.com/d3/d3-array/blob/main/src/ticks.js) · Like [d3.tickStep](#tickStep), except requires that *start* is always less than or equal to *stop*, and if the tick step for the given *start*, *stop* and *count* would be less than one, returns the negative inverse tick step instead. 21 | 22 | ```js 23 | d3.tickIncrement(1, 9, 5) // 2 24 | ``` 25 | ```js 26 | d3.tickIncrement(1, 9, 20) // -2, meaning a tick step 0.5 27 | ``` 28 | 29 | This method is always guaranteed to return an integer, and is used by [d3.ticks](#ticks) to guarantee that the returned tick values are represented as precisely as possible in IEEE 754 floating point. 30 | 31 | ## tickStep(*start*, *stop*, *count*) {#tickStep} 32 | 33 | [Source](https://github.com/d3/d3-array/blob/main/src/ticks.js) · Returns the difference between adjacent tick values if the same arguments were passed to [d3.ticks](#ticks): a nicely-rounded value that is a power of ten multiplied by 1, 2 or 5. 34 | 35 | ```js 36 | d3.tickStep(1, 9, 5) // 2 37 | ``` 38 | 39 | If *stop* is less than *start*, may return a negative tick step to indicate descending ticks. 40 | 41 | ```js 42 | d3.tickStep(9, 1, 5) // -2 43 | ``` 44 | 45 | Note that due to the limited precision of IEEE 754 floating point, the returned value may not be exact decimals; use [d3-format](../d3-format.md) to format numbers for human consumption. 46 | 47 | ## nice(*start*, *stop*, *count*) {#nice} 48 | 49 | [Source](https://github.com/d3/d3-array/blob/main/src/nice.js) · Returns a new interval [*niceStart*, *niceStop*] covering the given interval [*start*, *stop*] and where *niceStart* and *niceStop* are guaranteed to align with the corresponding [tick step](#tickStep). 50 | 51 | ```js 52 | d3.nice(1, 9, 5) // [0, 10] 53 | ``` 54 | 55 | Like [d3.tickIncrement](#tickIncrement), this requires that *start* is less than or equal to *stop*. 56 | 57 | ## range(*start*, *stop*, *step*) {#range} 58 | 59 | [Examples](https://observablehq.com/@d3/d3-range) · [Source](https://github.com/d3/d3-array/blob/main/src/range.js) · Returns an array containing an arithmetic progression, similar to the Python built-in [range](http://docs.python.org/library/functions.html#range). This method is often used to iterate over a sequence of uniformly-spaced numeric values, such as the indexes of an array or the ticks of a linear scale. (See also [d3.ticks](#ticks) for nicely-rounded values.) 60 | 61 | ```js 62 | d3.range(6) // [0, 1, 2, 3, 4, 5] 63 | ``` 64 | 65 | If *step* is omitted, it defaults to 1. If *start* is omitted, it defaults to 0. The *stop* value is exclusive; it is not included in the result. If *step* is positive, the last element is the largest *start* + *i* \* *step* less than *stop*; if *step* is negative, the last element is the smallest *start* + *i* \* *step* greater than *stop*. 66 | 67 | ```js 68 | d3.range(5, -1, -1) // [5, 4, 3, 2, 1, 0] 69 | ``` 70 | 71 | If the returned array would contain an infinite number of values, an empty range is returned. 72 | 73 | ```js 74 | d3.range(Infinity) // [] 75 | ``` 76 | 77 | The arguments are not required to be integers; however, the results are more predictable if they are. The values in the returned array are defined as *start* + *i* \* *step*, where *i* is an integer from zero to one minus the total number of elements in the returned array. 78 | 79 | ```js 80 | d3.range(0, 1, 0.2) // [0, 0.2, 0.4, 0.6000000000000001, 0.8] 81 | ``` 82 | 83 | This behavior is due to IEEE 754 double-precision floating point, which defines 0.2 * 3 = 0.6000000000000001. Use [d3-format](../d3-format.md) to format numbers for human consumption with appropriate rounding; see also [*linear*.tickFormat](../d3-scale/linear.md#linear_tickFormat) in [d3-scale](../d3-scale.md). Likewise, if the returned array should have a specific length, consider using [*array*.map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map) on an integer range. 84 | 85 | ```js 86 | d3.range(0, 1, 1 / 49) // 👎 returns 50 elements! 87 | ``` 88 | ```js 89 | d3.range(49).map((d) => d / 49) // 👍 returns 49 elements 90 | ``` 91 | -------------------------------------------------------------------------------- /docs/d3-scale/quantize.md: -------------------------------------------------------------------------------- 1 | # Quantize scales 2 | 3 | Quantize scales are similar to [linear scales](./linear.md), except they use a discrete rather than continuous range. The continuous input domain is divided into uniform segments based on the number of values in (*i.e.*, the cardinality of) the output range. Each range value *y* can be expressed as a quantized linear function of the domain value *x*: *y* = *m round(x)* + *b*. See [the quantized choropleth](https://observablehq.com/@d3/choropleth/2?intent=fork) for an example. 4 | 5 | ## scaleQuantize(*domain*, *range*) {#scaleQuantize} 6 | 7 | [Examples](https://observablehq.com/@d3/quantile-quantize-and-threshold-scales) · [Source](https://github.com/d3/d3-scale/blob/main/src/quantize.js) · Constructs a new quantize scale with the specified [*domain*](#quantize_domain) and [*range*](#quantize_range). 8 | 9 | ```js 10 | const color = d3.scaleQuantize([0, 100], d3.schemeBlues[9]); 11 | ``` 12 | 13 | If either *domain* or *range* is not specified, each defaults to [0, 1]. 14 | 15 | ```js 16 | const color = d3.scaleQuantize(d3.schemeBlues[9]); 17 | ``` 18 | 19 | ## *quantize*(*value*) {#_quantize} 20 | 21 | [Examples](https://observablehq.com/@d3/quantile-quantize-and-threshold-scales) · [Source](https://github.com/d3/d3-scale/blob/main/src/quantize.js) · Given a *value* in the input [domain](#quantize_domain), returns the corresponding value in the output [range](#quantize_range). For example, to apply a color encoding: 22 | 23 | ```js 24 | const color = d3.scaleQuantize([0, 1], ["brown", "steelblue"]); 25 | color(0.49); // "brown" 26 | color(0.51); // "steelblue" 27 | ``` 28 | 29 | Or dividing the domain into three equally-sized parts with different range values to compute an appropriate stroke width: 30 | 31 | ```js 32 | const width = d3.scaleQuantize([10, 100], [1, 2, 4]); 33 | width(20); // 1 34 | width(50); // 2 35 | width(80); // 4 36 | ``` 37 | 38 | ## *quantize*.invertExtent(*value*) {#quantize_invertExtent} 39 | 40 | [Examples](https://observablehq.com/@d3/quantile-quantize-and-threshold-scales) · [Source](https://github.com/d3/d3-scale/blob/main/src/quantize.js) · Returns the extent of values in the [domain](#quantize_domain) [x0, x1] for the corresponding *value* in the [range](#quantize_range): the inverse of [*quantize*](#_quantize). This method is useful for interaction, say to determine the value in the domain that corresponds to the pixel location under the mouse. 41 | 42 | ```js 43 | const width = d3.scaleQuantize([10, 100], [1, 2, 4]); 44 | width.invertExtent(2); // [40, 70] 45 | ``` 46 | 47 | ## *quantize*.domain(*domain*) {#quantize_domain} 48 | 49 | [Examples](https://observablehq.com/@d3/quantile-quantize-and-threshold-scales) · [Source](https://github.com/d3/d3-scale/blob/main/src/quantize.js) · If *domain* is specified, sets the scale’s domain to the specified two-element array of numbers. 50 | 51 | ```js 52 | const color = d3.scaleQuantize(d3.schemeBlues[9]); 53 | color.domain([0, 100]); 54 | ``` 55 | 56 | If the elements in the given array are not numbers, they will be coerced to numbers. The numbers must be in ascending order or the behavior of the scale is undefined. 57 | 58 | If *domain* is not specified, returns the scale’s current domain. 59 | 60 | ```js 61 | color.domain() // [0, 100] 62 | ``` 63 | 64 | ## *quantize*.range(*range*) {#quantize_range} 65 | 66 | [Examples](https://observablehq.com/@d3/quantile-quantize-and-threshold-scales) · [Source](https://github.com/d3/d3-scale/blob/main/src/quantize.js) · If *range* is specified, sets the scale’s range to the specified array of values. 67 | 68 | ```js 69 | const color = d3.scaleQuantize(); 70 | color.range(d3.schemeBlues[5]); 71 | ``` 72 | 73 | The array may contain any number of discrete values. The elements in the given array need not be numbers; any value or type will work. 74 | 75 | If *range* is not specified, returns the scale’s current range. 76 | 77 | ```js 78 | color.range() // ["#eff3ff", "#bdd7e7", "#6baed6", "#3182bd", "#08519c"] 79 | ``` 80 | 81 | ## *quantize*.thresholds() {#quantize_thresholds} 82 | 83 | [Examples](https://observablehq.com/@d3/quantile-quantize-and-threshold-scales) · [Source](https://github.com/d3/d3-scale/blob/main/src/quantize.js) · Returns the array of computed thresholds within the [domain](#quantize_domain). 84 | 85 | ```js 86 | color.thresholds() // [0.2, 0.4, 0.6, 0.8] 87 | ``` 88 | 89 | The number of returned thresholds is one less than the length of the [range](#quantize_range): values less than the first threshold are assigned the first element in the range, whereas values greater than or equal to the last threshold are assigned the last element in the range. 90 | 91 | ## *quantize*.copy() {#quantize_copy} 92 | 93 | [Examples](https://observablehq.com/@d3/quantile-quantize-and-threshold-scales) · [Source](https://github.com/d3/d3-scale/blob/main/src/quantize.js) · Returns an exact copy of this scale. 94 | 95 | ```js 96 | const c1 = d3.scaleQuantize(d3.schemeBlues[5]); 97 | const c2 = c1.copy(); 98 | ``` 99 | 100 | Changes to this scale will not affect the returned scale, and vice versa. 101 | -------------------------------------------------------------------------------- /docs/d3-hierarchy/stratify.md: -------------------------------------------------------------------------------- 1 | # Stratify {#Stratify} 2 | 3 | [Examples](https://observablehq.com/@d3/d3-stratify) · Consider the following table of relationships: 4 | 5 | Name | Parent 6 | ------|-------- 7 | Eve | 8 | Cain | Eve 9 | Seth | Eve 10 | Enos | Seth 11 | Noam | Seth 12 | Abel | Eve 13 | Awan | Eve 14 | Enoch | Awan 15 | Azura | Eve 16 | 17 | These names are conveniently unique, so we can unambiguously represent the hierarchy as a CSV file: 18 | 19 | ``` 20 | name,parent 21 | Eve, 22 | Cain,Eve 23 | Seth,Eve 24 | Enos,Seth 25 | Noam,Seth 26 | Abel,Eve 27 | Awan,Eve 28 | Enoch,Awan 29 | Azura,Eve 30 | ``` 31 | 32 | To parse the CSV using [csvParse](../d3-dsv.md#csvParse): 33 | 34 | ```js 35 | const table = d3.csvParse(text); 36 | ``` 37 | 38 | This returns an array of {*name*, *parent*} objects: 39 | 40 | ```json 41 | [ 42 | {"name": "Eve", "parent": ""}, 43 | {"name": "Cain", "parent": "Eve"}, 44 | {"name": "Seth", "parent": "Eve"}, 45 | {"name": "Enos", "parent": "Seth"}, 46 | {"name": "Noam", "parent": "Seth"}, 47 | {"name": "Abel", "parent": "Eve"}, 48 | {"name": "Awan", "parent": "Eve"}, 49 | {"name": "Enoch", "parent": "Awan"}, 50 | {"name": "Azura", "parent": "Eve"} 51 | ] 52 | ``` 53 | 54 | To convert to a [hierarchy](./hierarchy.md): 55 | 56 | ```js 57 | const root = d3.stratify() 58 | .id((d) => d.name) 59 | .parentId((d) => d.parent) 60 | (table); 61 | ``` 62 | 63 | This hierarchy can now be passed to a hierarchical layout, such as [tree](./tree.md), for visualization. 64 | 65 | The stratify operator also works with [delimited paths](#stratify_path) as is common in file systems. 66 | 67 | ## stratify() {#stratify} 68 | 69 | [Source](https://github.com/d3/d3-hierarchy/blob/main/src/stratify.js) · Constructs a new stratify operator with the default settings. 70 | 71 | ```js 72 | const stratify = d3.stratify(); 73 | ``` 74 | 75 | ## *stratify*(*data*) {#_stratify} 76 | 77 | [Source](https://github.com/d3/d3-hierarchy/blob/main/src/stratify.js) · Generates a new hierarchy from the specified tabular *data*. 78 | 79 | ```js 80 | const root = stratify(data); 81 | ``` 82 | 83 | ## *stratify*.id(*id*) {#stratify_id} 84 | 85 | [Source](https://github.com/d3/d3-hierarchy/blob/main/src/stratify.js) · If *id* is specified, sets the id accessor to the given function and returns this stratify operator. Otherwise, returns the current id accessor, which defaults to: 86 | 87 | ```js 88 | function id(d) { 89 | return d.id; 90 | } 91 | ``` 92 | 93 | The id accessor is invoked for each element in the input data passed to the [stratify operator](#_stratify), being passed the current datum (*d*) and the current index (*i*). The returned string is then used to identify the node’s relationships in conjunction with the [parent id](#stratify_parentId). For leaf nodes, the id may be undefined; otherwise, the id must be unique. (Null and the empty string are equivalent to undefined.) 94 | 95 | ## *stratify*.parentId(*parentId*) {#stratify_parentId} 96 | 97 | [Source](https://github.com/d3/d3-hierarchy/blob/main/src/stratify.js) · If *parentId* is specified, sets the parent id accessor to the given function and returns this stratify operator. Otherwise, returns the current parent id accessor, which defaults to: 98 | 99 | ```js 100 | function parentId(d) { 101 | return d.parentId; 102 | } 103 | ``` 104 | 105 | The parent id accessor is invoked for each element in the input data passed to the [stratify operator](#_stratify), being passed the current datum (*d*) and the current index (*i*). The returned string is then used to identify the node’s relationships in conjunction with the [id](#stratify_id). For the root node, the parent id should be undefined. (Null and the empty string are equivalent to undefined.) There must be exactly one root node in the input data, and no circular relationships. 106 | 107 | ## *stratify*.path(*path*) {#stratify_path} 108 | 109 | [Source](https://github.com/d3/d3-hierarchy/blob/main/src/stratify.js) · If *path* is specified, sets the path accessor to the given function and returns this stratify operator. Otherwise, returns the current path accessor, which defaults to undefined. 110 | 111 | If a path accessor is set, the [id](#stratify_id) and [parentId](#stratify_parentId) accessors are ignored, and a unix-like hierarchy is computed on the slash-delimited strings returned by the path accessor, imputing parent nodes and ids as necessary. 112 | 113 | For example, given the output of the UNIX find command in the local directory: 114 | 115 | ```js 116 | const paths = [ 117 | "axes.js", 118 | "channel.js", 119 | "context.js", 120 | "legends.js", 121 | "legends/ramp.js", 122 | "marks/density.js", 123 | "marks/dot.js", 124 | "marks/frame.js", 125 | "scales/diverging.js", 126 | "scales/index.js", 127 | "scales/ordinal.js", 128 | "stats.js", 129 | "style.js", 130 | "transforms/basic.js", 131 | "transforms/bin.js", 132 | "transforms/centroid.js", 133 | "warnings.js", 134 | ]; 135 | ``` 136 | 137 | You can say: 138 | 139 | ```js 140 | const root = d3.stratify().path((d) => d)(paths); 141 | ``` 142 | -------------------------------------------------------------------------------- /docs/d3-scale/log.md: -------------------------------------------------------------------------------- 1 | # Logarithmic scales 2 | 3 | Logarithmic (“log”) scales are like [linear scales](./linear.md) except that a logarithmic transform is applied to the input domain value before the output range value is computed. The mapping to the range value *y* can be expressed as a function of the domain value *x*: *y* = *m* log(x) + *b*. 4 | 5 | :::warning CAUTION 6 | As log(0) = -∞, a log scale domain must be **strictly-positive or strictly-negative**; the domain must not include or cross zero. A log scale with a positive domain has a well-defined behavior for positive values, and a log scale with a negative domain has a well-defined behavior for negative values. (For a negative domain, input and output values are implicitly multiplied by -1.) The behavior of the scale is undefined if you pass a negative value to a log scale with a positive domain or vice versa. 7 | ::: 8 | 9 | ## scaleLog(*domain*, *range*) {#scaleLog} 10 | 11 | [Examples](https://observablehq.com/@d3/continuous-scales) · [Source](https://github.com/d3/d3-scale/blob/main/src/log.js) · Constructs a new log scale with the specified [domain](./linear.md#linear_domain) and [range](./linear.md#linear_range), the [base](#log_base) 10, the [default](../d3-interpolate/value.md#interpolate) [interpolator](./linear.md#linear_interpolate) and [clamping](./linear.md#linear_clamp) disabled. 12 | 13 | ```js 14 | const x = d3.scaleLog([1, 10], [0, 960]); 15 | ``` 16 | 17 | If *domain* is not specified, it defaults to [1, 10]. If *range* is not specified, it defaults to [0, 1]. 18 | 19 | ## *log*.base(*base*) {#log_base} 20 | 21 | [Examples](https://observablehq.com/@d3/continuous-scales) · [Source](https://github.com/d3/d3-scale/blob/main/src/log.js) · If *base* is specified, sets the base for this logarithmic scale to the specified value. 22 | 23 | ```js 24 | const x = d3.scaleLog([1, 1024], [0, 960]).base(2); 25 | ``` 26 | 27 | If *base* is not specified, returns the current base, which defaults to 10. Note that due to the nature of a logarithmic transform, the base does not affect the encoding of the scale; it only affects which [ticks](#log_ticks) are chosen. 28 | 29 | ## *log*.ticks(*count*) {#log_ticks} 30 | 31 | [Examples](https://observablehq.com/@d3/scale-ticks) · [Source](https://github.com/d3/d3-scale/blob/main/src/log.js) · Like [*linear*.ticks](./linear.md#linear_ticks), but customized for a log scale. 32 | 33 | ```js 34 | const x = d3.scaleLog([1, 100], [0, 960]); 35 | const T = x.ticks(); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100] 36 | ``` 37 | 38 | If the [base](#log_base) is an integer, the returned ticks are uniformly spaced within each integer power of base; otherwise, one tick per power of base is returned. The returned ticks are guaranteed to be within the extent of the domain. If the orders of magnitude in the [domain](./linear.md#linear_domain) is greater than *count*, then at most one tick per power is returned. Otherwise, the tick values are unfiltered, but note that you can use [*log*.tickFormat](./linear.md#linear_tickFormat) to filter the display of tick labels. If *count* is not specified, it defaults to 10. 39 | 40 | ## *log*.tickFormat(*count*, *specifier*) {#log_tickFormat} 41 | 42 | [Examples](https://observablehq.com/@d3/scale-ticks) · [Source](https://github.com/d3/d3-scale/blob/main/src/log.js) · Like [*linear*.tickFormat](./linear.md#linear_tickFormat), but customized for a log scale. The specified *count* typically has the same value as the count that is used to generate the [tick values](#log_ticks). 43 | 44 | ```js 45 | const x = d3.scaleLog([1, 100], [0, 960]); 46 | const T = x.ticks(); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, …] 47 | const f = x.tickFormat(); 48 | T.map(f); // ["1", "2", "3", "4", "5", "", "", "", "", "10", …] 49 | ``` 50 | 51 | If there are too many ticks, the formatter may return the empty string for some of the tick labels; however, note that the ticks are still shown to convey the logarithmic transform accurately. To disable filtering, specify a *count* of Infinity. 52 | 53 | When specifying a count, you may also provide a format *specifier* or format function. For example, to get a tick formatter that will display 20 ticks of a currency, say `log.tickFormat(20, "$,f")`. If the specifier does not have a defined precision, the precision will be set automatically by the scale, returning the appropriate format. This provides a convenient way of specifying a format whose precision will be automatically set by the scale. 54 | 55 | ## *log*.nice() {#log_nice} 56 | 57 | [Examples](https://observablehq.com/@d3/continuous-scales) · [Source](https://github.com/d3/d3-scale/blob/main/src/log.js) · Like [*linear*.nice](./linear.md#linear_nice), except extends the domain to integer powers of [base](#log_base). 58 | 59 | ```js 60 | const x = d3.scaleLog([0.201479, 0.996679], [0, 960]).nice(); 61 | x.domain(); // [0.1, 1] 62 | ``` 63 | 64 | If the domain has more than two values, nicing the domain only affects the first and last value. Nicing a scale only modifies the current domain; it does not automatically nice domains that are subsequently set using [*log*.domain](./linear.md#linear_domain). You must re-nice the scale after setting the new domain, if desired. 65 | 66 | --------------------------------------------------------------------------------