Repository: timelyportfolio/d3r Branch: master Commit: e824baa8a01f Files: 105 Total size: 1.5 MB Directory structure: gitextract_nk53hx1x/ ├── .Rbuildignore ├── .github/ │ ├── .gitignore │ └── workflows/ │ ├── R-CMD-check.yaml │ └── check-standard.yaml ├── .gitignore ├── CONDUCT.md ├── DESCRIPTION ├── LICENSE ├── NAMESPACE ├── NEWS.md ├── R/ │ ├── dependencies.R │ ├── hierarchy.R │ ├── igraph.R │ ├── json.R │ ├── party.R │ ├── partykit_unexported.R │ ├── table.R │ └── v8.R ├── README.Rmd ├── README.md ├── _pkgdown.yml ├── codecov.yml ├── d3R.Rproj ├── docs/ │ ├── 404.html │ ├── CONDUCT.html │ ├── LICENSE-text.html │ ├── authors.html │ ├── bootstrap-toc.css │ ├── bootstrap-toc.js │ ├── docsearch.css │ ├── docsearch.js │ ├── index.html │ ├── news/ │ │ └── index.html │ ├── pkgdown.css │ ├── pkgdown.js │ ├── pkgdown.yml │ └── reference/ │ ├── change_to_name.html │ ├── d3_dep_jetpack.html │ ├── d3_dep_v3.html │ ├── d3_dep_v4.html │ ├── d3_dep_v5.html │ ├── d3_dep_v6.html │ ├── d3_dep_v7.html │ ├── d3_igraph.html │ ├── d3_json.html │ ├── d3_nest.html │ ├── d3_party.html │ ├── d3_table.html │ ├── d3_v8.html │ ├── index.html │ ├── libs/ │ │ ├── htmlwidgets-1.6.1/ │ │ │ └── htmlwidgets.js │ │ └── jsonedit-binding-3.0.0/ │ │ └── jsonedit.js │ ├── promote_na.html │ └── promote_na_one.html ├── inst/ │ ├── examples/ │ │ ├── example_d3_annotation.R │ │ ├── example_d3_jetpack.R │ │ ├── example_d3_v8.R │ │ ├── example_draw_igraph_with_layout.R │ │ ├── example_igraph.R │ │ ├── example_rpart.R │ │ ├── example_table.R │ │ ├── example_treemap.R │ │ └── why_d3R.Rmd │ └── www/ │ └── d3/ │ ├── d3-jetpack/ │ │ ├── LICENSE │ │ ├── README.md │ │ ├── dist/ │ │ │ └── d3-jetpack.js │ │ └── package.json │ ├── v3/ │ │ └── LICENSE │ ├── v4/ │ │ ├── API.md │ │ ├── CHANGES.md │ │ ├── LICENSE │ │ └── README.md │ ├── v5/ │ │ ├── API.md │ │ ├── CHANGES.md │ │ ├── LICENSE │ │ └── README.md │ ├── v6/ │ │ ├── API.md │ │ ├── CHANGES.md │ │ ├── LICENSE │ │ └── README.md │ └── v7/ │ ├── API.md │ ├── CHANGES.md │ ├── LICENSE │ └── README.md ├── man/ │ ├── change_to_name.Rd │ ├── d3_dep_jetpack.Rd │ ├── d3_dep_v3.Rd │ ├── d3_dep_v4.Rd │ ├── d3_dep_v5.Rd │ ├── d3_dep_v6.Rd │ ├── d3_dep_v7.Rd │ ├── d3_igraph.Rd │ ├── d3_json.Rd │ ├── d3_nest.Rd │ ├── d3_party.Rd │ ├── d3_table.Rd │ ├── d3_v8.Rd │ ├── promote_na.Rd │ └── promote_na_one.Rd └── tests/ ├── testthat/ │ ├── test_deps.R │ ├── test_hier.R │ ├── test_igraph.R │ ├── test_table.R │ └── test_v8.R └── testthat.R ================================================ FILE CONTENTS ================================================ ================================================ FILE: .Rbuildignore ================================================ ^CRAN-RELEASE$ ^docs$ ^_pkgdown\.yml$ ^.*\.Rproj$ ^\.Rproj\.user$ ^README\.Rmd$ ^README-.*\.png$ ^\.travis\.yml$ ^CONDUCT\.md$ docs ^codecov\.yml$ ^cran-comments\.md$ .V8history ^experiments ^\.github$ ^CRAN-SUBMISSION$ ================================================ FILE: .github/.gitignore ================================================ *.html ================================================ FILE: .github/workflows/R-CMD-check.yaml ================================================ # Workflow derived from https://github.com/r-lib/actions/tree/v2/examples # Need help debugging build failures? Start at https://github.com/r-lib/actions#where-to-find-help on: push: branches: [main, master] pull_request: branches: [main, master] name: R-CMD-check jobs: R-CMD-check: runs-on: ${{ matrix.config.os }} name: ${{ matrix.config.os }} (${{ matrix.config.r }}) strategy: fail-fast: false matrix: config: - {os: macos-latest, r: 'release'} - {os: windows-latest, r: 'release'} - {os: ubuntu-latest, r: 'devel', http-user-agent: 'release'} - {os: ubuntu-latest, r: 'release'} - {os: ubuntu-latest, r: 'oldrel-1'} env: GITHUB_PAT: ${{ secrets.GITHUB_TOKEN }} R_KEEP_PKG_SOURCE: yes steps: - uses: actions/checkout@v3 - uses: r-lib/actions/setup-pandoc@v2 - uses: r-lib/actions/setup-r@v2 with: r-version: ${{ matrix.config.r }} http-user-agent: ${{ matrix.config.http-user-agent }} use-public-rspm: true - uses: r-lib/actions/setup-r-dependencies@v2 with: extra-packages: any::rcmdcheck needs: check - uses: r-lib/actions/check-r-package@v2 with: upload-snapshots: true ================================================ FILE: .github/workflows/check-standard.yaml ================================================ # Workflow derived from https://github.com/r-lib/actions/tree/v2/examples # Need help debugging build failures? Start at https://github.com/r-lib/actions#where-to-find-help on: push: branches: [main, master] pull_request: branches: [main, master] name: R-CMD-check jobs: R-CMD-check: runs-on: ${{ matrix.config.os }} name: ${{ matrix.config.os }} (${{ matrix.config.r }}) strategy: fail-fast: false matrix: config: - {os: macos-latest, r: 'release'} - {os: windows-latest, r: 'release'} - {os: ubuntu-latest, r: 'devel', http-user-agent: 'release'} - {os: ubuntu-latest, r: 'release'} - {os: ubuntu-latest, r: 'oldrel-1'} env: GITHUB_PAT: ${{ secrets.GITHUB_TOKEN }} R_KEEP_PKG_SOURCE: yes steps: - uses: actions/checkout@v3 - uses: r-lib/actions/setup-pandoc@v2 - uses: r-lib/actions/setup-r@v2 with: r-version: ${{ matrix.config.r }} http-user-agent: ${{ matrix.config.http-user-agent }} use-public-rspm: true - uses: r-lib/actions/setup-r-dependencies@v2 with: extra-packages: any::rcmdcheck needs: check - uses: r-lib/actions/check-r-package@v2 with: upload-snapshots: true ================================================ FILE: .gitignore ================================================ .Rproj.user .Rhistory .RData .Ruserdata inst/doc .V8history experiments cran-comments.md ================================================ FILE: CONDUCT.md ================================================ # Contributor Code of Conduct As contributors and maintainers of this project, we pledge to respect all people who contribute through reporting issues, posting feature requests, updating documentation, submitting pull requests or patches, and other activities. We are committed to making participation in this project a harassment-free experience for everyone, regardless of level of experience, gender, gender identity and expression, sexual orientation, disability, personal appearance, body size, race, ethnicity, age, or religion. Examples of unacceptable behavior by participants include the use of sexual language or imagery, derogatory comments or personal attacks, trolling, public or private harassment, insults, or other unprofessional conduct. Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct. Project maintainers who do not follow the Code of Conduct may be removed from the project team. Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by opening an issue or contacting one or more of the project maintainers. This Code of Conduct is adapted from the Contributor Covenant (http:contributor-covenant.org), version 1.0.0, available at http://contributor-covenant.org/version/1/0/0/ ================================================ FILE: DESCRIPTION ================================================ Package: d3r Type: Package Title: 'd3.js' Utilities for R Version: 1.1.0 Date: 2023-10-01 Authors@R: c( person( "Mike", "Bostock" , role = c("aut", "cph") , comment = "d3.js library in htmlwidgets/lib, http://d3js.org" ), person( "Kent", "Russell" , role = c("aut", "cre", "cph") , comment = "R interface" , email = "kent.russell@timelyportfolio.com" ), person( "Gregor", "Aisch" , role = c("aut", "cph") , comment = "d3-jetpack creator, https://github.com/gka/d3-jetpack" ), person( "Adam", "Pearce" , role = c("aut") , comment = "core contributor to d3-jetpack" ), person( "Ben", "Ortiz" , role = c("ctb") ) ) Maintainer: Kent Russell URL: https://github.com/timelyportfolio/d3r BugReports: https://github.com/timelyportfolio/d3r/issues Description: Provides a suite of functions to help ease the use of 'd3.js' in R. These helpers include 'htmltools::htmlDependency' functions, hierarchy builders, and conversion tools for 'partykit', 'igraph,' 'table', and 'data.frame' R objects into the 'JSON' that 'd3.js' expects. License: BSD_3_clause + file LICENSE Encoding: UTF-8 Imports: dplyr, htmltools, tidyr (>= 0.8.3) Suggests: httr, jsonlite, listviewer, purrr, testthat Enhances: igraph, partykit, rpart, treemap, V8 RoxygenNote: 7.2.3 ================================================ FILE: LICENSE ================================================ YEAR: 2017 COPYRIGHT HOLDER: Kenton Russell ORGANIZATION: Kenton Russell ================================================ FILE: NAMESPACE ================================================ # Generated by roxygen2: do not edit by hand export(d3_dep_jetpack) export(d3_dep_v3) export(d3_dep_v4) export(d3_dep_v5) export(d3_dep_v6) export(d3_dep_v7) export(d3_igraph) export(d3_json) export(d3_nest) export(d3_party) export(d3_table) export(d3_v8) ================================================ FILE: NEWS.md ================================================ # d3r 1.1.0 * update d3 version [`7.8.5`](https://github.com/d3/d3/releases/tag/v7.8.5) dependency function `d3_dep_v7()` # d3r 1.0.1 * update d3 version [`7.8.2`](https://github.com/d3/d3/releases/tag/v7.8.2) dependency function `d3_dep_v7()` * fix CRAN test errors # d3r 1.0.0 * add d3 version [`7.0.0`](https://github.com/d3/d3/releases/tag/v7.0.0) dependency function `d3_dep_v7()` * update d3 version [`6.7.0`](https://github.com/d3/d3/releases/tag/v6.7.0) in dependency function `d3_dep_v6()` # d3r 0.9.1 * add d3 version [`6.2.0`](https://github.com/d3/d3/releases/tag/v6.2.0) dependency function `d3_dep_v6()` # d3r 0.9.0 * remove use of `nest_` in `d3_party` * upgrade d3v5 to [`5.16.0`](https://github.com/d3/d3/releases/tag/v5.16.0) # d3r 0.8.7 * work with new and old `tidyr` syntax * upgrade d3v5 to [`5.10.0`](https://github.com/d3/d3/releases/tag/v5.10.0) # d3r 0.8.6 * update d3v5 to [`5.9.7`](https://github.com/d3/d3/releases/tag/v5.9.7) # d3r 0.8.5 * update d3v5 to [`5.8.0`](https://github.com/d3/d3/releases/tag/v5.8.0) # d3r 0.8.4 * update d3v5 to [`5.7.0`](https://github.com/d3/d3/releases/tag/v5.7.0) # d3r 0.8.3 * fix extra slash in offline dependencies # d3r 0.8.2 * update d3v5 to [`5.5.0`](https://github.com/d3/d3/releases/tag/v5.5.0) * add httr to Suggests to resolve CRAN issue # d3r 0.8.1 * add d3v5 for d3 [`5.1.0`](https://github.com/d3/d3/releases/tag/v5.1.0) # d3r 0.8.0 * add d3v5 for d3 [`5.0.0-rc4`](https://github.com/d3/d3/releases/tag/v5.0.0) * update d3v4 to [`4.13.0`](https://github.com/d3/d3/releases/tag/v4.13.0) # d3r 0.7.1 * update d3v4 to [`4.12.0`](https://github.com/d3/d3/releases/tag/v4.12.0) # d3r 0.7.0 * update d3v4 to [`4.11.0`](https://github.com/d3/d3/releases/tag/v4.11.0) * update d3-jetpack to 2.0.9 # d3r 0.6.9 ### Updates * modify `d3_nest()` to work with new tidyr. # d3r 0.6.8 ### Updates * `d3_dep_jetpack()` added. Essentially the same as d3_dep_v4(), but with a number of convenience functions added. Learn more by checking out the [d3-jetpack github page](https://github.com/gka/d3-jetpack). * update d3v4 to [`4.10.0`](https://github.com/d3/d3/releases/tag/v4.10.0) # d3r 0.6.7 ### API Changes * **(BREAKING)** d3_table weight column is now named value to be consistent with the newest d3-sankey plugin [commit](https://github.com/timelyportfolio/d3r/commit/65b913322f1a6c71db21496f158bb0bed645a1f6). * Use unpkg.com for online dependencies # d3r 0.6.6 ### Updates * add d3_table() function to convert R table into list of a nodes data.frame and a links data.frame modelled after [example](https://gist.github.com/timelyportfolio/3616869996703d48a981) # d3r 0.6.5 ### Updates * update d3v4 to [`4.9.1`](https://github.com/d3/d3/releases/tag/v4.9.1) # d3r 0.6.4 ### Bug Fix * d3_nest would fail with certain hierarchies that had multiple NA level; fix only takes first na_child since non-first children will be duplicates (see [commit](https://github.com/timelyportfolio/d3r/commit/1529acad5230207e3b4711202509bc5e9411076b)) # d3r 0.6.3 ### Updates * update d3v4 to [`4.8.0`](https://github.com/d3/d3/releases/tag/v4.8.0) * test with development `dplyr` # d3r 0.6.2 ### Updates * update d3v4 to [`4.6.0`](https://github.com/d3/d3/releases/tag/v4.6.0) * add `d3_v8()` convenience function to return `V8` context with d3.js loaded # d3r 0.6.1 ### Updates * update d3v4 to [`4.4.4`](https://github.com/d3/d3/releases/tag/v4.4.4) # d3r 0.6.0 ### Updates * add `colname` to return value (see [commit](https://github.com/timelyportfolio/d3r/commit/5787e03a6b59c89b367a88f16e9c5a899482a8d3)) * improve `NA` child promotion for deeply nested hierarchies ### API Changes * **(BREAKING)** change `id` to `name` (see [issue]( https://github.com/timelyportfolio/d3r/issues/10)) # d3r 0.5.0 ### Updates * update d3 to [4.4.0](https://github.com/d3/d3/releases/tag/v4.4.0) ### API Changes * (non-breaking) add offline argument to d3_dep_v3 and d3_dep_v4 # d3r 0.4.2 * CRAN release ================================================ FILE: R/dependencies.R ================================================ #' 'd3.js' Dependency for Version 7 #' #' @param offline \code{logical} to specify whether to use #' a local copy of d3.js (\code{TRUE}) or use cdn (\code{FALSE}) #' @return \code{htmltools::htmlDependency} #' @export #' @examples #' library(d3r) #' library(htmltools) #' #' tagList(d3_dep_v7()) #' @family 'd3' dependency functions #' @seealso \code{\link{d3_dep_v6}}, \code{\link{d3_dep_v5}}, \code{\link{d3_dep_v4}}, \code{\link{d3_dep_v3}}, #' and \code{\link{d3_dep_jetpack}}. d3_dep_v7 <- function(offline=TRUE){ if(offline) { src = c(file=system.file("www/d3/v7/dist", package="d3r")) } else { src <- c(href="https://unpkg.com/d3@7.8.5/dist") } htmltools::htmlDependency( name = "d3", version = "7.8.5", src = src, script = "d3.min.js" ) } #' 'd3.js' Dependency for Version 6 #' #' @param offline \code{logical} to specify whether to use #' a local copy of d3.js (\code{TRUE}) or use cdn (\code{FALSE}) #' @return \code{htmltools::htmlDependency} #' @export #' @examples #' library(d3r) #' library(htmltools) #' #' tagList(d3_dep_v6()) #' @family 'd3' dependency functions #' @seealso \code{\link{d3_dep_v7}}, \code{\link{d3_dep_v5}}, \code{\link{d3_dep_v4}}, \code{\link{d3_dep_v3}}, #' and \code{\link{d3_dep_jetpack}}. d3_dep_v6 <- function(offline=TRUE){ if(offline) { src = c(file=system.file("www/d3/v6/dist", package="d3r")) } else { src <- c(href="https://unpkg.com/d3@6.7.0/dist") } htmltools::htmlDependency( name = "d3", version = "6.7.0", src = src, script = "d3.min.js" ) } #' 'd3.js' Dependency for Version 5 #' #' @param offline \code{logical} to specify whether to use #' a local copy of d3.js (\code{TRUE}) or use cdn (\code{FALSE}) #' @return \code{htmltools::htmlDependency} #' @export #' @examples #' library(d3r) #' library(htmltools) #' #' tagList(d3_dep_v5()) #' @family 'd3' dependency functions #' @seealso \code{\link{d3_dep_v7}}, \code{\link{d3_dep_v6}}, \code{\link{d3_dep_v4}}, \code{\link{d3_dep_v3}}, #' and \code{\link{d3_dep_jetpack}}. d3_dep_v5 <- function(offline=TRUE){ if(offline) { src = c(file=system.file("www/d3/v5/dist", package="d3r")) } else { src <- c(href="https://unpkg.com/d3@5.16.0/dist") } htmltools::htmlDependency( name = "d3", version = "5.16.0", src = src, script = "d3.min.js" ) } #' 'd3.js' Dependency for Version 4 #' #' @param offline \code{logical} to specify whether to use #' a local copy of d3.js (\code{TRUE}) or use cdn (\code{FALSE}) #' @return \code{htmltools::htmlDependency} #' @export #' @examples #' library(d3r) #' library(htmltools) #' #' tagList(d3_dep_v4()) #' @family 'd3' dependency functions #' @seealso \code{\link{d3_dep_v7}}, \code{\link{d3_dep_v6}}, \code{\link{d3_dep_v5}}, \code{\link{d3_dep_v3}}, #' and \code{\link{d3_dep_jetpack}}. d3_dep_v4 <- function(offline=TRUE){ if(offline) { src = c(file=system.file("www/d3/v4/dist", package="d3r")) } else { src <- c(href="https://unpkg.com/d3@4.13.0/build") } htmltools::htmlDependency( name = "d3", version = "4.13.0", src = src, script = "d3.min.js" ) } #' 'd3.js' Dependency for Version 3 #' #' @param offline \code{logical} to specify whether to use #' a local copy of d3.js (\code{TRUE}) or use cdn (\code{FALSE}) #' @return \code{htmltools::htmlDependency} #' @export #' @examples #' library(d3r) #' library(htmltools) #' #' tagList(d3_dep_v3()) #' @family 'd3' dependency functions #' @seealso \code{\link{d3_dep_v7}}, \code{\link{d3_dep_v6}}, \code{\link{d3_dep_v5}}, \code{\link{d3_dep_v4}}, #' and \code{\link{d3_dep_jetpack}}. d3_dep_v3 <- function(offline=TRUE){ if(offline) { src = c(file=system.file("www/d3/v3/dist", package="d3r")) } else { src <- c(href="https://unpkg.com/d3@3.5.17") } htmltools::htmlDependency( name = "d3", version = "3.5.17", src = src, script = "d3.min.js" ) } #' 'd3.js' Dependency for Version 4 Jetpack #' #' d3-jetpack is a set of nifty convenience wrappers that speed up #' your daily work with d3.js. Must be included after \code{d3_dep_v4()}. #' Learn more by reading \href{https://github.com/gka/d3-jetpack}{d3-jetpack} #' or by watching this \href{https://www.youtube.com/watch?v=_5ky0AYq_Dg&t=4s}{YouTube}. #' #' @param offline \code{logical} to specify whether to use #' a local copy of d3.js (\code{TRUE}) or use cdn (\code{FALSE}) #' @return \code{htmltools::htmlDependency} #' @export #' @example ./inst/examples/example_d3_jetpack.R #' @family 'd3' dependency functions d3_dep_jetpack <- function(offline=TRUE){ if(offline) { src <- c(file=system.file("www/d3/d3-jetpack/dist", package="d3r")) } else { src <- c(href="https://unpkg.com/d3-jetpack@2.0.9/build") } htmltools::htmlDependency( name = "d3-jetpack", version = "2.0.9", src = src, script = "d3-jetpack.js" ) } ================================================ FILE: R/hierarchy.R ================================================ #' Change Column Name in Children to "name" #' #' @param x \code{data.frame} or \code{data.frame} derivative, such #' as \code{tibble} #' @param column column to convert #' #' @return \code{data.frame} change_to_name <- function(x, column=1){ child_list <- lapply( x$children, function(y) { y <- dplyr::mutate(y, "colname" = colnames(y)[column]) dplyr::rename(y,"name" = colnames(y)[column]) } ) dplyr::mutate(x, children = child_list) } #' Promote NA to Top Level #' #' @param x \code{data.frame} #' #' @return \code{data.frame} promote_na_one <- function(x){ # find children that are na # expect this to only happen once, so only take first na # to define values na_child_loc <- which(is.na(x$children[[1]]$name)) # promote all non-d3r columns to top level if(length(na_child_loc)){ na_child <- x$children[[1]][na_child_loc,] x <- dplyr::bind_cols( x, na_child[1,setdiff(colnames(na_child),c("name","children","colname"))] ) # eliminate na child x$children[[1]] <- x$children[[1]][-na_child_loc,] x } else { x } } #' Apply `promote_na` to All Rows #' #' @param x \code{data.frame} #' #' @return \code{data.frame} promote_na <- function(x){ #by_row now deprecated #purrr::by_row(x, promote_na_one)$.out lapply( seq_len(nrow(x)), function(row){promote_na_one(x[row,])} ) } #' Convert a \code{data.frame} to a 'd3.js' Hierarchy #' #' @param data \code{data.frame} or \code{data.frame} derivative, such #' as \code{tibble} #' @param value_cols \code{character} vector with the names of the #' columns to use as data #' @param root \code{character} name of the root level of the hierarchy #' @param json \code{logical} to return as \code{JSON} #' #' @return nested \code{data.frame} #' @export #' #' @example ./inst/examples/example_table.R #' @example ./inst/examples/example_treemap.R d3_nest <- function( data=NULL, value_cols=character(), root = "root", json = TRUE ) { stopifnot(!is.null(data), inherits(data, "data.frame")) nonnest_cols <- dplyr::setdiff(colnames(data),value_cols) # looks like new tidyr requires tibble to nest correctly data <- dplyr::as_tibble(data) # convert factor to character data <- dplyr::mutate_if(data, is.factor, as.character) # syntax changed in tidyr > 0.8.3 if(utils::packageVersion("tidyr") > "0.8.3") { data_nested <- dplyr::bind_rows(promote_na( change_to_name( tidyr::nest( .data=data, children = dplyr::one_of(c(nonnest_cols[length(nonnest_cols)], value_cols)) ) ) )) } else { data_nested <- dplyr::bind_rows(promote_na( change_to_name( tidyr::nest( data=data, dplyr::one_of(c(nonnest_cols[length(nonnest_cols)], value_cols)), .key="children" ) ) )) } for(x in rev( colnames(data_nested)[ -which(colnames(data_nested) %in% c("children","colname",value_cols)) ] )){ if(utils::packageVersion("tidyr") > "0.8.3") { data_nested <- dplyr::bind_rows(promote_na( change_to_name( tidyr::nest( .data = data_nested, children = dplyr::one_of(colnames(data_nested)[colnames(data_nested) %in% c(x,"children",value_cols)]) ) ) )) } else { data_nested <- dplyr::bind_rows(promote_na( change_to_name( tidyr::nest( data_nested, dplyr::one_of(colnames(data_nested)[colnames(data_nested) %in% c(x,"children",value_cols)]), .key = "children" ) ) )) } } data_nested$name = root if(json){ d3_json(data_nested,strip=TRUE) } else { data_nested } } ================================================ FILE: R/igraph.R ================================================ #' Convert 'igraph' to 'd3.js' #' #' @param igrf \code{igraph} #' @param json \code{logical} to return as \code{JSON} #' #' @return \code{list} #' @export #' #' @example ./inst/examples/example_igraph.R d3_igraph <- function(igrf = NULL, json=TRUE) { stopifnot(!is.null(igrf), inherits(igrf,"igraph"),requireNamespace("igraph")) network <- igraph::as_data_frame( igrf, what = "both" ) nodes <- network$vertices # use rownames as id if(!("id" %in% colnames(nodes))){ nodes$id <- rownames(network$vertices) } links <- dplyr::rename( network$edges, "source" = "from", "target" = "to" ) # convert factor to character nodes <- dplyr::mutate_if(nodes, is.factor, as.character) links <- dplyr::mutate_if(links, is.factor, as.character) # not necessary but if ids are numeric use zero-based indexing # and convert suppressWarnings(are_ids_numeric <- !any(is.na(as.numeric(nodes$id)))) if(are_ids_numeric){ nodes$id <- as.character(as.numeric(nodes$id) - 1) links$source <- as.character(as.numeric(links$source)-1) links$target <- as.character(as.numeric(links$target)-1) } # add graph attributes graphattr <- igraph::graph_attr(igrf) if(json){ d3_json(list(nodes=nodes,links=links,attributes=graphattr),strip=FALSE) } else { list(nodes=nodes,links=links,attributes=graphattr) } } ================================================ FILE: R/json.R ================================================ ### convenience functions to use arguments to jsonlite::toJSON ### that play nicely with d3.js #' Create 'JSON' that 'd3.js' Expects #' #' @param x data, usually in the form of \code{data.frame} or \code{list} #' @param strip \code{logical} to remove outer array. Use \code{strip=TRUE} #' for hierarchies from \code{d3_nest} #' #' @return \code{string} of 'JSON' data #' @export d3_json <- function(x=NULL, strip=TRUE){ xj <- jsonlite::toJSON(x, auto_unbox=TRUE, dataframe="rows") # remove array so only get first element as object if(strip){ substr(xj,2,nchar(xj)-1) } else { xj } } ================================================ FILE: R/party.R ================================================ # convert rpart / partykit to d3 # some help from http://stackoverflow.com/questions/34196611/converting-rpart-output-into-json-format-in-r/38469619?noredirect=1#comment65954307_38469619 # method in sankeytree #' Convert partykit to d3.js hierarchy #' #' This thing is not even close to being done, so please help #' with ideas and contributions. #' #' @param tree \code{partykit} object to be converted #' @param json \code{logical} to return \code{list} or \code{json} #' #' @return \code{list} or \code{json} depending on \code{json} arg #' #' @example ./inst/examples/example_rpart.R #' #' #' @export d3_party = function (tree=NULL, json=TRUE) { stopifnot(!is.null(tree), requireNamespace("partykit")) # Checking the decision tree object if(!inherits(tree, c("constparty","party"))){ tree_pk <- partykit::as.party(tree) } else { tree_pk <- tree } data <- rapply(tree_pk$node, unclass, how="list") #fill in information at the root level for now #that might be nice to provide to our interactive graph data$info <- rapply( unclass(tree_pk)[-1] ,function(l){ l = unclass(l) if( class(l) %in% c("terms","formula","call")) { l = paste0(as.character(l)[-1],collapse=as.character(l)[1]) } attributes(l) <- NULL return(l) } ,how="replace" ) #get all the other meta data we need and merge it in to the list ## changed pattern from [1-9] to [0-9] because we were missing node 10 tree_text <- invisible( utils::capture.output( print(tree_pk) ) ) tree_text <- tree_text[grep( x = tree_text, pattern = "(\\[)([0-9]*)(\\])")] tree_text <- strsplit( tree_text, "[\\[\\|\\]]" , perl = T) tree_text <- lapply( seq.int(1,length(tree_text)), function(i){ x <- tree_text[[i]] tail_data <- utils::tail(x,2) data.frame( "id" = as.numeric(tail_data[1]) , description = tail_data[2] , stringsAsFactors = F ) } ) tree_text <- do.call(rbind, tree_text) # terminal nodes have descriptive stats in their names, so I stripped these out # so the final plot wouldn't have duplicate data tree_text$description <- sapply(strsplit(tree_text[,2], ":"), "[", 1) # add rules tree_text$rule <- sapply(partykit::nodeids(tree_pk),function(n){.list.rules.party(tree_pk,n)}) # if frame data (rpart, maybe others) then add # binding the node names from rpk with more of the relevant meta data from rp # i don't think that partykit imports this automatically for the inner nodes, so i did it manually if("frame" %in% names(tree)){ tree_text <- cbind(tree_text, tree$frame) # rounding the mean DV value tree_text$yval <- round(tree_text$yval, 2) } # now try to add size / count information # rpart easy and will have n but other more difficult if( "fitted" %in% names(unclass(tree_pk)) && !("(weights)" %in% names(tree_pk$fitted)) ){ tree_pk$fitted["(weights)"] <- 1 } counts <- data.frame( stats::xtabs(`(weights)`~`(fitted)`+`(response)`,tree_pk$fitted), stringsAsFactors=FALSE ) colnames(counts) <- c("fitted", "response", "freq") counts$fitted = as.numeric(as.character(counts$fitted)) counts <- tidyr::nest(counts, .by = "fitted") # would use dplyr join here, but nested data.frame # flattened on join; this does not happen with nested # tibble, but don't want to add another depedency # do the merge of tree_text with data by # walking the tree and joining by id join_data <- function(l){ l <- unclass(l) l <- utils::modifyList(l,tree_text[which(tree_text$id==l$id),]) l$size <- counts[which(counts$fitted==l$id),] if(!("n" %in% names(tree_text))){ if(nrow(l$size) > 0){ l$n <- sum(l$size$freq) } } l } merge_data <- function(l){ l <- join_data(l) if("kids" %in% names(l) && length(l$kids)>0){ lapply( 1:length(l$kids), function(n){ l$kids[[n]] <<- merge_data(l$kids[[n]]) } ) } else if("kids" %in% names(l) && length(l$kids)==0) { l$kids <- NULL } l } hier <- rapply(merge_data(data), unclass, how="list") hier <- recurse(hier, sum_var) hier <- recurse(hier, rename_children) if(json){ d3_json(hier, strip=FALSE) } else { hier } } #' @keywords internal rename_children <- function(l, old_name="kids", new_name="children") { if(length(names(l))>0) { names(l)[which(names(l)==old_name)] <- new_name } l } #' @keywords internal sum_var <- function(l, varname="n", childname="kids"){ if(is.list(l) && length(l)>0 && childname %in% names(l)){ ul <- unlist(l) nms <- names(ul) loc <- grep(x=nms, pattern=sprintf("\\.%s$",varname), perl=TRUE) if(length(loc)>0){ l[[varname]] <- sum(as.numeric(unlist(ul[loc]))) } else { l[[varname]] <- 0 } l } else { l } } #' @keywords internal recurse <- function(l, func, ...) { l <- func(l, ...) if(is.list(l) && length(l)>0){ lapply( l, function(ll){ recurse(ll, func, ...) } ) } else { l } } ================================================ FILE: R/partykit_unexported.R ================================================ # this is copied directly from # from the unexported .list.rules.party in partykit # copied here to make CRAN happy and avoid a NOTE #' @keywords internal .list.rules.party <- function (x, i = NULL, ...) { if (is.null(i)) i <- partykit::nodeids(x, terminal = TRUE) if (length(i) > 1) { ret <- sapply(i, .list.rules.party, x = x) names(ret) <- if (is.character(i)) i else names(x)[i] return(ret) } if (is.character(i) && !is.null(names(x))) i <- which(names(x) %in% i) stopifnot(length(i) == 1 & is.numeric(i)) stopifnot(i <= length(x) & i >= 1) i <- as.integer(i) dat <- partykit::data_party(x, i) if (!is.null(x$fitted)) { findx <- which("(fitted)" == names(dat))[1] fit <- dat[, findx:ncol(dat), drop = FALSE] dat <- dat[, -(findx:ncol(dat)), drop = FALSE] if (ncol(dat) == 0) dat <- x$data } else { fit <- NULL dat <- x$data } rule <- c() recFun <- function(node) { if (partykit::id_node(node) == i) return(NULL) kid <- sapply(partykit::kids_node(node), partykit::id_node) whichkid <- max(which(kid <= i)) split <- partykit::split_node(node) ivar <- partykit::varid_split(split) svar <- names(dat)[ivar] index <- partykit::index_split(split) if (is.factor(dat[, svar])) { if (is.null(index)) index <- ((1:nlevels(dat[, svar])) > partykit::breaks_split(split)) + 1 slevels <- levels(dat[, svar])[index == whichkid] srule <- paste(svar, " %in% c(\"", paste(slevels, collapse = "\", \"", sep = ""), "\")", sep = "") } else { if (is.null(index)) index <- 1:length(kid) breaks <- cbind(c(-Inf, partykit::breaks_split(split)), c(partykit::breaks_split(split), Inf)) sbreak <- breaks[index == whichkid, ] right <- partykit::right_split(split) srule <- c() if (is.finite(sbreak[1])) srule <- c(srule, paste(svar, ifelse(right, ">", ">="), sbreak[1])) if (is.finite(sbreak[2])) srule <- c(srule, paste(svar, ifelse(right, "<=", "<"), sbreak[2])) srule <- paste(srule, collapse = " & ") } rule <<- c(rule, srule) return(recFun(node[[whichkid]])) } node <- recFun(partykit::node_party(x)) paste(rule, collapse = " & ") } ================================================ FILE: R/table.R ================================================ #' @keywords internal links_get <- function(tB, vars=NULL, agg="Freq") { if(length(vars) == 1){ return(data.frame()) } #assume vars in order of source, target vars_df <- sapply(1:(length(vars)-1),function(v){c(vars[v],vars[v+1])}) vars_df <- data.frame( t(vars_df), stringsAsFactors = FALSE ) vars_df <- apply( vars_df, MARGIN=1, function(c){ paste0(as.vector(c),collapse="+") } ) vars_df <- do.call( rbind, lapply( vars_df, function(f){ structure( data.frame(stats::xtabs(paste0(agg,"~",f),tB)), names = c("source","target","value") ) } ) ) colnames(vars_df) <- c("source","target","value") vars_df } #' @keywords internal links_transform <- function(links=NULL, nodes=NULL, vars=NULL, agg=NULL, tB=NULL) { if (nrow(links) > 0) { links <- lapply( 1:ncol(links), function(x){ if (is.factor(links[,x])){ as.character(links[,x]) } else links[,x] } ) links <- data.frame(links, stringsAsFactors = F) colnames(links) <- c("source","target","value") } links_tail <- data.frame( utils::tail(nodes,1), stats::xtabs(paste0(agg,"~",vars[1]),tB) ) colnames(links_tail) <- c("source","target","value") links <- rbind( links, links_tail ) links[,c(1,2)] <- lapply( links[,c(1,2)], function(x){ match(as.character(x),nodes)-1 } ) links } #' Converts Table to 'd3' Nodes and Links #' #' @param tB \code{table} to convert #' @param vars \code{character} vector of column names #' @param agg \code{character} column name of aggregated value #' #' @return \code{list} of two \code{data.frames} - one for nodes and #' one for links of the network. This structure is helpful #' when working with \code{networkD3} and \code{visNetwork}. #' @examples #' library(d3r) #' d3_table(Titanic, c("Class","Sex")) #' #' @export d3_table <- function( tB = NULL, vars = NULL, agg = "Freq" ) { stopifnot(!is.null(tB), inherits(tB, "table")) if(is.null(vars)){ vars = names(dimnames(tB)) } nodes <- unique( unlist( unname( dimnames(tB)[vars] ) ) ) # add name of table as root in nodes nodes[length(nodes)+1]= as.character(substitute(tB)) links <- links_get(tB = tB, vars = vars, agg = agg) links_transformed <- links_transform(links, nodes, vars, agg, tB) # try to get size for nodes nodes_df <- data.frame(name=as.character(nodes),stringsAsFactors = F) nodes_df <- lapply( vars, function(v){ stats::xtabs(paste0(agg,"~",v),tB) } ) nodes_df <- data.frame( name = names(unlist(nodes_df)), value = as.vector(unlist(nodes_df)), stringsAsFactors = F ) nodes_df <- rbind( nodes_df, data.frame( name = utils::tail(nodes,1), value = sum(tB) ) ) # not sure if this is necessary any more # legacy of previous code rownames(nodes_df) <- sort(as.numeric(rownames(nodes_df))) return( list( nodes = nodes_df, links = links_transformed ) ) } ================================================ FILE: R/v8.R ================================================ #' Create V8 Context with D3 #' #' @param ... arguments passed to \code{v8()} #' #' @return \code{v8} context with d3.js loaded and available as d3 #' @example inst/examples/example_d3_v8.R #' @export d3_v8 <- function(...) { if(!requireNamespace("V8")) { stop("The V8 package must be installed for this function. Please install.packages('V8').") } d3dep <- d3_dep_v6() ctx <- V8::v8(...) ctx$source( file.path( d3dep$src, d3dep$script ) ) return(ctx) } ================================================ FILE: README.Rmd ================================================ --- output: github_document always_allow_html: true --- ```{r, echo = FALSE} knitr::opts_chunk$set( collapse = TRUE, comment = "#>", fig.path = "README-" ) ``` [![CRAN_Status_Badge](http://www.r-pkg.org/badges/version/d3r)](https://cran.r-project.org/package=d3r) [![R-CMD-check](https://github.com/timelyportfolio/d3r/actions/workflows/R-CMD-check.yaml/badge.svg)](https://github.com/timelyportfolio/d3r/actions/workflows/R-CMD-check.yaml) ### Installing d3r `d3r` is on CRAN, so install with `install.packages("d3r")` or for the absolute latest use `devtools`. ``` devtools::install_github("timelyportfolio/d3r") ``` ### d3 Dependency Functions `d3r` makes `d3.js` dependency injection in R easy with `d3_dep_v3()`, `d3_dep_v4()`, `d3_dep_v5()`, `d3_dep_v6()`, and the newest `d3_dep_v7()`. These functions work well with `htmltools::tags`. ``` library(htmltools) library(d3r) # check web developer tools to see d3 is available browsable( attachDependencies( tagList(), d3_dep_v7() ) ) # or include directly in a taglist; I prefer this method. browsable( tagList( h1("I have d3 version ", span(id="version")), tags$script("d3.select('#version').text(d3.version)"), d3_dep_v7() ) ) ``` Also, I will commit to keeping `d3r` up-to-date with `d3.js`, so you'll no longer need multiple copies of `d3.js` for your `htmlwidgets`. If you are a `htmlwidget` author, you will no longer need to worry every time `d3.js` gets a new release. See `treebar` [lines](https://github.com/timelyportfolio/treebar/blob/master/R/treebar.R#L66-L74) for an example of using `d3r` with your `htmlwidget`. ### d3 Hierarchy from data.frame Building `d3.js` hierarchies can be very difficult. `d3r::d3_nest()` will convert `table` and `data.frame` to a nested `d3.js` hierarchy ready for work with [`d3-hierarchy`](https://github.com/d3/d3-hierarchy). ``` d3_nest(as.data.frame(Titanic)) ``` As another example, let's go from `treemap` to `d3.js`. ``` library(treemap) library(d3r) d3_nest( treemap::random.hierarchical.data(), value_cols = "x" ) ``` ### d3 Hierarchy from partykit / rpart `rpart` and similar objects in `R` are very difficult to convert but make perfect subjects for `d3` hierarchical layouts. `d3_party` helps convert these objects for easy usage with `d3.js`. ``` #devtools::install_github("timelyportfolio/d3treeR") library(d3treeR) library(d3r) # example from ?rpart data("kyphosis", package="rpart") rp <- rpart::rpart( Kyphosis ~ Age + Number + Start, data = kyphosis ) # get the json hierarchy d3_party(tree=rp) # interactive plot with d3treeR d3tree2( d3_party(tree=rp), celltext="description", valueField="n" ) ``` ### d3 Network from igraph `igraph` to `d3.js` network of `nodes` and `links` is a very common conversion. `d3r::d3_igraph` will do this for you. ``` library(igraph) library(d3r) d3_igraph(igraph::watts.strogatz.game(1, 50, 4, 0.05)) ``` ### Todo I have a whole lot of ideas. Please let me know yours, and let's make this package great. ### Code of Conduct Please note that this project is released with a [Contributor Code of Conduct](https://github.com/timelyportfolio/d3r/blob/master/CONDUCT.md). By participating in this project you agree to abide by its terms. ================================================ FILE: README.md ================================================ [![CRAN_Status_Badge](http://www.r-pkg.org/badges/version/d3r)](https://cran.r-project.org/package=d3r) [![R-CMD-check](https://github.com/timelyportfolio/d3r/actions/workflows/R-CMD-check.yaml/badge.svg)](https://github.com/timelyportfolio/d3r/actions/workflows/R-CMD-check.yaml) ### Installing d3r `d3r` is on CRAN, so install with `install.packages("d3r")` or for the absolute latest use `devtools`. devtools::install_github("timelyportfolio/d3r") ### d3 Dependency Functions `d3r` makes `d3.js` dependency injection in R easy with `d3_dep_v3()`, `d3_dep_v4()`, `d3_dep_v5()`, `d3_dep_v6()`, and the newest `d3_dep_v7()`. These functions work well with `htmltools::tags`. library(htmltools) library(d3r) # check web developer tools to see d3 is available browsable( attachDependencies( tagList(), d3_dep_v7() ) ) # or include directly in a taglist; I prefer this method. browsable( tagList( h1("I have d3 version ", span(id="version")), tags$script("d3.select('#version').text(d3.version)"), d3_dep_v7() ) ) Also, I will commit to keeping `d3r` up-to-date with `d3.js`, so you’ll no longer need multiple copies of `d3.js` for your `htmlwidgets`. If you are a `htmlwidget` author, you will no longer need to worry every time `d3.js` gets a new release. See `treebar` [lines](https://github.com/timelyportfolio/treebar/blob/master/R/treebar.R#L66-L74) for an example of using `d3r` with your `htmlwidget`. ### d3 Hierarchy from data.frame Building `d3.js` hierarchies can be very difficult. `d3r::d3_nest()` will convert `table` and `data.frame` to a nested `d3.js` hierarchy ready for work with [`d3-hierarchy`](https://github.com/d3/d3-hierarchy). d3_nest(as.data.frame(Titanic)) As another example, let’s go from `treemap` to `d3.js`. library(treemap) library(d3r) d3_nest( treemap::random.hierarchical.data(), value_cols = "x" ) ### d3 Hierarchy from partykit / rpart `rpart` and similar objects in `R` are very difficult to convert but make perfect subjects for `d3` hierarchical layouts. `d3_party` helps convert these objects for easy usage with `d3.js`. #devtools::install_github("timelyportfolio/d3treeR") library(d3treeR) library(d3r) # example from ?rpart data("kyphosis", package="rpart") rp <- rpart::rpart( Kyphosis ~ Age + Number + Start, data = kyphosis ) # get the json hierarchy d3_party(tree=rp) # interactive plot with d3treeR d3tree2( d3_party(tree=rp), celltext="description", valueField="n" ) ### d3 Network from igraph `igraph` to `d3.js` network of `nodes` and `links` is a very common conversion. `d3r::d3_igraph` will do this for you. library(igraph) library(d3r) d3_igraph(igraph::watts.strogatz.game(1, 50, 4, 0.05)) ### Todo I have a whole lot of ideas. Please let me know yours, and let’s make this package great. ### Code of Conduct Please note that this project is released with a [Contributor Code of Conduct](https://github.com/timelyportfolio/d3r/blob/master/CONDUCT.md). By participating in this project you agree to abide by its terms. ================================================ FILE: _pkgdown.yml ================================================ ================================================ FILE: codecov.yml ================================================ comment: false ================================================ FILE: d3R.Rproj ================================================ Version: 1.0 RestoreWorkspace: Default SaveWorkspace: Default AlwaysSaveHistory: Default EnableCodeIndexing: Yes UseSpacesForTab: Yes NumSpacesForTab: 2 Encoding: UTF-8 RnwWeave: Sweave LaTeX: pdfLaTeX AutoAppendNewline: Yes StripTrailingWhitespace: Yes BuildType: Package PackageUseDevtools: Yes PackageInstallArgs: --no-multiarch --with-keep.source PackageRoxygenize: rd,collate,namespace ================================================ FILE: docs/404.html ================================================ Page not found (404) • d3r

Page not found (404)

Content not found. Please use links in the navbar.

Developed by Mike Bostock, Kent Russell, Gregor Aisch, Adam Pearce.

Site built with pkgdown 2.0.7.

================================================ FILE: docs/CONDUCT.html ================================================ Contributor Code of Conduct • d3r

Contributor Code of Conduct

As contributors and maintainers of this project, we pledge to respect all people who contribute through reporting issues, posting feature requests, updating documentation, submitting pull requests or patches, and other activities.

We are committed to making participation in this project a harassment-free experience for everyone, regardless of level of experience, gender, gender identity and expression, sexual orientation, disability, personal appearance, body size, race, ethnicity, age, or religion.

Examples of unacceptable behavior by participants include the use of sexual language or imagery, derogatory comments or personal attacks, trolling, public or private harassment, insults, or other unprofessional conduct.

Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct. Project maintainers who do not follow the Code of Conduct may be removed from the project team.

Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by opening an issue or contacting one or more of the project maintainers.

This Code of Conduct is adapted from the Contributor Covenant (http:contributor-covenant.org), version 1.0.0, available at http://contributor-covenant.org/version/1/0/0/

Developed by Mike Bostock, Kent Russell, Gregor Aisch, Adam Pearce.

Site built with pkgdown 2.0.7.

================================================ FILE: docs/LICENSE-text.html ================================================ License • d3r

License

YEAR: 2017
COPYRIGHT HOLDER: Kenton Russell
ORGANIZATION: Kenton Russell

Developed by Mike Bostock, Kent Russell, Gregor Aisch, Adam Pearce.

Site built with pkgdown 2.0.7.

================================================ FILE: docs/authors.html ================================================ Authors and Citation • d3r

Authors

  • Mike Bostock. Author, copyright holder.
    d3.js library in htmlwidgets/lib, http://d3js.org

  • Kent Russell. Author, maintainer, copyright holder.
    R interface

  • Gregor Aisch. Author, copyright holder.
    d3-jetpack creator, https://github.com/gka/d3-jetpack

  • Adam Pearce. Author.
    core contributor to d3-jetpack

  • Ben Ortiz. Contributor.

Citation

Source: DESCRIPTION

Bostock M, Russell K, Aisch G, Pearce A (2023). d3r: 'd3.js' Utilities for R. R package version 1.1.0, https://github.com/timelyportfolio/d3r. 

@Manual{,
  title = {d3r: 'd3.js' Utilities for R},
  author = {Mike Bostock and Kent Russell and Gregor Aisch and Adam Pearce},
  year = {2023},
  note = {R package version 1.1.0},
  url = {https://github.com/timelyportfolio/d3r},
}

Developed by Mike Bostock, Kent Russell, Gregor Aisch, Adam Pearce.

Site built with pkgdown 2.0.7.

================================================ FILE: docs/bootstrap-toc.css ================================================ /*! * Bootstrap Table of Contents v0.4.1 (http://afeld.github.io/bootstrap-toc/) * Copyright 2015 Aidan Feldman * Licensed under MIT (https://github.com/afeld/bootstrap-toc/blob/gh-pages/LICENSE.md) */ /* modified from https://github.com/twbs/bootstrap/blob/94b4076dd2efba9af71f0b18d4ee4b163aa9e0dd/docs/assets/css/src/docs.css#L548-L601 */ /* All levels of nav */ nav[data-toggle='toc'] .nav > li > a { display: block; padding: 4px 20px; font-size: 13px; font-weight: 500; color: #767676; } nav[data-toggle='toc'] .nav > li > a:hover, nav[data-toggle='toc'] .nav > li > a:focus { padding-left: 19px; color: #563d7c; text-decoration: none; background-color: transparent; border-left: 1px solid #563d7c; } nav[data-toggle='toc'] .nav > .active > a, nav[data-toggle='toc'] .nav > .active:hover > a, nav[data-toggle='toc'] .nav > .active:focus > a { padding-left: 18px; font-weight: bold; color: #563d7c; background-color: transparent; border-left: 2px solid #563d7c; } /* Nav: second level (shown on .active) */ nav[data-toggle='toc'] .nav .nav { display: none; /* Hide by default, but at >768px, show it */ padding-bottom: 10px; } nav[data-toggle='toc'] .nav .nav > li > a { padding-top: 1px; padding-bottom: 1px; padding-left: 30px; font-size: 12px; font-weight: normal; } nav[data-toggle='toc'] .nav .nav > li > a:hover, nav[data-toggle='toc'] .nav .nav > li > a:focus { padding-left: 29px; } nav[data-toggle='toc'] .nav .nav > .active > a, nav[data-toggle='toc'] .nav .nav > .active:hover > a, nav[data-toggle='toc'] .nav .nav > .active:focus > a { padding-left: 28px; font-weight: 500; } /* from https://github.com/twbs/bootstrap/blob/e38f066d8c203c3e032da0ff23cd2d6098ee2dd6/docs/assets/css/src/docs.css#L631-L634 */ nav[data-toggle='toc'] .nav > .active > ul { display: block; } ================================================ FILE: docs/bootstrap-toc.js ================================================ /*! * Bootstrap Table of Contents v0.4.1 (http://afeld.github.io/bootstrap-toc/) * Copyright 2015 Aidan Feldman * Licensed under MIT (https://github.com/afeld/bootstrap-toc/blob/gh-pages/LICENSE.md) */ (function() { 'use strict'; window.Toc = { helpers: { // return all matching elements in the set, or their descendants findOrFilter: function($el, selector) { // http://danielnouri.org/notes/2011/03/14/a-jquery-find-that-also-finds-the-root-element/ // http://stackoverflow.com/a/12731439/358804 var $descendants = $el.find(selector); return $el.filter(selector).add($descendants).filter(':not([data-toc-skip])'); }, generateUniqueIdBase: function(el) { var text = $(el).text(); var anchor = text.trim().toLowerCase().replace(/[^A-Za-z0-9]+/g, '-'); return anchor || el.tagName.toLowerCase(); }, generateUniqueId: function(el) { var anchorBase = this.generateUniqueIdBase(el); for (var i = 0; ; i++) { var anchor = anchorBase; if (i > 0) { // add suffix anchor += '-' + i; } // check if ID already exists if (!document.getElementById(anchor)) { return anchor; } } }, generateAnchor: function(el) { if (el.id) { return el.id; } else { var anchor = this.generateUniqueId(el); el.id = anchor; return anchor; } }, createNavList: function() { return $(''); }, createChildNavList: function($parent) { var $childList = this.createNavList(); $parent.append($childList); return $childList; }, generateNavEl: function(anchor, text) { var $a = $(''); $a.attr('href', '#' + anchor); $a.text(text); var $li = $('
  • '); $li.append($a); return $li; }, generateNavItem: function(headingEl) { var anchor = this.generateAnchor(headingEl); var $heading = $(headingEl); var text = $heading.data('toc-text') || $heading.text(); return this.generateNavEl(anchor, text); }, // Find the first heading level (`

    `, then `

    `, etc.) that has more than one element. Defaults to 1 (for `

    `). getTopLevel: function($scope) { for (var i = 1; i <= 6; i++) { var $headings = this.findOrFilter($scope, 'h' + i); if ($headings.length > 1) { return i; } } return 1; }, // returns the elements for the top level, and the next below it getHeadings: function($scope, topLevel) { var topSelector = 'h' + topLevel; var secondaryLevel = topLevel + 1; var secondarySelector = 'h' + secondaryLevel; return this.findOrFilter($scope, topSelector + ',' + secondarySelector); }, getNavLevel: function(el) { return parseInt(el.tagName.charAt(1), 10); }, populateNav: function($topContext, topLevel, $headings) { var $context = $topContext; var $prevNav; var helpers = this; $headings.each(function(i, el) { var $newNav = helpers.generateNavItem(el); var navLevel = helpers.getNavLevel(el); // determine the proper $context if (navLevel === topLevel) { // use top level $context = $topContext; } else if ($prevNav && $context === $topContext) { // create a new level of the tree and switch to it $context = helpers.createChildNavList($prevNav); } // else use the current $context $context.append($newNav); $prevNav = $newNav; }); }, parseOps: function(arg) { var opts; if (arg.jquery) { opts = { $nav: arg }; } else { opts = arg; } opts.$scope = opts.$scope || $(document.body); return opts; } }, // accepts a jQuery object, or an options object init: function(opts) { opts = this.helpers.parseOps(opts); // ensure that the data attribute is in place for styling opts.$nav.attr('data-toggle', 'toc'); var $topContext = this.helpers.createChildNavList(opts.$nav); var topLevel = this.helpers.getTopLevel(opts.$scope); var $headings = this.helpers.getHeadings(opts.$scope, topLevel); this.helpers.populateNav($topContext, topLevel, $headings); } }; $(function() { $('nav[data-toggle="toc"]').each(function(i, el) { var $nav = $(el); Toc.init($nav); }); }); })(); ================================================ FILE: docs/docsearch.css ================================================ /* Docsearch -------------------------------------------------------------- */ /* Source: https://github.com/algolia/docsearch/ License: MIT */ .algolia-autocomplete { display: block; -webkit-box-flex: 1; -ms-flex: 1; flex: 1 } .algolia-autocomplete .ds-dropdown-menu { width: 100%; min-width: none; max-width: none; padding: .75rem 0; background-color: #fff; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, .1); box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .175); } @media (min-width:768px) { .algolia-autocomplete .ds-dropdown-menu { width: 175% } } .algolia-autocomplete .ds-dropdown-menu::before { display: none } .algolia-autocomplete .ds-dropdown-menu [class^=ds-dataset-] { padding: 0; background-color: rgb(255,255,255); border: 0; max-height: 80vh; } .algolia-autocomplete .ds-dropdown-menu .ds-suggestions { margin-top: 0 } .algolia-autocomplete .algolia-docsearch-suggestion { padding: 0; overflow: visible } .algolia-autocomplete .algolia-docsearch-suggestion--category-header { padding: .125rem 1rem; margin-top: 0; font-size: 1.3em; font-weight: 500; color: #00008B; border-bottom: 0 } .algolia-autocomplete .algolia-docsearch-suggestion--wrapper { float: none; padding-top: 0 } .algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column { float: none; width: auto; padding: 0; text-align: left } .algolia-autocomplete .algolia-docsearch-suggestion--content { float: none; width: auto; padding: 0 } .algolia-autocomplete .algolia-docsearch-suggestion--content::before { display: none } .algolia-autocomplete .ds-suggestion:not(:first-child) .algolia-docsearch-suggestion--category-header { padding-top: .75rem; margin-top: .75rem; border-top: 1px solid rgba(0, 0, 0, .1) } .algolia-autocomplete .ds-suggestion .algolia-docsearch-suggestion--subcategory-column { display: block; padding: .1rem 1rem; margin-bottom: 0.1; font-size: 1.0em; font-weight: 400 /* display: none */ } .algolia-autocomplete .algolia-docsearch-suggestion--title { display: block; padding: .25rem 1rem; margin-bottom: 0; font-size: 0.9em; font-weight: 400 } .algolia-autocomplete .algolia-docsearch-suggestion--text { padding: 0 1rem .5rem; margin-top: -.25rem; font-size: 0.8em; font-weight: 400; line-height: 1.25 } .algolia-autocomplete .algolia-docsearch-footer { width: 110px; height: 20px; z-index: 3; margin-top: 10.66667px; float: right; font-size: 0; line-height: 0; } .algolia-autocomplete .algolia-docsearch-footer--logo { background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: 50%; background-size: 100%; overflow: hidden; text-indent: -9000px; width: 100%; height: 100%; display: block; transform: translate(-8px); } .algolia-autocomplete .algolia-docsearch-suggestion--highlight { color: #FF8C00; background: rgba(232, 189, 54, 0.1) } .algolia-autocomplete .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight { box-shadow: inset 0 -2px 0 0 rgba(105, 105, 105, .5) } .algolia-autocomplete .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--content { background-color: rgba(192, 192, 192, .15) } ================================================ FILE: docs/docsearch.js ================================================ $(function() { // register a handler to move the focus to the search bar // upon pressing shift + "/" (i.e. "?") $(document).on('keydown', function(e) { if (e.shiftKey && e.keyCode == 191) { e.preventDefault(); $("#search-input").focus(); } }); $(document).ready(function() { // do keyword highlighting /* modified from https://jsfiddle.net/julmot/bL6bb5oo/ */ var mark = function() { var referrer = document.URL ; var paramKey = "q" ; if (referrer.indexOf("?") !== -1) { var qs = referrer.substr(referrer.indexOf('?') + 1); var qs_noanchor = qs.split('#')[0]; var qsa = qs_noanchor.split('&'); var keyword = ""; for (var i = 0; i < qsa.length; i++) { var currentParam = qsa[i].split('='); if (currentParam.length !== 2) { continue; } if (currentParam[0] == paramKey) { keyword = decodeURIComponent(currentParam[1].replace(/\+/g, "%20")); } } if (keyword !== "") { $(".contents").unmark({ done: function() { $(".contents").mark(keyword); } }); } } }; mark(); }); }); /* Search term highlighting ------------------------------*/ function matchedWords(hit) { var words = []; var hierarchy = hit._highlightResult.hierarchy; // loop to fetch from lvl0, lvl1, etc. for (var idx in hierarchy) { words = words.concat(hierarchy[idx].matchedWords); } var content = hit._highlightResult.content; if (content) { words = words.concat(content.matchedWords); } // return unique words var words_uniq = [...new Set(words)]; return words_uniq; } function updateHitURL(hit) { var words = matchedWords(hit); var url = ""; if (hit.anchor) { url = hit.url_without_anchor + '?q=' + escape(words.join(" ")) + '#' + hit.anchor; } else { url = hit.url + '?q=' + escape(words.join(" ")); } return url; } ================================================ FILE: docs/index.html ================================================ d3.js Utilities for R • d3r

    Installing d3r

    d3r is on CRAN, so install with install.packages("d3r") or for the absolute latest use devtools.

    devtools::install_github("timelyportfolio/d3r")

    d3 Dependency Functions

    d3r makes d3.js dependency injection in R easy with d3_dep_v3(), d3_dep_v4(), d3_dep_v5(), d3_dep_v6(), and the newest d3_dep_v7(). These functions work well with htmltools::tags.

    library(htmltools)
library(d3r)

# check web developer tools to see d3 is available
browsable(
  attachDependencies(
    tagList(),
    d3_dep_v7()
  )
)

# or include directly in a taglist; I prefer this method.
browsable(
  tagList(
    h1("I have d3 version ", span(id="version")),
    tags$script("d3.select('#version').text(d3.version)"),
    d3_dep_v7()
  )
)

    Also, I will commit to keeping d3r up-to-date with d3.js, so you’ll no longer need multiple copies of d3.js for your htmlwidgets. If you are a htmlwidget author, you will no longer need to worry every time d3.js gets a new release. See treebar lines for an example of using d3r with your htmlwidget.

    d3 Hierarchy from data.frame

    Building d3.js hierarchies can be very difficult. d3r::d3_nest() will convert table and data.frame to a nested d3.js hierarchy ready for work with d3-hierarchy.

    d3_nest(as.data.frame(Titanic))

    As another example, let’s go from treemap to d3.js.

    library(treemap)
library(d3r)

d3_nest(
  treemap::random.hierarchical.data(),
  value_cols = "x"
)

    d3 Hierarchy from partykit / rpart

    rpart and similar objects in R are very difficult to convert but make perfect subjects for d3 hierarchical layouts. d3_party helps convert these objects for easy usage with d3.js.

    #devtools::install_github("timelyportfolio/d3treeR")

library(d3treeR)
library(d3r)

# example from ?rpart
data("kyphosis", package="rpart")
rp <-  rpart::rpart(
  Kyphosis ~ Age + Number + Start,
  data = kyphosis
)

# get the json hierarchy
d3_party(tree=rp)

# interactive plot with d3treeR
d3tree2(
  d3_party(tree=rp),
  celltext="description",
  valueField="n"
)

    d3 Network from igraph

    igraph to d3.js network of nodes and links is a very common conversion. d3r::d3_igraph will do this for you.

    library(igraph)
library(d3r)

d3_igraph(igraph::watts.strogatz.game(1, 50, 4, 0.05))

    Todo

    I have a whole lot of ideas. Please let me know yours, and let’s make this package great.

    Code of Conduct

    Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.

    Developed by Mike Bostock, Kent Russell, Gregor Aisch, Adam Pearce.

    Site built with pkgdown 2.0.7.

    ================================================ FILE: docs/news/index.html ================================================ Changelog • d3r

    Changelog

    Source: NEWS.md

    d3r 1.0.0 Unreleased

    d3r 0.9.1 2020-11-20

    d3r 0.9.0 2020-05-25

    • remove use of nest_ in d3_party
    • upgrade d3v5 to 5.16.0

    d3r 0.8.7 2019-08-21

    • work with new and old tidyr syntax
    • upgrade d3v5 to 5.10.0

    d3r 0.8.6 2019-07-23

    d3r 0.8.5 2019-01-29

    d3r 0.8.4 2018-10-24

    d3r 0.8.3 2018-08-04

    • fix extra slash in offline dependencies

    d3r 0.8.2 2018-07-01

    • update d3v5 to 5.5.0
    • add httr to Suggests to resolve CRAN issue

    d3r 0.8.1 2018-04-24

    d3r 0.8.0 2018-03-17

    d3r 0.7.1 2017-11-22

    d3r 0.7.0 2017-10-11

    • update d3v4 to 4.11.0
    • update d3-jetpack to 2.0.9

    d3r 0.6.9 2017-08-21

    Updates

    d3r 0.6.8 2017-08-13

    Updates

    d3r 0.6.7 Unreleased

    API Changes

    • (BREAKING) d3_table weight column is now named value to be consistent with the newest d3-sankey plugin commit.

    • Use unpkg.com for online dependencies

    d3r 0.6.6 2017-06-27

    Updates

    • add d3_table() function to convert R table into list of a nodes data.frame and a links data.frame modelled after example

    d3r 0.6.5 2017-05-21

    Updates

    d3r 0.6.4 2017-04-27

    Bug Fix

    • d3_nest would fail with certain hierarchies that had multiple NA level; fix only takes first na_child since non-first children will be duplicates (see commit)

    d3r 0.6.3 2017-04-18

    Updates

    • update d3v4 to 4.8.0
    • test with development dplyr

    d3r 0.6.2 2017-03-02

    Updates

    • update d3v4 to 4.6.0
    • add d3_v8() convenience function to return V8 context with d3.js loaded

    d3r 0.6.1 2017-02-03

    Updates

    d3r 0.6.0 2016-12-13

    Updates

    • add colname to return value (see commit)

    • improve NA child promotion for deeply nested hierarchies

    API Changes

    • (BREAKING) change id to name (see issue)

    d3r 0.5.0 2016-11-23

    Updates

    API Changes

    • (non-breaking) add offline argument to d3_dep_v3 and d3_dep_v4

    d3r 0.4.2 Unreleased

    • CRAN release

    Developed by Mike Bostock, Kent Russell, Gregor Aisch, Adam Pearce.

    Site built with pkgdown 1.6.1.

    ================================================ FILE: docs/pkgdown.css ================================================ /* Sticky footer */ /** * Basic idea: https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ * Details: https://github.com/philipwalton/solved-by-flexbox/blob/master/assets/css/components/site.css * * .Site -> body > .container * .Site-content -> body > .container .row * .footer -> footer * * Key idea seems to be to ensure that .container and __all its parents__ * have height set to 100% * */ html, body { height: 100%; } body { position: relative; } body > .container { display: flex; height: 100%; flex-direction: column; } body > .container .row { flex: 1 0 auto; } footer { margin-top: 45px; padding: 35px 0 36px; border-top: 1px solid #e5e5e5; color: #666; display: flex; flex-shrink: 0; } footer p { margin-bottom: 0; } footer div { flex: 1; } footer .pkgdown { text-align: right; } footer p { margin-bottom: 0; } img.icon { float: right; } /* Ensure in-page images don't run outside their container */ .contents img { max-width: 100%; height: auto; } /* Fix bug in bootstrap (only seen in firefox) */ summary { display: list-item; } /* Typographic tweaking ---------------------------------*/ .contents .page-header { margin-top: calc(-60px + 1em); } dd { margin-left: 3em; } /* Section anchors ---------------------------------*/ a.anchor { display: none; margin-left: 5px; width: 20px; height: 20px; background-image: url(./link.svg); background-repeat: no-repeat; background-size: 20px 20px; background-position: center center; } h1:hover .anchor, h2:hover .anchor, h3:hover .anchor, h4:hover .anchor, h5:hover .anchor, h6:hover .anchor { display: inline-block; } /* Fixes for fixed navbar --------------------------*/ .contents h1, .contents h2, .contents h3, .contents h4 { padding-top: 60px; margin-top: -40px; } /* Navbar submenu --------------------------*/ .dropdown-submenu { position: relative; } .dropdown-submenu>.dropdown-menu { top: 0; left: 100%; margin-top: -6px; margin-left: -1px; border-radius: 0 6px 6px 6px; } .dropdown-submenu:hover>.dropdown-menu { display: block; } .dropdown-submenu>a:after { display: block; content: " "; float: right; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 5px 0 5px 5px; border-left-color: #cccccc; margin-top: 5px; margin-right: -10px; } .dropdown-submenu:hover>a:after { border-left-color: #ffffff; } .dropdown-submenu.pull-left { float: none; } .dropdown-submenu.pull-left>.dropdown-menu { left: -100%; margin-left: 10px; border-radius: 6px 0 6px 6px; } /* Sidebar --------------------------*/ #pkgdown-sidebar { margin-top: 30px; position: -webkit-sticky; position: sticky; top: 70px; } #pkgdown-sidebar h2 { font-size: 1.5em; margin-top: 1em; } #pkgdown-sidebar h2:first-child { margin-top: 0; } #pkgdown-sidebar .list-unstyled li { margin-bottom: 0.5em; } /* bootstrap-toc tweaks ------------------------------------------------------*/ /* All levels of nav */ nav[data-toggle='toc'] .nav > li > a { padding: 4px 20px 4px 6px; font-size: 1.5rem; font-weight: 400; color: inherit; } nav[data-toggle='toc'] .nav > li > a:hover, nav[data-toggle='toc'] .nav > li > a:focus { padding-left: 5px; color: inherit; border-left: 1px solid #878787; } nav[data-toggle='toc'] .nav > .active > a, nav[data-toggle='toc'] .nav > .active:hover > a, nav[data-toggle='toc'] .nav > .active:focus > a { padding-left: 5px; font-size: 1.5rem; font-weight: 400; color: inherit; border-left: 2px solid #878787; } /* Nav: second level (shown on .active) */ nav[data-toggle='toc'] .nav .nav { display: none; /* Hide by default, but at >768px, show it */ padding-bottom: 10px; } nav[data-toggle='toc'] .nav .nav > li > a { padding-left: 16px; font-size: 1.35rem; } nav[data-toggle='toc'] .nav .nav > li > a:hover, nav[data-toggle='toc'] .nav .nav > li > a:focus { padding-left: 15px; } nav[data-toggle='toc'] .nav .nav > .active > a, nav[data-toggle='toc'] .nav .nav > .active:hover > a, nav[data-toggle='toc'] .nav .nav > .active:focus > a { padding-left: 15px; font-weight: 500; font-size: 1.35rem; } /* orcid ------------------------------------------------------------------- */ .orcid { font-size: 16px; color: #A6CE39; /* margins are required by official ORCID trademark and display guidelines */ margin-left:4px; margin-right:4px; vertical-align: middle; } /* Reference index & topics ----------------------------------------------- */ .ref-index th {font-weight: normal;} .ref-index td {vertical-align: top; min-width: 100px} .ref-index .icon {width: 40px;} .ref-index .alias {width: 40%;} .ref-index-icons .alias {width: calc(40% - 40px);} .ref-index .title {width: 60%;} .ref-arguments th {text-align: right; padding-right: 10px;} .ref-arguments th, .ref-arguments td {vertical-align: top; min-width: 100px} .ref-arguments .name {width: 20%;} .ref-arguments .desc {width: 80%;} /* Nice scrolling for wide elements --------------------------------------- */ table { display: block; overflow: auto; } /* Syntax highlighting ---------------------------------------------------- */ pre, code, pre code { background-color: #f8f8f8; color: #333; } pre, pre code { white-space: pre-wrap; word-break: break-all; overflow-wrap: break-word; } pre { border: 1px solid #eee; } pre .img, pre .r-plt { margin: 5px 0; } pre .img img, pre .r-plt img { background-color: #fff; } code a, pre a { color: #375f84; } a.sourceLine:hover { text-decoration: none; } .fl {color: #1514b5;} .fu {color: #000000;} /* function */ .ch,.st {color: #036a07;} /* string */ .kw {color: #264D66;} /* keyword */ .co {color: #888888;} /* comment */ .error {font-weight: bolder;} .warning {font-weight: bolder;} /* Clipboard --------------------------*/ .hasCopyButton { position: relative; } .btn-copy-ex { position: absolute; right: 0; top: 0; visibility: hidden; } .hasCopyButton:hover button.btn-copy-ex { visibility: visible; } /* headroom.js ------------------------ */ .headroom { will-change: transform; transition: transform 200ms linear; } .headroom--pinned { transform: translateY(0%); } .headroom--unpinned { transform: translateY(-100%); } /* mark.js ----------------------------*/ mark { background-color: rgba(255, 255, 51, 0.5); border-bottom: 2px solid rgba(255, 153, 51, 0.3); padding: 1px; } /* vertical spacing after htmlwidgets */ .html-widget { margin-bottom: 10px; } /* fontawesome ------------------------ */ .fab { font-family: "Font Awesome 5 Brands" !important; } /* don't display links in code chunks when printing */ /* source: https://stackoverflow.com/a/10781533 */ @media print { code a:link:after, code a:visited:after { content: ""; } } /* Section anchors --------------------------------- Added in pandoc 2.11: https://github.com/jgm/pandoc-templates/commit/9904bf71 */ div.csl-bib-body { } div.csl-entry { clear: both; } .hanging-indent div.csl-entry { margin-left:2em; text-indent:-2em; } div.csl-left-margin { min-width:2em; float:left; } div.csl-right-inline { margin-left:2em; padding-left:1em; } div.csl-indent { margin-left: 2em; } ================================================ FILE: docs/pkgdown.js ================================================ /* http://gregfranko.com/blog/jquery-best-practices/ */ (function($) { $(function() { $('.navbar-fixed-top').headroom(); $('body').css('padding-top', $('.navbar').height() + 10); $(window).resize(function(){ $('body').css('padding-top', $('.navbar').height() + 10); }); $('[data-toggle="tooltip"]').tooltip(); var cur_path = paths(location.pathname); var links = $("#navbar ul li a"); var max_length = -1; var pos = -1; for (var i = 0; i < links.length; i++) { if (links[i].getAttribute("href") === "#") continue; // Ignore external links if (links[i].host !== location.host) continue; var nav_path = paths(links[i].pathname); var length = prefix_length(nav_path, cur_path); if (length > max_length) { max_length = length; pos = i; } } // Add class to parent
  • , and enclosing
  • if in dropdown if (pos >= 0) { var menu_anchor = $(links[pos]); menu_anchor.parent().addClass("active"); menu_anchor.closest("li.dropdown").addClass("active"); } }); function paths(pathname) { var pieces = pathname.split("/"); pieces.shift(); // always starts with / var end = pieces[pieces.length - 1]; if (end === "index.html" || end === "") pieces.pop(); return(pieces); } // Returns -1 if not found function prefix_length(needle, haystack) { if (needle.length > haystack.length) return(-1); // Special case for length-0 haystack, since for loop won't run if (haystack.length === 0) { return(needle.length === 0 ? 0 : -1); } for (var i = 0; i < haystack.length; i++) { if (needle[i] != haystack[i]) return(i); } return(haystack.length); } /* Clipboard --------------------------*/ function changeTooltipMessage(element, msg) { var tooltipOriginalTitle=element.getAttribute('data-original-title'); element.setAttribute('data-original-title', msg); $(element).tooltip('show'); element.setAttribute('data-original-title', tooltipOriginalTitle); } if(ClipboardJS.isSupported()) { $(document).ready(function() { var copyButton = ""; $("div.sourceCode").addClass("hasCopyButton"); // Insert copy buttons: $(copyButton).prependTo(".hasCopyButton"); // Initialize tooltips: $('.btn-copy-ex').tooltip({container: 'body'}); // Initialize clipboard: var clipboardBtnCopies = new ClipboardJS('[data-clipboard-copy]', { text: function(trigger) { return trigger.parentNode.textContent.replace(/\n#>[^\n]*/g, ""); } }); clipboardBtnCopies.on('success', function(e) { changeTooltipMessage(e.trigger, 'Copied!'); e.clearSelection(); }); clipboardBtnCopies.on('error', function() { changeTooltipMessage(e.trigger,'Press Ctrl+C or Command+C to copy'); }); }); } })(window.jQuery || window.$) ================================================ FILE: docs/pkgdown.yml ================================================ pandoc: 3.1.8 pkgdown: 2.0.7 pkgdown_sha: ~ articles: {} last_built: 2023-10-02T01:36Z ================================================ FILE: docs/reference/change_to_name.html ================================================ Change Column Name in Children to "name" — change_to_name • d3r

    Change Column Name in Children to "name"

    Source: R/hierarchy.R

    Change Column Name in Children to "name"

    change_to_name(x, column = 1)

    Arguments

    x

    data.frame or data.frame derivative, such as tibble

    column

    column to convert

    Value

    data.frame

    Developed by Mike Bostock, Kent Russell, Gregor Aisch, Adam Pearce.

    Site built with pkgdown 2.0.7.

    ================================================ FILE: docs/reference/d3_dep_jetpack.html ================================================ 'd3.js' Dependency for Version 4 Jetpack — d3_dep_jetpack • d3r

    'd3.js' Dependency for Version 4 Jetpack

    Source: R/dependencies.R

    d3-jetpack is a set of nifty convenience wrappers that speed up your daily work with d3.js. Must be included after d3_dep_v4(). Learn more by reading d3-jetpack or by watching this YouTube.

    d3_dep_jetpack(offline = TRUE)

    Arguments

    offline

    logical to specify whether to use a local copy of d3.js (TRUE) or use cdn (FALSE)

    See also

    Other 'd3' dependency functions: d3_dep_v3(), d3_dep_v4(), d3_dep_v5(), d3_dep_v6(), d3_dep_v7()

    Examples

    if (FALSE) {

library(d3r)
library(htmltools)

tl <- tagList(tags$script(HTML(sprintf(
"
var x = 5;

var svg = d3.select('body')
    .append('svg');

svg.append('rect')
    .at({
        x: 100,
        y: 100,
        width: 100,
        height: 100
    })
    .st({
        fill: 'blue',
        stroke: 'purple'
    });
"
))), d3_dep_v4(), d3_dep_jetpack())
browsable(tl)



tl <- tagList(tags$script(HTML(sprintf(
 "
 var svg = d3.select('body')
     .append('svg');

 test_data = [{x: 250, y: 250}, {x: 300, y: 300}, {x: 300, y: 100}];

 svg.appendMany(test_data, 'circle')
     .at({
         cx: function(d){return d.x},
         cy: function(d){return d.y},
         r: 50
     })
     .st({
         fill: 'purple',
         stroke: 'blue'
     });
 "
))), d3_dep_v4(), d3_dep_jetpack())

browsable(tl)

}

    Developed by Mike Bostock, Kent Russell, Gregor Aisch, Adam Pearce.

    Site built with pkgdown 2.0.7.

    ================================================ FILE: docs/reference/d3_dep_v3.html ================================================ 'd3.js' Dependency for Version 3 — d3_dep_v3 • d3r

    'd3.js' Dependency for Version 3

    Source: R/dependencies.R

    'd3.js' Dependency for Version 3

    d3_dep_v3(offline = TRUE)

    Arguments

    offline

    logical to specify whether to use a local copy of d3.js (TRUE) or use cdn (FALSE)

    See also

    d3_dep_v7, d3_dep_v6, d3_dep_v5, d3_dep_v4, and d3_dep_jetpack.

    Other 'd3' dependency functions: d3_dep_jetpack(), d3_dep_v4(), d3_dep_v5(), d3_dep_v6(), d3_dep_v7()

    Examples

    library(d3r)
library(htmltools)
#> Warning: package 'htmltools' was built under R version 4.1.3

tagList(d3_dep_v3())
#>

    Developed by Mike Bostock, Kent Russell, Gregor Aisch, Adam Pearce.

    Site built with pkgdown 2.0.7.

    ================================================ FILE: docs/reference/d3_dep_v4.html ================================================ 'd3.js' Dependency for Version 4 — d3_dep_v4 • d3r

    'd3.js' Dependency for Version 4

    Source: R/dependencies.R

    'd3.js' Dependency for Version 4

    d3_dep_v4(offline = TRUE)

    Arguments

    offline

    logical to specify whether to use a local copy of d3.js (TRUE) or use cdn (FALSE)

    See also

    d3_dep_v7, d3_dep_v6, d3_dep_v5, d3_dep_v3, and d3_dep_jetpack.

    Other 'd3' dependency functions: d3_dep_jetpack(), d3_dep_v3(), d3_dep_v5(), d3_dep_v6(), d3_dep_v7()

    Examples

    library(d3r)
library(htmltools)

tagList(d3_dep_v4())
#>

    Developed by Mike Bostock, Kent Russell, Gregor Aisch, Adam Pearce.

    Site built with pkgdown 2.0.7.

    ================================================ FILE: docs/reference/d3_dep_v5.html ================================================ 'd3.js' Dependency for Version 5 — d3_dep_v5 • d3r

    'd3.js' Dependency for Version 5

    Source: R/dependencies.R

    'd3.js' Dependency for Version 5

    d3_dep_v5(offline = TRUE)

    Arguments

    offline

    logical to specify whether to use a local copy of d3.js (TRUE) or use cdn (FALSE)

    See also

    d3_dep_v7, d3_dep_v6, d3_dep_v4, d3_dep_v3, and d3_dep_jetpack.

    Other 'd3' dependency functions: d3_dep_jetpack(), d3_dep_v3(), d3_dep_v4(), d3_dep_v6(), d3_dep_v7()

    Examples

    library(d3r)
library(htmltools)

tagList(d3_dep_v5())
#>

    Developed by Mike Bostock, Kent Russell, Gregor Aisch, Adam Pearce.

    Site built with pkgdown 2.0.7.

    ================================================ FILE: docs/reference/d3_dep_v6.html ================================================ 'd3.js' Dependency for Version 6 — d3_dep_v6 • d3r

    'd3.js' Dependency for Version 6

    Source: R/dependencies.R

    'd3.js' Dependency for Version 6

    d3_dep_v6(offline = TRUE)

    Arguments

    offline

    logical to specify whether to use a local copy of d3.js (TRUE) or use cdn (FALSE)

    See also

    d3_dep_v7, d3_dep_v5, d3_dep_v4, d3_dep_v3, and d3_dep_jetpack.

    Other 'd3' dependency functions: d3_dep_jetpack(), d3_dep_v3(), d3_dep_v4(), d3_dep_v5(), d3_dep_v7()

    Examples

    library(d3r)
library(htmltools)

tagList(d3_dep_v6())
#>

    Developed by Mike Bostock, Kent Russell, Gregor Aisch, Adam Pearce.

    Site built with pkgdown 2.0.7.

    ================================================ FILE: docs/reference/d3_dep_v7.html ================================================ 'd3.js' Dependency for Version 7 — d3_dep_v7 • d3r

    'd3.js' Dependency for Version 7

    Source: R/dependencies.R

    'd3.js' Dependency for Version 7

    d3_dep_v7(offline = TRUE)

    Arguments

    offline

    logical to specify whether to use a local copy of d3.js (TRUE) or use cdn (FALSE)

    See also

    d3_dep_v6, d3_dep_v5, d3_dep_v4, d3_dep_v3, and d3_dep_jetpack.

    Other 'd3' dependency functions: d3_dep_jetpack(), d3_dep_v3(), d3_dep_v4(), d3_dep_v5(), d3_dep_v6()

    Examples

    library(d3r)
library(htmltools)

tagList(d3_dep_v7())
#>

    Developed by Mike Bostock, Kent Russell, Gregor Aisch, Adam Pearce.

    Site built with pkgdown 2.0.7.

    ================================================ FILE: docs/reference/d3_igraph.html ================================================ Convert 'igraph' to 'd3.js' — d3_igraph • d3r

    Convert 'igraph' to 'd3.js'

    Source: R/igraph.R

    Convert 'igraph' to 'd3.js'

    d3_igraph(igrf = NULL, json = TRUE)

    Arguments

    igrf

    igraph

    json

    logical to return as JSON

    Value

    list

    Examples

    if (FALSE) {
library(igraph)
library(igraphdata)
library(d3r)

# with random graph
d3r::d3_igraph(igraph::sample_pa(100))

# check case where vertices 0 cols
d3_igraph(igraph::watts.strogatz.game(1, 50, 4, 0.05))

# with karate from igraphdata
#  notice graph attributes are added
data("karate",package="igraphdata")
(karate_d3 <- d3r::d3_igraph(karate))

listviewer::jsonedit(karate_d3)

data("kite",package="igraphdata")
listviewer::jsonedit(d3_igraph(kite))
}

    Developed by Mike Bostock, Kent Russell, Gregor Aisch, Adam Pearce.

    Site built with pkgdown 2.0.7.

    ================================================ FILE: docs/reference/d3_json.html ================================================ Create 'JSON' that 'd3.js' Expects — d3_json • d3r

    Create 'JSON' that 'd3.js' Expects

    Source: R/json.R

    Create 'JSON' that 'd3.js' Expects

    d3_json(x = NULL, strip = TRUE)

    Arguments

    x

    data, usually in the form of data.frame or list

    strip

    logical to remove outer array. Use strip=TRUE for hierarchies from d3_nest

    Value

    string of 'JSON' data

    Developed by Mike Bostock, Kent Russell, Gregor Aisch, Adam Pearce.

    Site built with pkgdown 2.0.7.

    ================================================ FILE: docs/reference/d3_nest.html ================================================ Convert a data.frame to a 'd3.js' Hierarchy — d3_nest • d3r

    Convert a data.frame to a 'd3.js' Hierarchy

    Source: R/hierarchy.R

    Convert a data.frame to a 'd3.js' Hierarchy

    d3_nest(data = NULL, value_cols = character(), root = "root", json = TRUE)

    Arguments

    data

    data.frame or data.frame derivative, such as tibble

    value_cols

    character vector with the names of the columns to use as data

    root

    character name of the root level of the hierarchy

    json

    logical to return as JSON

    Value

    nested data.frame

    Examples

    # convert Titanic to a nested d3 hierarchy

# devtools::install_github("timelyportfolio/d3r")
library(d3r)
library(dplyr)
#> Warning: package 'dplyr' was built under R version 4.1.3
#> 
#> Attaching package: 'dplyr'
#> The following objects are masked from 'package:stats':
#> 
#>     filter, lag
#> The following objects are masked from 'package:base':
#> 
#>     intersect, setdiff, setequal, union

titanic_df <- data.frame(Titanic)
tit_tb <- titanic_df %>%
  select(Class,Age,Survived,Sex,Freq) %>%
  d3_nest(value_cols="Freq", root="titanic")

tit_tb
#> {"children":[{"name":"1st","children":[{"name":"Child","children":[{"name":"No","children":[{"name":"Male","Freq":0,"colname":"Sex"},{"name":"Female","Freq":0,"colname":"Sex"}],"colname":"Survived"},{"name":"Yes","children":[{"name":"Male","Freq":5,"colname":"Sex"},{"name":"Female","Freq":1,"colname":"Sex"}],"colname":"Survived"}],"colname":"Age"},{"name":"Adult","children":[{"name":"No","children":[{"name":"Male","Freq":118,"colname":"Sex"},{"name":"Female","Freq":4,"colname":"Sex"}],"colname":"Survived"},{"name":"Yes","children":[{"name":"Male","Freq":57,"colname":"Sex"},{"name":"Female","Freq":140,"colname":"Sex"}],"colname":"Survived"}],"colname":"Age"}],"colname":"Class"},{"name":"2nd","children":[{"name":"Child","children":[{"name":"No","children":[{"name":"Male","Freq":0,"colname":"Sex"},{"name":"Female","Freq":0,"colname":"Sex"}],"colname":"Survived"},{"name":"Yes","children":[{"name":"Male","Freq":11,"colname":"Sex"},{"name":"Female","Freq":13,"colname":"Sex"}],"colname":"Survived"}],"colname":"Age"},{"name":"Adult","children":[{"name":"No","children":[{"name":"Male","Freq":154,"colname":"Sex"},{"name":"Female","Freq":13,"colname":"Sex"}],"colname":"Survived"},{"name":"Yes","children":[{"name":"Male","Freq":14,"colname":"Sex"},{"name":"Female","Freq":80,"colname":"Sex"}],"colname":"Survived"}],"colname":"Age"}],"colname":"Class"},{"name":"3rd","children":[{"name":"Child","children":[{"name":"No","children":[{"name":"Male","Freq":35,"colname":"Sex"},{"name":"Female","Freq":17,"colname":"Sex"}],"colname":"Survived"},{"name":"Yes","children":[{"name":"Male","Freq":13,"colname":"Sex"},{"name":"Female","Freq":14,"colname":"Sex"}],"colname":"Survived"}],"colname":"Age"},{"name":"Adult","children":[{"name":"No","children":[{"name":"Male","Freq":387,"colname":"Sex"},{"name":"Female","Freq":89,"colname":"Sex"}],"colname":"Survived"},{"name":"Yes","children":[{"name":"Male","Freq":75,"colname":"Sex"},{"name":"Female","Freq":76,"colname":"Sex"}],"colname":"Survived"}],"colname":"Age"}],"colname":"Class"},{"name":"Crew","children":[{"name":"Child","children":[{"name":"No","children":[{"name":"Male","Freq":0,"colname":"Sex"},{"name":"Female","Freq":0,"colname":"Sex"}],"colname":"Survived"},{"name":"Yes","children":[{"name":"Male","Freq":0,"colname":"Sex"},{"name":"Female","Freq":0,"colname":"Sex"}],"colname":"Survived"}],"colname":"Age"},{"name":"Adult","children":[{"name":"No","children":[{"name":"Male","Freq":670,"colname":"Sex"},{"name":"Female","Freq":3,"colname":"Sex"}],"colname":"Survived"},{"name":"Yes","children":[{"name":"Male","Freq":192,"colname":"Sex"},{"name":"Female","Freq":20,"colname":"Sex"}],"colname":"Survived"}],"colname":"Age"}],"colname":"Class"}],"name":"titanic"} 

# see as tibble
titanic_df %>%
  select(Class,Age,Survived,Sex,Freq) %>%
  d3_nest(value_cols="Freq", root="titanic", json=FALSE)
#> # A tibble: 1 x 2
#>   children         name   
#>   <list>           <chr>  
#> 1 <tibble [4 x 3]> titanic

# see the structure with listviewer
tit_tb %>%
  listviewer::jsonedit()

    
if (FALSE) {
  library(treemap)
  library(d3r)
  library(dplyr)
  library(tidyr)

  treemap::random.hierarchical.data() %>%
    d3_nest(value_cols = "x")

  # use example from ?treemap
  data(GNI2014)
  treemap(
    GNI2014,
    index=c("continent", "iso3"),
    vSize="population",
    vColor="GNI",
    type="value",
    draw=FALSE
  ) %>%
    {.$tm} %>%
    select(continent,iso3,color,vSize) %>%
    d3_nest(value_cols = c("color", "vSize"))
}

    Developed by Mike Bostock, Kent Russell, Gregor Aisch, Adam Pearce.

    Site built with pkgdown 2.0.7.

    ================================================ FILE: docs/reference/d3_party.html ================================================ Convert partykit to d3.js hierarchy — d3_party • d3r

    Convert partykit to d3.js hierarchy

    Source: R/party.R

    This thing is not even close to being done, so please help with ideas and contributions.

    d3_party(tree = NULL, json = TRUE)

    Arguments

    tree

    partykit object to be converted
    json

    logical to return list or json

    Value

    list or json depending on json arg

    Examples

    if (FALSE) {

  library(d3r)
  # from ?rpart
  data("kyphosis", package="rpart")
  d3_party(
    rpart::rpart(Kyphosis ~ Age + Number + Start, data = kyphosis)
  )

  # if you want the list instead of json
  d3_party(
    rpart::rpart(Kyphosis ~ Age + Number + Start, data = kyphosis),
    json = FALSE
  )

  # with ctree instead of rpart
  #  using example from ?ctree
  d3_party(partykit::ctree(Species ~ .,data = iris))


  #devtools::install_github("timelyportfolio/d3treeR")

  library(d3treeR)

  d3tree2(
    d3_party(
      rpart::rpart(Kyphosis ~ Age + Number + Start, data = kyphosis)
    ),
    celltext = "rule",
    valueField = "n"
  )

}

    Developed by Mike Bostock, Kent Russell, Gregor Aisch, Adam Pearce.

    Site built with pkgdown 1.6.1.

    ================================================ FILE: docs/reference/d3_table.html ================================================ Converts Table to 'd3' Nodes and Links — d3_table • d3r

    Converts Table to 'd3' Nodes and Links

    Source: R/table.R

    Converts Table to 'd3' Nodes and Links

    d3_table(tB = NULL, vars = NULL, agg = "Freq")

    Arguments

    tB

    table to convert
    vars

    character vector of column names
    agg

    character column name of aggregated value

    Value

    list of two data.frames - one for nodes and one for links of the network. This structure is helpful when working with networkD3 and visNetwork.

    Examples

    library(d3r)
d3_table(Titanic, c("Class","Sex"))

    #> $nodes
#>      name value
#> 1     1st   325
#> 2     2nd   285
#> 3     3rd   706
#> 4    Crew   885
#> 5    Male  1731
#> 6  Female   470
#> 7 Titanic  2201
#> 
#> $links
#>    source target value
#> 1       0      4   180
#> 2       1      4   179
#> 3       2      4   510
#> 4       3      4   862
#> 5       0      5   145
#> 6       1      5   106
#> 7       2      5   196
#> 8       3      5    23
#> 9       6      0   325
#> 10      6      1   285
#> 11      6      2   706
#> 12      6      3   885
#>

    Developed by Mike Bostock, Kent Russell, Gregor Aisch, Adam Pearce.

    Site built with pkgdown 1.6.1.

    ================================================ FILE: docs/reference/d3_v8.html ================================================ Create V8 Context with D3 — d3_v8 • d3r

    Create V8 Context with D3

    Source: R/v8.R

    Create V8 Context with D3

    d3_v8(...)

    Arguments

    ...

    arguments passed to v8()

    Value

    v8 context with d3.js loaded and available as d3

    Examples

    if (FALSE) {

# to do this all in R, please see ggraph
# https://github.com/thomasp85/ggraph
# by Thomas Lin Pedersen
library(d3r)

# make a simple data.frame of US state data
states <- data.frame(
  region = as.character(state.region),
  state = as.character(state.abb),
  population = state.x77[,"Population"],
  stringsAsFactors = FALSE
)

# use d3_nest to get the data.frame in a d3 hierarchy
state_hier <- d3_nest(
  states,
  value_cols = "population"
)

# use d3_v8 to do something useful with d3 and, our state data
ctx <- d3_v8()
ctx$eval(sprintf(
  " var states = %s",
  state_hier
))
ctx$eval(
"
// we assigned the variable states above
//  so now make it a real d3 hierarchy
var root = d3.hierarchy(states);

// sum on population
root.sum(function(d) {return d.population ? d.population : 0});


// use d3 to circle pack or state hierarchy
d3.pack()(root);

// get something we can convert into a data.frame in R
var states_packed = [];
root.each(function(d) {
  states_packed.push({
    name: d.data.name,
    radius: d.r,
    x: d.x,
    y: d.y
  });
});
"
)

# now get states_packed from our context
#  to plot in R
states_packed <- ctx$get("states_packed")
opar <- par(no.readonly=TRUE)
# make it square
par(pty="s")
symbols(
  states_packed$x,
  states_packed$y,
  states_packed$radius,
  inches=FALSE,
  asp=1
)
text(y~x, data=states_packed, labels=states_packed$name)
# return to original par before we made it square
par(opar)

# d3.quadtree example

library(d3r)

x = runif(100)
y = runif(100)

ctx <- d3_v8()
# assign pts as array of pts in V8
ctx$assign("pts", matrix(c(x,y),ncol=2,byrow=TRUE))
# use d3.quadtree() to plot rects
ctx$eval(
  "
  var d3q = d3.quadtree()
  .addAll(pts);
  // nodes function from https://bl.ocks.org/mbostock/4343214
  function nodes(quadtree) {
  var nodes = [];
  quadtree.visit(function(node, x0, y0, x1, y1) {
  nodes.push({x0:x0, y0:y0, x1: x1, y1: y1})
  });
  return nodes;
  }
  "
)

nodes <- ctx$get("nodes(d3q)", simplifyVector = FALSE)
# draw points
opar <- par(no.readonly=TRUE)
# make it square
par(pty="s")
plot(y~x)
# draw quadtree rects
rect(
  lapply(nodes,function(x){x$x0}),
  lapply(nodes,function(x){x$y0}),
  lapply(nodes,function(x){x$x1}),
  lapply(nodes,function(x){x$y1})
)
par(opar)
}

    Developed by Mike Bostock, Kent Russell, Gregor Aisch, Adam Pearce.

    Site built with pkgdown 1.6.1.

    ================================================ FILE: docs/reference/index.html ================================================ Function reference • d3r

    Reference

    All functions

    change_to_name()

    Change Column Name in Children to "name"

    d3_dep_jetpack()

    'd3.js' Dependency for Version 4 Jetpack

    d3_dep_v3()

    'd3.js' Dependency for Version 3

    d3_dep_v4()

    'd3.js' Dependency for Version 4

    d3_dep_v5()

    'd3.js' Dependency for Version 5

    d3_dep_v6()

    'd3.js' Dependency for Version 6

    d3_dep_v7()

    'd3.js' Dependency for Version 7

    d3_igraph()

    Convert 'igraph' to 'd3.js'

    d3_json()

    Create 'JSON' that 'd3.js' Expects

    d3_nest()

    Convert a data.frame to a 'd3.js' Hierarchy

    d3_party()

    Convert partykit to d3.js hierarchy

    d3_table()

    Converts Table to 'd3' Nodes and Links

    d3_v8()

    Create V8 Context with D3

    promote_na()

    Apply `promote_na` to All Rows

    promote_na_one()

    Promote NA to Top Level

    Developed by Mike Bostock, Kent Russell, Gregor Aisch, Adam Pearce.

    Site built with pkgdown 2.0.7.

    ================================================ FILE: docs/reference/libs/htmlwidgets-1.6.1/htmlwidgets.js ================================================ (function() { // If window.HTMLWidgets is already defined, then use it; otherwise create a // new object. This allows preceding code to set options that affect the // initialization process (though none currently exist). window.HTMLWidgets = window.HTMLWidgets || {}; // See if we're running in a viewer pane. If not, we're in a web browser. var viewerMode = window.HTMLWidgets.viewerMode = /\bviewer_pane=1\b/.test(window.location); // See if we're running in Shiny mode. If not, it's a static document. // Note that static widgets can appear in both Shiny and static modes, but // obviously, Shiny widgets can only appear in Shiny apps/documents. var shinyMode = window.HTMLWidgets.shinyMode = typeof(window.Shiny) !== "undefined" && !!window.Shiny.outputBindings; // We can't count on jQuery being available, so we implement our own // version if necessary. function querySelectorAll(scope, selector) { if (typeof(jQuery) !== "undefined" && scope instanceof jQuery) { return scope.find(selector); } if (scope.querySelectorAll) { return scope.querySelectorAll(selector); } } function asArray(value) { if (value === null) return []; if ($.isArray(value)) return value; return [value]; } // Implement jQuery's extend function extend(target /*, ... */) { if (arguments.length == 1) { return target; } for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var prop in source) { if (source.hasOwnProperty(prop)) { target[prop] = source[prop]; } } } return target; } // IE8 doesn't support Array.forEach. function forEach(values, callback, thisArg) { if (values.forEach) { values.forEach(callback, thisArg); } else { for (var i = 0; i < values.length; i++) { callback.call(thisArg, values[i], i, values); } } } // Replaces the specified method with the return value of funcSource. // // Note that funcSource should not BE the new method, it should be a function // that RETURNS the new method. funcSource receives a single argument that is // the overridden method, it can be called from the new method. The overridden // method can be called like a regular function, it has the target permanently // bound to it so "this" will work correctly. function overrideMethod(target, methodName, funcSource) { var superFunc = target[methodName] || function() {}; var superFuncBound = function() { return superFunc.apply(target, arguments); }; target[methodName] = funcSource(superFuncBound); } // Add a method to delegator that, when invoked, calls // delegatee.methodName. If there is no such method on // the delegatee, but there was one on delegator before // delegateMethod was called, then the original version // is invoked instead. // For example: // // var a = { // method1: function() { console.log('a1'); } // method2: function() { console.log('a2'); } // }; // var b = { // method1: function() { console.log('b1'); } // }; // delegateMethod(a, b, "method1"); // delegateMethod(a, b, "method2"); // a.method1(); // a.method2(); // // The output would be "b1", "a2". function delegateMethod(delegator, delegatee, methodName) { var inherited = delegator[methodName]; delegator[methodName] = function() { var target = delegatee; var method = delegatee[methodName]; // The method doesn't exist on the delegatee. Instead, // call the method on the delegator, if it exists. if (!method) { target = delegator; method = inherited; } if (method) { return method.apply(target, arguments); } }; } // Implement a vague facsimilie of jQuery's data method function elementData(el, name, value) { if (arguments.length == 2) { return el["htmlwidget_data_" + name]; } else if (arguments.length == 3) { el["htmlwidget_data_" + name] = value; return el; } else { throw new Error("Wrong number of arguments for elementData: " + arguments.length); } } // http://stackoverflow.com/questions/3446170/escape-string-for-use-in-javascript-regex function escapeRegExp(str) { return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&"); } function hasClass(el, className) { var re = new RegExp("\\b" + escapeRegExp(className) + "\\b"); return re.test(el.className); } // elements - array (or array-like object) of HTML elements // className - class name to test for // include - if true, only return elements with given className; // if false, only return elements *without* given className function filterByClass(elements, className, include) { var results = []; for (var i = 0; i < elements.length; i++) { if (hasClass(elements[i], className) == include) results.push(elements[i]); } return results; } function on(obj, eventName, func) { if (obj.addEventListener) { obj.addEventListener(eventName, func, false); } else if (obj.attachEvent) { obj.attachEvent(eventName, func); } } function off(obj, eventName, func) { if (obj.removeEventListener) obj.removeEventListener(eventName, func, false); else if (obj.detachEvent) { obj.detachEvent(eventName, func); } } // Translate array of values to top/right/bottom/left, as usual with // the "padding" CSS property // https://developer.mozilla.org/en-US/docs/Web/CSS/padding function unpackPadding(value) { if (typeof(value) === "number") value = [value]; if (value.length === 1) { return {top: value[0], right: value[0], bottom: value[0], left: value[0]}; } if (value.length === 2) { return {top: value[0], right: value[1], bottom: value[0], left: value[1]}; } if (value.length === 3) { return {top: value[0], right: value[1], bottom: value[2], left: value[1]}; } if (value.length === 4) { return {top: value[0], right: value[1], bottom: value[2], left: value[3]}; } } // Convert an unpacked padding object to a CSS value function paddingToCss(paddingObj) { return paddingObj.top + "px " + paddingObj.right + "px " + paddingObj.bottom + "px " + paddingObj.left + "px"; } // Makes a number suitable for CSS function px(x) { if (typeof(x) === "number") return x + "px"; else return x; } // Retrieves runtime widget sizing information for an element. // The return value is either null, or an object with fill, padding, // defaultWidth, defaultHeight fields. function sizingPolicy(el) { var sizingEl = document.querySelector("script[data-for='" + el.id + "'][type='application/htmlwidget-sizing']"); if (!sizingEl) return null; var sp = JSON.parse(sizingEl.textContent || sizingEl.text || "{}"); if (viewerMode) { return sp.viewer; } else { return sp.browser; } } // @param tasks Array of strings (or falsy value, in which case no-op). // Each element must be a valid JavaScript expression that yields a // function. Or, can be an array of objects with "code" and "data" // properties; in this case, the "code" property should be a string // of JS that's an expr that yields a function, and "data" should be // an object that will be added as an additional argument when that // function is called. // @param target The object that will be "this" for each function // execution. // @param args Array of arguments to be passed to the functions. (The // same arguments will be passed to all functions.) function evalAndRun(tasks, target, args) { if (tasks) { forEach(tasks, function(task) { var theseArgs = args; if (typeof(task) === "object") { theseArgs = theseArgs.concat([task.data]); task = task.code; } var taskFunc = tryEval(task); if (typeof(taskFunc) !== "function") { throw new Error("Task must be a function! Source:\n" + task); } taskFunc.apply(target, theseArgs); }); } } // Attempt eval() both with and without enclosing in parentheses. // Note that enclosing coerces a function declaration into // an expression that eval() can parse // (otherwise, a SyntaxError is thrown) function tryEval(code) { var result = null; try { result = eval("(" + code + ")"); } catch(error) { if (!(error instanceof SyntaxError)) { throw error; } try { result = eval(code); } catch(e) { if (e instanceof SyntaxError) { throw error; } else { throw e; } } } return result; } function initSizing(el) { var sizing = sizingPolicy(el); if (!sizing) return; var cel = document.getElementById("htmlwidget_container"); if (!cel) return; if (typeof(sizing.padding) !== "undefined") { document.body.style.margin = "0"; document.body.style.padding = paddingToCss(unpackPadding(sizing.padding)); } if (sizing.fill) { document.body.style.overflow = "hidden"; document.body.style.width = "100%"; document.body.style.height = "100%"; document.documentElement.style.width = "100%"; document.documentElement.style.height = "100%"; cel.style.position = "absolute"; var pad = unpackPadding(sizing.padding); cel.style.top = pad.top + "px"; cel.style.right = pad.right + "px"; cel.style.bottom = pad.bottom + "px"; cel.style.left = pad.left + "px"; el.style.width = "100%"; el.style.height = "100%"; return { getWidth: function() { return cel.getBoundingClientRect().width; }, getHeight: function() { return cel.getBoundingClientRect().height; } }; } else { el.style.width = px(sizing.width); el.style.height = px(sizing.height); return { getWidth: function() { return cel.getBoundingClientRect().width; }, getHeight: function() { return cel.getBoundingClientRect().height; } }; } } // Default implementations for methods var defaults = { find: function(scope) { return querySelectorAll(scope, "." + this.name); }, renderError: function(el, err) { var $el = $(el); this.clearError(el); // Add all these error classes, as Shiny does var errClass = "shiny-output-error"; if (err.type !== null) { // use the classes of the error condition as CSS class names errClass = errClass + " " + $.map(asArray(err.type), function(type) { return errClass + "-" + type; }).join(" "); } errClass = errClass + " htmlwidgets-error"; // Is el inline or block? If inline or inline-block, just display:none it // and add an inline error. var display = $el.css("display"); $el.data("restore-display-mode", display); if (display === "inline" || display === "inline-block") { $el.hide(); if (err.message !== "") { var errorSpan = $("").addClass(errClass); errorSpan.text(err.message); $el.after(errorSpan); } } else if (display === "block") { // If block, add an error just after the el, set visibility:none on the // el, and position the error to be on top of the el. // Mark it with a unique ID and CSS class so we can remove it later. $el.css("visibility", "hidden"); if (err.message !== "") { var errorDiv = $("
    ").addClass(errClass).css("position", "absolute") .css("top", el.offsetTop) .css("left", el.offsetLeft) // setting width can push out the page size, forcing otherwise // unnecessary scrollbars to appear and making it impossible for // the element to shrink; so use max-width instead .css("maxWidth", el.offsetWidth) .css("height", el.offsetHeight); errorDiv.text(err.message); $el.after(errorDiv); // Really dumb way to keep the size/position of the error in sync with // the parent element as the window is resized or whatever. var intId = setInterval(function() { if (!errorDiv[0].parentElement) { clearInterval(intId); return; } errorDiv .css("top", el.offsetTop) .css("left", el.offsetLeft) .css("maxWidth", el.offsetWidth) .css("height", el.offsetHeight); }, 500); } } }, clearError: function(el) { var $el = $(el); var display = $el.data("restore-display-mode"); $el.data("restore-display-mode", null); if (display === "inline" || display === "inline-block") { if (display) $el.css("display", display); $(el.nextSibling).filter(".htmlwidgets-error").remove(); } else if (display === "block"){ $el.css("visibility", "inherit"); $(el.nextSibling).filter(".htmlwidgets-error").remove(); } }, sizing: {} }; // Called by widget bindings to register a new type of widget. The definition // object can contain the following properties: // - name (required) - A string indicating the binding name, which will be // used by default as the CSS classname to look for. // - initialize (optional) - A function(el) that will be called once per // widget element; if a value is returned, it will be passed as the third // value to renderValue. // - renderValue (required) - A function(el, data, initValue) that will be // called with data. Static contexts will cause this to be called once per // element; Shiny apps will cause this to be called multiple times per // element, as the data changes. window.HTMLWidgets.widget = function(definition) { if (!definition.name) { throw new Error("Widget must have a name"); } if (!definition.type) { throw new Error("Widget must have a type"); } // Currently we only support output widgets if (definition.type !== "output") { throw new Error("Unrecognized widget type '" + definition.type + "'"); } // TODO: Verify that .name is a valid CSS classname // Support new-style instance-bound definitions. Old-style class-bound // definitions have one widget "object" per widget per type/class of // widget; the renderValue and resize methods on such widget objects // take el and instance arguments, because the widget object can't // store them. New-style instance-bound definitions have one widget // object per widget instance; the definition that's passed in doesn't // provide renderValue or resize methods at all, just the single method // factory(el, width, height) // which returns an object that has renderValue(x) and resize(w, h). // This enables a far more natural programming style for the widget // author, who can store per-instance state using either OO-style // instance fields or functional-style closure variables (I guess this // is in contrast to what can only be called C-style pseudo-OO which is // what we required before). if (definition.factory) { definition = createLegacyDefinitionAdapter(definition); } if (!definition.renderValue) { throw new Error("Widget must have a renderValue function"); } // For static rendering (non-Shiny), use a simple widget registration // scheme. We also use this scheme for Shiny apps/documents that also // contain static widgets. window.HTMLWidgets.widgets = window.HTMLWidgets.widgets || []; // Merge defaults into the definition; don't mutate the original definition. var staticBinding = extend({}, defaults, definition); overrideMethod(staticBinding, "find", function(superfunc) { return function(scope) { var results = superfunc(scope); // Filter out Shiny outputs, we only want the static kind return filterByClass(results, "html-widget-output", false); }; }); window.HTMLWidgets.widgets.push(staticBinding); if (shinyMode) { // Shiny is running. Register the definition with an output binding. // The definition itself will not be the output binding, instead // we will make an output binding object that delegates to the // definition. This is because we foolishly used the same method // name (renderValue) for htmlwidgets definition and Shiny bindings // but they actually have quite different semantics (the Shiny // bindings receive data that includes lots of metadata that it // strips off before calling htmlwidgets renderValue). We can't // just ignore the difference because in some widgets it's helpful // to call this.renderValue() from inside of resize(), and if // we're not delegating, then that call will go to the Shiny // version instead of the htmlwidgets version. // Merge defaults with definition, without mutating either. var bindingDef = extend({}, defaults, definition); // This object will be our actual Shiny binding. var shinyBinding = new Shiny.OutputBinding(); // With a few exceptions, we'll want to simply use the bindingDef's // version of methods if they are available, otherwise fall back to // Shiny's defaults. NOTE: If Shiny's output bindings gain additional // methods in the future, and we want them to be overrideable by // HTMLWidget binding definitions, then we'll need to add them to this // list. delegateMethod(shinyBinding, bindingDef, "getId"); delegateMethod(shinyBinding, bindingDef, "onValueChange"); delegateMethod(shinyBinding, bindingDef, "onValueError"); delegateMethod(shinyBinding, bindingDef, "renderError"); delegateMethod(shinyBinding, bindingDef, "clearError"); delegateMethod(shinyBinding, bindingDef, "showProgress"); // The find, renderValue, and resize are handled differently, because we // want to actually decorate the behavior of the bindingDef methods. shinyBinding.find = function(scope) { var results = bindingDef.find(scope); // Only return elements that are Shiny outputs, not static ones var dynamicResults = results.filter(".html-widget-output"); // It's possible that whatever caused Shiny to think there might be // new dynamic outputs, also caused there to be new static outputs. // Since there might be lots of different htmlwidgets bindings, we // schedule execution for later--no need to staticRender multiple // times. if (results.length !== dynamicResults.length) scheduleStaticRender(); return dynamicResults; }; // Wrap renderValue to handle initialization, which unfortunately isn't // supported natively by Shiny at the time of this writing. shinyBinding.renderValue = function(el, data) { Shiny.renderDependencies(data.deps); // Resolve strings marked as javascript literals to objects if (!(data.evals instanceof Array)) data.evals = [data.evals]; for (var i = 0; data.evals && i < data.evals.length; i++) { window.HTMLWidgets.evaluateStringMember(data.x, data.evals[i]); } if (!bindingDef.renderOnNullValue) { if (data.x === null) { el.style.visibility = "hidden"; return; } else { el.style.visibility = "inherit"; } } if (!elementData(el, "initialized")) { initSizing(el); elementData(el, "initialized", true); if (bindingDef.initialize) { var rect = el.getBoundingClientRect(); var result = bindingDef.initialize(el, rect.width, rect.height); elementData(el, "init_result", result); } } bindingDef.renderValue(el, data.x, elementData(el, "init_result")); evalAndRun(data.jsHooks.render, elementData(el, "init_result"), [el, data.x]); }; // Only override resize if bindingDef implements it if (bindingDef.resize) { shinyBinding.resize = function(el, width, height) { // Shiny can call resize before initialize/renderValue have been // called, which doesn't make sense for widgets. if (elementData(el, "initialized")) { bindingDef.resize(el, width, height, elementData(el, "init_result")); } }; } Shiny.outputBindings.register(shinyBinding, bindingDef.name); } }; var scheduleStaticRenderTimerId = null; function scheduleStaticRender() { if (!scheduleStaticRenderTimerId) { scheduleStaticRenderTimerId = setTimeout(function() { scheduleStaticRenderTimerId = null; window.HTMLWidgets.staticRender(); }, 1); } } // Render static widgets after the document finishes loading // Statically render all elements that are of this widget's class window.HTMLWidgets.staticRender = function() { var bindings = window.HTMLWidgets.widgets || []; forEach(bindings, function(binding) { var matches = binding.find(document.documentElement); forEach(matches, function(el) { var sizeObj = initSizing(el, binding); var getSize = function(el) { if (sizeObj) { return {w: sizeObj.getWidth(), h: sizeObj.getHeight()} } else { var rect = el.getBoundingClientRect(); return {w: rect.width, h: rect.height} } }; if (hasClass(el, "html-widget-static-bound")) return; el.className = el.className + " html-widget-static-bound"; var initResult; if (binding.initialize) { var size = getSize(el); initResult = binding.initialize(el, size.w, size.h); elementData(el, "init_result", initResult); } if (binding.resize) { var lastSize = getSize(el); var resizeHandler = function(e) { var size = getSize(el); if (size.w === 0 && size.h === 0) return; if (size.w === lastSize.w && size.h === lastSize.h) return; lastSize = size; binding.resize(el, size.w, size.h, initResult); }; on(window, "resize", resizeHandler); // This is needed for cases where we're running in a Shiny // app, but the widget itself is not a Shiny output, but // rather a simple static widget. One example of this is // an rmarkdown document that has runtime:shiny and widget // that isn't in a render function. Shiny only knows to // call resize handlers for Shiny outputs, not for static // widgets, so we do it ourselves. if (window.jQuery) { window.jQuery(document).on( "shown.htmlwidgets shown.bs.tab.htmlwidgets shown.bs.collapse.htmlwidgets", resizeHandler ); window.jQuery(document).on( "hidden.htmlwidgets hidden.bs.tab.htmlwidgets hidden.bs.collapse.htmlwidgets", resizeHandler ); } // This is needed for the specific case of ioslides, which // flips slides between display:none and display:block. // Ideally we would not have to have ioslide-specific code // here, but rather have ioslides raise a generic event, // but the rmarkdown package just went to CRAN so the // window to getting that fixed may be long. if (window.addEventListener) { // It's OK to limit this to window.addEventListener // browsers because ioslides itself only supports // such browsers. on(document, "slideenter", resizeHandler); on(document, "slideleave", resizeHandler); } } var scriptData = document.querySelector("script[data-for='" + el.id + "'][type='application/json']"); if (scriptData) { var data = JSON.parse(scriptData.textContent || scriptData.text); // Resolve strings marked as javascript literals to objects if (!(data.evals instanceof Array)) data.evals = [data.evals]; for (var k = 0; data.evals && k < data.evals.length; k++) { window.HTMLWidgets.evaluateStringMember(data.x, data.evals[k]); } binding.renderValue(el, data.x, initResult); evalAndRun(data.jsHooks.render, initResult, [el, data.x]); } }); }); invokePostRenderHandlers(); } function has_jQuery3() { if (!window.jQuery) { return false; } var $version = window.jQuery.fn.jquery; var $major_version = parseInt($version.split(".")[0]); return $major_version >= 3; } /* / Shiny 1.4 bumped jQuery from 1.x to 3.x which means jQuery's / on-ready handler (i.e., $(fn)) is now asyncronous (i.e., it now / really means $(setTimeout(fn)). / https://jquery.com/upgrade-guide/3.0/#breaking-change-document-ready-handlers-are-now-asynchronous / / Since Shiny uses $() to schedule initShiny, shiny>=1.4 calls initShiny / one tick later than it did before, which means staticRender() is / called renderValue() earlier than (advanced) widget authors might be expecting. / https://github.com/rstudio/shiny/issues/2630 / / For a concrete example, leaflet has some methods (e.g., updateBounds) / which reference Shiny methods registered in initShiny (e.g., setInputValue). / Since leaflet is privy to this life-cycle, it knows to use setTimeout() to / delay execution of those methods (until Shiny methods are ready) / https://github.com/rstudio/leaflet/blob/18ec981/javascript/src/index.js#L266-L268 / / Ideally widget authors wouldn't need to use this setTimeout() hack that / leaflet uses to call Shiny methods on a staticRender(). In the long run, / the logic initShiny should be broken up so that method registration happens / right away, but binding happens later. */ function maybeStaticRenderLater() { if (shinyMode && has_jQuery3()) { window.jQuery(window.HTMLWidgets.staticRender); } else { window.HTMLWidgets.staticRender(); } } if (document.addEventListener) { document.addEventListener("DOMContentLoaded", function() { document.removeEventListener("DOMContentLoaded", arguments.callee, false); maybeStaticRenderLater(); }, false); } else if (document.attachEvent) { document.attachEvent("onreadystatechange", function() { if (document.readyState === "complete") { document.detachEvent("onreadystatechange", arguments.callee); maybeStaticRenderLater(); } }); } window.HTMLWidgets.getAttachmentUrl = function(depname, key) { // If no key, default to the first item if (typeof(key) === "undefined") key = 1; var link = document.getElementById(depname + "-" + key + "-attachment"); if (!link) { throw new Error("Attachment " + depname + "/" + key + " not found in document"); } return link.getAttribute("href"); }; window.HTMLWidgets.dataframeToD3 = function(df) { var names = []; var length; for (var name in df) { if (df.hasOwnProperty(name)) names.push(name); if (typeof(df[name]) !== "object" || typeof(df[name].length) === "undefined") { throw new Error("All fields must be arrays"); } else if (typeof(length) !== "undefined" && length !== df[name].length) { throw new Error("All fields must be arrays of the same length"); } length = df[name].length; } var results = []; var item; for (var row = 0; row < length; row++) { item = {}; for (var col = 0; col < names.length; col++) { item[names[col]] = df[names[col]][row]; } results.push(item); } return results; }; window.HTMLWidgets.transposeArray2D = function(array) { if (array.length === 0) return array; var newArray = array[0].map(function(col, i) { return array.map(function(row) { return row[i] }) }); return newArray; }; // Split value at splitChar, but allow splitChar to be escaped // using escapeChar. Any other characters escaped by escapeChar // will be included as usual (including escapeChar itself). function splitWithEscape(value, splitChar, escapeChar) { var results = []; var escapeMode = false; var currentResult = ""; for (var pos = 0; pos < value.length; pos++) { if (!escapeMode) { if (value[pos] === splitChar) { results.push(currentResult); currentResult = ""; } else if (value[pos] === escapeChar) { escapeMode = true; } else { currentResult += value[pos]; } } else { currentResult += value[pos]; escapeMode = false; } } if (currentResult !== "") { results.push(currentResult); } return results; } // Function authored by Yihui/JJ Allaire window.HTMLWidgets.evaluateStringMember = function(o, member) { var parts = splitWithEscape(member, '.', '\\'); for (var i = 0, l = parts.length; i < l; i++) { var part = parts[i]; // part may be a character or 'numeric' member name if (o !== null && typeof o === "object" && part in o) { if (i == (l - 1)) { // if we are at the end of the line then evalulate if (typeof o[part] === "string") o[part] = tryEval(o[part]); } else { // otherwise continue to next embedded object o = o[part]; } } } }; // Retrieve the HTMLWidget instance (i.e. the return value of an // HTMLWidget binding's initialize() or factory() function) // associated with an element, or null if none. window.HTMLWidgets.getInstance = function(el) { return elementData(el, "init_result"); }; // Finds the first element in the scope that matches the selector, // and returns the HTMLWidget instance (i.e. the return value of // an HTMLWidget binding's initialize() or factory() function) // associated with that element, if any. If no element matches the // selector, or the first matching element has no HTMLWidget // instance associated with it, then null is returned. // // The scope argument is optional, and defaults to window.document. window.HTMLWidgets.find = function(scope, selector) { if (arguments.length == 1) { selector = scope; scope = document; } var el = scope.querySelector(selector); if (el === null) { return null; } else { return window.HTMLWidgets.getInstance(el); } }; // Finds all elements in the scope that match the selector, and // returns the HTMLWidget instances (i.e. the return values of // an HTMLWidget binding's initialize() or factory() function) // associated with the elements, in an array. If elements that // match the selector don't have an associated HTMLWidget // instance, the returned array will contain nulls. // // The scope argument is optional, and defaults to window.document. window.HTMLWidgets.findAll = function(scope, selector) { if (arguments.length == 1) { selector = scope; scope = document; } var nodes = scope.querySelectorAll(selector); var results = []; for (var i = 0; i < nodes.length; i++) { results.push(window.HTMLWidgets.getInstance(nodes[i])); } return results; }; var postRenderHandlers = []; function invokePostRenderHandlers() { while (postRenderHandlers.length) { var handler = postRenderHandlers.shift(); if (handler) { handler(); } } } // Register the given callback function to be invoked after the // next time static widgets are rendered. window.HTMLWidgets.addPostRenderHandler = function(callback) { postRenderHandlers.push(callback); }; // Takes a new-style instance-bound definition, and returns an // old-style class-bound definition. This saves us from having // to rewrite all the logic in this file to accomodate both // types of definitions. function createLegacyDefinitionAdapter(defn) { var result = { name: defn.name, type: defn.type, initialize: function(el, width, height) { return defn.factory(el, width, height); }, renderValue: function(el, x, instance) { return instance.renderValue(x); }, resize: function(el, width, height, instance) { return instance.resize(width, height); } }; if (defn.find) result.find = defn.find; if (defn.renderError) result.renderError = defn.renderError; if (defn.clearError) result.clearError = defn.clearError; return result; } })(); ================================================ FILE: docs/reference/libs/jsonedit-binding-3.0.0/jsonedit.js ================================================ HTMLWidgets.widget({ name: 'jsonedit', type: 'output', initialize: function(el, width, height) { return { editor: null } }, renderValue: function(el, x, instance) { // clear out our element in case of dynamic // probably a sloppy way of doing it but easy and dependency-free // feel free to make suggestions el.innerHTML = ""; // create our editor var editor = new JSONEditor( el, x.options, (typeof(x.data)==="string") ? JSON.parse(x.data) : x.data ); // use expando property to store editor for change callback potential instance.editor = editor; }, resize: function(el, width, height, instance) { } }); ================================================ FILE: docs/reference/promote_na.html ================================================ Apply `promote_na` to All Rows — promote_na • d3r

    Apply `promote_na` to All Rows

    Source: R/hierarchy.R

    Apply `promote_na` to All Rows

    promote_na(x)

    Arguments

    x

    data.frame

    Value

    data.frame

    Developed by Mike Bostock, Kent Russell, Gregor Aisch, Adam Pearce.

    Site built with pkgdown 1.6.1.

    ================================================ FILE: docs/reference/promote_na_one.html ================================================ Promote NA to Top Level — promote_na_one • d3r

    Promote NA to Top Level

    Source: R/hierarchy.R

    Promote NA to Top Level

    promote_na_one(x)

    Arguments

    x

    data.frame

    Value

    data.frame

    Developed by Mike Bostock, Kent Russell, Gregor Aisch, Adam Pearce.

    Site built with pkgdown 1.6.1.

    ================================================ FILE: inst/examples/example_d3_annotation.R ================================================ library(d3r) library(htmltools) library(pipeR) d3_ann <- htmlDependency( name = "d3-annotation", version = "1.12.1", src = c(href = "https://unpkg.com/d3-svg-annotation@1.12.1/"), script = "d3-annotation.js", stylesheet = "d3-annotation.css" ) example1 = ' const type = d3.annotationLabel const annotations = [{ note: { label: "Longer text to show text wrapping", title: "Annotations :)" }, //can use x, y directly instead of data data: { date: "18-Sep-09", close: 185.02 }, dy: 137, dx: 162 }] const parseTime = d3.timeParse("%d-%b-%y") const timeFormat = d3.timeFormat("%d-%b-%y") //set domains even though skipped in original example const x = d3.scaleTime() .range([0, 800]) .domain([new Date("2009-09-01"),new Date("2009-09-30")]) const y = d3.scaleLinear() .range([300, 0]) .domain([0,200]) const makeAnnotations = d3.annotation() .editMode(true) .type(type) //accessors & accessorsInverse not needed //if using x, y in annotations JSON .accessors({ x: d => x(parseTime(d.date)), y: d => y(d.close) }) .accessorsInverse({ date: d => timeFormat(x.invert(d.x)), close: d => y.invert(d.y) }) .annotations(annotations) d3.select("svg") .append("g") .attr("class", "annotation-group") .call(makeAnnotations) ' tagList( tag("svg", list(style = 'height:300px; width:800px; background-color:gray50;')), tags$script(HTML(example1)), d3_dep_v4(), d3_ann ) %>>% browsable() # now let's try it with svglite library(svglite) plot(1:10, type="b") rp <- recordPlot() size = dev.size() plt = par("plt") usr = par("usr") s <- svgstring(standalone=FALSE,width = size[1], height=size[2]) replayPlot(rp) dev.off() # this is just to make it render in RStudio library(xml2) svg_xml <- read_xml(as.character(s())) cp_rect <- xml_find_first(svg_xml,"*//clipPath/rect") cp_attr <- lapply( list( x = xml_attr(cp_rect,"x"), y = xml_attr(cp_rect,"y"), height = xml_attr(cp_rect,"height"), width = xml_attr(cp_rect,"width") ), as.numeric ) # drawing with no knowledge of plot from R # using example1 tagList( tags$style(".annotation-note-bg {stroke: none;}"), HTML(s()), tags$script(HTML( sprintf( ' vb = d3.select("svg").attr("viewBox").split(" "); var width = +vb[2]; var height = +vb[3]; var svg = d3.select("svg"); var margins = %s; var usr = %s; var type = d3.annotationLabel; var annotations = [ { note: { label: "Point with x=3, y=3. Drag my points somewhere else.", title: "Annotations :)" }, //can use x, y directly instead of data data: { x: 3, y: 3 }, dy: -40, dx: 20 }, { note: { label: "x(8), y(8)", title: "another point" }, //can use x, y directly instead of data data: { x: 8, y: 8 }, dy: -40, dx: 20 } ] // use clipPath rect for range of plot; multiplying usr * height // did not work on the y limits // but only because I did not research enough // and lazily assume that there will be a clipPath around our plot // and that it will be the first clipPath in our svg // RStudio iframe security does not like following // so I elected to do after commented for this to work /* var cp = d3.select("clipPath rect"); //set domains even though skipped in original example var x = d3.scaleLinear() //.range([width * margins[0], width*margins[1]]) .range([parseFloat(cp.attr("x")), parseFloat(cp.attr("width")) + parseFloat(cp.attr("x"))]) .domain([usr[0], usr[1]]) var y = d3.scaleLinear() //.range([height * margins[3], height * margins[2]]) .range([parseFloat(cp.attr("height")) + parseFloat(cp.attr("y")), +cp.attr("y")]) .domain([usr[0], usr[1]]) */ var cp_attr = %s; var x = d3.scaleLinear() .range([cp_attr.x, cp_attr.width + cp_attr.x]) .domain([usr[0], usr[1]]) var y = d3.scaleLinear() .range([cp_attr.height + cp_attr.y, cp_attr.y]) .domain([usr[0], usr[1]]) var makeAnnotations = d3.annotation() .editMode(true) .type(type) //accessors & accessorsInverse not needed //if using x, y in annotations JSON .accessors({ x: function(d) { return x(d.x) }, y: function(d) { return y(d.y) } }) .accessorsInverse({ x: function(d) { return x.invert(d.x) }, y: function(d) { return y.invert(d.y) } }) .annotations(annotations) svg .append("g") .attr("class", "annotation-group") .call(makeAnnotations) ', jsonlite::toJSON(plt), jsonlite::toJSON(usr), jsonlite::toJSON(cp_attr, auto_unbox=TRUE) ) )), d3_dep_v4(), d3_ann ) %>>% browsable() ================================================ FILE: inst/examples/example_d3_jetpack.R ================================================ \dontrun{ library(d3r) library(htmltools) tl <- tagList(tags$script(HTML(sprintf( " var x = 5; var svg = d3.select('body') .append('svg'); svg.append('rect') .at({ x: 100, y: 100, width: 100, height: 100 }) .st({ fill: 'blue', stroke: 'purple' }); " ))), d3_dep_v4(), d3_dep_jetpack()) browsable(tl) tl <- tagList(tags$script(HTML(sprintf( " var svg = d3.select('body') .append('svg'); test_data = [{x: 250, y: 250}, {x: 300, y: 300}, {x: 300, y: 100}]; svg.appendMany(test_data, 'circle') .at({ cx: function(d){return d.x}, cy: function(d){return d.y}, r: 50 }) .st({ fill: 'purple', stroke: 'blue' }); " ))), d3_dep_v4(), d3_dep_jetpack()) browsable(tl) } ================================================ FILE: inst/examples/example_d3_v8.R ================================================ \dontrun{ # to do this all in R, please see ggraph # https://github.com/thomasp85/ggraph # by Thomas Lin Pedersen library(d3r) # make a simple data.frame of US state data states <- data.frame( region = as.character(state.region), state = as.character(state.abb), population = state.x77[,"Population"], stringsAsFactors = FALSE ) # use d3_nest to get the data.frame in a d3 hierarchy state_hier <- d3_nest( states, value_cols = "population" ) # use d3_v8 to do something useful with d3 and, our state data ctx <- d3_v8() ctx$eval(sprintf( " var states = %s", state_hier )) ctx$eval( " // we assigned the variable states above // so now make it a real d3 hierarchy var root = d3.hierarchy(states); // sum on population root.sum(function(d) {return d.population ? d.population : 0}); // use d3 to circle pack or state hierarchy d3.pack()(root); // get something we can convert into a data.frame in R var states_packed = []; root.each(function(d) { states_packed.push({ name: d.data.name, radius: d.r, x: d.x, y: d.y }); }); " ) # now get states_packed from our context # to plot in R states_packed <- ctx$get("states_packed") opar <- par(no.readonly=TRUE) # make it square par(pty="s") symbols( states_packed$x, states_packed$y, states_packed$radius, inches=FALSE, asp=1 ) text(y~x, data=states_packed, labels=states_packed$name) # return to original par before we made it square par(opar) # d3.quadtree example library(d3r) x = runif(100) y = runif(100) ctx <- d3_v8() # assign pts as array of pts in V8 ctx$assign("pts", matrix(c(x,y),ncol=2,byrow=TRUE)) # use d3.quadtree() to plot rects ctx$eval( " var d3q = d3.quadtree() .addAll(pts); // nodes function from https://bl.ocks.org/mbostock/4343214 function nodes(quadtree) { var nodes = []; quadtree.visit(function(node, x0, y0, x1, y1) { nodes.push({x0:x0, y0:y0, x1: x1, y1: y1}) }); return nodes; } " ) nodes <- ctx$get("nodes(d3q)", simplifyVector = FALSE) # draw points opar <- par(no.readonly=TRUE) # make it square par(pty="s") plot(y~x) # draw quadtree rects rect( lapply(nodes,function(x){x$x0}), lapply(nodes,function(x){x$y0}), lapply(nodes,function(x){x$x1}), lapply(nodes,function(x){x$y1}) ) par(opar) } ================================================ FILE: inst/examples/example_draw_igraph_with_layout.R ================================================ library(htmltools) library(d3r) library(igraph) library(scales) d3_draw_igraph <- function( igrf, layout=layout.auto, width=400, height=400, ... ){ coords <- norm_coords(layout(igrf),0,width-30,0,height-30) V(igrf)$x <- coords[,1] V(igrf)$y <- coords[,2] json <- d3r::d3_igraph(igrf) browsable( attachDependencies( tags$script( HTML( sprintf( ' var data = %s; //http://stackoverflow.com/questions/28102089/simple-graph-of-nodes-and-links-without-using-force-layout var width = %.0f; var height = %.0f; var svg = d3.select("body") .append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform","translate(15,15)"); data.nodes.forEach(function(d){ d.x = +d.x; d.y = +d.y; }) var drag = d3.drag() .on("drag", function(d, i) { d.x += d3.event.dx d.y += d3.event.dy d3.select(this).attr("cx", d.x).attr("cy", d.y); links.each(function(l, li) { if (l.source == d.id) { d3.select(this).attr("x1", d.x).attr("y1", d.y); } else if (l.target == d.id) { d3.select(this).attr("x2", d.x).attr("y2", d.y); } }); }); var links = svg.selectAll("link") .data(data.links) .enter() .append("line") .attr("class", "link") .attr("x1", function(l) { var sourceNode = data.nodes.filter(function(d, i) { return d.id == l.source })[0]; d3.select(this).attr("y1", sourceNode.y); return sourceNode.x }) .attr("x2", function(l) { var targetNode = data.nodes.filter(function(d, i) { return d.id == l.target })[0]; d3.select(this).attr("y2", targetNode.y); return targetNode.x }) .attr("fill", "none") .attr("stroke", "black"); var nodes = svg.selectAll("node") .data(data.nodes) .enter() .append("circle") .attr("class", "node") .attr("cx", function(d) { return d.x }) .attr("cy", function(d) { return d.y }) .attr("r", 10) .style("fill", function(d){return d.fill;}) .style("stroke", "none") .call(drag); ' , json, width, height ) ) ), d3_dep_v4() ) ) } data("karate", package="igraphdata") # simple community example wc <- cluster_walktrap(karate) # apply some color to the nodes V(karate)$fill <- col_factor(palette="Set1",domain=NULL)(membership(wc)) d3_draw_igraph(karate) ================================================ FILE: inst/examples/example_igraph.R ================================================ \dontrun{ library(igraph) library(igraphdata) library(d3r) # with random graph d3r::d3_igraph(igraph::sample_pa(100)) # check case where vertices 0 cols d3_igraph(igraph::watts.strogatz.game(1, 50, 4, 0.05)) # with karate from igraphdata # notice graph attributes are added data("karate",package="igraphdata") (karate_d3 <- d3r::d3_igraph(karate)) listviewer::jsonedit(karate_d3) data("kite",package="igraphdata") listviewer::jsonedit(d3_igraph(kite)) } ================================================ FILE: inst/examples/example_rpart.R ================================================ \dontrun{ library(d3r) # from ?rpart data("kyphosis", package="rpart") d3_party( rpart::rpart(Kyphosis ~ Age + Number + Start, data = kyphosis) ) # if you want the list instead of json d3_party( rpart::rpart(Kyphosis ~ Age + Number + Start, data = kyphosis), json = FALSE ) # with ctree instead of rpart # using example from ?ctree d3_party(partykit::ctree(Species ~ .,data = iris)) #devtools::install_github("timelyportfolio/d3treeR") library(d3treeR) d3tree2( d3_party( rpart::rpart(Kyphosis ~ Age + Number + Start, data = kyphosis) ), celltext = "rule", valueField = "n" ) } ================================================ FILE: inst/examples/example_table.R ================================================ # convert Titanic to a nested d3 hierarchy # devtools::install_github("timelyportfolio/d3r") library(d3r) library(dplyr) titanic_df <- data.frame(Titanic) tit_tb <- titanic_df %>% select(Class,Age,Survived,Sex,Freq) %>% d3_nest(value_cols="Freq", root="titanic") tit_tb # see as tibble titanic_df %>% select(Class,Age,Survived,Sex,Freq) %>% d3_nest(value_cols="Freq", root="titanic", json=FALSE) # see the structure with listviewer tit_tb %>% listviewer::jsonedit() ================================================ FILE: inst/examples/example_treemap.R ================================================ \dontrun{ library(treemap) library(d3r) library(dplyr) library(tidyr) treemap::random.hierarchical.data() %>% d3_nest(value_cols = "x") # use example from ?treemap data(GNI2014) treemap( GNI2014, index=c("continent", "iso3"), vSize="population", vColor="GNI", type="value", draw=FALSE ) %>% {.$tm} %>% select(continent,iso3,color,vSize) %>% d3_nest(value_cols = c("color", "vSize")) } ================================================ FILE: inst/examples/why_d3R.Rmd ================================================ --- title: "Why d3r?" author: "Kenton Russell" date: "August 28, 2016" output: html_document: mathjax: null theme: null css: https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css --- `d3r` doesn't make beautiful interactive `htmlwidgets`, so what does it do? `d3r` provides helpers for `d3.js` in R by providing two (and more coming) functions. *Note: this is very much a work in progress* 1. easy dependency functions for `d3.js` v3 and v4 2. converter for R data structures to `d3.js` nested hierarchies ### dependency functions There are a whole lot of `htmlwidgets` built on top of `d3.js`, and each one requires a local copy of `d3.js`. On my computer, this means I have >15 copies of `d3.js` in my R library. When I build a `htmlwidget`, I have to copy `d3.min.js` along with license and other meta information. Lots of times I just want to add `d3` to my `htmltools::tags`. `d3r` solves all of these problems by supplying functions `d3_dep_v3()` and `d3_dep_v4()` that return up-to-date `htmltools::htmlDependency` for `d3`. I'll start to convert each of my d3-based `htmlwidgets` to use `d3r`, and my life as an `htmlwidget` author will become easier. I will not need to worry any more when `d3` updates. To add a dependency to a `htmlwidget`, we can use this pattern. ```{r eval=FALSE} library(d3r) widget$dependencies <- c( widget$dependencies, d3r::d3_dep_d3() ) ``` Often, I build ad-hoc html with `htmltools::tags`, and I want all the power of `d3.js`. Usually, I'll do something like ```{r eval=FALSE} tags$head(tags$script("http://d3js.org/d3.v3.min.js")) ``` which isn't so bad but I lose the dependency conflict management built into `htmltools` and `htmlwidgets`. The more robust way is to use `htmltools::htmlDependency`. ```{r eval=FALSE} attachDependencies( tagList(...), htmlDependency( name="d3", version="3.5.7", src=c(href="https://d3js.org"), script="d3.v3.min.js" ) ) ``` That is a lot to type, so let's save a couple of lines with our new `d3r` helper function. ```{r eval=FALSE} library(d3r) attachDependencies( tagList(...), d3r::d3_dep_v4() ) ``` ### d3 hierarchy builder Nested d3 hierarchies can be tricky especially for users from other languages, such as R, and for those not trained in the specialized dark of art of nested `JSON`. After converting R data to nested `d3` hierarchies in many ways, I decided it was time to leverage my favorite pattern using `tidyr::nest` and `dplyr` to convert a R `data.frame` to a `d3` hierarchy. ```{r} library(d3r) (d3n <- d3_nest( data.frame( number=rep(1:4,each=3), letter=LETTERS[1:12], value=runif(12), stringsAsFactors=FALSE ), value_cols="value" )) ``` `listviewer::jsonedit` will help us visualize our hierarchy. ```{r} listviewer::jsonedit(d3n) ``` The data in the above example was not all that exciting. Let's look at how we might go from a R `table` to nested `d3`. ```{r eval=TRUE} library(pipeR) # will soon make s3 generic for table so no need # to explicitly convert to data.frame Titanic %>>% as.data.frame() %>>% d3_nest(value_cols="Freq") %>>% listviewer::jsonedit() ``` ### lots more There is a whole lot more left to do, but I think the current set of `d3r` functionality will already make using `d3.js` in R a little more pleasant. Please let me know if you have any ideas or spot any problems. ================================================ FILE: inst/www/d3/d3-jetpack/LICENSE ================================================ Copyright {YEAR}, {OWNER} All rights reserved. Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: * Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. * Neither the name of the author nor the names of contributors may be used to endorse or promote products derived from this software without specific prior written permission. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. ================================================ FILE: inst/www/d3/d3-jetpack/README.md ================================================ d3-jetpack is a set of nifty convenience wrappers that speed up your daily work with d3.js [![jetpack](http://68.media.tumblr.com/tumblr_m4kkxd8nWB1rwkrdbo1_500.jpg)](http://myjetpack.tumblr.com/post/23725103159) (comic by [Tom Gauld](http://myjetpack.tumblr.com/])) ## Usage If you use NPM, `npm install d3-jetpack`. Otherwise, download the latest [d3v4+jetpack.js](https://raw.githubusercontent.com/gka/d3-jetpack/master/build/d3v4%2Bjetpack.js). Here's what's in the package: # selection.append(selector) [<>](https://github.com/gka/d3-jetpack/blob/master/src/append.js "Source") Modifies `append` so it adds classes and ids. ```js selection.append("div.my-class"); selection.append("div.first-class.second-class"); selection.append("div#someId"); selection.append("div#someId.some-class"); ``` # selection.insert(selector) [<>](https://github.com/gka/d3-jetpack/blob/master/src/insert.js "Source") Works with insert, too: ```js selection.insert("div.my-class"); ``` # selection.appendMany(array, selector) [<>](https://github.com/gka/d3-jetpack/blob/master/src/appendMany.js "Source") Instead of making an empty selection, binding data to it, taking the enter selection and appending elements as separate steps: ```js selection.selectAll('div.my-class') .data(myArray) .enter() .append('div.my-class'); ``` use `appendMany`: ```js selection.appendMany(myArray, 'div.my-class'); ``` # selection.at(name[, value]) [<>](https://github.com/gka/d3-jetpack/blob/master/src/at.js "Source") Works like d3v3's `.attr`. Passing an object to name sets multiple attributes, passing a string returns a single attribute and passing a string & second argument sets a single attribute. To avoid having to use quotes around attributes and styles with hyphens when using the object notation, camelCase keys are hyphenated. Instead of: ```js selection .attr('stroke-width', 10) .attr('text-anchor', 'end') .attr('font-weight', 600) ``` or with [d3-selection-multi](https://github.com/d3/d3-selection-multi): ```js selection.attrs({'stroke-width': 10, 'text-anchor': 'end', 'font-weight': 600}) ``` you can write: ```js selection.at({fontSize: 10, textAnchor: 'end', fontWeight: 600}) ``` With syntax highlighting on, it is a little easier to see the difference between keys and values when everything isn't a string. Plus there's less typing! # selection.st(name[, value]) [<>](https://github.com/gka/d3-jetpack/blob/master/src/st.js "Source") Like `at`, but for `style`. Additionally, when a number is passed to a style that requires a unit of measure, like `margin-top` or `font-size`, `px` is automatically appended. Instead of ```js selection .style('margin-top', height/2 + 'px') .style('font-size', '40px') .style('width', width - 80 + 'px') ``` The `+ px`s can also be dropped: ```js selection.st({marginTop: height/2, fontSize: 40, width: width - 80}) ``` # d3.selectAppend(selector) [<>](https://github.com/gka/d3-jetpack/blob/master/src/selectAppend.js "Source") Selects the first element that matches the specified selector string or if no elements match the selector, it will append an element. This is often handy for elements which are required as part of the DOM hierachy, especially when making repeated calls to the same code. When appending it will also add id and classes, same as Jetpack's [append](#append) ```js d3.selectAppend('ul.fruits') .selectAll('li') .data(data) ``` # d3.parent() [<>](https://github.com/gka/d3-jetpack/blob/master/src/parent.js "Source") Returns the parent of each element in the selection: ```js d3.selectAll('span') .style('color', 'red') .parent() .style('background', 'yellow') ``` This might mess with the joined data and/or return duplicate elements. Usually better to save a variable, but sometimes useful when working with nested html. # selection.translate(xyPosition, [dim]) [<>](https://github.com/gka/d3-jetpack/blob/master/src/translate.js "Source") How I hated writing ``.attr('transform', function(d) { return 'translate()'; })`` a thousand times... ```js svg.append('g').translate([margin.left, margin.top]); circle.translate(function(d) { return [x(d.date), y(d.value)]; }); ``` If you only want to set a *single* dimension you can tell translate by passing 0 (for x) or 1 (for y) as second argument: ```js x_ticks.translate(d3.f(x), 0); y_ticks.translate(d3.f(y), 1); ``` HTML is supported as well! `translate` uses style transforms with px units if the first element in the selection is HTML. ```js svg_selection.translate([40,20]); // will set attribute transform="translate(40, 20)" html_selection.translate([40,20]); // will set style.transform = "translate(40px, 20px)" ``` # selection.tspans(array) [<>](https://github.com/gka/d3-jetpack/blob/master/src/tspans.js "Source") For multi-line SVG text ```js selection.append('text') .tspans(function(d) { return d.text.split('\n'); }); selection.append('text').tspans(['Multiple', 'lines'], 20); ``` The optional second argument sets the line height (defaults to 15). # d3.wordwrap(text, [lineWidth]) [<>](https://github.com/gka/d3-jetpack/blob/master/src/wordwrap.js "Source") Comes in handy with the tspans: ```js selection.append('text') .tspans(function(d) { return d3.wordwrap(text, 15); // break line after 15 characters }); ``` # d3.f(key) [<>](https://github.com/gka/d3-jetpack/blob/master/src/f.js "Source") ``d3.f`` takes a string|number and returns a function that takes an object and returns whatever property the string is named. This clears away much of verbose function(d){ return ... } syntax in ECMAScript 5: ```js x.domain(d3.extent(items, function(d){ return d.price; })); ``` becomes ```js x.domain(d3.extent(items, d3.f('price')); ``` d3.f even accepts multiple accessors and will execute them in the order of appearance. So for instance, let's say we have an array of polygon objects like this ``{ points: [{x: 0, y: 3}, ...] }`` we can get the first ``y`` coordinates using: ```js var firstY = polygons.map(d3.f('points', 0, 'y')); ``` Since we use this little function quite a lot, we usually set `var ƒ = d3.f` (type with [alt] + f on Macs). Also, [in @1wheel's blog](http://roadtolarissa.com/blog/2014/06/23/even-fewer-lamdas-with-d3/) you can read more about the rationale behind ƒ. # d3.ascendingKey(key) [<>](https://github.com/gka/d3-jetpack/blob/master/src/ascendingKey.js "Source") # d3.descendingKey(key) [<>](https://github.com/gka/d3-jetpack/blob/master/src/descendingKey.js "Source") These functions operate like d3.ascending / d3.descending but you can pass a key string or key function which will be used to specify the property by which to sort an array of objects. ```js var fruits = [{ name: "Apple", color: "green" }, { name: "Banana", color: "yellow" }]; fruits.sort(d3.ascendingKey('color')); ``` # d3.nestBy(array, key) [<>](https://github.com/gka/d3-jetpack/blob/master/src/nestBy.js "Source") Shorthand for `d3.nest().key(key).entries(array)`. Returns an array of arrays, instead of a `key`/`value` pairs. The `key` property of each array is equal the value returned by the `key` function when it is called with element of the array. ```js d3.nest() .key(ƒ('year')) .entries(yields) .forEach(function(d){ console.log('Count in ' + d.key + ': ' + d.values.length) }) ``` to ```js d3.nestBy(yields, ƒ('year')).forEach(function(d){ console.log('Count in ' + d.key + ': ' + d.length) }) ``` # d3.loadData(file1, file2, file3, ..., callback) [<>](https://github.com/gka/d3-jetpack/blob/master/src/loadData.js "Source") Takes any number of files paths and loads them with `queue`, `d3.csv` and `d3.json`. After all the files have loaded, calls the `callback` function with the first error (or null if there are none) as the first argument and an array of the loaded files as the second. Instead of: ```js d3.queue() .defer(d3.csv, 'state-data.csv') .defer(d3.tsv, 'county-data.tsv') .defer(d3.json, 'us.json') .awaitAll(function(err, res){ var states = res[0], counties = res[1], us = res[2] }) ``` if your file types match their extensions, you can use: ```js d3.loadData('state-data.csv', 'county-data.tsv', 'us.json', function(err, res){ var states = res[0], counties = res[1], us = res[2] }) ``` # d3.round(x, precisions) [<>](https://github.com/gka/d3-jetpack/blob/master/src/round.js "Source") A useful short-hand method for `+d3.format('.'+precision+'f')(x)` also known as `+x.toFixed(precision)`. Note that this code is [fundamentally broken](https://twitter.com/mbostock/status/776448389814718465) but still works fine 99% of the time. ```js d3.round(1.2345, 2) // 1.23 ``` # d3.clamp(min, val, max) [<>](https://github.com/gka/d3-jetpack/blob/master/src/clamp.js "Source") Short for `Math.max(min, Math.min(max, val))`. ```js d3.clamp(0, -10, 200) // 0 d3.clamp(0, 110, 200) // 110 d3.clamp(0, 410, 200) // 200 ``` # d3.attachTooltip(selector) [<>](https://github.com/gka/d3-jetpack/blob/master/src/attachTooltip.js "Source") Attaches a light weight tooltip that prints out all of an objects properties on click. No more `> d3.select($0).datum()`! ```js d3.select('body').selectAppend('div.tooltip') circles.call(d3.attachTooltip) ``` For formated tooltips, update the html of the tooltip on mouseover: ```js circles .call(d3.attachTooltip) .on('mouseover', function(d){ d3.select('.tooltip').html("Number of " + d.key + ": " + d.length) }) ``` Make sure to add a `
    ` and that there's some tooltip css on the page: ```css .tooltip { top: -1000px; position: fixed; padding: 10px; background: rgba(255, 255, 255, .90); border: 1px solid lightgray; pointer-events: none; } .tooltip-hidden{ opacity: 0; transition: all .3s; transition-delay: .1s; } @media (max-width: 590px){ div.tooltip{ bottom: -1px; width: calc(100%); left: -1px !important; right: -1px !important; top: auto !important; width: auto !important; } } ``` # d3.conventions([options]) [<>](https://github.com/gka/d3-jetpack/blob/master/src/conventions.js "Source") `d3.conventions()` appends an `svg` element with a `g` element according to the [margin convention](http://bl.ocks.org/mbostock/3019563) to the page and returns an object with the following properties: `totalWidth`, `totalHeight`, `margin`: size of the `svg` and its margins `width`, `height`: size of `svg` inside of margins. `parentSel`: `d3.selection` of the element the `svg` was appended to. Defaults to `d3.select("body")`, but like every other returned value, can be specified by passing in an object: `d3.conventions({parentSel: d3.select("#graph-container"), totalHeight: 1300})` appends an svg to `#graph-container` with a height of 1300. `svg`: `g` element translated to make room for the margins `x`: Linear scale with a range of `[0, width]` `y`: Linear scale with a range of `[height, 0]` `xAxis`: Axis with scale set to x and orient to "bottom" `yAxis`: Axis with scale set to y and orient to "left" `drawAxis`: Call to append axis group elements to the svg after configuring the domain. Not configurable. ================================================ FILE: inst/www/d3/d3-jetpack/dist/d3-jetpack.js ================================================ // https://github.com/gka/d3-jetpack#readme Version 2.0.8. Copyright 2017 Gregor Aisch. (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('d3-selection'), require('d3-transition'), require('d3-array'), require('d3-axis'), require('d3-scale'), require('d3-collection'), require('d3-queue'), require('d3-request')) : typeof define === 'function' && define.amd ? define(['exports', 'd3-selection', 'd3-transition', 'd3-array', 'd3-axis', 'd3-scale', 'd3-collection', 'd3-queue', 'd3-request'], factory) : (factory((global.d3 = global.d3 || {}),global.d3,global.d3,global.d3,global.d3,global.d3,global.d3,global.d3,global.d3)); }(this, (function (exports,d3Selection,d3Transition,d3Array,d3Axis,d3Scale,d3Collection,d3Queue,d3Request) { 'use strict'; var translateSelection = function(xy, dim) { return this.node().getBBox ? this.attr('transform', function(d,i) { var p = typeof xy == 'function' ? xy.call(this, d,i) : xy; if (dim === 0) p = [p, 0]; else if (dim === 1) p = [0, p]; return 'translate(' + p[0] +','+ p[1]+')'; }) : this.style('transform', function(d,i) { var p = typeof xy == 'function' ? xy.call(this, d,i) : xy; if (dim === 0) p = [p, 0]; else if (dim === 1) p = [0, p]; return 'translate(' + p[0] +'px,'+ p[1]+'px)'; }); }; var parseAttributes = function(name) { if (typeof name === "string") { var attr = {}, parts = name.split(/([\.#])/g), p; name = parts.shift(); while ((p = parts.shift())) { if (p == '.') attr['class'] = attr['class'] ? attr['class'] + ' ' + parts.shift() : parts.shift(); else if (p == '#') attr.id = parts.shift(); } return {tag: name, attr: attr}; } return name; }; var append = function(name) { var n = parseAttributes(name), s; name = d3Selection.creator(n.tag); s = this.select(function() { return this.appendChild(name.apply(this, arguments)); }); //attrs not provided by default in v4 for (var key in n.attr) { s.attr(key, n.attr[key]); } return s; }; function constantNull() { return null; } var insert = function(name, before) { var n = parseAttributes(name), create = d3Selection.creator(n.tag), select$$1 = before == null ? constantNull : typeof before === "function" ? before : d3Selection.selector(before); var s = this.select(function() { return this.insertBefore(create.apply(this, arguments), select$$1.apply(this, arguments) || null); }); //attrs not provided by default in v4 for (var key in n.attr) { s.attr(key, n.attr[key]); } return s; }; var parent = function() { var parents = []; return this.filter(function() { if (parents.indexOf(this.parentNode) > -1) return false; parents.push(this.parentNode); return true; }).select(function() { return this.parentNode; }); }; var selectAppend = function(name) { var select$$1 = d3Selection.selector(name), n = parseAttributes(name), s; name = d3Selection.creator(n.tag); s = this.select(function() { return select$$1.apply(this, arguments) || this.appendChild(name.apply(this, arguments)); }); //attrs not provided by default in v4 for (var key in n.attr) { s.attr(key, n.attr[key]); } return s; }; var tspans = function(lines, lh) { return this.selectAll('tspan') .data(function(d) { return (typeof(lines) == 'function' ? lines(d) : lines) .map(function(l) { return { line: l, parent: d }; }); }) .enter() .append('tspan') .text(function(d) { return d.line; }) .attr('x', 0) .attr('dy', function(d, i) { return i ? (typeof(lh) == 'function' ? lh(d.parent, d.line, i) : lh) || 15 : 0; }); }; var appendMany = function(data, name){ return this.selectAll(null).data(data).enter().append(name); }; var at = function(name, value) { if (typeof(name) == 'object'){ for (var key in name){ this.attr(key.replace(/([a-z\d])([A-Z])/g, '$1-$2').toLowerCase(), name[key]); } return this; } else{ return arguments.length == 1 ? this.attr(name) : this.attr(name, value); } }; function f(){ var functions = arguments; //convert all string arguments into field accessors var i = 0, l = functions.length; while (i < l) { if (typeof(functions[i]) === 'string' || typeof(functions[i]) === 'number'){ functions[i] = (function(str){ return function(d){ return d[str]; }; })(functions[i]); } i++; } //return composition of functions return function(d) { var i=0, l = functions.length; while (i++ < l) d = functions[i-1].call(this, d); return d; }; } f.not = function(d){ return !d; }; f.run = function(d){ return d(); }; f.objToFn = function(obj, defaultVal){ if (arguments.length == 1) defaultVal = undefined; return function(str){ return typeof(obj[str]) !== undefined ? obj[str] : defaultVal; }; }; var st = function(name, value) { if (typeof(name) == 'object'){ for (var key in name){ addStyle(this, key, name[key]); } return this; } else { return arguments.length == 1 ? this.style(name) : addStyle(this, name, value); } function addStyle(sel, style, value){ style = style.replace(/([a-z\d])([A-Z])/g, '$1-$2').toLowerCase(); var pxStyles = 'top left bottom right padding-top padding-left padding-bottom padding-right border-top b-width border-left-width border-botto-width m border-right-width margin-top margin-left margin-bottom margin-right font-size width height stroke-width line-height margin padding border max-width min-width'; if (~pxStyles.indexOf(style) ){ sel.style(style, typeof value == 'function' ? wrapPx(value) : addPx(value)); } else{ sel.style(style, value); } return sel; } function addPx(d){ return d.match ? d : d + 'px'; } function wrapPx(fn){ return function(){ var val = fn.apply(this, arguments); return addPx(val) } } }; // while this might not be reprentative for all fonts, it is // still better than assuming every character has the same width // (set monospace=true if you want to bypass this) var CHAR_W = { A:7,a:7,B:8,b:7,C:8,c:6,D:9,d:7,E:7,e:7,F:7,f:4,G:9,g:7,H:9,h:7,I:3,i:3,J:5,j:3,K:8,k:6,L:7,l:3,M:11, m:11,N:9,n:7,O:9,o:7,P:8,p:7,Q:9,q:7,R:8,r:4,S:8,s:6,T:7,t:4,U:9,u:7,V:7,v:6,W:11,w:9,X:7,x:6,Y:7,y:6,Z:7,z:5, '.':2,',':2,':':2,';':2 }; var wordwrap = function(line, maxCharactersPerLine, minCharactersPerLine, monospace) { var l, lines = [], w = [], words = [], w1, maxChars, minChars, maxLineW, minLineW; w1 = line.split(' '); w1.forEach(function(s, i) { var w2 = s.split('-'); if (w2.length > 1) { w2.forEach(function(t, j) { w.push(t + (j < w2.length - 1 ? '-' : '')); }); } else { w.push(s + (i < w1.length - 1 ? ' ' : '')); } }); maxChars = maxCharactersPerLine || 40; minChars = minCharactersPerLine || Math.max(3, Math.min(maxChars * 0.5, 0.75 * w.map(word_len).sort(num_asc)[Math.round(w.length / 2)])); maxLineW = maxChars * CHAR_W.a; minLineW = minChars * CHAR_W.a; l = 0; w.forEach(function(d) { var ww = d3Array.sum(d.split('').map(char_w)); if (l + ww > maxLineW && l > minLineW) { lines.push(words.join('')); words.length = 0; l = 0; } l += ww; return words.push(d); }); if (words.length) { lines.push(words.join('')); } return lines.filter(function(d) { return d !== ''; }); function char_w(c) { return !monospace && CHAR_W[c] || CHAR_W.a; } function word_len(d) { return d.length; } function num_asc(a, b) { return a - b; } }; var ascendingKey = function(key) { return typeof key == 'function' ? function (a, b) { return key(a) < key(b) ? -1 : key(a) > key(b) ? 1 : key(a) >= key(b) ? 0 : NaN; } : function (a, b) { return a[key] < b[key] ? -1 : a[key] > b[key] ? 1 : a[key] >= b[key] ? 0 : NaN; }; }; var descendingKey = function(key) { return typeof key == 'function' ? function (a, b) { return key(b) < key(a) ? -1 : key(b) > key(a) ? 1 : key(b) >= key(a) ? 0 : NaN; } : function (a, b) { return b[key] < a[key] ? -1 : b[key] > a[key] ? 1 : b[key] >= a[key] ? 0 : NaN; }; }; var conventions = function(c){ c = c || {}; c.margin = c.margin || {top: 20, right: 20, bottom: 20, left: 20} ;['top', 'right', 'bottom', 'left'].forEach(function(d){ if (!c.margin[d] && c.margin[d] != 0) c.margin[d] = 20 ; }); var parentNode = c.parentSel && c.parentSel.node(); c.totalWidth = c.totalWidth || parentNode && parentNode.offsetWidth || 960; c.totalHeight = c.totalHeight || parentNode && parentNode.offsetHeight || 500; c.width = c.width || c.totalWidth - c.margin.left - c.margin.right; c.height = c.height || c.totalHeight - c.margin.top - c.margin.bottom; c.totalWidth = c.width + c.margin.left + c.margin.right; c.totalHeight = c.height + c.margin.top + c.margin.bottom; c.parentSel = c.parentSel || d3Selection.select('body'); c.rootsvg = c.parentSel.append('svg'); c.svg = c.rootsvg .attr('width', c.totalWidth) .attr('height', c.totalHeight) .append('g') .attr('transform', 'translate(' + c.margin.left + ',' + c.margin.top + ')'); c.x = c.x || d3Scale.scaleLinear().range([0, c.width]); c.y = c.y || d3Scale.scaleLinear().range([c.height, 0]); c.xAxis = c.xAxis || d3Axis.axisBottom().scale(c.x); c.yAxis = c.yAxis || d3Axis.axisLeft().scale(c.y); c.drawAxis = function(){ c.svg.append('g') .attr('class', 'x axis') .attr('transform', 'translate(0,' + c.height + ')') .call(c.xAxis); c.svg.append('g') .attr('class', 'y axis') .call(c.yAxis); }; return c; }; var clamp = function(min, d, max) { return Math.max(min, Math.min(max, d)) }; var attachTooltip = function(sel, tooltipSel, fieldFns){ if (!sel.size()) return; tooltipSel = tooltipSel || d3Selection.select('.tooltip'); sel .on('mouseover.attachTooltip', ttDisplay) .on('mousemove.attachTooltip', ttMove) .on('mouseout.attachTooltip', ttHide) .on('click.attachTooltip', function(d){ console.log(d); }); var d = sel.datum(); fieldFns = fieldFns || d3Collection.keys(d) .filter(function(str){ return (typeof d[str] != 'object') && (d[str] != 'array'); }) .map(function(str){ return function(d){ return str + ': ' + d[str] + ''; }; }); function ttDisplay(d){ tooltipSel .classed('tooltip-hidden', false) .html('') .appendMany(fieldFns, 'div') .html(function(fn){ return fn(d); }); d3Selection.select(this).classed('tooltipped', true); } function ttMove(d){ if (!tooltipSel.size()) return; var e = d3Selection.event, x = e.clientX, y = e.clientY, bb = tooltipSel.node().getBoundingClientRect(), left = clamp(20, (x-bb.width/2), window.innerWidth - bb.width - 20), top = innerHeight > y + 20 + bb.height ? y + 20 : y - bb.height - 20; tooltipSel .style('left', left +'px') .style('top', top + 'px'); } function ttHide(d){ tooltipSel.classed('tooltip-hidden', true); d3Selection.selectAll('.tooltipped').classed('tooltipped', false); } }; var loadData = function(){ var q = d3Queue.queue(); var args = [].slice.call(arguments); var files = args.slice(0, args.length - 1); var cb = args[args.length - 1]; files.forEach(function(d){ var type = d.split('?')[0].split('.').reverse()[0]; var loadFn = {csv: d3Request.csv, tsv: d3Request.tsv, json: d3Request.json}[type]; if (!loadFn) return cb(new Error('Invalid type', d)); q.defer(loadFn, d) ; }); q.awaitAll(cb); }; var nestBy = function(array, key){ return d3Collection.nest().key(key).entries(array).map(function(d){ d.values.key = d.key; return d.values; }); }; var round = function(n, p) { return p ? Math.round(n * (p = Math.pow(10, p))) / p : Math.round(n); }; // Clips the specified subject polygon to the specified clip polygon; // requires the clip polygon to be counterclockwise and convex. // https://en.wikipedia.org/wiki/Sutherland–Hodgman_algorithm var polygonClip = function(clip, subject) { var input, closed = polygonClosed(subject), i = -1, n = clip.length - polygonClosed(clip), j, m, a = clip[n - 1], b, c, d; while (++i < n) { input = subject.slice(); subject.length = 0; b = clip[i]; c = input[(m = input.length - closed) - 1]; j = -1; while (++j < m) { d = input[j]; if (polygonInside(d, a, b)) { if (!polygonInside(c, a, b)) { subject.push(polygonIntersect(c, d, a, b)); } subject.push(d); } else if (polygonInside(c, a, b)) { subject.push(polygonIntersect(c, d, a, b)); } c = d; } if (closed) subject.push(subject[0]); a = b; } return subject; }; function polygonInside(p, a, b) { return (b[0] - a[0]) * (p[1] - a[1]) < (b[1] - a[1]) * (p[0] - a[0]); } // Intersect two infinite lines cd and ab. function polygonIntersect(c, d, a, b) { var x1 = c[0], x3 = a[0], x21 = d[0] - x1, x43 = b[0] - x3, y1 = c[1], y3 = a[1], y21 = d[1] - y1, y43 = b[1] - y3, ua = (x43 * (y1 - y3) - y43 * (x1 - x3)) / (y43 * x21 - x43 * y21); return [x1 + ua * x21, y1 + ua * y21]; } // Returns true if the polygon is closed. function polygonClosed(coordinates) { var a = coordinates[0], b = coordinates[coordinates.length - 1]; return !(a[0] - b[0] || a[1] - b[1]); } d3Selection.selection.prototype.translate = translateSelection; d3Transition.transition.prototype.translate = translateSelection; d3Selection.selection.prototype.append = append; d3Selection.selection.prototype.insert = insert; d3Selection.selection.prototype.parent = parent; d3Selection.selection.prototype.selectAppend = selectAppend; d3Selection.selection.prototype.tspans = tspans; d3Selection.selection.prototype.appendMany = appendMany; d3Selection.selection.prototype.at = at; d3Selection.selection.prototype.st = st; d3Transition.transition.prototype.at = at; d3Transition.transition.prototype.st = st; d3Selection.selection.prototype.prop = d3Selection.selection.prototype.property; exports.wordwrap = wordwrap; exports.parseAttributes = parseAttributes; exports.f = f; exports.ascendingKey = ascendingKey; exports.descendingKey = descendingKey; exports.conventions = conventions; exports.attachTooltip = attachTooltip; exports.loadData = loadData; exports.nestBy = nestBy; exports.round = round; exports.clamp = clamp; exports.polygonClip = polygonClip; Object.defineProperty(exports, '__esModule', { value: true }); }))); ================================================ FILE: inst/www/d3/d3-jetpack/package.json ================================================ { "name": "d3-jetpack", "version": "2.0.9", "description": "d3-jetpack is a set of nifty convenience wrappers that speed up your daily work with d3.js", "main": "build/d3-jetpack.js", "jsnext:main": "index", "module": "index", "scripts": { "pretest": "rm -rf build && mkdir build && rollup --banner \"$(preamble)\" -f umd -g d3-selection:d3,d3-transition:d3,d3-axis:d3,d3-scale:d3,d3-queue:d3,d3-array:d3,d3-collection:d3,d3-request:d3 -n d3 -o build/d3-jetpack.js -- index.js", "test": "tape 'test/test-*.js'", "prepublish": "npm run pretest && bin/rollup" }, "devDependencies": { "d3": "4", "d3-selection-multi": "1", "eslint": "2", "jsdom": "9", "package-preamble": "0.0", "rollup": "0.41", "rollup-plugin-ascii": "0.0", "rollup-plugin-node-resolve": "2", "tape": "4", "svgdom": "^0.0.15", "uglify-js": "2" }, "repository": { "type": "git", "url": "git+https://github.com/gka/d3-jetpack.git" }, "keywords": [ "d3", "d3-module" ], "author": { "name": "Gregor Aisch", "url": "https://driven-by-data.net/" }, "license": "BSD-3-Clause", "bugs": { "url": "https://github.com/gka/d3-jetpack/issues" }, "homepage": "https://github.com/gka/d3-jetpack#readme", "contributors": [ { "name": "Gregor Aisch", "email": "gka@users.noreply.github.com", "url": "https://driven-by-data.net/" }, { "name": "Adam Pearce", "email": "1wheel@gmail.com", "url": "https://roadtolarissa.com/" } ], "dependencies": { "d3-array": "1", "d3-axis": "1", "d3-collection": "1", "d3-queue": "3", "d3-request": "1", "d3-scale": "1", "d3-selection": "1", "d3-transition": "1" } } ================================================ FILE: inst/www/d3/v3/LICENSE ================================================ Copyright (c) 2010-2016, Michael Bostock All rights reserved. Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: * Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. * The name Michael Bostock may not be used to endorse or promote products derived from this software without specific prior written permission. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL MICHAEL BOSTOCK BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. ================================================ FILE: inst/www/d3/v4/API.md ================================================ # D3 API Reference D3 4.0 is a [collection of modules](https://github.com/d3) that are designed to work together; you can use the modules independently, or you can use them together as part of the default build. The source and documentation for each module is available in its repository. Follow the links below to learn more. For changes between 3.x and 4.0, see [CHANGES](https://github.com/d3/d3/blob/master/CHANGES.md); see also the [3.x reference](https://github.com/d3/d3-3.x-api-reference/blob/master/API-Reference.md). * [Arrays](#arrays-d3-array) ([Statistics](#statistics), [Search](#search), [Transformations](#transformations), [Histograms](#histograms)) * [Axes](#axes-d3-axis) * [Brushes](#brushes-d3-brush) * [Chords](#chords-d3-chord) * [Collections](#collections-d3-collection) ([Objects](#objects), [Maps](#maps), [Sets](#sets), [Nests](#nests)) * [Colors](#colors-d3-color) * [Dispatches](#dispatches-d3-dispatch) * [Dragging](#dragging-d3-drag) * [Delimiter-Separated Values](#delimiter-separated-values-d3-dsv) * [Easings](#easings-d3-ease) * [Forces](#forces-d3-force) * [Number Formats](#number-formats-d3-format) * [Geographies](#geographies-d3-geo) ([Paths](#paths), [Projections](#projections), [Spherical Math](#spherical-math), [Spherical Shapes](#spherical-shapes), [Streams](#streams), [Transforms](#transforms)) * [Hierarchies](#hierarchies-d3-hierarchy) * [Interpolators](#interpolators-d3-interpolate) * [Paths](#paths-d3-path) * [Polygons](#polygons-d3-polygon) * [Quadtrees](#quadtrees-d3-quadtree) * [Queues](#queues-d3-queue) * [Random Numbers](#random-numbers-d3-random) * [Requests](#requests-d3-request) * [Scales](#scales-d3-scale) ([Continuous](#continuous-scales), [Sequential](#sequential-scales), [Quantize](#quantize-scales), [Ordinal](#ordinal-scales)) * [Selections](#selections-d3-selection) ([Selecting](#selecting-elements), [Modifying](#modifying-elements), [Data](#joining-data), [Events](#handling-events), [Control](#control-flow), [Local Variables](#local-variables), [Namespaces](#namespaces)) * [Shapes](#shapes-d3-shape) ([Arcs](#arcs), [Pies](#pies), [Lines](#lines), [Areas](#areas), [Curves](#curves), [Links](#links), [Symbols](#symbols), [Stacks](#stacks)) * [Time Formats](#time-formats-d3-time-format) * [Time Intervals](#time-intervals-d3-time) * [Timers](#timers-d3-timer) * [Transitions](#transitions-d3-transition) * [Voronoi Diagrams](#voronoi-diagrams-d3-voronoi) * [Zooming](#zooming-d3-zoom) D3 uses [semantic versioning](http://semver.org/). The current version is exposed as d3.version. ## [Arrays (d3-array)](https://github.com/d3/d3-array) Array manipulation, ordering, searching, summarizing, etc. ### [Statistics](https://github.com/d3/d3-array/blob/master/README.md#statistics) Methods for computing basic summary statistics. * [d3.min](https://github.com/d3/d3-array/blob/master/README.md#min) - compute the minimum value in an array. * [d3.max](https://github.com/d3/d3-array/blob/master/README.md#max) - compute the maximum value in an array. * [d3.extent](https://github.com/d3/d3-array/blob/master/README.md#extent) - compute the minimum and maximum value in an array. * [d3.sum](https://github.com/d3/d3-array/blob/master/README.md#sum) - compute the sum of an array of numbers. * [d3.mean](https://github.com/d3/d3-array/blob/master/README.md#mean) - compute the arithmetic mean of an array of numbers. * [d3.median](https://github.com/d3/d3-array/blob/master/README.md#median) - compute the median of an array of numbers (the 0.5-quantile). * [d3.quantile](https://github.com/d3/d3-array/blob/master/README.md#quantile) - compute a quantile for a sorted array of numbers. * [d3.variance](https://github.com/d3/d3-array/blob/master/README.md#variance) - compute the variance of an array of numbers. * [d3.deviation](https://github.com/d3/d3-array/blob/master/README.md#deviation) - compute the standard deviation of an array of numbers. ### [Search](https://github.com/d3/d3-array/blob/master/README.md#search) Methods for searching arrays for a specific element. * [d3.scan](https://github.com/d3/d3-array/blob/master/README.md#scan) - linear search for an element using a comparator. * [d3.bisect](https://github.com/d3/d3-array/blob/master/README.md#bisect) - binary search for a value in a sorted array. * [d3.bisectRight](https://github.com/d3/d3-array/blob/master/README.md#bisectRight) - binary search for a value in a sorted array. * [d3.bisectLeft](https://github.com/d3/d3-array/blob/master/README.md#bisectLeft) - binary search for a value in a sorted array. * [d3.bisector](https://github.com/d3/d3-array/blob/master/README.md#bisector) - bisect using an accessor or comparator. * [*bisector*.left](https://github.com/d3/d3-array/blob/master/README.md#bisector_left) - bisectLeft, with the given comparator. * [*bisector*.right](https://github.com/d3/d3-array/blob/master/README.md#bisector_right) - bisectRight, with the given comparator. * [d3.ascending](https://github.com/d3/d3-array/blob/master/README.md#ascending) - compute the natural order of two values. * [d3.descending](https://github.com/d3/d3-array/blob/master/README.md#descending) - compute the natural order of two values. ### [Transformations](https://github.com/d3/d3-array/blob/master/README.md#transformations) Methods for transforming arrays and for generating new arrays. * [d3.cross](https://github.com/d3/d3-array/blob/master/README.md#cross) - compute the Cartesian product of two arrays. * [d3.merge](https://github.com/d3/d3-array/blob/master/README.md#merge) - merge multiple arrays into one array. * [d3.pairs](https://github.com/d3/d3-array/blob/master/README.md#pairs) - create an array of adjacent pairs of elements. * [d3.permute](https://github.com/d3/d3-array/blob/master/README.md#permute) - reorder an array of elements according to an array of indexes. * [d3.shuffle](https://github.com/d3/d3-array/blob/master/README.md#shuffle) - randomize the order of an array. * [d3.ticks](https://github.com/d3/d3-array/blob/master/README.md#ticks) - generate representative values from a numeric interval. * [d3.tickIncrement](https://github.com/d3/d3-array/blob/master/README.md#tickIncrement) - generate representative values from a numeric interval. * [d3.tickStep](https://github.com/d3/d3-array/blob/master/README.md#tickStep) - generate representative values from a numeric interval. * [d3.range](https://github.com/d3/d3-array/blob/master/README.md#range) - generate a range of numeric values. * [d3.transpose](https://github.com/d3/d3-array/blob/master/README.md#transpose) - transpose an array of arrays. * [d3.zip](https://github.com/d3/d3-array/blob/master/README.md#zip) - transpose a variable number of arrays. ### [Histograms](https://github.com/d3/d3-array/blob/master/README.md#histograms) Bin discrete samples into continuous, non-overlapping intervals. * [d3.histogram](https://github.com/d3/d3-array/blob/master/README.md#histogram) - create a new histogram generator. * [*histogram*](https://github.com/d3/d3-array/blob/master/README.md#_histogram) - compute the histogram for the given array of samples. * [*histogram*.value](https://github.com/d3/d3-array/blob/master/README.md#histogram_value) - specify a value accessor for each sample. * [*histogram*.domain](https://github.com/d3/d3-array/blob/master/README.md#histogram_domain) - specify the interval of observable values. * [*histogram*.thresholds](https://github.com/d3/d3-array/blob/master/README.md#histogram_thresholds) - specify how values are divided into bins. * [d3.thresholdFreedmanDiaconis](https://github.com/d3/d3-array/blob/master/README.md#thresholdFreedmanDiaconis) - the Freedman–Diaconis binning rule. * [d3.thresholdScott](https://github.com/d3/d3-array/blob/master/README.md#thresholdScott) - Scott’s normal reference binning rule. * [d3.thresholdSturges](https://github.com/d3/d3-array/blob/master/README.md#thresholdSturges) - Sturges’ binning formula. ## [Axes (d3-axis)](https://github.com/d3/d3-axis) Human-readable reference marks for scales. * [d3.axisTop](https://github.com/d3/d3-axis/blob/master/README.md#axisTop) - create a new top-oriented axis generator. * [d3.axisRight](https://github.com/d3/d3-axis/blob/master/README.md#axisRight) - create a new right-oriented axis generator. * [d3.axisBottom](https://github.com/d3/d3-axis/blob/master/README.md#axisBottom) - create a new bottom-oriented axis generator. * [d3.axisLeft](https://github.com/d3/d3-axis/blob/master/README.md#axisLeft) - create a new left-oriented axis generator. * [*axis*](https://github.com/d3/d3-axis/blob/master/README.md#_axis) - generate an axis for the given selection. * [*axis*.scale](https://github.com/d3/d3-axis/blob/master/README.md#axis_scale) - set the scale. * [*axis*.ticks](https://github.com/d3/d3-axis/blob/master/README.md#axis_ticks) - customize how ticks are generated and formatted. * [*axis*.tickArguments](https://github.com/d3/d3-axis/blob/master/README.md#axis_tickArguments) - customize how ticks are generated and formatted. * [*axis*.tickValues](https://github.com/d3/d3-axis/blob/master/README.md#axis_tickValues) - set the tick values explicitly. * [*axis*.tickFormat](https://github.com/d3/d3-axis/blob/master/README.md#axis_tickFormat) - set the tick format explicitly. * [*axis*.tickSize](https://github.com/d3/d3-axis/blob/master/README.md#axis_tickSize) - set the size of the ticks. * [*axis*.tickSizeInner](https://github.com/d3/d3-axis/blob/master/README.md#axis_tickSizeInner) - set the size of inner ticks. * [*axis*.tickSizeOuter](https://github.com/d3/d3-axis/blob/master/README.md#axis_tickSizeOuter) - set the size of outer (extent) ticks. * [*axis*.tickPadding](https://github.com/d3/d3-axis/blob/master/README.md#axis_tickPadding) - set the padding between ticks and labels. ## [Brushes (d3-brush)](https://github.com/d3/d3-brush) Select a one- or two-dimensional region using the mouse or touch. * [d3.brush](https://github.com/d3/d3-brush/blob/master/README.md#brush) - create a new two-dimensional brush. * [d3.brushX](https://github.com/d3/d3-brush/blob/master/README.md#brushX) - create a brush along the *x*-dimension. * [d3.brushY](https://github.com/d3/d3-brush/blob/master/README.md#brushY) - create a brush along the *y*-dimension. * [*brush*](https://github.com/d3/d3-brush/blob/master/README.md#_brush) - apply the brush to a selection. * [*brush*.move](https://github.com/d3/d3-brush/blob/master/README.md#brush_move) - move the brush selection. * [*brush*.extent](https://github.com/d3/d3-brush/blob/master/README.md#brush_extent) - define the brushable region. * [*brush*.filter](https://github.com/d3/d3-brush/blob/master/README.md#brush_filter) - control which input events initiate brushing. * [*brush*.handleSize](https://github.com/d3/d3-brush/blob/master/README.md#brush_handleSize) - set the size of the brush handles. * [*brush*.on](https://github.com/d3/d3-brush/blob/master/README.md#brush_on) - listen for brush events. * [d3.brushSelection](https://github.com/d3/d3-brush/blob/master/README.md#brushSelection) - get the brush selection for a given node. ## [Chords (d3-chord)](https://github.com/d3/d3-chord) * [d3.chord](https://github.com/d3/d3-chord/blob/master/README.md#chord) - create a new chord layout. * [*chord*](https://github.com/d3/d3-chord/blob/master/README.md#_chord) - compute the layout for the given matrix. * [*chord*.padAngle](https://github.com/d3/d3-chord/blob/master/README.md#chord_padAngle) - set the padding between adjacent groups. * [*chord*.sortGroups](https://github.com/d3/d3-chord/blob/master/README.md#chord_sortGroups) - define the group order. * [*chord*.sortSubgroups](https://github.com/d3/d3-chord/blob/master/README.md#chord_sortSubgroups) - define the source and target order within groups. * [*chord*.sortChords](https://github.com/d3/d3-chord/blob/master/README.md#chord_sortChords) - define the chord order across groups. * [d3.ribbon](https://github.com/d3/d3-chord/blob/master/README.md#ribbon) - create a ribbon shape generator. * [*ribbon*](https://github.com/d3/d3-chord/blob/master/README.md#_ribbon) - generate a ribbon shape. * [*ribbon*.source](https://github.com/d3/d3-chord/blob/master/README.md#ribbon_source) - set the source accessor. * [*ribbon*.target](https://github.com/d3/d3-chord/blob/master/README.md#ribbon_target) - set the target accessor. * [*ribbon*.radius](https://github.com/d3/d3-chord/blob/master/README.md#ribbon_radius) - set the ribbon source or target radius. * [*ribbon*.startAngle](https://github.com/d3/d3-chord/blob/master/README.md#ribbon_startAngle) - set the ribbon source or target start angle. * [*ribbon*.endAngle](https://github.com/d3/d3-chord/blob/master/README.md#ribbon_endAngle) - set the ribbon source or target end angle. * [*ribbon*.context](https://github.com/d3/d3-chord/blob/master/README.md#ribbon_context) - set the render context. ## [Collections (d3-collection)](https://github.com/d3/d3-collection) Handy data structures for elements keyed by string. ### [Objects](https://github.com/d3/d3-collection/blob/master/README.md#objects) Methods for converting associative arrays (objects) to arrays. * [d3.keys](https://github.com/d3/d3-collection/blob/master/README.md#keys) - list the keys of an associative array. * [d3.values](https://github.com/d3/d3-collection/blob/master/README.md#values) - list the values of an associated array. * [d3.entries](https://github.com/d3/d3-collection/blob/master/README.md#entries) - list the key-value entries of an associative array. ### [Maps](https://github.com/d3/d3-collection/blob/master/README.md#maps) Like ES6 Map, but with string keys and a few other differences. * [d3.map](https://github.com/d3/d3-collection/blob/master/README.md#map) - create a new, empty map. * [*map*.has](https://github.com/d3/d3-collection/blob/master/README.md#map_has) - returns true if the map contains the given key. * [*map*.get](https://github.com/d3/d3-collection/blob/master/README.md#map_get) - get the value for the given key. * [*map*.set](https://github.com/d3/d3-collection/blob/master/README.md#map_set) - set the value for the given key. * [*map*.remove](https://github.com/d3/d3-collection/blob/master/README.md#map_remove) - remove the entry for given key. * [*map*.clear](https://github.com/d3/d3-collection/blob/master/README.md#map_clear) - remove all entries. * [*map*.keys](https://github.com/d3/d3-collection/blob/master/README.md#map_keys) - get the array of keys. * [*map*.values](https://github.com/d3/d3-collection/blob/master/README.md#map_values) - get the array of values. * [*map*.entries](https://github.com/d3/d3-collection/blob/master/README.md#map_entries) - get the array of entries (key-values objects). * [*map*.each](https://github.com/d3/d3-collection/blob/master/README.md#map_each) - call a function for each entry. * [*map*.empty](https://github.com/d3/d3-collection/blob/master/README.md#map_empty) - returns false if the map has at least one entry. * [*map*.size](https://github.com/d3/d3-collection/blob/master/README.md#map_size) - compute the number of entries. ### [Sets](https://github.com/d3/d3-collection/blob/master/README.md#sets) Like ES6 Set, but with string keys and a few other differences. * [d3.set](https://github.com/d3/d3-collection/blob/master/README.md#set) - create a new, empty set. * [*set*.has](https://github.com/d3/d3-collection/blob/master/README.md#set_has) - returns true if the set contains the given value. * [*set*.add](https://github.com/d3/d3-collection/blob/master/README.md#set_add) - add the given value. * [*set*.remove](https://github.com/d3/d3-collection/blob/master/README.md#set_remove) - remove the given value. * [*set*.clear](https://github.com/d3/d3-collection/blob/master/README.md#set_clear) - remove all values. * [*set*.values](https://github.com/d3/d3-collection/blob/master/README.md#set_values) - get the array of values. * [*set*.each](https://github.com/d3/d3-collection/blob/master/README.md#set_each) - call a function for each value. * [*set*.empty](https://github.com/d3/d3-collection/blob/master/README.md#set_empty) - returns true if the set has at least one value. * [*set*.size](https://github.com/d3/d3-collection/blob/master/README.md#set_size) - compute the number of values. ### [Nests](https://github.com/d3/d3-collection/blob/master/README.md#nests) Group data into arbitrary hierarchies. * [d3.nest](https://github.com/d3/d3-collection/blob/master/README.md#nest) - create a new nest generator. * [*nest*.key](https://github.com/d3/d3-collection/blob/master/README.md#nest_key) - add a level to the nest hierarchy. * [*nest*.sortKeys](https://github.com/d3/d3-collection/blob/master/README.md#nest_sortKeys) - sort the current nest level by key. * [*nest*.sortValues](https://github.com/d3/d3-collection/blob/master/README.md#nest_sortValues) - sort the leaf nest level by value. * [*nest*.rollup](https://github.com/d3/d3-collection/blob/master/README.md#nest_rollup) - specify a rollup function for leaf values. * [*nest*.map](https://github.com/d3/d3-collection/blob/master/README.md#nest_map) - generate the nest, returning a map. * [*nest*.object](https://github.com/d3/d3-collection/blob/master/README.md#nest_object) - generate the nest, returning an associative array. * [*nest*.entries](https://github.com/d3/d3-collection/blob/master/README.md#nest_entries) - generate the nest, returning an array of key-values tuples. ## [Colors (d3-color)](https://github.com/d3/d3-color) Color manipulation and color space conversion. * [d3.color](https://github.com/d3/d3-color/blob/master/README.md#color) - parse the given CSS color specifier. * [*color*.rgb](https://github.com/d3/d3-color/blob/master/README.md#color_rgb) - compute the RGB equivalent of this color. * [*color*.brighter](https://github.com/d3/d3-color/blob/master/README.md#color_brighter) - create a brighter copy of this color. * [*color*.darker](https://github.com/d3/d3-color/blob/master/README.md#color_darker) - create a darker copy of this color. * [*color*.displayable](https://github.com/d3/d3-color/blob/master/README.md#color_displayable) - returns true if the color is displayable on standard hardware. * [*color*.toString](https://github.com/d3/d3-color/blob/master/README.md#color_toString) - returns the RGB string representation of this color. * [d3.rgb](https://github.com/d3/d3-color/blob/master/README.md#rgb) - create a new RGB color. * [d3.hsl](https://github.com/d3/d3-color/blob/master/README.md#hsl) - create a new HSL color. * [d3.lab](https://github.com/d3/d3-color/blob/master/README.md#lab) - create a new Lab color. * [d3.hcl](https://github.com/d3/d3-color/blob/master/README.md#hcl) - create a new HCL color. * [d3.cubehelix](https://github.com/d3/d3-color/blob/master/README.md#cubehelix) - create a new Cubehelix color. ## [Dispatches (d3-dispatch)](https://github.com/d3/d3-dispatch) Separate concerns using named callbacks. * [d3.dispatch](https://github.com/d3/d3-dispatch/blob/master/README.md#dispatch) - create a custom event dispatcher. * [*dispatch*.on](https://github.com/d3/d3-dispatch/blob/master/README.md#dispatch_on) - register or unregister an event listener. * [*dispatch*.copy](https://github.com/d3/d3-dispatch/blob/master/README.md#dispatch_copy) - create a copy of a dispatcher. * [*dispatch*.*call*](https://github.com/d3/d3-dispatch/blob/master/README.md#dispatch_call) - dispatch an event to registered listeners. * [*dispatch*.*apply*](https://github.com/d3/d3-dispatch/blob/master/README.md#dispatch_apply) - dispatch an event to registered listeners. ## [Dragging (d3-drag)](https://github.com/d3/d3-drag) Drag and drop SVG, HTML or Canvas using mouse or touch input. * [d3.drag](https://github.com/d3/d3-drag/blob/master/README.md#drag) - create a drag behavior. * [*drag*](https://github.com/d3/d3-drag/blob/master/README.md#_drag) - apply the drag behavior to a selection. * [*drag*.container](https://github.com/d3/d3-drag/blob/master/README.md#drag_container) - set the coordinate system. * [*drag*.filter](https://github.com/d3/d3-drag/blob/master/README.md#drag_filter) - ignore some initiating input events. * [*drag*.touchable](https://github.com/d3/d3-drag/blob/master/README.md#drag_touchable) - set the touch support detector. * [*drag*.subject](https://github.com/d3/d3-drag/blob/master/README.md#drag_subject) - set the thing being dragged. * [*drag*.clickDistance](https://github.com/d3/d3-drag/blob/master/README.md#drag_clickDistance) - set the click distance threshold. * [*drag*.on](https://github.com/d3/d3-drag/blob/master/README.md#drag_on) - listen for drag events. * [*event*.on](https://github.com/d3/d3-drag/blob/master/README.md#event_on) - listen for drag events on the current gesture. * [d3.dragDisable](https://github.com/d3/d3-drag/blob/master/README.md#dragDisable) - prevent native drag-and-drop and text selection. * [d3.dragEnable](https://github.com/d3/d3-drag/blob/master/README.md#dragEnable) - enable native drag-and-drop and text selection. ## [Delimiter-Separated Values (d3-dsv)](https://github.com/d3/d3-dsv) Parse and format delimiter-separated values, most commonly CSV and TSV. * [d3.dsvFormat](https://github.com/d3/d3-dsv/blob/master/README.md#dsvFormat) - create a new parser and formatter for the given delimiter. * [*dsv*.parse](https://github.com/d3/d3-dsv/blob/master/README.md#dsv_parse) - parse the given string, returning an array of objects. * [*dsv*.parseRows](https://github.com/d3/d3-dsv/blob/master/README.md#dsv_parseRows) - parse the given string, returning an array of rows. * [*dsv*.format](https://github.com/d3/d3-dsv/blob/master/README.md#dsv_format) - format the given array of objects. * [*dsv*.formatRows](https://github.com/d3/d3-dsv/blob/master/README.md#dsv_formatRows) - format the given array of rows. * [d3.csvParse](https://github.com/d3/d3-dsv/blob/master/README.md#csvParse) - parse the given CSV string, returning an array of objects. * [d3.csvParseRows](https://github.com/d3/d3-dsv/blob/master/README.md#csvParseRows) - parse the given CSV string, returning an array of rows. * [d3.csvFormat](https://github.com/d3/d3-dsv/blob/master/README.md#csvFormat) - format the given array of objects as CSV. * [d3.csvFormatRows](https://github.com/d3/d3-dsv/blob/master/README.md#csvFormatRows) - format the given array of rows as CSV. * [d3.tsvParse](https://github.com/d3/d3-dsv/blob/master/README.md#tsvParse) - parse the given TSV string, returning an array of objects. * [d3.tsvParseRows](https://github.com/d3/d3-dsv/blob/master/README.md#tsvParseRows) - parse the given TSV string, returning an array of rows. * [d3.tsvFormat](https://github.com/d3/d3-dsv/blob/master/README.md#tsvFormat) - format the given array of objects as TSV. * [d3.tsvFormatRows](https://github.com/d3/d3-dsv/blob/master/README.md#tsvFormatRows) - format the given array of rows as TSV. ## [Easings (d3-ease)](https://github.com/d3/d3-ease) Easing functions for smooth animation. * [*ease*](https://github.com/d3/d3-ease/blob/master/README.md#_ease) - ease the given normalized time. * [d3.easeLinear](https://github.com/d3/d3-ease/blob/master/README.md#easeLinear) - linear easing; the identity function. * [d3.easePolyIn](https://github.com/d3/d3-ease/blob/master/README.md#easePolyIn) - polynomial easing; raises time to the given power. * [d3.easePolyOut](https://github.com/d3/d3-ease/blob/master/README.md#easePolyOut) - reverse polynomial easing. * [d3.easePolyInOut](https://github.com/d3/d3-ease/blob/master/README.md#easePolyInOut) - symmetric polynomial easing. * [*poly*.exponent](https://github.com/d3/d3-ease/blob/master/README.md#poly_exponent) - specify the polynomial exponent. * [d3.easeQuad](https://github.com/d3/d3-ease/blob/master/README.md#easeQuad) - an alias for easeQuadInOut. * [d3.easeQuadIn](https://github.com/d3/d3-ease/blob/master/README.md#easeQuadIn) - quadratic easing; squares time. * [d3.easeQuadOut](https://github.com/d3/d3-ease/blob/master/README.md#easeQuadOut) - reverse quadratic easing. * [d3.easeQuadInOut](https://github.com/d3/d3-ease/blob/master/README.md#easeQuadInOut) - symmetric quadratic easing. * [d3.easeCubic](https://github.com/d3/d3-ease/blob/master/README.md#easeCubic) - an alias for easeCubicInOut. * [d3.easeCubicIn](https://github.com/d3/d3-ease/blob/master/README.md#easeCubicIn) - cubic easing; cubes time. * [d3.easeCubicOut](https://github.com/d3/d3-ease/blob/master/README.md#easeCubicOut) - reverse cubic easing. * [d3.easeCubicInOut](https://github.com/d3/d3-ease/blob/master/README.md#easeCubicInOut) - symmetric cubic easing. * [d3.easeSin](https://github.com/d3/d3-ease/blob/master/README.md#easeSin) - an alias for easeSinInOut. * [d3.easeSinIn](https://github.com/d3/d3-ease/blob/master/README.md#easeSinIn) - sinusoidal easing. * [d3.easeSinOut](https://github.com/d3/d3-ease/blob/master/README.md#easeSinOut) - reverse sinusoidal easing. * [d3.easeSinInOut](https://github.com/d3/d3-ease/blob/master/README.md#easeSinInOut) - symmetric sinusoidal easing. * [d3.easeExp](https://github.com/d3/d3-ease/blob/master/README.md#easeExp) - an alias for easeExpInOut. * [d3.easeExpIn](https://github.com/d3/d3-ease/blob/master/README.md#easeExpIn) - exponential easing. * [d3.easeExpOut](https://github.com/d3/d3-ease/blob/master/README.md#easeExpOut) - reverse exponential easing. * [d3.easeExpInOut](https://github.com/d3/d3-ease/blob/master/README.md#easeExpInOut) - symmetric exponential easing. * [d3.easeCircle](https://github.com/d3/d3-ease/blob/master/README.md#easeCircle) - an alias for easeCircleInOut. * [d3.easeCircleIn](https://github.com/d3/d3-ease/blob/master/README.md#easeCircleIn) - circular easing. * [d3.easeCircleOut](https://github.com/d3/d3-ease/blob/master/README.md#easeCircleOut) - reverse circular easing. * [d3.easeCircleInOut](https://github.com/d3/d3-ease/blob/master/README.md#easeCircleInOut) - symmetric circular easing. * [d3.easeElastic](https://github.com/d3/d3-ease/blob/master/README.md#easeElastic) - an alias for easeElasticOut. * [d3.easeElasticIn](https://github.com/d3/d3-ease/blob/master/README.md#easeElasticIn) - elastic easing, like a rubber band. * [d3.easeElasticOut](https://github.com/d3/d3-ease/blob/master/README.md#easeElasticOut) - reverse elastic easing. * [d3.easeElasticInOut](https://github.com/d3/d3-ease/blob/master/README.md#easeElasticInOut) - symmetric elastic easing. * [*elastic*.amplitude](https://github.com/d3/d3-ease/blob/master/README.md#elastic_amplitude) - specify the elastic amplitude. * [*elastic*.period](https://github.com/d3/d3-ease/blob/master/README.md#elastic_period) - specify the elastic period. * [d3.easeBack](https://github.com/d3/d3-ease/blob/master/README.md#easeBack) - an alias for easeBackInOut. * [d3.easeBackIn](https://github.com/d3/d3-ease/blob/master/README.md#easeBackIn) - anticipatory easing, like a dancer bending his knees before jumping. * [d3.easeBackOut](https://github.com/d3/d3-ease/blob/master/README.md#easeBackOut) - reverse anticipatory easing. * [d3.easeBackInOut](https://github.com/d3/d3-ease/blob/master/README.md#easeBackInOut) - symmetric anticipatory easing. * [*back*.overshoot](https://github.com/d3/d3-ease/blob/master/README.md#back_overshoot) - specify the amount of overshoot. * [d3.easeBounce](https://github.com/d3/d3-ease/blob/master/README.md#easeBounce) - an alias for easeBounceOut. * [d3.easeBounceIn](https://github.com/d3/d3-ease/blob/master/README.md#easeBounceIn) - bounce easing, like a rubber ball. * [d3.easeBounceOut](https://github.com/d3/d3-ease/blob/master/README.md#easeBounceOut) - reverse bounce easing. * [d3.easeBounceInOut](https://github.com/d3/d3-ease/blob/master/README.md#easeBounceInOut) - symmetric bounce easing. ## [Forces (d3-force)](https://github.com/d3/d3-force) Force-directed graph layout using velocity Verlet integration. * [d3.forceSimulation](https://github.com/d3/d3-force/blob/master/README.md#forceSimulation) - create a new force simulation. * [*simulation*.restart](https://github.com/d3/d3-force/blob/master/README.md#simulation_restart) - reheat and restart the simulation’s timer. * [*simulation*.stop](https://github.com/d3/d3-force/blob/master/README.md#simulation_stop) - stop the simulation’s timer. * [*simulation*.tick](https://github.com/d3/d3-force/blob/master/README.md#simulation_tick) - advance the simulation one step. * [*simulation*.nodes](https://github.com/d3/d3-force/blob/master/README.md#simulation_nodes) - set the simulation’s nodes. * [*simulation*.alpha](https://github.com/d3/d3-force/blob/master/README.md#simulation_alpha) - set the current alpha. * [*simulation*.alphaMin](https://github.com/d3/d3-force/blob/master/README.md#simulation_alphaMin) - set the minimum alpha threshold. * [*simulation*.alphaDecay](https://github.com/d3/d3-force/blob/master/README.md#simulation_alphaDecay) - set the alpha exponential decay rate. * [*simulation*.alphaTarget](https://github.com/d3/d3-force/blob/master/README.md#simulation_alphaTarget) - set the target alpha. * [*simulation*.velocityDecay](https://github.com/d3/d3-force/blob/master/README.md#simulation_velocityDecay) - set the velocity decay rate. * [*simulation*.force](https://github.com/d3/d3-force/blob/master/README.md#simulation_force) - add or remove a force. * [*simulation*.find](https://github.com/d3/d3-force/blob/master/README.md#simulation_find) - find the closest node to the given position. * [*simulation*.on](https://github.com/d3/d3-force/blob/master/README.md#simulation_on) - add or remove an event listener. * [*force*](https://github.com/d3/d3-force/blob/master/README.md#_force) - apply the force. * [*force*.initialize](https://github.com/d3/d3-force/blob/master/README.md#force_initialize) - initialize the force with the given nodes. * [d3.forceCenter](https://github.com/d3/d3-force/blob/master/README.md#forceCenter) - create a centering force. * [*center*.x](https://github.com/d3/d3-force/blob/master/README.md#center_x) - set the center *x*-coordinate. * [*center*.y](https://github.com/d3/d3-force/blob/master/README.md#center_y) - set the center *y*-coordinate. * [d3.forceCollide](https://github.com/d3/d3-force/blob/master/README.md#forceCollide) - create a circle collision force. * [*collide*.radius](https://github.com/d3/d3-force/blob/master/README.md#collide_radius) - set the circle radius. * [*collide*.strength](https://github.com/d3/d3-force/blob/master/README.md#collide_strength) - set the collision resolution strength. * [*collide*.iterations](https://github.com/d3/d3-force/blob/master/README.md#collide_iterations) - set the number of iterations. * [d3.forceLink](https://github.com/d3/d3-force/blob/master/README.md#forceLink) - create a link force. * [*link*.links](https://github.com/d3/d3-force/blob/master/README.md#link_links) - set the array of links. * [*link*.id](https://github.com/d3/d3-force/blob/master/README.md#link_id) - link nodes by numeric index or string identifier. * [*link*.distance](https://github.com/d3/d3-force/blob/master/README.md#link_distance) - set the link distance. * [*link*.strength](https://github.com/d3/d3-force/blob/master/README.md#link_strength) - set the link strength. * [*link*.iterations](https://github.com/d3/d3-force/blob/master/README.md#link_iterations) - set the number of iterations. * [d3.forceManyBody](https://github.com/d3/d3-force/blob/master/README.md#forceManyBody) - create a many-body force. * [*manyBody*.strength](https://github.com/d3/d3-force/blob/master/README.md#manyBody_strength) - set the force strength. * [*manyBody*.theta](https://github.com/d3/d3-force/blob/master/README.md#manyBody_theta) - set the Barnes–Hut approximation accuracy. * [*manyBody*.distanceMin](https://github.com/d3/d3-force/blob/master/README.md#manyBody_distanceMin) - limit the force when nodes are close. * [*manyBody*.distanceMax](https://github.com/d3/d3-force/blob/master/README.md#manyBody_distanceMax) - limit the force when nodes are far. * [d3.forceX](https://github.com/d3/d3-force/blob/master/README.md#forceX) - create an *x*-positioning force. * [*x*.strength](https://github.com/d3/d3-force/blob/master/README.md#x_strength) - set the force strength. * [*x*.x](https://github.com/d3/d3-force/blob/master/README.md#x_x) - set the target *x*-coordinate. * [d3.forceY](https://github.com/d3/d3-force/blob/master/README.md#forceY) - create an *y*-positioning force. * [*y*.strength](https://github.com/d3/d3-force/blob/master/README.md#y_strength) - set the force strength. * [*y*.y](https://github.com/d3/d3-force/blob/master/README.md#y_y) - set the target *y*-coordinate. * [d3.forceRadial](https://github.com/d3/d3-force/blob/master/README.md#forceRadial) - create a radial positioning force. * [*radial*.strength](https://github.com/d3/d3-force/blob/master/README.md#radial_strength) - set the force strength. * [*radial*.radius](https://github.com/d3/d3-force/blob/master/README.md#radial_radius) - set the target radius. * [*radial*.x](https://github.com/d3/d3-force/blob/master/README.md#radial_x) - set the target center *x*-coordinate. * [*radial*.y](https://github.com/d3/d3-force/blob/master/README.md#radial_y) - set the target center *y*-coordinate. ## [Number Formats (d3-format)](https://github.com/d3/d3-format) Format numbers for human consumption. * [d3.format](https://github.com/d3/d3-format/blob/master/README.md#format) - alias for *locale*.format on the default locale. * [d3.formatPrefix](https://github.com/d3/d3-format/blob/master/README.md#formatPrefix) - alias for *locale*.formatPrefix on the default locale. * [d3.formatSpecifier](https://github.com/d3/d3-format/blob/master/README.md#formatSpecifier) - parse a number format specifier. * [d3.formatLocale](https://github.com/d3/d3-format/blob/master/README.md#formatLocale) - define a custom locale. * [d3.formatDefaultLocale](https://github.com/d3/d3-format/blob/master/README.md#formatDefaultLocale) - define the default locale. * [*locale*.format](https://github.com/d3/d3-format/blob/master/README.md#locale_format) - create a number format. * [*locale*.formatPrefix](https://github.com/d3/d3-format/blob/master/README.md#locale_formatPrefix) - create a SI-prefix number format. * [d3.precisionFixed](https://github.com/d3/d3-format/blob/master/README.md#precisionFixed) - compute decimal precision for fixed-point notation. * [d3.precisionPrefix](https://github.com/d3/d3-format/blob/master/README.md#precisionPrefix) - compute decimal precision for SI-prefix notation. * [d3.precisionRound](https://github.com/d3/d3-format/blob/master/README.md#precisionRound) - compute significant digits for rounded notation. ## [Geographies (d3-geo)](https://github.com/d3/d3-geo) Geographic projections, shapes and math. ### [Paths](https://github.com/d3/d3-geo/blob/master/README.md#paths) * [d3.geoPath](https://github.com/d3/d3-geo/blob/master/README.md#geoPath) - create a new geographic path generator. * [*path*](https://github.com/d3/d3-geo/blob/master/README.md#_path) - project and render the specified feature. * [*path*.area](https://github.com/d3/d3-geo/blob/master/README.md#path_area) - compute the projected planar area of a given feature. * [*path*.bounds](https://github.com/d3/d3-geo/blob/master/README.md#path_bounds) - compute the projected planar bounding box of a given feature. * [*path*.centroid](https://github.com/d3/d3-geo/blob/master/README.md#path_centroid) - compute the projected planar centroid of a given feature. * [*path*.measure](https://github.com/d3/d3-geo/blob/master/README.md#path_measure) - compute the projected planar length of a given feature. * [*path*.projection](https://github.com/d3/d3-geo/blob/master/README.md#path_projection) - set the geographic projection. * [*path*.context](https://github.com/d3/d3-geo/blob/master/README.md#path_context) - set the render context. * [*path*.pointRadius](https://github.com/d3/d3-geo/blob/master/README.md#path_pointRadius) - set the radius to display point features. ### [Projections](https://github.com/d3/d3-geo/blob/master/README.md#projections) * [*projection*](https://github.com/d3/d3-geo/blob/master/README.md#_projection) - project the specified point from the sphere to the plane. * [*projection*.invert](https://github.com/d3/d3-geo/blob/master/README.md#projection_invert) - unproject the specified point from the plane to the sphere. * [*projection*.stream](https://github.com/d3/d3-geo/blob/master/README.md#projection_stream) - wrap the specified stream to project geometry. * [*projection*.clipAngle](https://github.com/d3/d3-geo/blob/master/README.md#projection_clipAngle) - set the radius of the clip circle. * [*projection*.clipExtent](https://github.com/d3/d3-geo/blob/master/README.md#projection_clipExtent) - set the viewport clip extent, in pixels. * [*projection*.scale](https://github.com/d3/d3-geo/blob/master/README.md#projection_scale) - set the scale factor. * [*projection*.translate](https://github.com/d3/d3-geo/blob/master/README.md#projection_translate) - set the translation offset. * [*projection*.fitExtent](https://github.com/d3/d3-geo/blob/master/README.md#projection_fitExtent) - set the scale and translate to fit a GeoJSON object. * [*projection*.fitSize](https://github.com/d3/d3-geo/blob/master/README.md#projection_fitSize) - set the scale and translate to fit a GeoJSON object. * [*projection*.fitWidth](https://github.com/d3/d3-geo/blob/master/README.md#projection_fitWidth) - set the scale and translate to fit a GeoJSON object. * [*projection*.fitHeight](https://github.com/d3/d3-geo/blob/master/README.md#projection_fitHeight) - set the scale and translate to fit a GeoJSON object. * [*projection*.center](https://github.com/d3/d3-geo/blob/master/README.md#projection_center) - set the center point. * [*projection*.rotate](https://github.com/d3/d3-geo/blob/master/README.md#projection_rotate) - set the three-axis spherical rotation angles. * [*projection*.precision](https://github.com/d3/d3-geo/blob/master/README.md#projection_precision) - set the precision threshold for adaptive sampling. * [*projection*.preclip](https://github.com/d3/d3-geo/blob/master/README.md#projection.preclip) - set the spherical clipping stream transform. * [*projection*.postclip](https://github.com/d3/d3-geo/blob/master/README.md#projection.postclip) - set the planar clipping stream transform. * [d3.geoClipAntimeridian](https://github.com/d3/d3-geo/blob/master/README.md#geoClipAntimeridian) - cuts spherical geometries that cross the antimeridian. * [d3.geoClipCircle](https://github.com/d3/d3-geo/blob/master/README.md#geoClipCircle) - clips spherical geometries to a small circle. * [d3.geoClipRectangle](https://github.com/d3/d3-geo/blob/master/README.md#geoClipRectangle) - clips planar geometries to a rectangular viewport. * [d3.geoAlbers](https://github.com/d3/d3-geo/blob/master/README.md#geoAlbers) - the Albers equal-area conic projection. * [d3.geoAlbersUsa](https://github.com/d3/d3-geo/blob/master/README.md#geoAlbersUsa) - a composite Albers projection for the United States. * [d3.geoAzimuthalEqualArea](https://github.com/d3/d3-geo/blob/master/README.md#geoAzimuthalEqualArea) - the azimuthal equal-area projection. * [d3.geoAzimuthalEquidistant](https://github.com/d3/d3-geo/blob/master/README.md#geoAzimuthalEquidistant) - the azimuthal equidistant projection. * [d3.geoConicConformal](https://github.com/d3/d3-geo/blob/master/README.md#geoConicConformal) - the conic conformal projection. * [d3.geoConicEqualArea](https://github.com/d3/d3-geo/blob/master/README.md#geoConicEqualArea) - the conic equal-area (Albers) projection. * [d3.geoConicEquidistant](https://github.com/d3/d3-geo/blob/master/README.md#geoConicEquidistant) - the conic equidistant projection. * [*conic*.parallels](https://github.com/d3/d3-geo/blob/master/README.md#conic_parallels) - set the two standard parallels. * [d3.geoEquirectangular](https://github.com/d3/d3-geo/blob/master/README.md#geoEquirectangular) - the equirectangular (plate carreé) projection. * [d3.geoGnomonic](https://github.com/d3/d3-geo/blob/master/README.md#geoGnomonic) - the gnomonic projection. * [d3.geoMercator](https://github.com/d3/d3-geo/blob/master/README.md#geoMercator) - the spherical Mercator projection. * [d3.geoOrthographic](https://github.com/d3/d3-geo/blob/master/README.md#geoOrthographic) - the azimuthal orthographic projection. * [d3.geoStereographic](https://github.com/d3/d3-geo/blob/master/README.md#geoStereographic) - the azimuthal stereographic projection. * [d3.geoTransverseMercator](https://github.com/d3/d3-geo/blob/master/README.md#geoTransverseMercator) - the transverse spherical Mercator projection. * [*project*](https://github.com/d3/d3-geo/blob/master/README.md#_project) - project the specified point from the sphere to the plane. * [*project*.invert](https://github.com/d3/d3-geo/blob/master/README.md#project_invert) - unproject the specified point from the plane to the sphere. * [d3.geoProjection](https://github.com/d3/d3-geo/blob/master/README.md#geoProjection) - create a custom projection. * [d3.geoProjectionMutator](https://github.com/d3/d3-geo/blob/master/README.md#geoProjectionMutator) - create a custom configurable projection. * [d3.geoAzimuthalEqualAreaRaw](https://github.com/d3/d3-geo/blob/master/README.md#geoAzimuthalEqualAreaRaw) - the raw azimuthal equal-area projection. * [d3.geoAzimuthalEquidistantRaw](https://github.com/d3/d3-geo/blob/master/README.md#geoAzimuthalEquidistantRaw) - the raw azimuthal equidistant projection. * [d3.geoConicConformalRaw](https://github.com/d3/d3-geo/blob/master/README.md#geoConicConformalRaw) - the raw conic conformal projection. * [d3.geoConicEqualAreaRaw](https://github.com/d3/d3-geo/blob/master/README.md#geoConicEqualAreaRaw) - the raw conic equal-area (Albers) projection. * [d3.geoConicEquidistantRaw](https://github.com/d3/d3-geo/blob/master/README.md#geoConicEquidistantRaw) - the raw conic equidistant projection. * [d3.geoEquirectangularRaw](https://github.com/d3/d3-geo/blob/master/README.md#geoEquirectangularRaw) - the raw equirectangular (plate carreé) projection. * [d3.geoGnomonicRaw](https://github.com/d3/d3-geo/blob/master/README.md#geoGnomonicRaw) - the raw gnomonic projection. * [d3.geoMercatorRaw](https://github.com/d3/d3-geo/blob/master/README.md#geoMercatorRaw) - the raw Mercator projection. * [d3.geoOrthographicRaw](https://github.com/d3/d3-geo/blob/master/README.md#geoOrthographicRaw) - the raw azimuthal orthographic projection. * [d3.geoStereographicRaw](https://github.com/d3/d3-geo/blob/master/README.md#geoStereographicRaw) - the raw azimuthal stereographic projection. * [d3.geoTransverseMercatorRaw](https://github.com/d3/d3-geo/blob/master/README.md#geoTransverseMercatorRaw) - the raw transverse spherical Mercator projection. ### [Spherical Math](https://github.com/d3/d3-geo/blob/master/README.md#spherical-math) * [d3.geoArea](https://github.com/d3/d3-geo/blob/master/README.md#geoArea) - compute the spherical area of a given feature. * [d3.geoBounds](https://github.com/d3/d3-geo/blob/master/README.md#geoBounds) - compute the latitude-longitude bounding box for a given feature. * [d3.geoCentroid](https://github.com/d3/d3-geo/blob/master/README.md#geoCentroid) - compute the spherical centroid of a given feature. * [d3.geoContains](https://github.com/d3/d3-geo/blob/master/README.md#geoContains) - test whether a point is inside a given feature. * [d3.geoDistance](https://github.com/d3/d3-geo/blob/master/README.md#geoDistance) - compute the great-arc distance between two points. * [d3.geoLength](https://github.com/d3/d3-geo/blob/master/README.md#geoLength) - compute the length of a line string or the perimeter of a polygon. * [d3.geoInterpolate](https://github.com/d3/d3-geo/blob/master/README.md#geoInterpolate) - interpolate between two points along a great arc. * [d3.geoRotation](https://github.com/d3/d3-geo/blob/master/README.md#geoRotation) - create a rotation function for the specified angles. * [*rotation*](https://github.com/d3/d3-geo/blob/master/README.md#_rotation) - rotate the given point around the sphere. * [*rotation*.invert](https://github.com/d3/d3-geo/blob/master/README.md#rotation_invert) - unrotate the given point around the sphere. ### [Spherical Shapes](https://github.com/d3/d3-geo/blob/master/README.md#spherical-shapes) * [d3.geoCircle](https://github.com/d3/d3-geo/blob/master/README.md#geoCircle) - create a circle generator. * [*circle*](https://github.com/d3/d3-geo/blob/master/README.md#_circle) - generate a piecewise circle as a Polygon. * [*circle*.center](https://github.com/d3/d3-geo/blob/master/README.md#circle_center) - specify the circle center in latitude and longitude. * [*circle*.radius](https://github.com/d3/d3-geo/blob/master/README.md#circle_radius) - specify the angular radius in degrees. * [*circle*.precision](https://github.com/d3/d3-geo/blob/master/README.md#circle_precision) - specify the precision of the piecewise circle. * [d3.geoGraticule](https://github.com/d3/d3-geo/blob/master/README.md#geoGraticule) - create a graticule generator. * [*graticule*](https://github.com/d3/d3-geo/blob/master/README.md#_graticule) - generate a MultiLineString of meridians and parallels. * [*graticule*.lines](https://github.com/d3/d3-geo/blob/master/README.md#graticule_lines) - generate an array of LineStrings of meridians and parallels. * [*graticule*.outline](https://github.com/d3/d3-geo/blob/master/README.md#graticule_outline) - generate a Polygon of the graticule’s extent. * [*graticule*.extent](https://github.com/d3/d3-geo/blob/master/README.md#graticule_extent) - get or set the major & minor extents. * [*graticule*.extentMajor](https://github.com/d3/d3-geo/blob/master/README.md#graticule_extentMajor) - get or set the major extent. * [*graticule*.extentMinor](https://github.com/d3/d3-geo/blob/master/README.md#graticule_extentMinor) - get or set the minor extent. * [*graticule*.step](https://github.com/d3/d3-geo/blob/master/README.md#graticule_step) - get or set the major & minor step intervals. * [*graticule*.stepMajor](https://github.com/d3/d3-geo/blob/master/README.md#graticule_stepMajor) - get or set the major step intervals. * [*graticule*.stepMinor](https://github.com/d3/d3-geo/blob/master/README.md#graticule_stepMinor) - get or set the minor step intervals. * [*graticule*.precision](https://github.com/d3/d3-geo/blob/master/README.md#graticule_precision) - get or set the latitudinal precision. * [d3.geoGraticule10](https://github.com/d3/d3-geo/blob/master/README.md#geoGraticule10) - generate the default 10° global graticule. #### [Streams](https://github.com/d3/d3-geo/blob/master/README.md#streams) * [d3.geoStream](https://github.com/d3/d3-geo/blob/master/README.md#geoStream) - convert a GeoJSON object to a geometry stream. * [*stream*.point](https://github.com/d3/d3-geo/blob/master/README.md#stream_point) - indicates a point with the specified coordinates. * [*stream*.lineStart](https://github.com/d3/d3-geo/blob/master/README.md#stream_lineStart) - indicates the start of a line or ring. * [*stream*.lineEnd](https://github.com/d3/d3-geo/blob/master/README.md#stream_lineEnd) - indicates the end of a line or ring. * [*stream*.polygonStart](https://github.com/d3/d3-geo/blob/master/README.md#stream_polygonStart) - indicates the start of a polygon. * [*stream*.polygonEnd](https://github.com/d3/d3-geo/blob/master/README.md#stream_polygonEnd) - indicates the end of a polygon. * [*stream*.sphere](https://github.com/d3/d3-geo/blob/master/README.md#stream_sphere) - indicates the sphere. ### [Transforms](https://github.com/d3/d3-geo/blob/master/README.md#transforms) * [d3.geoIdentity](https://github.com/d3/d3-geo/blob/master/README.md#geoIdentity) - scale, translate or clip planar geometry. * [*identity*.reflectX](https://github.com/d3/d3-geo/blob/master/README.md#identity_reflectX) - reflect the *x*-dimension. * [*identity*.reflectY](https://github.com/d3/d3-geo/blob/master/README.md#identity_reflectY) - reflect the *y*-dimension. * [d3.geoTransform](https://github.com/d3/d3-geo/blob/master/README.md#geoTransform) - define a custom geometry transform. ## [Hierarchies (d3-hierarchy)](https://github.com/d3/d3-hierarchy) Layout algorithms for visualizing hierarchical data. * [d3.hierarchy](https://github.com/d3/d3-hierarchy/blob/master/README.md#hierarchy) - constructs a root node from hierarchical data. * [*node*.ancestors](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_ancestors) - generate an array of ancestors. * [*node*.descendants](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_descendants) - generate an array of descendants. * [*node*.leaves](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_leaves) - generate an array of leaves. * [*node*.path](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_path) - generate the shortest path to another node. * [*node*.links](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_links) - generate an array of links. * [*node*.sum](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_sum) - evaluate and aggregate quantitative values. * [*node*.sort](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_sort) - sort all descendant siblings. * [*node*.count](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_count) - count the number of leaves. * [*node*.each](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_each) - breadth-first traversal. * [*node*.eachAfter](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_eachAfter) - post-order traversal. * [*node*.eachBefore](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_eachBefore) - pre-order traversal. * [*node*.copy](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_copy) - copy a hierarchy. * [d3.stratify](https://github.com/d3/d3-hierarchy/blob/master/README.md#stratify) - create a new stratify operator. * [*stratify*](https://github.com/d3/d3-hierarchy/blob/master/README.md#_stratify) - construct a root node from tabular data. * [*stratify*.id](https://github.com/d3/d3-hierarchy/blob/master/README.md#stratify_id) - set the node id accessor. * [*stratify*.parentId](https://github.com/d3/d3-hierarchy/blob/master/README.md#stratify_parentId) - set the parent node id accessor. * [d3.cluster](https://github.com/d3/d3-hierarchy/blob/master/README.md#cluster) - create a new cluster (dendrogram) layout. * [*cluster*](https://github.com/d3/d3-hierarchy/blob/master/README.md#_cluster) - layout the specified hierarchy in a dendrogram. * [*cluster*.size](https://github.com/d3/d3-hierarchy/blob/master/README.md#cluster_size) - set the layout size. * [*cluster*.nodeSize](https://github.com/d3/d3-hierarchy/blob/master/README.md#cluster_nodeSize) - set the node size. * [*cluster*.separation](https://github.com/d3/d3-hierarchy/blob/master/README.md#cluster_separation) - set the separation between leaves. * [d3.tree](https://github.com/d3/d3-hierarchy/blob/master/README.md#tree) - create a new tidy tree layout. * [*tree*](https://github.com/d3/d3-hierarchy/blob/master/README.md#_tree) - layout the specified hierarchy in a tidy tree. * [*tree*.size](https://github.com/d3/d3-hierarchy/blob/master/README.md#tree_size) - set the layout size. * [*tree*.nodeSize](https://github.com/d3/d3-hierarchy/blob/master/README.md#tree_nodeSize) - set the node size. * [*tree*.separation](https://github.com/d3/d3-hierarchy/blob/master/README.md#tree_separation) - set the separation between nodes. * [d3.treemap](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap) - create a new treemap layout. * [*treemap*](https://github.com/d3/d3-hierarchy/blob/master/README.md#_treemap) - layout the specified hierarchy as a treemap. * [*treemap*.tile](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap_tile) - set the tiling method. * [*treemap*.size](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap_size) - set the layout size. * [*treemap*.round](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap_round) - set whether the output coordinates are rounded. * [*treemap*.padding](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap_padding) - set the padding. * [*treemap*.paddingInner](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap_paddingInner) - set the padding between siblings. * [*treemap*.paddingOuter](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap_paddingOuter) - set the padding between parent and children. * [*treemap*.paddingTop](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap_paddingTop) - set the padding between the parent’s top edge and children. * [*treemap*.paddingRight](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap_paddingRight) - set the padding between the parent’s right edge and children. * [*treemap*.paddingBottom](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap_paddingBottom) - set the padding between the parent’s bottom edge and children. * [*treemap*.paddingLeft](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap_paddingLeft) - set the padding between the parent’s left edge and children. * [d3.treemapBinary](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemapBinary) - tile using a balanced binary tree. * [d3.treemapDice](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemapDice) - tile into a horizontal row. * [d3.treemapSlice](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemapSlice) - tile into a vertical column. * [d3.treemapSliceDice](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemapSliceDice) - alternate between slicing and dicing. * [d3.treemapSquarify](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemapSquarify) - tile using squarified rows per Bruls *et. al.* * [d3.treemapResquarify](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemapResquarify) - like d3.treemapSquarify, but performs stable updates. * [*squarify*.ratio](https://github.com/d3/d3-hierarchy/blob/master/README.md#squarify_ratio) - set the desired rectangle aspect ratio. * [d3.partition](https://github.com/d3/d3-hierarchy/blob/master/README.md#partition) - create a new partition (icicle or sunburst) layout. * [*partition*](https://github.com/d3/d3-hierarchy/blob/master/README.md#_partition) - layout the specified hierarchy as a partition diagram. * [*partition*.size](https://github.com/d3/d3-hierarchy/blob/master/README.md#partition_size) - set the layout size. * [*partition*.round](https://github.com/d3/d3-hierarchy/blob/master/README.md#partition_round) - set whether the output coordinates are rounded. * [*partition*.padding](https://github.com/d3/d3-hierarchy/blob/master/README.md#partition_padding) - set the padding. * [d3.pack](https://github.com/d3/d3-hierarchy/blob/master/README.md#pack) - create a new circle-packing layout. * [*pack*](https://github.com/d3/d3-hierarchy/blob/master/README.md#_pack) - layout the specified hierarchy using circle-packing. * [*pack*.radius](https://github.com/d3/d3-hierarchy/blob/master/README.md#pack_radius) - set the radius accessor. * [*pack*.size](https://github.com/d3/d3-hierarchy/blob/master/README.md#pack_size) - set the layout size. * [*pack*.padding](https://github.com/d3/d3-hierarchy/blob/master/README.md#pack_padding) - set the padding. * [d3.packSiblings](https://github.com/d3/d3-hierarchy/blob/master/README.md#packSiblings) - pack the specified array of circles. * [d3.packEnclose](https://github.com/d3/d3-hierarchy/blob/master/README.md#packEnclose) - enclose the specified array of circles. ## [Interpolators (d3-interpolate)](https://github.com/d3/d3-interpolate) Interpolate numbers, colors, strings, arrays, objects, whatever! * [d3.interpolate](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolate) - interpolate arbitrary values. * [d3.interpolateArray](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateArray) - interpolate arrays of arbitrary values. * [d3.interpolateDate](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateDate) - interpolate dates. * [d3.interpolateNumber](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateNumber) - interpolate numbers. * [d3.interpolateObject](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateObject) - interpolate arbitrary objects. * [d3.interpolateRound](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateRound) - interpolate integers. * [d3.interpolateString](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateString) - interpolate strings with embedded numbers. * [d3.interpolateTransformCss](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateTransformCss) - interpolate 2D CSS transforms. * [d3.interpolateTransformSvg](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateTransformSvg) - interpolate 2D SVG transforms. * [d3.interpolateZoom](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateZoom) - zoom and pan between two views. * [d3.interpolateRgb](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateRgb) - interpolate RGB colors. * [d3.interpolateRgbBasis](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateRgbBasis) - generate a B-spline through a set of colors. * [d3.interpolateRgbBasisClosed](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateRgbBasisClosed) - generate a closed B-spline through a set of colors. * [d3.interpolateHsl](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateHsl) - interpolate HSL colors. * [d3.interpolateHslLong](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateHslLong) - interpolate HSL colors, the long way. * [d3.interpolateLab](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateLab) - interpolate Lab colors. * [d3.interpolateHcl](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateHcl) - interpolate HCL colors. * [d3.interpolateHclLong](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateHclLong) - interpolate HCL colors, the long way. * [d3.interpolateCubehelix](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateCubehelix) - interpolate Cubehelix colors. * [d3.interpolateCubehelixLong](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateCubehelixLong) - interpolate Cubehelix colors, the long way. * [*interpolate*.gamma](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolate_gamma) - apply gamma correction during interpolation. * [d3.interpolateBasis](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateBasis) - generate a B-spline through a set of values. * [d3.interpolateBasisClosed](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateBasisClosed) - generate a closed B-spline through a set of values. * [d3.quantize](https://github.com/d3/d3-interpolate/blob/master/README.md#quantize) - generate uniformly-spaced samples from an interpolator. ## [Paths (d3-path)](https://github.com/d3/d3-path) Serialize Canvas path commands to SVG. * [d3.path](https://github.com/d3/d3-path/blob/master/README.md#path) - create a new path serializer. * [*path*.moveTo](https://github.com/d3/d3-path/blob/master/README.md#path_moveTo) - move to the given point. * [*path*.closePath](https://github.com/d3/d3-path/blob/master/README.md#path_closePath) - close the current subpath. * [*path*.lineTo](https://github.com/d3/d3-path/blob/master/README.md#path_lineTo) - draw a straight line segment. * [*path*.quadraticCurveTo](https://github.com/d3/d3-path/blob/master/README.md#path_quadraticCurveTo) - draw a quadratic Bézier segment. * [*path*.bezierCurveTo](https://github.com/d3/d3-path/blob/master/README.md#path_bezierCurveTo) - draw a cubic Bézier segment. * [*path*.arcTo](https://github.com/d3/d3-path/blob/master/README.md#path_arcTo) - draw a circular arc segment. * [*path*.arc](https://github.com/d3/d3-path/blob/master/README.md#path_arc) - draw a circular arc segment. * [*path*.rect](https://github.com/d3/d3-path/blob/master/README.md#path_rect) - draw a rectangle. * [*path*.toString](https://github.com/d3/d3-path/blob/master/README.md#path_toString) - serialize to an SVG path data string. ## [Polygons (d3-polygon)](https://github.com/d3/d3-polygon) Geometric operations for two-dimensional polygons. * [d3.polygonArea](https://github.com/d3/d3-polygon/blob/master/README.md#polygonArea) - compute the area of the given polygon. * [d3.polygonCentroid](https://github.com/d3/d3-polygon/blob/master/README.md#polygonCentroid) - compute the centroid of the given polygon. * [d3.polygonHull](https://github.com/d3/d3-polygon/blob/master/README.md#polygonHull) - compute the convex hull of the given points. * [d3.polygonContains](https://github.com/d3/d3-polygon/blob/master/README.md#polygonContains) - test whether a point is inside a polygon. * [d3.polygonLength](https://github.com/d3/d3-polygon/blob/master/README.md#polygonLength) - compute the length of the given polygon’s perimeter. ## [Quadtrees (d3-quadtree)](https://github.com/d3/d3-quadtree) Two-dimensional recursive spatial subdivision. * [d3.quadtree](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree) - create a new, empty quadtree. * [*quadtree*.x](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_x) - set the *x* accessor. * [*quadtree*.y](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_y) - set the *y* accessor. * [*quadtree*.add](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_add) - add a datum to a quadtree. * [*quadtree*.addAll](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_addAll) - add an array of data to a quadtree. * [*quadtree*.remove](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_remove) - remove a datum from a quadtree. * [*quadtree*.removeAll](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_removeAll) - remove an array of data from a quadtree. * [*quadtree*.copy](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_copy) - create a copy of a quadtree. * [*quadtree*.root](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_root) - get the quadtree’s root node. * [*quadtree*.data](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_data) - retrieve all data from the quadtree. * [*quadtree*.size](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_size) - count the number of data in the quadtree. * [*quadtree*.find](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_find) - quickly find the closest datum in a quadtree. * [*quadtree*.visit](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_visit) - selectively visit nodes in a quadtree. * [*quadtree*.visitAfter](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_visitAfter) - visit all nodes in a quadtree. * [*quadtree*.cover](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_cover) - extend the quadtree to cover a point. * [*quadtree*.extent](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_extent) - extend the quadtree to cover an extent. ## [Queues (d3-queue)](https://github.com/d3/d3-queue) Evaluate asynchronous tasks with configurable concurrency. * [d3.queue](https://github.com/d3/d3-queue/blob/master/README.md#queue) - manage the concurrent evaluation of asynchronous tasks. * [*queue*.defer](https://github.com/d3/d3-queue/blob/master/README.md#queue_defer) - register a task for evaluation. * [*queue*.abort](https://github.com/d3/d3-queue/blob/master/README.md#queue_abort) - abort any active tasks and cancel any pending ones. * [*queue*.await](https://github.com/d3/d3-queue/blob/master/README.md#queue_await) - register a callback for when tasks complete. * [*queue*.awaitAll](https://github.com/d3/d3-queue/blob/master/README.md#queue_awaitAll) - register a callback for when tasks complete. ## [Random Numbers (d3-random)](https://github.com/d3/d3-random) Generate random numbers from various distributions. * [d3.randomUniform](https://github.com/d3/d3-random/blob/master/README.md#randomUniform) - from a uniform distribution. * [d3.randomNormal](https://github.com/d3/d3-random/blob/master/README.md#randomNormal) - from a normal distribution. * [d3.randomLogNormal](https://github.com/d3/d3-random/blob/master/README.md#randomLogNormal) - from a log-normal distribution. * [d3.randomBates](https://github.com/d3/d3-random/blob/master/README.md#randomBates) - from a Bates distribution. * [d3.randomIrwinHall](https://github.com/d3/d3-random/blob/master/README.md#randomIrwinHall) - from an Irwin–Hall distribution. * [d3.randomExponential](https://github.com/d3/d3-random/blob/master/README.md#randomExponential) - from an exponential distribution. * [*random*.source](https://github.com/d3/d3-random/blob/master/README.md#random_source) - set the source of randomness. ## [Requests (d3-request)](https://github.com/d3/d3-request) A convenient alternative to asynchronous XMLHttpRequest. * [d3.request](https://github.com/d3/d3-request/blob/master/README.md#request) - make an asynchronous request. * [*request*.header](https://github.com/d3/d3-request/blob/master/README.md#request_header) - set a request header. * [*request*.user](https://github.com/d3/d3-request/blob/master/README.md#request_user) - set the user for authentication. * [*request*.password](https://github.com/d3/d3-request/blob/master/README.md#request_password) - set the password for authentication. * [*request*.mimeType](https://github.com/d3/d3-request/blob/master/README.md#request_mimeType) - set the MIME type. * [*request*.timeout](https://github.com/d3/d3-request/blob/master/README.md#request_timeout) - set the timeout in milliseconds. * [*request*.responseType](https://github.com/d3/d3-request/blob/master/README.md#request_responseType) - set the response type. * [*request*.response](https://github.com/d3/d3-request/blob/master/README.md#request_response) - set the response function. * [*request*.get](https://github.com/d3/d3-request/blob/master/README.md#request_get) - send a GET request. * [*request*.post](https://github.com/d3/d3-request/blob/master/README.md#request_post) - send a POST request. * [*request*.send](https://github.com/d3/d3-request/blob/master/README.md#request_send) - set the request. * [*request*.abort](https://github.com/d3/d3-request/blob/master/README.md#request_abort) - abort the request. * [*request*.on](https://github.com/d3/d3-request/blob/master/README.md#request_on) - listen for a request event. * [d3.csv](https://github.com/d3/d3-request/blob/master/README.md#csv) - get a comma-separated values (CSV) file. * [d3.html](https://github.com/d3/d3-request/blob/master/README.md#html) - get an HTML file. * [d3.json](https://github.com/d3/d3-request/blob/master/README.md#json) - get a JSON file. * [d3.text](https://github.com/d3/d3-request/blob/master/README.md#text) - get a plain text file. * [d3.tsv](https://github.com/d3/d3-request/blob/master/README.md#tsv) - get a tab-separated values (TSV) file. * [d3.xml](https://github.com/d3/d3-request/blob/master/README.md#xml) - get an XML file. ## [Scales (d3-scale)](https://github.com/d3/d3-scale) Encodings that map abstract data to visual representation. ### [Continuous Scales](https://github.com/d3/d3-scale/blob/master/README.md#continuous-scales) Map a continuous, quantitative domain to a continuous range. * [*continuous*](https://github.com/d3/d3-scale/blob/master/README.md#_continuous) - compute the range value corresponding to a given domain value. * [*continuous*.invert](https://github.com/d3/d3-scale/blob/master/README.md#continuous_invert) - compute the domain value corresponding to a given range value. * [*continuous*.domain](https://github.com/d3/d3-scale/blob/master/README.md#continuous_domain) - set the input domain. * [*continuous*.range](https://github.com/d3/d3-scale/blob/master/README.md#continuous_range) - set the output range. * [*continuous*.rangeRound](https://github.com/d3/d3-scale/blob/master/README.md#continuous_rangeRound) - set the output range and enable rounding. * [*continuous*.clamp](https://github.com/d3/d3-scale/blob/master/README.md#continuous_clamp) - enable clamping to the domain or range. * [*continuous*.interpolate](https://github.com/d3/d3-scale/blob/master/README.md#continuous_interpolate) - set the output interpolator. * [*continuous*.ticks](https://github.com/d3/d3-scale/blob/master/README.md#continuous_ticks) - compute representative values from the domain. * [*continuous*.tickFormat](https://github.com/d3/d3-scale/blob/master/README.md#continuous_tickFormat) - format ticks for human consumption. * [*continuous*.nice](https://github.com/d3/d3-scale/blob/master/README.md#continuous_nice) - extend the domain to nice round numbers. * [*continuous*.copy](https://github.com/d3/d3-scale/blob/master/README.md#continuous_copy) - create a copy of this scale. * [d3.scaleLinear](https://github.com/d3/d3-scale/blob/master/README.md#scaleLinear) - create a quantitative linear scale. * [d3.scalePow](https://github.com/d3/d3-scale/blob/master/README.md#scalePow) - create a quantitative power scale. * [*pow*](https://github.com/d3/d3-scale/blob/master/README.md#_pow) - compute the range value corresponding to a given domain value. * [*pow*.invert](https://github.com/d3/d3-scale/blob/master/README.md#pow_invert) - compute the domain value corresponding to a given range value. * [*pow*.exponent](https://github.com/d3/d3-scale/blob/master/README.md#pow_exponent) - set the power exponent. * [*pow*.domain](https://github.com/d3/d3-scale/blob/master/README.md#pow_domain) - set the input domain. * [*pow*.range](https://github.com/d3/d3-scale/blob/master/README.md#pow_range) - set the output range. * [*pow*.rangeRound](https://github.com/d3/d3-scale/blob/master/README.md#pow_rangeRound) - set the output range and enable rounding. * [*pow*.clamp](https://github.com/d3/d3-scale/blob/master/README.md#pow_clamp) - enable clamping to the domain or range. * [*pow*.interpolate](https://github.com/d3/d3-scale/blob/master/README.md#pow_interpolate) - set the output interpolator. * [*pow*.ticks](https://github.com/d3/d3-scale/blob/master/README.md#pow_ticks) - compute representative values from the domain. * [*pow*.tickFormat](https://github.com/d3/d3-scale/blob/master/README.md#pow_tickFormat) - format ticks for human consumption. * [*pow*.nice](https://github.com/d3/d3-scale/blob/master/README.md#pow_nice) - extend the domain to nice round numbers. * [*pow*.copy](https://github.com/d3/d3-scale/blob/master/README.md#pow_copy) - create a copy of this scale. * [d3.scaleSqrt](https://github.com/d3/d3-scale/blob/master/README.md#scaleSqrt) - create a quantitative power scale with exponent 0.5. * [d3.scaleLog](https://github.com/d3/d3-scale/blob/master/README.md#scaleLog) - create a quantitative logarithmic scale. * [*log*](https://github.com/d3/d3-scale/blob/master/README.md#_log) - compute the range value corresponding to a given domain value. * [*log*.invert](https://github.com/d3/d3-scale/blob/master/README.md#log_invert) - compute the domain value corresponding to a given range value. * [*log*.base](https://github.com/d3/d3-scale/blob/master/README.md#log_base) - set the logarithm base. * [*log*.domain](https://github.com/d3/d3-scale/blob/master/README.md#log_domain) - set the input domain. * [*log*.range](https://github.com/d3/d3-scale/blob/master/README.md#log_range) - set the output range. * [*log*.rangeRound](https://github.com/d3/d3-scale/blob/master/README.md#log_rangeRound) - set the output range and enable rounding. * [*log*.clamp](https://github.com/d3/d3-scale/blob/master/README.md#log_clamp) - enable clamping to the domain or range. * [*log*.interpolate](https://github.com/d3/d3-scale/blob/master/README.md#log_interpolate) - set the output interpolator. * [*log*.ticks](https://github.com/d3/d3-scale/blob/master/README.md#log_ticks) - compute representative values from the domain. * [*log*.tickFormat](https://github.com/d3/d3-scale/blob/master/README.md#log_tickFormat) - format ticks for human consumption. * [*log*.nice](https://github.com/d3/d3-scale/blob/master/README.md#log_nice) - extend the domain to nice round numbers. * [*log*.copy](https://github.com/d3/d3-scale/blob/master/README.md#log_copy) - create a copy of this scale. * [d3.scaleIdentity](https://github.com/d3/d3-scale/blob/master/README.md#identity) - create a quantitative identity scale. * [d3.scaleTime](https://github.com/d3/d3-scale/blob/master/README.md#scaleTime) - create a linear scale for time. * [*time*](https://github.com/d3/d3-scale/blob/master/README.md#_time) - compute the range value corresponding to a given domain value. * [*time*.invert](https://github.com/d3/d3-scale/blob/master/README.md#time_invert) - compute the domain value corresponding to a given range value. * [*time*.domain](https://github.com/d3/d3-scale/blob/master/README.md#time_domain) - set the input domain. * [*time*.range](https://github.com/d3/d3-scale/blob/master/README.md#time_range) - set the output range. * [*time*.rangeRound](https://github.com/d3/d3-scale/blob/master/README.md#time_rangeRound) - set the output range and enable rounding. * [*time*.clamp](https://github.com/d3/d3-scale/blob/master/README.md#time_clamp) - enable clamping to the domain or range. * [*time*.interpolate](https://github.com/d3/d3-scale/blob/master/README.md#time_interpolate) - set the output interpolator. * [*time*.ticks](https://github.com/d3/d3-scale/blob/master/README.md#time_ticks) - compute representative values from the domain. * [*time*.tickFormat](https://github.com/d3/d3-scale/blob/master/README.md#time_tickFormat) - format ticks for human consumption. * [*time*.nice](https://github.com/d3/d3-scale/blob/master/README.md#time_nice) - extend the domain to nice round times. * [*time*.copy](https://github.com/d3/d3-scale/blob/master/README.md#time_copy) - create a copy of this scale. * [d3.scaleUtc](https://github.com/d3/d3-scale/blob/master/README.md#scaleUtc) - create a linear scale for UTC. ### [Sequential Scales](https://github.com/d3/d3-scale/blob/master/README.md#sequential-scales) Map a continuous, quantitative domain to a continuous, fixed interpolator. * [d3.scaleSequential](https://github.com/d3/d3-scale/blob/master/README.md#scaleSequential) - create a sequential scale. * [*sequential*.interpolator](https://github.com/d3/d3-scale/blob/master/README.md#sequential_interpolator) - set the scale’s output interpolator. * [d3.interpolateViridis](https://github.com/d3/d3-scale/blob/master/README.md#interpolateViridis) - a dark-to-light color scheme. * [d3.interpolateInferno](https://github.com/d3/d3-scale/blob/master/README.md#interpolateInferno) - a dark-to-light color scheme. * [d3.interpolateMagma](https://github.com/d3/d3-scale/blob/master/README.md#interpolateMagma) - a dark-to-light color scheme. * [d3.interpolatePlasma](https://github.com/d3/d3-scale/blob/master/README.md#interpolatePlasma) - a dark-to-light color scheme. * [d3.interpolateWarm](https://github.com/d3/d3-scale/blob/master/README.md#interpolateWarm) - a rotating-hue color scheme. * [d3.interpolateCool](https://github.com/d3/d3-scale/blob/master/README.md#interpolateCool) - a rotating-hue color scheme. * [d3.interpolateRainbow](https://github.com/d3/d3-scale/blob/master/README.md#interpolateRainbow) - a cyclical rotating-hue color scheme. * [d3.interpolateCubehelixDefault](https://github.com/d3/d3-scale/blob/master/README.md#interpolateCubehelixDefault) - a dark-to-light, rotating-hue color scheme. ### [Quantize Scales](https://github.com/d3/d3-scale/blob/master/README.md#quantize-scales) Map a continuous, quantitative domain to a discrete range. * [d3.scaleQuantize](https://github.com/d3/d3-scale/blob/master/README.md#scaleQuantize) - create a uniform quantizing linear scale. * [*quantize*](https://github.com/d3/d3-scale/blob/master/README.md#_quantize) - compute the range value corresponding to a given domain value. * [*quantize*.invertExtent](https://github.com/d3/d3-scale/blob/master/README.md#quantize_invertExtent) - compute the domain values corresponding to a given range value. * [*quantize*.domain](https://github.com/d3/d3-scale/blob/master/README.md#quantize_domain) - set the input domain. * [*quantize*.range](https://github.com/d3/d3-scale/blob/master/README.md#quantize_range) - set the output range. * [*quantize*.nice](https://github.com/d3/d3-scale/blob/master/README.md#quantize_nice) - extend the domain to nice round numbers. * [*quantize*.ticks](https://github.com/d3/d3-scale/blob/master/README.md#quantize_ticks) - compute representative values from the domain. * [*quantize*.tickFormat](https://github.com/d3/d3-scale/blob/master/README.md#quantize_tickFormat) - format ticks for human consumption. * [*quantize*.copy](https://github.com/d3/d3-scale/blob/master/README.md#quantize_copy) - create a copy of this scale. * [d3.scaleQuantile](https://github.com/d3/d3-scale/blob/master/README.md#scaleQuantile) - create a quantile quantizing linear scale. * [*quantile*](https://github.com/d3/d3-scale/blob/master/README.md#_quantile) - compute the range value corresponding to a given domain value. * [*quantile*.invertExtent](https://github.com/d3/d3-scale/blob/master/README.md#quantile_invertExtent) - compute the domain values corresponding to a given range value. * [*quantile*.domain](https://github.com/d3/d3-scale/blob/master/README.md#quantile_domain) - set the input domain. * [*quantile*.range](https://github.com/d3/d3-scale/blob/master/README.md#quantile_range) - set the output range. * [*quantile*.quantiles](https://github.com/d3/d3-scale/blob/master/README.md#quantile_quantiles) - get the quantile thresholds. * [*quantile*.copy](https://github.com/d3/d3-scale/blob/master/README.md#quantile_copy) - create a copy of this scale. * [d3.scaleThreshold](https://github.com/d3/d3-scale/blob/master/README.md#scaleThreshold) - create an arbitrary quantizing linear scale. * [*threshold*](https://github.com/d3/d3-scale/blob/master/README.md#_threshold) - compute the range value corresponding to a given domain value. * [*threshold*.invertExtent](https://github.com/d3/d3-scale/blob/master/README.md#threshold_invertExtent) - compute the domain values corresponding to a given range value. * [*threshold*.domain](https://github.com/d3/d3-scale/blob/master/README.md#threshold_domain) - set the input domain. * [*threshold*.range](https://github.com/d3/d3-scale/blob/master/README.md#threshold_range) - set the output range. * [*threshold*.copy](https://github.com/d3/d3-scale/blob/master/README.md#threshold_copy) - create a copy of this scale. ### [Ordinal Scales](https://github.com/d3/d3-scale/blob/master/README.md#ordinal-scales) Map a discrete domain to a discrete range. * [d3.scaleOrdinal](https://github.com/d3/d3-scale/blob/master/README.md#scaleOrdinal) - create an ordinal scale. * [*ordinal*](https://github.com/d3/d3-scale/blob/master/README.md#_ordinal) - compute the range value corresponding to a given domain value. * [*ordinal*.domain](https://github.com/d3/d3-scale/blob/master/README.md#ordinal_domain) - set the input domain. * [*ordinal*.range](https://github.com/d3/d3-scale/blob/master/README.md#ordinal_range) - set the output range. * [*ordinal*.unknown](https://github.com/d3/d3-scale/blob/master/README.md#ordinal_unknown) - set the output value for unknown inputs. * [*ordinal*.copy](https://github.com/d3/d3-scale/blob/master/README.md#ordinal_copy) - create a copy of this scale. * [d3.scaleImplicit](https://github.com/d3/d3-scale/blob/master/README.md#scaleImplicit) - a special unknown value for implicit domains. * [d3.scaleBand](https://github.com/d3/d3-scale/blob/master/README.md#scaleBand) - create an ordinal band scale. * [*band*](https://github.com/d3/d3-scale/blob/master/README.md#_band) - compute the band start corresponding to a given domain value. * [*band*.domain](https://github.com/d3/d3-scale/blob/master/README.md#band_domain) - set the input domain. * [*band*.range](https://github.com/d3/d3-scale/blob/master/README.md#band_range) - set the output range. * [*band*.rangeRound](https://github.com/d3/d3-scale/blob/master/README.md#band_rangeRound) - set the output range and enable rounding. * [*band*.round](https://github.com/d3/d3-scale/blob/master/README.md#band_round) - enable rounding. * [*band*.paddingInner](https://github.com/d3/d3-scale/blob/master/README.md#band_paddingInner) - set padding between bands. * [*band*.paddingOuter](https://github.com/d3/d3-scale/blob/master/README.md#band_paddingOuter) - set padding outside the first and last bands. * [*band*.padding](https://github.com/d3/d3-scale/blob/master/README.md#band_padding) - set padding outside and between bands. * [*band*.align](https://github.com/d3/d3-scale/blob/master/README.md#band_align) - set band alignment, if there is extra space. * [*band*.bandwidth](https://github.com/d3/d3-scale/blob/master/README.md#band_bandwidth) - get the width of each band. * [*band*.step](https://github.com/d3/d3-scale/blob/master/README.md#band_step) - get the distance between the starts of adjacent bands. * [*band*.copy](https://github.com/d3/d3-scale/blob/master/README.md#band_copy) - create a copy of this scale. * [d3.scalePoint](https://github.com/d3/d3-scale/blob/master/README.md#scalePoint) - create an ordinal point scale. * [*point*](https://github.com/d3/d3-scale/blob/master/README.md#_point) - compute the point corresponding to a given domain value. * [*point*.domain](https://github.com/d3/d3-scale/blob/master/README.md#point_domain) - set the input domain. * [*point*.range](https://github.com/d3/d3-scale/blob/master/README.md#point_range) - set the output range. * [*point*.rangeRound](https://github.com/d3/d3-scale/blob/master/README.md#point_rangeRound) - set the output range and enable rounding. * [*point*.round](https://github.com/d3/d3-scale/blob/master/README.md#point_round) - enable rounding. * [*point*.padding](https://github.com/d3/d3-scale/blob/master/README.md#point_padding) - set padding outside the first and last point. * [*point*.align](https://github.com/d3/d3-scale/blob/master/README.md#point_align) - set point alignment, if there is extra space. * [*point*.bandwidth](https://github.com/d3/d3-scale/blob/master/README.md#point_bandwidth) - returns zero. * [*point*.step](https://github.com/d3/d3-scale/blob/master/README.md#point_step) - get the distance between the starts of adjacent points. * [*point*.copy](https://github.com/d3/d3-scale/blob/master/README.md#point_copy) - create a copy of this scale. * [d3.schemeCategory10](https://github.com/d3/d3-scale/blob/master/README.md#schemeCategory10) - a categorical scheme with 10 colors. * [d3.schemeCategory20](https://github.com/d3/d3-scale/blob/master/README.md#schemeCategory20) - a categorical scheme with 20 colors. * [d3.schemeCategory20b](https://github.com/d3/d3-scale/blob/master/README.md#schemeCategory20b) - a categorical scheme with 20 colors. * [d3.schemeCategory20c](https://github.com/d3/d3-scale/blob/master/README.md#schemeCategory20c) - a categorical scheme with 20 colors. ## [Selections (d3-selection)](https://github.com/d3/d3-selection) Transform the DOM by selecting elements and joining to data. ### [Selecting Elements](https://github.com/d3/d3-selection/blob/master/README.md#selecting-elements) * [d3.selection](https://github.com/d3/d3-selection/blob/master/README.md#selection) - select the root document element. * [d3.select](https://github.com/d3/d3-selection/blob/master/README.md#select) - select an element from the document. * [d3.selectAll](https://github.com/d3/d3-selection/blob/master/README.md#selectAll) - select multiple elements from the document. * [*selection*.select](https://github.com/d3/d3-selection/blob/master/README.md#selection_select) - select a descendant element for each selected element. * [*selection*.selectAll](https://github.com/d3/d3-selection/blob/master/README.md#selection_selectAll) - select multiple descendants for each selected element. * [*selection*.filter](https://github.com/d3/d3-selection/blob/master/README.md#selection_filter) - filter elements based on data. * [*selection*.merge](https://github.com/d3/d3-selection/blob/master/README.md#selection_merge) - merge this selection with another. * [d3.matcher](https://github.com/d3/d3-selection/blob/master/README.md#matcher) - test whether an element matches a selector. * [d3.selector](https://github.com/d3/d3-selection/blob/master/README.md#selector) - select an element. * [d3.selectorAll](https://github.com/d3/d3-selection/blob/master/README.md#selectorAll) - select elements. * [d3.window](https://github.com/d3/d3-selection/blob/master/README.md#window) - get a node’s owner window. * [d3.style](https://github.com/d3/d3-selection/blob/master/README.md#style) - get a node’s current style value. ### [Modifying Elements](https://github.com/d3/d3-selection/blob/master/README.md#modifying-elements) * [*selection*.attr](https://github.com/d3/d3-selection/blob/master/README.md#selection_attr) - get or set an attribute. * [*selection*.classed](https://github.com/d3/d3-selection/blob/master/README.md#selection_classed) - get, add or remove CSS classes. * [*selection*.style](https://github.com/d3/d3-selection/blob/master/README.md#selection_style) - get or set a style property. * [*selection*.property](https://github.com/d3/d3-selection/blob/master/README.md#selection_property) - get or set a (raw) property. * [*selection*.text](https://github.com/d3/d3-selection/blob/master/README.md#selection_text) - get or set the text content. * [*selection*.html](https://github.com/d3/d3-selection/blob/master/README.md#selection_html) - get or set the inner HTML. * [*selection*.append](https://github.com/d3/d3-selection/blob/master/README.md#selection_append) - create, append and select new elements. * [*selection*.insert](https://github.com/d3/d3-selection/blob/master/README.md#selection_insert) - create, insert and select new elements. * [*selection*.remove](https://github.com/d3/d3-selection/blob/master/README.md#selection_remove) - remove elements from the document. * [*selection*.clone](https://github.com/d3/d3-selection/blob/master/README.md#selection_clone) - insert clones of selected elements. * [*selection*.sort](https://github.com/d3/d3-selection/blob/master/README.md#selection_sort) - sort elements in the document based on data. * [*selection*.order](https://github.com/d3/d3-selection/blob/master/README.md#selection_order) - reorders elements in the document to match the selection. * [*selection*.raise](https://github.com/d3/d3-selection/blob/master/README.md#selection_raise) - reorders each element as the last child of its parent. * [*selection*.lower](https://github.com/d3/d3-selection/blob/master/README.md#selection_lower) - reorders each element as the first child of its parent. * [d3.create](https://github.com/d3/d3-selection/blob/master/README.md#create) - create and select a detached element. * [d3.creator](https://github.com/d3/d3-selection/blob/master/README.md#creator) - create an element by name. ### [Joining Data](https://github.com/d3/d3-selection/blob/master/README.md#joining-data) * [*selection*.data](https://github.com/d3/d3-selection/blob/master/README.md#selection_data) - join elements to data. * [*selection*.enter](https://github.com/d3/d3-selection/blob/master/README.md#selection_enter) - get the enter selection (data missing elements). * [*selection*.exit](https://github.com/d3/d3-selection/blob/master/README.md#selection_exit) - get the exit selection (elements missing data). * [*selection*.datum](https://github.com/d3/d3-selection/blob/master/README.md#selection_datum) - get or set element data (without joining). ### [Handling Events](https://github.com/d3/d3-selection/blob/master/README.md#handling-events) * [*selection*.on](https://github.com/d3/d3-selection/blob/master/README.md#selection_on) - add or remove event listeners. * [*selection*.dispatch](https://github.com/d3/d3-selection/blob/master/README.md#selection_dispatch) - dispatch a custom event. * [d3.event](https://github.com/d3/d3-selection/blob/master/README.md#event) - the current user event, during interaction. * [d3.customEvent](https://github.com/d3/d3-selection/blob/master/README.md#customEvent) - temporarily define a custom event. * [d3.mouse](https://github.com/d3/d3-selection/blob/master/README.md#mouse) - get the mouse position relative to a given container. * [d3.touch](https://github.com/d3/d3-selection/blob/master/README.md#touch) - get a touch position relative to a given container. * [d3.touches](https://github.com/d3/d3-selection/blob/master/README.md#touches) - get the touch positions relative to a given container. * [d3.clientPoint](https://github.com/d3/d3-selection/blob/master/README.md#clientPoint) - get a position relative to a given container. ### [Control Flow](https://github.com/d3/d3-selection/blob/master/README.md#control-flow) * [*selection*.each](https://github.com/d3/d3-selection/blob/master/README.md#selection_each) - call a function for each element. * [*selection*.call](https://github.com/d3/d3-selection/blob/master/README.md#selection_call) - call a function with this selection. * [*selection*.empty](https://github.com/d3/d3-selection/blob/master/README.md#selection_empty) - returns true if this selection is empty. * [*selection*.nodes](https://github.com/d3/d3-selection/blob/master/README.md#selection_nodes) - returns an array of all selected elements. * [*selection*.node](https://github.com/d3/d3-selection/blob/master/README.md#selection_node) - returns the first (non-null) element. * [*selection*.size](https://github.com/d3/d3-selection/blob/master/README.md#selection_size) - returns the count of elements. ### [Local Variables](https://github.com/d3/d3-selection/blob/master/README.md#local-variables) * [d3.local](https://github.com/d3/d3-selection/blob/master/README.md#local) - declares a new local variable. * [*local*.set](https://github.com/d3/d3-selection/blob/master/README.md#local_set) - set a local variable’s value. * [*local*.get](https://github.com/d3/d3-selection/blob/master/README.md#local_get) - get a local variable’s value. * [*local*.remove](https://github.com/d3/d3-selection/blob/master/README.md#local_remove) - delete a local variable. * [*local*.toString](https://github.com/d3/d3-selection/blob/master/README.md#local_toString) - get the property identifier of a local variable. ### [Namespaces](https://github.com/d3/d3-selection/blob/master/README.md#namespaces) * [d3.namespace](https://github.com/d3/d3-selection/blob/master/README.md#namespace) - qualify a prefixed XML name, such as “xlink:href”. * [d3.namespaces](https://github.com/d3/d3-selection/blob/master/README.md#namespaces) - the built-in XML namespaces. ## [Shapes (d3-shape)](https://github.com/d3/d3-shape) Graphical primitives for visualization. ### [Arcs](https://github.com/d3/d3-shape/blob/master/README.md#arcs) Circular or annular sectors, as in a pie or donut chart. * [d3.arc](https://github.com/d3/d3-shape/blob/master/README.md#arc) - create a new arc generator. * [*arc*](https://github.com/d3/d3-shape/blob/master/README.md#_arc) - generate an arc for the given datum. * [*arc*.centroid](https://github.com/d3/d3-shape/blob/master/README.md#arc_centroid) - compute an arc’s midpoint. * [*arc*.innerRadius](https://github.com/d3/d3-shape/blob/master/README.md#arc_innerRadius) - set the inner radius. * [*arc*.outerRadius](https://github.com/d3/d3-shape/blob/master/README.md#arc_outerRadius) - set the outer radius. * [*arc*.cornerRadius](https://github.com/d3/d3-shape/blob/master/README.md#arc_cornerRadius) - set the corner radius, for rounded corners. * [*arc*.startAngle](https://github.com/d3/d3-shape/blob/master/README.md#arc_startAngle) - set the start angle. * [*arc*.endAngle](https://github.com/d3/d3-shape/blob/master/README.md#arc_endAngle) - set the end angle. * [*arc*.padAngle](https://github.com/d3/d3-shape/blob/master/README.md#arc_padAngle) - set the angle between adjacent arcs, for padded arcs. * [*arc*.padRadius](https://github.com/d3/d3-shape/blob/master/README.md#arc_padRadius) - set the radius at which to linearize padding. * [*arc*.context](https://github.com/d3/d3-shape/blob/master/README.md#arc_context) - set the rendering context. ### [Pies](https://github.com/d3/d3-shape/blob/master/README.md#pies) Compute the necessary angles to represent a tabular dataset as a pie or donut chart. * [d3.pie](https://github.com/d3/d3-shape/blob/master/README.md#pie) - create a new pie generator. * [*pie*](https://github.com/d3/d3-shape/blob/master/README.md#_pie) - compute the arc angles for the given dataset. * [*pie*.value](https://github.com/d3/d3-shape/blob/master/README.md#pie_value) - set the value accessor. * [*pie*.sort](https://github.com/d3/d3-shape/blob/master/README.md#pie_sort) - set the sort order comparator. * [*pie*.sortValues](https://github.com/d3/d3-shape/blob/master/README.md#pie_sortValues) - set the sort order comparator. * [*pie*.startAngle](https://github.com/d3/d3-shape/blob/master/README.md#pie_startAngle) - set the overall start angle. * [*pie*.endAngle](https://github.com/d3/d3-shape/blob/master/README.md#pie_endAngle) - set the overall end angle. * [*pie*.padAngle](https://github.com/d3/d3-shape/blob/master/README.md#pie_padAngle) - set the pad angle between adjacent arcs. ### [Lines](https://github.com/d3/d3-shape/blob/master/README.md#lines) A spline or polyline, as in a line chart. * [d3.line](https://github.com/d3/d3-shape/blob/master/README.md#line) - create a new line generator. * [*line*](https://github.com/d3/d3-shape/blob/master/README.md#_line) - generate a line for the given dataset. * [*line*.x](https://github.com/d3/d3-shape/blob/master/README.md#line_x) - set the *x* accessor. * [*line*.y](https://github.com/d3/d3-shape/blob/master/README.md#line_y) - set the *y* accessor. * [*line*.defined](https://github.com/d3/d3-shape/blob/master/README.md#line_defined) - set the defined accessor. * [*line*.curve](https://github.com/d3/d3-shape/blob/master/README.md#line_curve) - set the curve interpolator. * [*line*.context](https://github.com/d3/d3-shape/blob/master/README.md#line_context) - set the rendering context. * [d3.radialLine](https://github.com/d3/d3-shape/blob/master/README.md#radialLine) - create a new radial line generator. * [*radialLine*](https://github.com/d3/d3-shape/blob/master/README.md#_radialLine) - generate a line for the given dataset. * [*radialLine*.angle](https://github.com/d3/d3-shape/blob/master/README.md#radialLine_angle) - set the angle accessor. * [*radialLine*.radius](https://github.com/d3/d3-shape/blob/master/README.md#radialLine_radius) - set the radius accessor. * [*radialLine*.defined](https://github.com/d3/d3-shape/blob/master/README.md#radialLine_defined) - set the defined accessor. * [*radialLine*.curve](https://github.com/d3/d3-shape/blob/master/README.md#radialLine_curve) - set the curve interpolator. * [*radialLine*.context](https://github.com/d3/d3-shape/blob/master/README.md#radialLine_context) - set the rendering context. ### [Areas](https://github.com/d3/d3-shape/blob/master/README.md#areas) An area, defined by a bounding topline and baseline, as in an area chart. * [d3.area](https://github.com/d3/d3-shape/blob/master/README.md#area) - create a new area generator. * [*area*](https://github.com/d3/d3-shape/blob/master/README.md#_area) - generate an area for the given dataset. * [*area*.x](https://github.com/d3/d3-shape/blob/master/README.md#area_x) - set the *x0* and *x1* accessors. * [*area*.x0](https://github.com/d3/d3-shape/blob/master/README.md#area_x0) - set the baseline *x* accessor. * [*area*.x1](https://github.com/d3/d3-shape/blob/master/README.md#area_x1) - set the topline *x* accessor. * [*area*.y](https://github.com/d3/d3-shape/blob/master/README.md#area_y) - set the *y0* and *y1* accessors. * [*area*.y0](https://github.com/d3/d3-shape/blob/master/README.md#area_y0) - set the baseline *y* accessor. * [*area*.y1](https://github.com/d3/d3-shape/blob/master/README.md#area_y1) - set the topline *y* accessor. * [*area*.defined](https://github.com/d3/d3-shape/blob/master/README.md#area_defined) - set the defined accessor. * [*area*.curve](https://github.com/d3/d3-shape/blob/master/README.md#area_curve) - set the curve interpolator. * [*area*.context](https://github.com/d3/d3-shape/blob/master/README.md#area_context) - set the rendering context. * [*area*.lineX0](https://github.com/d3/d3-shape/blob/master/README.md#area_lineX0) - derive a line for the left edge of an area. * [*area*.lineX1](https://github.com/d3/d3-shape/blob/master/README.md#area_lineX1) - derive a line for the right edge of an area. * [*area*.lineY0](https://github.com/d3/d3-shape/blob/master/README.md#area_lineY0) - derive a line for the top edge of an area. * [*area*.lineY1](https://github.com/d3/d3-shape/blob/master/README.md#area_lineY1) - derive a line for the bottom edge of an area. * [d3.radialArea](https://github.com/d3/d3-shape/blob/master/README.md#radialArea) - create a new radial area generator. * [*radialArea*](https://github.com/d3/d3-shape/blob/master/README.md#_radialArea) - generate an area for the given dataset. * [*radialArea*.angle](https://github.com/d3/d3-shape/blob/master/README.md#radialArea_angle) - set the start and end angle accessors. * [*radialArea*.startAngle](https://github.com/d3/d3-shape/blob/master/README.md#radialArea_startAngle) - set the start angle accessor. * [*radialArea*.endAngle](https://github.com/d3/d3-shape/blob/master/README.md#radialArea_endAngle) - set the end angle accessor. * [*radialArea*.radius](https://github.com/d3/d3-shape/blob/master/README.md#radialArea_radius) - set the inner and outer radius accessors. * [*radialArea*.innerRadius](https://github.com/d3/d3-shape/blob/master/README.md#radialArea_innerRadius) - set the inner radius accessor. * [*radialArea*.outerRadius](https://github.com/d3/d3-shape/blob/master/README.md#radialArea_outerRadius) - set the outer radius accessor. * [*radialArea*.defined](https://github.com/d3/d3-shape/blob/master/README.md#radialArea_defined) - set the defined accessor. * [*radialArea*.curve](https://github.com/d3/d3-shape/blob/master/README.md#radialArea_curve) - set the curve interpolator. * [*radialArea*.context](https://github.com/d3/d3-shape/blob/master/README.md#radialArea_context) - set the rendering context. * [*radialArea*.lineStartAngle](https://github.com/d3/d3-shape/blob/master/README.md#area_lineStartAngle) - derive a line for the start edge of an area. * [*radialArea*.lineEndAngle](https://github.com/d3/d3-shape/blob/master/README.md#area_lineEndAngle) - derive a line for the end edge of an area. * [*radialArea*.lineInnerRadius](https://github.com/d3/d3-shape/blob/master/README.md#area_lineInnerRadius) - derive a line for the inner edge of an area. * [*radialArea*.lineOuterRadius](https://github.com/d3/d3-shape/blob/master/README.md#area_lineOuterRadius) - derive a line for the outer edge of an area. ### [Curves](https://github.com/d3/d3-shape/blob/master/README.md#curves) Interpolate between points to produce a continuous shape. * [d3.curveBasis](https://github.com/d3/d3-shape/blob/master/README.md#curveBasis) - a cubic basis spline, repeating the end points. * [d3.curveBasisClosed](https://github.com/d3/d3-shape/blob/master/README.md#curveBasisClosed) - a closed cubic basis spline. * [d3.curveBasisOpen](https://github.com/d3/d3-shape/blob/master/README.md#curveBasisOpen) - a cubic basis spline. * [d3.curveBundle](https://github.com/d3/d3-shape/blob/master/README.md#curveBundle) - a straightened cubic basis spline. * [*bundle*.beta](https://github.com/d3/d3-shape/blob/master/README.md#bundle_beta) - set the bundle tension *beta*. * [d3.curveCardinal](https://github.com/d3/d3-shape/blob/master/README.md#curveCardinal) - a cubic cardinal spline, with one-sided difference at each end. * [d3.curveCardinalClosed](https://github.com/d3/d3-shape/blob/master/README.md#curveCardinalClosed) - a closed cubic cardinal spline. * [d3.curveCardinalOpen](https://github.com/d3/d3-shape/blob/master/README.md#curveCardinalOpen) - a cubic cardinal spline. * [*cardinal*.tension](https://github.com/d3/d3-shape/blob/master/README.md#cardinal_tension) - set the cardinal spline tension. * [d3.curveCatmullRom](https://github.com/d3/d3-shape/blob/master/README.md#curveCatmullRom) - a cubic Catmull–Rom spline, with one-sided difference at each end. * [d3.curveCatmullRomClosed](https://github.com/d3/d3-shape/blob/master/README.md#curveCatmullRomClosed) - a closed cubic Catmull–Rom spline. * [d3.curveCatmullRomOpen](https://github.com/d3/d3-shape/blob/master/README.md#curveCatmullRomOpen) - a cubic Catmull–Rom spline. * [*catmullRom*.alpha](https://github.com/d3/d3-shape/blob/master/README.md#catmullRom_alpha) - set the Catmull–Rom parameter *alpha*. * [d3.curveLinear](https://github.com/d3/d3-shape/blob/master/README.md#curveLinear) - a polyline. * [d3.curveLinearClosed](https://github.com/d3/d3-shape/blob/master/README.md#curveLinearClosed) - a closed polyline. * [d3.curveMonotoneX](https://github.com/d3/d3-shape/blob/master/README.md#curveMonotoneX) - a cubic spline that, given monotonicity in *x*, preserves it in *y*. * [d3.curveMonotoneY](https://github.com/d3/d3-shape/blob/master/README.md#curveMonotoneY) - a cubic spline that, given monotonicity in *y*, preserves it in *x*. * [d3.curveNatural](https://github.com/d3/d3-shape/blob/master/README.md#curveNatural) - a natural cubic spline. * [d3.curveStep](https://github.com/d3/d3-shape/blob/master/README.md#curveStep) - a piecewise constant function. * [d3.curveStepAfter](https://github.com/d3/d3-shape/blob/master/README.md#curveStepAfter) - a piecewise constant function. * [d3.curveStepBefore](https://github.com/d3/d3-shape/blob/master/README.md#curveStepBefore) - a piecewise constant function. * [*curve*.areaStart](https://github.com/d3/d3-shape/blob/master/README.md#curve_areaStart) - start a new area segment. * [*curve*.areaEnd](https://github.com/d3/d3-shape/blob/master/README.md#curve_areaEnd) - end the current area segment. * [*curve*.lineStart](https://github.com/d3/d3-shape/blob/master/README.md#curve_lineStart) - start a new line segment. * [*curve*.lineEnd](https://github.com/d3/d3-shape/blob/master/README.md#curve_lineEnd) - end the current line segment. * [*curve*.point](https://github.com/d3/d3-shape/blob/master/README.md#curve_point) - add a point to the current line segment. ### [Links](https://github.com/d3/d3-shape/blob/master/README.md#links) A smooth cubic Bézier curve from a source to a target. * [d3.linkVertical](https://github.com/d3/d3-shape/blob/master/README.md#linkVertical) - create a new vertical link generator. * [d3.linkHorizontal](https://github.com/d3/d3-shape/blob/master/README.md#linkHorizontal) - create a new horizontal link generator. * [*link*](https://github.com/d3/d3-shape/blob/master/README.md#_link) - generate a link. * [*link*.source](https://github.com/d3/d3-shape/blob/master/README.md#link_source) - set the source accessor. * [*link*.target](https://github.com/d3/d3-shape/blob/master/README.md#link_target) - set the target accessor. * [*link*.x](https://github.com/d3/d3-shape/blob/master/README.md#link_x) - set the point *x*-accessor. * [*link*.y](https://github.com/d3/d3-shape/blob/master/README.md#link_y) - set the point *y*-accessor. * [d3.linkRadial](https://github.com/d3/d3-shape/blob/master/README.md#linkRadial) - create a new radial link generator. * [*radialLink*.angle](https://github.com/d3/d3-shape/blob/master/README.md#radialLink_angle) - set the point *angle* accessor. * [*radialLink*.radius](https://github.com/d3/d3-shape/blob/master/README.md#radialLink_radius) - set the point *radius* accessor. ### [Symbols](https://github.com/d3/d3-shape/blob/master/README.md#symbols) A categorical shape encoding, as in a scatterplot. * [d3.symbol](https://github.com/d3/d3-shape/blob/master/README.md#symbol) - create a new symbol generator. * [*symbol*](https://github.com/d3/d3-shape/blob/master/README.md#_symbol) - generate a symbol for the given datum. * [*symbol*.type](https://github.com/d3/d3-shape/blob/master/README.md#symbol_type) - set the symbol type. * [*symbol*.size](https://github.com/d3/d3-shape/blob/master/README.md#symbol_size) - set the size of the symbol in square pixels. * [*symbol*.context](https://github.com/d3/d3-shape/blob/master/README.md#symbol_context) - set the rendering context. * [d3.symbols](https://github.com/d3/d3-shape/blob/master/README.md#symbols) - the array of built-in symbol types. * [d3.symbolCircle](https://github.com/d3/d3-shape/blob/master/README.md#symbolCircle) - a circle. * [d3.symbolCross](https://github.com/d3/d3-shape/blob/master/README.md#symbolCross) - a Greek cross with arms of equal length. * [d3.symbolDiamond](https://github.com/d3/d3-shape/blob/master/README.md#symbolDiamond) - a rhombus. * [d3.symbolSquare](https://github.com/d3/d3-shape/blob/master/README.md#symbolSquare) - a square. * [d3.symbolStar](https://github.com/d3/d3-shape/blob/master/README.md#symbolStar) - a pentagonal star (pentagram). * [d3.symbolTriangle](https://github.com/d3/d3-shape/blob/master/README.md#symbolTriangle) - an up-pointing triangle. * [d3.symbolWye](https://github.com/d3/d3-shape/blob/master/README.md#symbolWye) - a Y shape. * [*symbolType*.draw](https://github.com/d3/d3-shape/blob/master/README.md#symbolType_draw) - draw this symbol to the given context. ### [Stacks](https://github.com/d3/d3-shape/blob/master/README.md#stacks) Stack shapes, placing one adjacent to another, as in a stacked bar chart. * [d3.stack](https://github.com/d3/d3-shape/blob/master/README.md#stack) - create a new stack generator. * [*stack*](https://github.com/d3/d3-shape/blob/master/README.md#_stack) - generate a stack for the given dataset. * [*stack*.keys](https://github.com/d3/d3-shape/blob/master/README.md#stack_keys) - set the keys accessor. * [*stack*.value](https://github.com/d3/d3-shape/blob/master/README.md#stack_value) - set the value accessor. * [*stack*.order](https://github.com/d3/d3-shape/blob/master/README.md#stack_order) - set the order accessor. * [*stack*.offset](https://github.com/d3/d3-shape/blob/master/README.md#stack_offset) - set the offset accessor. * [d3.stackOrderAscending](https://github.com/d3/d3-shape/blob/master/README.md#stackOrderAscending) - put the smallest series on bottom. * [d3.stackOrderDescending](https://github.com/d3/d3-shape/blob/master/README.md#stackOrderDescending) - put the largest series on bottom. * [d3.stackOrderInsideOut](https://github.com/d3/d3-shape/blob/master/README.md#stackOrderInsideOut) - put larger series in the middle. * [d3.stackOrderNone](https://github.com/d3/d3-shape/blob/master/README.md#stackOrderNone) - use the given series order. * [d3.stackOrderReverse](https://github.com/d3/d3-shape/blob/master/README.md#stackOrderReverse) - use the reverse of the given series order. * [d3.stackOffsetExpand](https://github.com/d3/d3-shape/blob/master/README.md#stackOffsetExpand) - normalize the baseline to zero and topline to one. * [d3.stackOffsetDiverging](https://github.com/d3/d3-shape/blob/master/README.md#stackOffsetDiverging) - positive above zero; negative below zero. * [d3.stackOffsetNone](https://github.com/d3/d3-shape/blob/master/README.md#stackOffsetNone) - apply a zero baseline. * [d3.stackOffsetSilhouette](https://github.com/d3/d3-shape/blob/master/README.md#stackOffsetSilhouette) - center the streamgraph around zero. * [d3.stackOffsetWiggle](https://github.com/d3/d3-shape/blob/master/README.md#stackOffsetWiggle) - minimize streamgraph wiggling. ## [Time Formats (d3-time-format)](https://github.com/d3/d3-time-format) Parse and format times, inspired by strptime and strftime. * [d3.timeFormat](https://github.com/d3/d3-time-format/blob/master/README.md#timeFormat) - alias for *locale*.format on the default locale. * [d3.timeParse](https://github.com/d3/d3-time-format/blob/master/README.md#timeParse) - alias for *locale*.parse on the default locale. * [d3.utcFormat](https://github.com/d3/d3-time-format/blob/master/README.md#utcFormat) - alias for *locale*.utcFormat on the default locale. * [d3.utcParse](https://github.com/d3/d3-time-format/blob/master/README.md#utcParse) - alias for *locale*.utcParse on the default locale. * [d3.isoFormat](https://github.com/d3/d3-time-format/blob/master/README.md#isoFormat) - an ISO 8601 UTC formatter. * [d3.isoParse](https://github.com/d3/d3-time-format/blob/master/README.md#isoParse) - an ISO 8601 UTC parser. * [d3.timeFormatLocale](https://github.com/d3/d3-time-format/blob/master/README.md#timeFormatLocale) - define a custom locale. * [d3.timeFormatDefaultLocale](https://github.com/d3/d3-time-format/blob/master/README.md#timeFormatDefaultLocale) - define the default locale. * [*locale*.format](https://github.com/d3/d3-time-format/blob/master/README.md#locale_format) - create a time formatter. * [*locale*.parse](https://github.com/d3/d3-time-format/blob/master/README.md#locale_parse) - create a time parser. * [*locale*.utcFormat](https://github.com/d3/d3-time-format/blob/master/README.md#locale_utcFormat) - create a UTC formatter. * [*locale*.utcParse](https://github.com/d3/d3-time-format/blob/master/README.md#locale_utcParse) - create a UTC parser. ## [Time Intervals (d3-time)](https://github.com/d3/d3-time) A calculator for humanity’s peculiar conventions of time. * [d3.timeInterval](https://github.com/d3/d3-time/blob/master/README.md#timeInterval) - implement a new custom time interval. * [*interval*](https://github.com/d3/d3-time/blob/master/README.md#_interval) - alias for *interval*.floor. * [*interval*.floor](https://github.com/d3/d3-time/blob/master/README.md#interval_floor) - round down to the nearest boundary. * [*interval*.round](https://github.com/d3/d3-time/blob/master/README.md#interval_round) - round to the nearest boundary. * [*interval*.ceil](https://github.com/d3/d3-time/blob/master/README.md#interval_ceil) - round up to the nearest boundary. * [*interval*.offset](https://github.com/d3/d3-time/blob/master/README.md#interval_offset) - offset a date by some number of intervals. * [*interval*.range](https://github.com/d3/d3-time/blob/master/README.md#interval_range) - generate a range of dates at interval boundaries. * [*interval*.filter](https://github.com/d3/d3-time/blob/master/README.md#interval_filter) - create a filtered subset of this interval. * [*interval*.every](https://github.com/d3/d3-time/blob/master/README.md#interval_every) - create a filtered subset of this interval. * [*interval*.count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) - count interval boundaries between two dates. * [d3.timeMillisecond](https://github.com/d3/d3-time/blob/master/README.md#timeMillisecond), [d3.utcMillisecond](https://github.com/d3/d3-time/blob/master/README.md#timeMillisecond) - the millisecond interval. * [d3.timeMilliseconds](https://github.com/d3/d3-time/blob/master/README.md#timeMillisecond), [d3.utcMilliseconds](https://github.com/d3/d3-time/blob/master/README.md#timeMillisecond) - aliases for millisecond.range. * [d3.timeSecond](https://github.com/d3/d3-time/blob/master/README.md#timeSecond), [d3.utcSecond](https://github.com/d3/d3-time/blob/master/README.md#timeSecond) - the second interval. * [d3.timeSeconds](https://github.com/d3/d3-time/blob/master/README.md#timeSecond), [d3.utcSeconds](https://github.com/d3/d3-time/blob/master/README.md#timeSecond) - aliases for second.range. * [d3.timeMinute](https://github.com/d3/d3-time/blob/master/README.md#timeMinute), [d3.utcMinute](https://github.com/d3/d3-time/blob/master/README.md#timeMinute) - the minute interval. * [d3.timeMinutes](https://github.com/d3/d3-time/blob/master/README.md#timeMinute), [d3.utcMinutes](https://github.com/d3/d3-time/blob/master/README.md#timeMinute) - aliases for minute.range. * [d3.timeHour](https://github.com/d3/d3-time/blob/master/README.md#timeHour), [d3.utcHour](https://github.com/d3/d3-time/blob/master/README.md#timeHour) - the hour interval. * [d3.timeHours](https://github.com/d3/d3-time/blob/master/README.md#timeHour), [d3.utcHours](https://github.com/d3/d3-time/blob/master/README.md#timeHour) - aliases for hour.range. * [d3.timeDay](https://github.com/d3/d3-time/blob/master/README.md#timeDay), [d3.utcDay](https://github.com/d3/d3-time/blob/master/README.md#timeDay) - the day interval. * [d3.timeDays](https://github.com/d3/d3-time/blob/master/README.md#timeDay), [d3.utcDays](https://github.com/d3/d3-time/blob/master/README.md#timeDay) - aliases for day.range. * [d3.timeWeek](https://github.com/d3/d3-time/blob/master/README.md#timeWeek), [d3.utcWeek](https://github.com/d3/d3-time/blob/master/README.md#timeWeek) - aliases for sunday. * [d3.timeWeeks](https://github.com/d3/d3-time/blob/master/README.md#timeWeek), [d3.utcWeeks](https://github.com/d3/d3-time/blob/master/README.md#timeWeek) - aliases for week.range. * [d3.timeSunday](https://github.com/d3/d3-time/blob/master/README.md#timeSunday), [d3.utcSunday](https://github.com/d3/d3-time/blob/master/README.md#timeSunday) - the week interval, starting on Sunday. * [d3.timeSundays](https://github.com/d3/d3-time/blob/master/README.md#timeSunday), [d3.utcSundays](https://github.com/d3/d3-time/blob/master/README.md#timeSunday) - aliases for sunday.range. * [d3.timeMonday](https://github.com/d3/d3-time/blob/master/README.md#timeMonday), [d3.utcMonday](https://github.com/d3/d3-time/blob/master/README.md#timeMonday) - the week interval, starting on Monday. * [d3.timeMondays](https://github.com/d3/d3-time/blob/master/README.md#timeMonday), [d3.utcMondays](https://github.com/d3/d3-time/blob/master/README.md#timeMonday) - aliases for monday.range. * [d3.timeTuesday](https://github.com/d3/d3-time/blob/master/README.md#timeTuesday), [d3.utcTuesday](https://github.com/d3/d3-time/blob/master/README.md#timeTuesday) - the week interval, starting on Tuesday. * [d3.timeTuesdays](https://github.com/d3/d3-time/blob/master/README.md#timeTuesday), [d3.utcTuesdays](https://github.com/d3/d3-time/blob/master/README.md#timeTuesday) - aliases for tuesday.range. * [d3.timeWednesday](https://github.com/d3/d3-time/blob/master/README.md#timeWednesday), [d3.utcWednesday](https://github.com/d3/d3-time/blob/master/README.md#timeWednesday) - the week interval, starting on Wednesday. * [d3.timeWednesdays](https://github.com/d3/d3-time/blob/master/README.md#timeWednesday), [d3.utcWednesdays](https://github.com/d3/d3-time/blob/master/README.md#timeWednesday) - aliases for wednesday.range. * [d3.timeThursday](https://github.com/d3/d3-time/blob/master/README.md#timeThursday), [d3.utcThursday](https://github.com/d3/d3-time/blob/master/README.md#timeThursday) - the week interval, starting on Thursday. * [d3.timeThursdays](https://github.com/d3/d3-time/blob/master/README.md#timeThursday), [d3.utcThursdays](https://github.com/d3/d3-time/blob/master/README.md#timeThursday) - aliases for thursday.range. * [d3.timeFriday](https://github.com/d3/d3-time/blob/master/README.md#timeFriday), [d3.utcFriday](https://github.com/d3/d3-time/blob/master/README.md#timeFriday) - the week interval, starting on Friday. * [d3.timeFridays](https://github.com/d3/d3-time/blob/master/README.md#timeFriday), [d3.utcFridays](https://github.com/d3/d3-time/blob/master/README.md#timeFriday) - aliases for friday.range. * [d3.timeSaturday](https://github.com/d3/d3-time/blob/master/README.md#timeSaturday), [d3.utcSaturday](https://github.com/d3/d3-time/blob/master/README.md#timeSaturday) - the week interval, starting on Saturday. * [d3.timeSaturdays](https://github.com/d3/d3-time/blob/master/README.md#timeSaturday), [d3.utcSaturdays](https://github.com/d3/d3-time/blob/master/README.md#timeSaturday) - aliases for saturday.range. * [d3.timeMonth](https://github.com/d3/d3-time/blob/master/README.md#timeMonth), [d3.utcMonth](https://github.com/d3/d3-time/blob/master/README.md#timeMonth) - the month interval. * [d3.timeMonths](https://github.com/d3/d3-time/blob/master/README.md#timeMonth), [d3.utcMonths](https://github.com/d3/d3-time/blob/master/README.md#timeMonth) - aliases for month.range. * [d3.timeYear](https://github.com/d3/d3-time/blob/master/README.md#timeYear), [d3.utcYear](https://github.com/d3/d3-time/blob/master/README.md#timeYear) - the year interval. * [d3.timeYears](https://github.com/d3/d3-time/blob/master/README.md#timeYear), [d3.utcYears](https://github.com/d3/d3-time/blob/master/README.md#timeYear) - aliases for year.range. ## [Timers (d3-timer)](https://github.com/d3/d3-timer) An efficient queue for managing thousands of concurrent animations. * [d3.now](https://github.com/d3/d3-timer/blob/master/README.md#now) - get the current high-resolution time. * [d3.timer](https://github.com/d3/d3-timer/blob/master/README.md#timer) - schedule a new timer. * [*timer*.restart](https://github.com/d3/d3-timer/blob/master/README.md#timer_restart) - reset the timer’s start time and callback. * [*timer*.stop](https://github.com/d3/d3-timer/blob/master/README.md#timer_stop) - stop the timer. * [d3.timerFlush](https://github.com/d3/d3-timer/blob/master/README.md#timerFlush) - immediately execute any eligible timers. * [d3.timeout](https://github.com/d3/d3-timer/blob/master/README.md#timeout) - schedule a timer that stops on its first callback. * [d3.interval](https://github.com/d3/d3-timer/blob/master/README.md#interval) - schedule a timer that is called with a configurable period. ## [Transitions (d3-transition)](https://github.com/d3/d3-transition) Animated transitions for [selections](#selections). * [*selection*.transition](https://github.com/d3/d3-transition/blob/master/README.md#selection_transition) - schedule a transition for the selected elements. * [*selection*.interrupt](https://github.com/d3/d3-transition/blob/master/README.md#selection_interrupt) - interrupt and cancel transitions on the selected elements. * [d3.transition](https://github.com/d3/d3-transition/blob/master/README.md#transition) - schedule a transition on the root document element. * [*transition*.select](https://github.com/d3/d3-transition/blob/master/README.md#transition_select) - schedule a transition on the selected elements. * [*transition*.selectAll](https://github.com/d3/d3-transition/blob/master/README.md#transition_selectAll) - schedule a transition on the selected elements. * [*transition*.filter](https://github.com/d3/d3-transition/blob/master/README.md#transition_filter) - filter elements based on data. * [*transition*.merge](https://github.com/d3/d3-transition/blob/master/README.md#transition_merge) - merge this transition with another. * [*transition*.selection](https://github.com/d3/d3-transition/blob/master/README.md#transition_selection) - returns a selection for this transition. * [*transition*.transition](https://github.com/d3/d3-transition/blob/master/README.md#transition_transition) - schedule a new transition following this one. * [*transition*.call](https://github.com/d3/d3-transition/blob/master/README.md#transition_call) - call a function with this transition. * [*transition*.nodes](https://github.com/d3/d3-transition/blob/master/README.md#transition_nodes) - returns an array of all selected elements. * [*transition*.node](https://github.com/d3/d3-transition/blob/master/README.md#transition_node) - returns the first (non-null) element. * [*transition*.size](https://github.com/d3/d3-transition/blob/master/README.md#transition_size) - returns the count of elements. * [*transition*.empty](https://github.com/d3/d3-transition/blob/master/README.md#transition_empty) - returns true if this transition is empty. * [*transition*.each](https://github.com/d3/d3-transition/blob/master/README.md#transition_each) - call a function for each element. * [*transition*.on](https://github.com/d3/d3-transition/blob/master/README.md#transition_on) - add or remove transition event listeners. * [*transition*.attr](https://github.com/d3/d3-transition/blob/master/README.md#transition_attr) - tween the given attribute using the default interpolator. * [*transition*.attrTween](https://github.com/d3/d3-transition/blob/master/README.md#transition_attrTween) - tween the given attribute using a custom interpolator. * [*transition*.style](https://github.com/d3/d3-transition/blob/master/README.md#transition_style) - tween the given style property using the default interpolator. * [*transition*.styleTween](https://github.com/d3/d3-transition/blob/master/README.md#transition_styleTween) - tween the given style property using a custom interpolator. * [*transition*.text](https://github.com/d3/d3-transition/blob/master/README.md#transition_text) - set the text content when the transition starts. * [*transition*.remove](https://github.com/d3/d3-transition/blob/master/README.md#transition_remove) - remove the selected elements when the transition ends. * [*transition*.tween](https://github.com/d3/d3-transition/blob/master/README.md#transition_tween) - run custom code during the transition. * [*transition*.delay](https://github.com/d3/d3-transition/blob/master/README.md#transition_delay) - specify per-element delay in milliseconds. * [*transition*.duration](https://github.com/d3/d3-transition/blob/master/README.md#transition_duration) - specify per-element duration in milliseconds. * [*transition*.ease](https://github.com/d3/d3-transition/blob/master/README.md#transition_ease) - specify the easing function. * [d3.active](https://github.com/d3/d3-transition/blob/master/README.md#active) - select the active transition for a given node. * [d3.interrupt](https://github.com/d3/d3-transition/blob/master/README.md#interrupt) - interrupt the active transition for a given node. ## [Voronoi Diagrams (d3-voronoi)](https://github.com/d3/d3-voronoi) Compute the Voronoi diagram of a given set of points. * [d3.voronoi](https://github.com/d3/d3-voronoi/blob/master/README.md#voronoi) - create a new Voronoi generator. * [*voronoi*](https://github.com/d3/d3-voronoi/blob/master/README.md#_voronoi) - generate a new Voronoi diagram for the given points. * [*voronoi*.polygons](https://github.com/d3/d3-voronoi/blob/master/README.md#voronoi_polygons) - compute the Voronoi polygons for the given points. * [*voronoi*.triangles](https://github.com/d3/d3-voronoi/blob/master/README.md#voronoi_triangles) - compute the Delaunay triangles for the given points. * [*voronoi*.links](https://github.com/d3/d3-voronoi/blob/master/README.md#voronoi_links) - compute the Delaunay links for the given points. * [*voronoi*.x](https://github.com/d3/d3-voronoi/blob/master/README.md#voronoi_x) - set the *x* accessor. * [*voronoi*.y](https://github.com/d3/d3-voronoi/blob/master/README.md#voronoi_y) - set the *y* accessor. * [*voronoi*.extent](https://github.com/d3/d3-voronoi/blob/master/README.md#voronoi_extent) - set the observed extent of points. * [*voronoi*.size](https://github.com/d3/d3-voronoi/blob/master/README.md#voronoi_size) - set the observed extent of points. * [*diagram*.polygons](https://github.com/d3/d3-voronoi/blob/master/README.md#diagram_polygons) - compute the polygons for this Voronoi diagram. * [*diagram*.triangles](https://github.com/d3/d3-voronoi/blob/master/README.md#diagram_triangles) - compute the triangles for this Voronoi diagram. * [*diagram*.links](https://github.com/d3/d3-voronoi/blob/master/README.md#diagram_links) - compute the links for this Voronoi diagram. * [*diagram*.find](https://github.com/d3/d3-voronoi/blob/master/README.md#diagram_find) - find the closest point in this Voronoi diagram. ## [Zooming (d3-zoom)](https://github.com/d3/d3-zoom) Pan and zoom SVG, HTML or Canvas using mouse or touch input. * [d3.zoom](https://github.com/d3/d3-zoom/blob/master/README.md#zoom) - create a zoom behavior. * [*zoom*](https://github.com/d3/d3-zoom/blob/master/README.md#_zoom) - apply the zoom behavior to the selected elements. * [*zoom*.transform](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_transform) - change the transform for the selected elements. * [*zoom*.translateTo](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_translateTo) - translate the transform for the selected elements. * [*zoom*.translateBy](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_translateBy) - translate the transform for the selected elements. * [*zoom*.scaleBy](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_scaleBy) - scale the transform for the selected elements. * [*zoom*.scaleTo](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_scaleTo) - scale the transform for the selected elements. * [*zoom*.filter](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_filter) - control which input events initiate zooming. * [*zoom*.touchable](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_touchable) - set the touch support detector. * [*zoom*.wheelDelta](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_wheelDelta) - override scaling for wheel events. * [*zoom*.clickDistance](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_clickDistance) - set the click distance threshold. * [*zoom*.extent](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_extent) - set the extent of the viewport. * [*zoom*.scaleExtent](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_scaleExtent) - set the allowed scale range. * [*zoom*.translateExtent](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_translateExtent) - set the extent of the zoomable world. * [*zoom*.constrain](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_constrain) - override the transform constraint logic. * [*zoom*.duration](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_duration) - set the duration of zoom transitions. * [*zoom*.interpolate](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_interpolate) - control the interpolation of zoom transitions. * [*zoom*.on](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_on) - listen for zoom events. * [d3.zoomTransform](https://github.com/d3/d3-zoom/blob/master/README.md#zoomTransform) - get the zoom transform for a given element. * [*transform*.scale](https://github.com/d3/d3-zoom/blob/master/README.md#transform_scale) - scale a transform by the specified amount. * [*transform*.translate](https://github.com/d3/d3-zoom/blob/master/README.md#transform_translate) - translate a transform by the specified amount. * [*transform*.apply](https://github.com/d3/d3-zoom/blob/master/README.md#transform_apply) - apply the transform to the given point. * [*transform*.applyX](https://github.com/d3/d3-zoom/blob/master/README.md#transform_applyX) - apply the transform to the given *x*-coordinate. * [*transform*.applyY](https://github.com/d3/d3-zoom/blob/master/README.md#transform_applyY) - apply the transform to the given *y*-coordinate. * [*transform*.invert](https://github.com/d3/d3-zoom/blob/master/README.md#transform_invert) - unapply the transform to the given point. * [*transform*.invertX](https://github.com/d3/d3-zoom/blob/master/README.md#transform_invertX) - unapply the transform to the given *x*-coordinate. * [*transform*.invertY](https://github.com/d3/d3-zoom/blob/master/README.md#transform_invertY) - unapply the transform to the given *y*-coordinate. * [*transform*.rescaleX](https://github.com/d3/d3-zoom/blob/master/README.md#transform_rescaleX) - apply the transform to an *x*-scale’s domain. * [*transform*.rescaleY](https://github.com/d3/d3-zoom/blob/master/README.md#transform_rescaleY) - apply the transform to a *y*-scale’s domain. * [*transform*.toString](https://github.com/d3/d3-zoom/blob/master/README.md#transform_toString) - format the transform as an SVG transform string. * [d3.zoomIdentity](https://github.com/d3/d3-zoom/blob/master/README.md#zoomIdentity) - the identity transform. ================================================ FILE: inst/www/d3/v4/CHANGES.md ================================================ # Changes in D3 4.0 D3 4.0 is modular. Instead of one library, D3 is now [many small libraries](#table-of-contents) that are designed to work together. You can pick and choose which parts to use as you see fit. Each library is maintained in its own repository, allowing decentralized ownership and independent release cycles. The default bundle combines about thirty of these microlibraries. ```html ``` As before, you can load optional plugins on top of the default bundle, such as [ColorBrewer scales](https://github.com/d3/d3-scale-chromatic): ```html ``` You are not required to use the default bundle! If you’re just using [d3-selection](https://github.com/d3/d3-selection), use it as a standalone library. Like the default bundle, you can load D3 microlibraries using vanilla script tags or RequireJS (great for HTTP/2!): ```html ``` You can also `cat` D3 microlibraries into a custom bundle, or use tools such as [Webpack](https://webpack.github.io/) and [Rollup](http://rollupjs.org/) to create [optimized bundles](https://bl.ocks.org/mbostock/bb09af4c39c79cffcde4). Custom bundles are great for applications that use a subset of D3’s features; for example, a React chart library might use D3 for scales and shapes, and React to manipulate the DOM. The D3 microlibraries are written as [ES6 modules](http://www.2ality.com/2014/09/es6-modules-final.html), and Rollup lets you pick at the symbol level to produce smaller bundles. Small files are nice, but modularity is also about making D3 more *fun*. Microlibraries are easier to understand, develop and test. They make it easier for new people to get involved and contribute. They reduce the distinction between a “core module” and a “plugin”, and increase the pace of development in D3 features. If you don’t care about modularity, you can mostly ignore this change and keep using the default bundle. However, there is one unavoidable consequence of adopting ES6 modules: every symbol in D3 4.0 now shares a flat namespace rather than the nested one of D3 3.x. For example, d3.scale.linear is now d3.scaleLinear, and d3.layout.treemap is now d3.treemap. The adoption of ES6 modules also means that D3 is now written exclusively in [strict mode](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode) and has better readability. And there have been many other significant improvements to D3’s features! (Nearly all of the code from D3 3.x has been rewritten.) These changes are covered below. ### Other Global Changes The default [UMD bundle](https://github.com/umdjs/umd) is now [anonymous](https://github.com/requirejs/requirejs/wiki/Updating-existing-libraries#register-as-an-anonymous-module-). No `d3` global is exported if AMD or CommonJS is detected. In a vanilla environment, the D3 microlibraries share the `d3` global, even if you load them independently; thus, code you write is the same whether or not you use the default bundle. (See [Let’s Make a (D3) Plugin](https://bost.ocks.org/mike/d3-plugin/) for more.) The generated bundle is no longer stored in the Git repository; Bower has been repointed to [d3-bower](https://github.com/mbostock-bower/d3-bower), and you can find the generated files on [npm](https://unpkg.com/d3) or attached to the [latest release](https://github.com/d3/d3/releases/latest). The non-minified default bundle is no longer mangled, making it more readable and preserving inline comments. To the consternation of some users, 3.x employed Unicode variable names such as λ, φ, τ and π for a concise representation of mathematical operations. A downside of this approach was that a SyntaxError would occur if you loaded the non-minified D3 using ISO-8859-1 instead of UTF-8. 3.x also used Unicode string literals, such as the SI-prefix µ for 1e-6. 4.0 uses only ASCII variable names and ASCII string literals (see [rollup-plugin-ascii](https://github.com/mbostock/rollup-plugin-ascii)), avoiding encoding problems. ### Table of Contents * [Arrays](#arrays-d3-array) * [Axes](#axes-d3-axis) * [Brushes](#brushes-d3-brush) * [Chords](#chords-d3-chord) * [Collections](#collections-d3-collection) * [Colors](#colors-d3-color) * [Dispatches](#dispatches-d3-dispatch) * [Dragging](#dragging-d3-drag) * [Delimiter-Separated Values](#delimiter-separated-values-d3-dsv) * [Easings](#easings-d3-ease) * [Forces](#forces-d3-force) * [Number Formats](#number-formats-d3-format) * [Geographies](#geographies-d3-geo) * [Hierarchies](#hierarchies-d3-hierarchy) * [Internals](#internals) * [Interpolators](#interpolators-d3-interpolate) * [Paths](#paths-d3-path) * [Polygons](#polygons-d3-polygon) * [Quadtrees](#quadtrees-d3-quadtree) * [Queues](#queues-d3-queue) * [Random Numbers](#random-numbers-d3-random) * [Requests](#requests-d3-request) * [Scales](#scales-d3-scale) * [Selections](#selections-d3-selection) * [Shapes](#shapes-d3-shape) * [Time Formats](#time-formats-d3-time-format) * [Time Intervals](#time-intervals-d3-time) * [Timers](#timers-d3-timer) * [Transitions](#transitions-d3-transition) * [Voronoi Diagrams](#voronoi-diagrams-d3-voronoi) * [Zooming](#zooming-d3-zoom) ## [Arrays (d3-array)](https://github.com/d3/d3-array/blob/master/README.md) The new [d3.scan](https://github.com/d3/d3-array/blob/master/README.md#scan) method performs a linear scan of an array, returning the index of the least element according to the specified comparator. This is similar to [d3.min](https://github.com/d3/d3-array/blob/master/README.md#min) and [d3.max](https://github.com/d3/d3-array/blob/master/README.md#max), except you can use it to find the position of an extreme element, rather than just calculate an extreme value. ```js var data = [ {name: "Alice", value: 2}, {name: "Bob", value: 3}, {name: "Carol", value: 1}, {name: "Dwayne", value: 5} ]; var i = d3.scan(data, function(a, b) { return a.value - b.value; }); // 2 data[i]; // {name: "Carol", value: 1} ``` The new [d3.ticks](https://github.com/d3/d3-array/blob/master/README.md#ticks) and [d3.tickStep](https://github.com/d3/d3-array/blob/master/README.md#tickStep) methods are useful for generating human-readable numeric ticks. These methods are a low-level alternative to [*continuous*.ticks](https://github.com/d3/d3-scale/blob/master/README.md#continuous_ticks) from [d3-scale](https://github.com/d3/d3-scale). The new implementation is also more accurate, returning the optimal number of ticks as measured by relative error. ```js var ticks = d3.ticks(0, 10, 5); // [0, 2, 4, 6, 8, 10] ``` The [d3.range](https://github.com/d3/d3-array/blob/master/README.md#range) method no longer makes an elaborate attempt to avoid floating-point error when *step* is not an integer. The returned values are strictly defined as *start* + *i* \* *step*, where *i* is an integer. (Learn more about [floating point math](http://0.30000000000000004.com/).) d3.range returns the empty array for infinite ranges, rather than throwing an error. The method signature for optional accessors has been changed to be more consistent with array methods such as [*array*.forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach): the accessor is passed the current element (*d*), the index (*i*), and the array (*data*), with *this* as undefined. This affects [d3.min](https://github.com/d3/d3-array/blob/master/README.md#min), [d3.max](https://github.com/d3/d3-array/blob/master/README.md#max), [d3.extent](https://github.com/d3/d3-array/blob/master/README.md#extent), [d3.sum](https://github.com/d3/d3-array/blob/master/README.md#sum), [d3.mean](https://github.com/d3/d3-array/blob/master/README.md#mean), [d3.median](https://github.com/d3/d3-array/blob/master/README.md#median), [d3.quantile](https://github.com/d3/d3-array/blob/master/README.md#quantile), [d3.variance](https://github.com/d3/d3-array/blob/master/README.md#variance) and [d3.deviation](https://github.com/d3/d3-array/blob/master/README.md#deviation). The [d3.quantile](https://github.com/d3/d3-array/blob/master/README.md#quantile) method previously did not take an accessor. Some methods with optional arguments now treat those arguments as missing if they are null or undefined, rather than strictly checking arguments.length. The new [d3.histogram](https://github.com/d3/d3-array/blob/master/README.md#histograms) API replaces d3.layout.histogram. Rather than exposing *bin*.x and *bin*.dx on each returned bin, the histogram exposes *bin*.x0 and *bin*.x1, guaranteeing that *bin*.x0 is exactly equal to *bin*.x1 on the preceeding bin. The “frequency” and “probability” modes are no longer supported; each bin is simply an array of elements from the input data, so *bin*.length is equal to D3 3.x’s *bin*.y in frequency mode. To compute a probability distribution, divide the number of elements in each bin by the total number of elements. The *histogram*.range method has been renamed [*histogram*.domain](https://github.com/d3/d3-array/blob/master/README.md#histogram_domain) for consistency with scales. The *histogram*.bins method has been renamed [*histogram*.thresholds](https://github.com/d3/d3-array/blob/master/README.md#histogram_thresholds), and no longer accepts an upper value: *n* thresholds will produce *n* + 1 bins. If you specify a desired number of bins rather than thresholds, d3.histogram now uses [d3.ticks](https://github.com/d3/d3-array/blob/master/README.md#ticks) to compute nice bin thresholds. In addition to the default Sturges’ formula, D3 now implements the [Freedman-Diaconis rule](https://github.com/d3/d3-array/blob/master/README.md#thresholdFreedmanDiaconis) and [Scott’s normal reference rule](https://github.com/d3/d3-array/blob/master/README.md#thresholdScott). ## [Axes (d3-axis)](https://github.com/d3/d3-axis/blob/master/README.md) To render axes properly in D3 3.x, you needed to style them: ```html ``` If you didn’t, you saw this: D3 4.0 provides default styles and shorter syntax. In place of d3.svg.axis and *axis*.orient, D3 4.0 now provides four constructors for each orientation: [d3.axisTop](https://github.com/d3/d3-axis/blob/master/README.md#axisTop), [d3.axisRight](https://github.com/d3/d3-axis/blob/master/README.md#axisRight), [d3.axisBottom](https://github.com/d3/d3-axis/blob/master/README.md#axisBottom), [d3.axisLeft](https://github.com/d3/d3-axis/blob/master/README.md#axisLeft). These constructors accept a scale, so you can reduce all of the above to: ```html ``` And get this: As before, you can customize the axis appearance either by applying stylesheets or by modifying the axis elements. The default appearance has been changed slightly to offset the axis by a half-pixel; this fixes a crisp-edges rendering issue on Safari where the axis would be drawn two-pixels thick. There’s now an [*axis*.tickArguments](https://github.com/d3/d3-axis/blob/master/README.md#axis_tickArguments) method, as an alternative to [*axis*.ticks](https://github.com/d3/d3-axis/blob/master/README.md#axis_ticks) that also allows the axis tick arguments to be inspected. The [*axis*.tickSize](https://github.com/d3/d3-axis/blob/master/README.md#axis_tickSize) method has been changed to only allow a single argument when setting the tick size. The *axis*.innerTickSize and *axis*.outerTickSize methods have been renamed [*axis*.tickSizeInner](https://github.com/d3/d3-axis/blob/master/README.md#axis_tickSizeInner) and [*axis*.tickSizeOuter](https://github.com/d3/d3-axis/blob/master/README.md#axis_tickSizeOuter), respectively. ## [Brushes (d3-brush)](https://github.com/d3/d3-brush/blob/master/README.md) Replacing d3.svg.brush, there are now three classes of brush for brushing along the *x*-dimension, the *y*-dimension, or both: [d3.brushX](https://github.com/d3/d3-brush/blob/master/README.md#brushX), [d3.brushY](https://github.com/d3/d3-brush/blob/master/README.md#brushY), [d3.brush](https://github.com/d3/d3-brush/blob/master/README.md#brush). Brushes are no longer dependent on [scales](#scales-d3-scale); instead, each brush defines a selection in screen coordinates. This selection can be [inverted](https://github.com/d3/d3-scale/blob/master/README.md#continuous_invert) if you want to compute the corresponding data domain. And rather than rely on the scales’ ranges to determine the brushable area, there is now a [*brush*.extent](https://github.com/d3/d3-brush/blob/master/README.md#brush_extent) method for setting it. If you do not set the brush extent, it defaults to the full extent of the owner SVG element. The *brush*.clamp method has also been eliminated; brushing is always restricted to the brushable area defined by the brush extent. Brushes no longer store the active brush selection (*i.e.*, the highlighted region; the brush’s position) internally. The brush’s position is now stored on any elements to which the brush has been applied. The brush’s position is available as *event*.selection within a brush event or by calling [d3.brushSelection](https://github.com/d3/d3-brush/blob/master/README.md#brushSelection) on a given *element*. To move the brush programmatically, use [*brush*.move](https://github.com/d3/d3-brush/blob/master/README.md#brush_move) with a given [selection](#selections-d3-selection) or [transition](#transitions-d3-transition); see the [brush snapping example](https://bl.ocks.org/mbostock/6232537). The *brush*.event method has been removed. Brush interaction has been improved. By default, brushes now ignore right-clicks intended for the context menu; you can change this behavior using [*brush*.filter](https://github.com/d3/d3-brush/blob/master/README.md#brush_filter). Brushes also ignore emulated mouse events on iOS. Holding down SHIFT (⇧) while brushing locks the *x*- or *y*-position of the brush. Holding down META (⌘) while clicking and dragging starts a new selection, rather than translating the existing selection. The default appearance of the brush has also been improved and slightly simplified. Previously it was necessary to apply styles to the brush to give it a reasonable appearance, such as: ```css .brush .extent { stroke: #fff; fill-opacity: .125; shape-rendering: crispEdges; } ``` These styles are now applied by default as attributes; if you want to customize the brush appearance, you can still apply external styles or modify the brush elements. (D3 4.0 features a similar improvement to [axes](#axes-d3-axis).) A new [*brush*.handleSize](https://github.com/d3/d3-brush/blob/master/README.md#brush_handleSize) method lets you override the brush handle size; it defaults to six pixels. The brush now consumes handled events, making it easier to combine with other interactive behaviors such as [dragging](#dragging-d3-drag) and [zooming](#zooming-d3-zoom). The *brushstart* and *brushend* events have been renamed to *start* and *end*, respectively. The brush event no longer reports a *event*.mode to distinguish between resizing and dragging the brush. ## [Chords (d3-chord)](https://github.com/d3/d3-chord/blob/master/README.md) Pursuant to the great namespace flattening: * d3.layout.chord ↦ [d3.chord](https://github.com/d3/d3-chord/blob/master/README.md#chord) * d3.svg.chord ↦ [d3.ribbon](https://github.com/d3/d3-chord/blob/master/README.md#ribbon) For consistency with [*arc*.padAngle](https://github.com/d3/d3-shape/blob/master/README.md#arc_padAngle), *chord*.padding has also been renamed to [*ribbon*.padAngle](https://github.com/d3/d3-chord/blob/master/README.md#ribbon_padAngle). A new [*ribbon*.context](https://github.com/d3/d3-chord/blob/master/README.md#ribbon_context) method lets you render chord diagrams to Canvas! See also [d3-path](#paths-d3-path). ## [Collections (d3-collection)](https://github.com/d3/d3-collection/blob/master/README.md) The [d3.set](https://github.com/d3/d3-collection/blob/master/README.md#set) constructor now accepts an existing set for making a copy. If you pass an array to d3.set, you can also pass a value accessor. This accessor takes the standard arguments: the current element (*d*), the index (*i*), and the array (*data*), with *this* undefined. For example: ```js var yields = [ {yield: 22.13333, variety: "Manchuria", year: 1932, site: "Grand Rapids"}, {yield: 26.76667, variety: "Peatland", year: 1932, site: "Grand Rapids"}, {yield: 28.10000, variety: "No. 462", year: 1931, site: "Duluth"}, {yield: 38.50000, variety: "Svansota", year: 1932, site: "Waseca"}, {yield: 40.46667, variety: "Svansota", year: 1931, site: "Crookston"}, {yield: 36.03333, variety: "Peatland", year: 1932, site: "Waseca"}, {yield: 34.46667, variety: "Wisconsin No. 38", year: 1931, site: "Grand Rapids"} ]; var sites = d3.set(yields, function(d) { return d.site; }); // Grand Rapids, Duluth, Waseca, Crookston ``` The [d3.map](https://github.com/d3/d3-collection/blob/master/README.md#map) constructor also follows the standard array accessor argument pattern. The *map*.forEach and *set*.forEach methods have been renamed to [*map*.each](https://github.com/d3/d3-collection/blob/master/README.md#map_each) and [*set*.each](https://github.com/d3/d3-collection/blob/master/README.md#set_each) respectively. The order of arguments for *map*.each has also been changed to *value*, *key* and *map*, while the order of arguments for *set*.each is now *value*, *value* and *set*. This is closer to ES6 [*map*.forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/forEach) and [*set*.forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/forEach). Also like ES6 Map and Set, *map*.set and *set*.add now return the current collection (rather than the added value) to facilitate method chaining. New [*map*.clear](https://github.com/d3/d3-collection/blob/master/README.md#map_clear) and [*set*.clear](https://github.com/d3/d3-collection/blob/master/README.md#set_clear) methods can be used to empty collections. The [*nest*.map](https://github.com/d3/d3-collection/blob/master/README.md#nest_map) method now always returns a d3.map instance. For a plain object, use [*nest*.object](https://github.com/d3/d3-collection/blob/master/README.md#nest_object) instead. When used in conjunction with [*nest*.rollup](https://github.com/d3/d3-collection/blob/master/README.md#nest_rollup), [*nest*.entries](https://github.com/d3/d3-collection/blob/master/README.md#nest_entries) now returns {key, value} objects for the leaf entries, instead of {key, values}. This makes *nest*.rollup easier to use in conjunction with [hierarchies](#hierarchies-d3-hierarchy), as in this [Nest Treemap example](https://bl.ocks.org/mbostock/2838bf53e0e65f369f476afd653663a2). ## [Colors (d3-color)](https://github.com/d3/d3-color/blob/master/README.md) All colors now have opacity exposed as *color*.opacity, which is a number in [0, 1]. You can pass an optional opacity argument to the color space constructors [d3.rgb](https://github.com/d3/d3-color/blob/master/README.md#rgb), [d3.hsl](https://github.com/d3/d3-color/blob/master/README.md#hsl), [d3.lab](https://github.com/d3/d3-color/blob/master/README.md#lab), [d3.hcl](https://github.com/d3/d3-color/blob/master/README.md#hcl) or [d3.cubehelix](https://github.com/d3/d3-color/blob/master/README.md#cubehelix). You can now parse rgba(…) and hsla(…) CSS color specifiers or the string “transparent” using [d3.color](https://github.com/d3/d3-color/blob/master/README.md#color). The “transparent” color is defined as an RGB color with zero opacity and undefined red, green and blue channels; this differs slightly from CSS which defines it as transparent black, but is useful for simplifying color interpolation logic where either the starting or ending color has undefined channels. The [*color*.toString](https://github.com/d3/d3-color/blob/master/README.md#color_toString) method now likewise returns an rgb(…) or rgba(…) string with integer channel values, not the hexadecimal RGB format, consistent with CSS computed values. This improves performance by short-circuiting transitions when the element’s starting style matches its ending style. The new [d3.color](https://github.com/d3/d3-color/blob/master/README.md#color) method is the primary method for parsing colors: it returns a d3.color instance in the appropriate color space, or null if the CSS color specifier is invalid. For example: ```js var red = d3.color("hsl(0, 80%, 50%)"); // {h: 0, l: 0.5, s: 0.8, opacity: 1} ``` The parsing implementation is now more robust. For example, you can no longer mix integers and percentages in rgb(…), and it correctly handles whitespace, decimal points, number signs, and other edge cases. The color space constructors d3.rgb, d3.hsl, d3.lab, d3.hcl and d3.cubehelix now always return a copy of the input color, converted to the corresponding color space. While [*color*.rgb](https://github.com/d3/d3-color/blob/master/README.md#color_rgb) remains, *rgb*.hsl has been removed; use d3.hsl to convert a color to the RGB color space. The RGB color space no longer greedily quantizes and clamps channel values when creating colors, improving accuracy in color space conversion. Quantization and clamping now occurs in *color*.toString when formatting a color for display. You can use the new [*color*.displayable](https://github.com/d3/d3-color/blob/master/README.md#color_displayable) to test whether a color is [out-of-gamut](https://en.wikipedia.org/wiki/Gamut). The [*rgb*.brighter](https://github.com/d3/d3-color/blob/master/README.md#rgb_brighter) method no longer special-cases black. This is a multiplicative operator, defining a new color *r*′, *g*′, *b*′ where *r*′ = *r* × *pow*(0.7, *k*), *g*′ = *g* × *pow*(0.7, *k*) and *b*′ = *b* × *pow*(0.7, *k*); a brighter black is still black. There’s a new [d3.cubehelix](https://github.com/d3/d3-color/blob/master/README.md#cubehelix) color space, generalizing Dave Green’s color scheme! (See also [d3.interpolateCubehelixDefault](https://github.com/d3/d3-scale/blob/master/README.md#interpolateCubehelixDefault) from [d3-scale](#scales-d3-scale).) You can continue to define your own custom color spaces, too; see [d3-hsv](https://github.com/d3/d3-hsv) for an example. ## [Dispatches (d3-dispatch)](https://github.com/d3/d3-dispatch/blob/master/README.md) Rather than decorating the *dispatch* object with each event type, the dispatch object now exposes generic [*dispatch*.call](https://github.com/d3/d3-dispatch/blob/master/README.md#dispatch_call) and [*dispatch*.apply](https://github.com/d3/d3-dispatch/blob/master/README.md#dispatch_apply) methods which take the *type* string as the first argument. For example, in D3 3.x, you might say: ```js dispatcher.foo.call(that, "Hello, Foo!"); ``` To dispatch a *foo* event in D3 4.0, you’d say: ```js dispatcher.call("foo", that, "Hello, Foo!"); ``` The [*dispatch*.on](https://github.com/d3/d3-dispatch/blob/master/README.md#dispatch_on) method now accepts multiple typenames, allowing you to add or remove listeners for multiple events simultaneously. For example, to send both *foo* and *bar* events to the same listener: ```js dispatcher.on("foo bar", function(message) { console.log(message); }); ``` This matches the new behavior of [*selection*.on](https://github.com/d3/d3-selection/blob/master/README.md#selection_on) in [d3-selection](#selections-d3-selection). The *dispatch*.on method now validates that the specifier *listener* is a function, rather than throwing an error in the future. The new implementation d3.dispatch is faster, using fewer closures to improve performance. There’s also a new [*dispatch*.copy](https://github.com/d3/d3-dispatch/blob/master/README.md#dispatch_copy) method for making a copy of a dispatcher; this is used by [d3-transition](#transitions-d3-transition) to improve the performance of transitions in the common case where all elements in a transition have the same transition event listeners. ## [Dragging (d3-drag)](https://github.com/d3/d3-drag/blob/master/README.md) The drag behavior d3.behavior.drag has been renamed to d3.drag. The *drag*.origin method has been replaced by [*drag*.subject](https://github.com/d3/d3-drag/blob/master/README.md#drag_subject), which allows you to define the thing being dragged at the start of a drag gesture. This is particularly useful with Canvas, where draggable objects typically share a Canvas element (as opposed to SVG, where draggable objects typically have distinct DOM elements); see the [circle dragging example](https://bl.ocks.org/mbostock/444757cc9f0fde320a5f469cd36860f4). A new [*drag*.container](https://github.com/d3/d3-drag/blob/master/README.md#drag_container) method lets you override the parent element that defines the drag gesture coordinate system. This defaults to the parent node of the element to which the drag behavior was applied. For dragging on Canvas elements, you probably want to use the Canvas element as the container. [Drag events](https://github.com/d3/d3-drag/blob/master/README.md#drag-events) now expose an [*event*.on](https://github.com/d3/d3-drag/blob/master/README.md#event_on) method for registering temporary listeners for duration of the current drag gesture; these listeners can capture state for the current gesture, such as the thing being dragged. A new *event*.active property lets you detect whether multiple (multitouch) drag gestures are active concurrently. The *dragstart* and *dragend* events have been renamed to *start* and *end*. By default, drag behaviors now ignore right-clicks intended for the context menu; use [*drag*.filter](https://github.com/d3/d3-drag/blob/master/README.md#drag_filter) to control which events are ignored. The drag behavior also ignores emulated mouse events on iOS. The drag behavior now consumes handled events, making it easier to combine with other interactive behaviors such as [zooming](#zooming-d3-zoom). The new [d3.dragEnable](https://github.com/d3/d3-drag/blob/master/README.md#dragEnable) and [d3.dragDisable](https://github.com/d3/d3-drag/blob/master/README.md#dragDisable) methods provide a low-level API for implementing drag gestures across browsers and devices. These methods are also used by other D3 components, such as the [brush](#brushes-d3-brush). ## [Delimiter-Separated Values (d3-dsv)](https://github.com/d3/d3-dsv/blob/master/README.md) Pursuant to the great namespace flattening, various CSV and TSV methods have new names: * d3.csv.parse ↦ [d3.csvParse](https://github.com/d3/d3-dsv/blob/master/README.md#csvParse) * d3.csv.parseRows ↦ [d3.csvParseRows](https://github.com/d3/d3-dsv/blob/master/README.md#csvParseRows) * d3.csv.format ↦ [d3.csvFormat](https://github.com/d3/d3-dsv/blob/master/README.md#csvFormat) * d3.csv.formatRows ↦ [d3.csvFormatRows](https://github.com/d3/d3-dsv/blob/master/README.md#csvFormatRows) * d3.tsv.parse ↦ [d3.tsvParse](https://github.com/d3/d3-dsv/blob/master/README.md#tsvParse) * d3.tsv.parseRows ↦ [d3.tsvParseRows](https://github.com/d3/d3-dsv/blob/master/README.md#tsvParseRows) * d3.tsv.format ↦ [d3.tsvFormat](https://github.com/d3/d3-dsv/blob/master/README.md#tsvFormat) * d3.tsv.formatRows ↦ [d3.tsvFormatRows](https://github.com/d3/d3-dsv/blob/master/README.md#tsvFormatRows) The [d3.csv](https://github.com/d3/d3-request/blob/master/README.md#csv) and [d3.tsv](https://github.com/d3/d3-request/blob/master/README.md#tsv) methods for loading files of the corresponding formats have not been renamed, however! Those are defined in [d3-request](#requests-d3-request).There’s no longer a d3.dsv method, which served the triple purpose of defining a DSV formatter, a DSV parser and a DSV requestor; instead, there’s just [d3.dsvFormat](https://github.com/d3/d3-dsv/blob/master/README.md#dsvFormat) which you can use to define a DSV formatter and parser. You can use [*request*.response](https://github.com/d3/d3-request/blob/master/README.md#request_response) to make a request and then parse the response body, or just use [d3.text](https://github.com/d3/d3-request/blob/master/README.md#text). The [*dsv*.parse](https://github.com/d3/d3-dsv/blob/master/README.md#dsv_parse) method now exposes the column names and their input order as *data*.columns. For example: ```js d3.csv("cars.csv", function(error, data) { if (error) throw error; console.log(data.columns); // ["Year", "Make", "Model", "Length"] }); ``` You can likewise pass an optional array of column names to [*dsv*.format](https://github.com/d3/d3-dsv/blob/master/README.md#dsv_format) to format only a subset of columns, or to specify the column order explicitly: ```js var string = d3.csvFormat(data, ["Year", "Model", "Length"]); ``` The parser is a bit faster and the formatter is a bit more robust: inputs are coerced to strings before formatting, fixing an obscure crash, and deprecated support for falling back to [*dsv*.formatRows](https://github.com/d3/d3-dsv/blob/master/README.md#dsv_formatRows) when the input *data* is an array of arrays has been removed. ## [Easings (d3-ease)](https://github.com/d3/d3-ease/blob/master/README.md) D3 3.x used strings, such as “cubic-in-out”, to identify easing methods; these strings could be passed to d3.ease or *transition*.ease. D3 4.0 uses symbols instead, such as [d3.easeCubicInOut](https://github.com/d3/d3-ease/blob/master/README.md#easeCubicInOut). Symbols are simpler and cleaner. They work well with Rollup to produce smaller custom bundles. You can still define your own custom easing function, too, if desired. Here’s the full list of equivalents: * linear ↦ [d3.easeLinear](https://github.com/d3/d3-ease/blob/master/README.md#easeLinear)¹ * linear-in ↦ [d3.easeLinear](https://github.com/d3/d3-ease/blob/master/README.md#easeLinear)¹ * linear-out ↦ [d3.easeLinear](https://github.com/d3/d3-ease/blob/master/README.md#easeLinear)¹ * linear-in-out ↦ [d3.easeLinear](https://github.com/d3/d3-ease/blob/master/README.md#easeLinear)¹ * linear-out-in ↦ [d3.easeLinear](https://github.com/d3/d3-ease/blob/master/README.md#easeLinear)¹ * poly-in ↦ [d3.easePolyIn](https://github.com/d3/d3-ease/blob/master/README.md#easePolyIn) * poly-out ↦ [d3.easePolyOut](https://github.com/d3/d3-ease/blob/master/README.md#easePolyOut) * poly-in-out ↦ [d3.easePolyInOut](https://github.com/d3/d3-ease/blob/master/README.md#easePolyInOut) * poly-out-in ↦ REMOVED² * quad-in ↦ [d3.easeQuadIn](https://github.com/d3/d3-ease/blob/master/README.md#easeQuadIn) * quad-out ↦ [d3.easeQuadOut](https://github.com/d3/d3-ease/blob/master/README.md#easeQuadOut) * quad-in-out ↦ [d3.easeQuadInOut](https://github.com/d3/d3-ease/blob/master/README.md#easeQuadInOut) * quad-out-in ↦ REMOVED² * cubic-in ↦ [d3.easeCubicIn](https://github.com/d3/d3-ease/blob/master/README.md#easeCubicIn) * cubic-out ↦ [d3.easeCubicOut](https://github.com/d3/d3-ease/blob/master/README.md#easeCubicOut) * cubic-in-out ↦ [d3.easeCubicInOut](https://github.com/d3/d3-ease/blob/master/README.md#easeCubicInOut) * cubic-out-in ↦ REMOVED² * sin-in ↦ [d3.easeSinIn](https://github.com/d3/d3-ease/blob/master/README.md#easeSinIn) * sin-out ↦ [d3.easeSinOut](https://github.com/d3/d3-ease/blob/master/README.md#easeSinOut) * sin-in-out ↦ [d3.easeSinInOut](https://github.com/d3/d3-ease/blob/master/README.md#easeSinInOut) * sin-out-in ↦ REMOVED² * exp-in ↦ [d3.easeExpIn](https://github.com/d3/d3-ease/blob/master/README.md#easeExpIn) * exp-out ↦ [d3.easeExpOut](https://github.com/d3/d3-ease/blob/master/README.md#easeExpOut) * exp-in-out ↦ [d3.easeExpInOut](https://github.com/d3/d3-ease/blob/master/README.md#easeExpInOut) * exp-out-in ↦ REMOVED² * circle-in ↦ [d3.easeCircleIn](https://github.com/d3/d3-ease/blob/master/README.md#easeCircleIn) * circle-out ↦ [d3.easeCircleOut](https://github.com/d3/d3-ease/blob/master/README.md#easeCircleOut) * circle-in-out ↦ [d3.easeCircleInOut](https://github.com/d3/d3-ease/blob/master/README.md#easeCircleInOut) * circle-out-in ↦ REMOVED² * elastic-in ↦ [d3.easeElasticOut](https://github.com/d3/d3-ease/blob/master/README.md#easeElasticOut)² * elastic-out ↦ [d3.easeElasticIn](https://github.com/d3/d3-ease/blob/master/README.md#easeElasticIn)² * elastic-in-out ↦ REMOVED² * elastic-out-in ↦ [d3.easeElasticInOut](https://github.com/d3/d3-ease/blob/master/README.md#easeElasticInOut)² * back-in ↦ [d3.easeBackIn](https://github.com/d3/d3-ease/blob/master/README.md#easeBackIn) * back-out ↦ [d3.easeBackOut](https://github.com/d3/d3-ease/blob/master/README.md#easeBackOut) * back-in-out ↦ [d3.easeBackInOut](https://github.com/d3/d3-ease/blob/master/README.md#easeBackInOut) * back-out-in ↦ REMOVED² * bounce-in ↦ [d3.easeBounceOut](https://github.com/d3/d3-ease/blob/master/README.md#easeBounceOut)² * bounce-out ↦ [d3.easeBounceIn](https://github.com/d3/d3-ease/blob/master/README.md#easeBounceIn)² * bounce-in-out ↦ REMOVED² * bounce-out-in ↦ [d3.easeBounceInOut](https://github.com/d3/d3-ease/blob/master/README.md#easeBounceInOut)² ¹ The -in, -out and -in-out variants of linear easing are identical, so there’s just d3.easeLinear.
    ² Elastic and bounce easing were inadvertently reversed in 3.x, so 4.0 eliminates -out-in easing! For convenience, there are also default aliases for each easing method. For example, [d3.easeCubic](https://github.com/d3/d3-ease/blob/master/README.md#easeCubic) is an alias for [d3.easeCubicInOut](https://github.com/d3/d3-ease/blob/master/README.md#easeCubicInOut). Most default to -in-out; the exceptions are [d3.easeBounce](https://github.com/d3/d3-ease/blob/master/README.md#easeBounce) and [d3.easeElastic](https://github.com/d3/d3-ease/blob/master/README.md#easeElastic), which default to -out. Rather than pass optional arguments to d3.ease or *transition*.ease, parameterizable easing functions now have named parameters: [*poly*.exponent](https://github.com/d3/d3-ease/blob/master/README.md#poly_exponent), [*elastic*.amplitude](https://github.com/d3/d3-ease/blob/master/README.md#elastic_amplitude), [*elastic*.period](https://github.com/d3/d3-ease/blob/master/README.md#elastic_period) and [*back*.overshoot](https://github.com/d3/d3-ease/blob/master/README.md#back_overshoot). For example, in D3 3.x you might say: ```js var e = d3.ease("elastic-out-in", 1.2); ``` The equivalent in D3 4.0 is: ```js var e = d3.easeElastic.amplitude(1.2); ``` Many of the easing functions have been optimized for performance and accuracy. Several bugs have been fixed, as well, such as the interpretation of the overshoot parameter for back easing, and the period parameter for elastic easing. Also, [d3-transition](#transitions-d3-transition) now explicitly guarantees that the last tick of the transition happens at exactly *t* = 1, avoiding floating point errors in some easing functions. There’s now a nice [visual reference](https://github.com/d3/d3-ease/blob/master/README.md) and an [animated reference](https://bl.ocks.org/mbostock/248bac3b8e354a9103c4) to the new easing functions, too! ## [Forces (d3-force)](https://github.com/d3/d3-force/blob/master/README.md) The force layout d3.layout.force has been renamed to d3.forceSimulation. The force simulation now uses [velocity Verlet integration](https://en.wikipedia.org/wiki/Verlet_integration#Velocity_Verlet) rather than position Verlet, tracking the nodes’ positions (*node*.x, *node*.y) and velocities (*node*.vx, *node*.vy) rather than their previous positions (*node*.px, *node*.py). Rather than hard-coding a set of built-in forces, the force simulation is now extensible: you specify which forces you want! The approach affords greater flexibility through composition. The new forces are more flexible, too: force parameters can typically be configured per-node or per-link. There are separate positioning forces for [*x*](https://github.com/d3/d3-force/blob/master/README.md#forceX) and [*y*](https://github.com/d3/d3-force/blob/master/README.md#forceY) that replace *force*.gravity; [*x*.x](https://github.com/d3/d3-force/blob/master/README.md#x_x) and [*y*.y](https://github.com/d3/d3-force/blob/master/README.md#y_y) replace *force*.size. The new [link force](https://github.com/d3/d3-force/blob/master/README.md#forceLink) replaces *force*.linkStrength and employs better default heuristics to improve stability. The new [many-body force](https://github.com/d3/d3-force/blob/master/README.md#forceManyBody) replaces *force*.charge and supports a new [minimum-distance parameter](https://github.com/d3/d3-force/blob/master/README.md#manyBody_distanceMin) and performance improvements thanks to 4.0’s [new quadtrees](#quadtrees-d3-quadtree). There are also brand-new forces for [centering nodes](https://github.com/d3/d3-force/blob/master/README.md#forceCenter) and [collision resolution](https://github.com/d3/d3-force/blob/master/README.md#forceCollision). The new forces and simulation have been carefully crafted to avoid nondeterminism. Rather than initializing nodes randomly, if the nodes do not have preset positions, they are placed in a phyllotaxis pattern: Phyllotaxis Random jitter is still needed to resolve link, collision and many-body forces if there are coincident nodes, but at least in the common case, the force simulation (and the resulting force-directed graph layout) is now consistent across browsers and reloads. D3 no longer plays dice! The force simulation has several new methods for greater control over heating, such as [*simulation*.alphaMin](https://github.com/d3/d3-force/blob/master/README.md#simulation_alphaMin) and [*simulation*.alphaDecay](https://github.com/d3/d3-force/blob/master/README.md#simulation_alphaDecay), and the internal timer. Calling [*simulation*.alpha](https://github.com/d3/d3-force/blob/master/README.md#simulation_alpha) now has no effect on the internal timer, which is controlled independently via [*simulation*.stop](https://github.com/d3/d3-force/blob/master/README.md#simulation_stop) and [*simulation*.restart](https://github.com/d3/d3-force/blob/master/README.md#simulation_restart). The force layout’s internal timer now starts automatically on creation, removing *force*.start. As in 3.x, you can advance the simulation manually using [*simulation*.tick](https://github.com/d3/d3-force/blob/master/README.md#simulation_tick). The *force*.friction parameter is replaced by *simulation*.velocityDecay. A new [*simulation*.alphaTarget](https://github.com/d3/d3-force/blob/master/README.md#simulation_alphaTarget) method allows you to set the desired alpha (temperature) of the simulation, such that the simulation can be smoothly reheated during interaction, and then smoothly cooled again. This improves the stability of the graph during interaction. The force layout no longer depends on the [drag behavior](#dragging-d3-drag), though you can certainly create [draggable force-directed graphs](https://bl.ocks.org/mbostock/ad70335eeef6d167bc36fd3c04378048)! Set *node*.fx and *node*.fy to fix a node’s position. As an alternative to a [Voronoi](#voronoi-d3-voronoi) SVG overlay, you can now use [*simulation*.find](https://github.com/d3/d3-force/blob/master/README.md#simulation_find) to find the closest node to a pointer. ## [Number Formats (d3-format)](https://github.com/d3/d3-format/blob/master/README.md) If a precision is not specified, the formatting behavior has changed: there is now a default precision of 6 for all directives except *none*, which defaults to 12. In 3.x, if you did not specify a precision, the number was formatted using its shortest unique representation (per [*number*.toString](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString)); this could lead to unexpected digits due to [floating point math](http://0.30000000000000004.com/). The new default precision in 4.0 produces more consistent results: ```js var f = d3.format("e"); f(42); // "4.200000e+1" f(0.1 + 0.2); // "3.000000e-1" ``` To trim insignificant trailing zeroes, use the *none* directive, which is similar `g`. For example: ```js var f = d3.format(".3"); f(0.12345); // "0.123" f(0.10000); // "0.1" f(0.1 + 0.2); // "0.3" ``` Under the hood, number formatting has improved accuracy with very large and very small numbers by using [*number*.toExponential](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toExponential) rather than [Math.log](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/log) to extract the mantissa and exponent. Negative zero (-0, an IEEE 754 construct) and very small numbers that round to zero are now formatted as unsigned zero. The inherently unsafe d3.round method has been removed, along with d3.requote. The [d3.formatPrefix](https://github.com/d3/d3-format/blob/master/README.md#formatPrefix) method has been changed. Rather than returning an SI-prefix string, it returns an SI-prefix format function for a given *specifier* and reference *value*. For example, to format thousands: ```js var f = d3.formatPrefix(",.0", 1e3); f(1e3); // "1k" f(1e4); // "10k" f(1e5); // "100k" f(1e6); // "1,000k" ``` Unlike the `s` format directive, d3.formatPrefix always employs the same SI-prefix, producing consistent results: ```js var f = d3.format(".0s"); f(1e3); // "1k" f(1e4); // "10k" f(1e5); // "100k" f(1e6); // "1M" ``` The new `(` sign option uses parentheses for negative values. This is particularly useful in conjunction with `$`. For example: ```js d3.format("+.0f")(-42); // "-42" d3.format("(.0f")(-42); // "(42)" d3.format("+$.0f")(-42); // "-$42" d3.format("($.0f")(-42); // "($42)" ``` The new `=` align option places any sign and symbol to the left of any padding: ```js d3.format(">6d")(-42); // " -42" d3.format("=6d")(-42); // "- 42" d3.format(">(6d")(-42); // " (42)" d3.format("=(6d")(-42); // "( 42)" ``` The `b`, `o`, `d` and `x` directives now round to the nearest integer, rather than returning the empty string for non-integers: ```js d3.format("b")(41.9); // "101010" d3.format("o")(41.9); // "52" d3.format("d")(41.9); // "42" d3.format("x")(41.9); // "2a" ``` The `c` directive is now for character data (*i.e.*, literal strings), not for character codes. The is useful if you just want to apply padding and alignment and don’t care about formatting numbers. For example, the infamous [left-pad](http://blog.npmjs.org/post/141577284765/kik-left-pad-and-npm) (as well as center- and right-pad!) can be conveniently implemented as: ```js d3.format(">10c")("foo"); // " foo" d3.format("^10c")("foo"); // " foo " d3.format("<10c")("foo"); // "foo " ``` There are several new methods for computing suggested decimal precisions; these are used by [d3-scale](#scales-d3-scale) for tick formatting, and are helpful for implementing custom number formats: [d3.precisionFixed](https://github.com/d3/d3-format/blob/master/README.md#precisionFixed), [d3.precisionPrefix](https://github.com/d3/d3-format/blob/master/README.md#precisionPrefix) and [d3.precisionRound](https://github.com/d3/d3-format/blob/master/README.md#precisionRound). There’s also a new [d3.formatSpecifier](https://github.com/d3/d3-format/blob/master/README.md#formatSpecifier) method for parsing, validating and debugging format specifiers; it’s also good for deriving related format specifiers, such as when you want to substitute the precision automatically. You can now set the default locale using [d3.formatDefaultLocale](https://github.com/d3/d3-format/blob/master/README.md#formatDefaultLocale)! The locales are published as [JSON](https://github.com/d3/d3-request/blob/master/README.md#json) to [npm](https://unpkg.com/d3-format/locale/). ## [Geographies (d3-geo)](https://github.com/d3/d3-geo/blob/master/README.md) Pursuant to the great namespace flattening, various methods have new names: * d3.geo.graticule ↦ [d3.geoGraticule](https://github.com/d3/d3-geo/blob/master/README.md#geoGraticule) * d3.geo.circle ↦ [d3.geoCircle](https://github.com/d3/d3-geo/blob/master/README.md#geoCircle) * d3.geo.area ↦ [d3.geoArea](https://github.com/d3/d3-geo/blob/master/README.md#geoArea) * d3.geo.bounds ↦ [d3.geoBounds](https://github.com/d3/d3-geo/blob/master/README.md#geoBounds) * d3.geo.centroid ↦ [d3.geoCentroid](https://github.com/d3/d3-geo/blob/master/README.md#geoCentroid) * d3.geo.distance ↦ [d3.geoDistance](https://github.com/d3/d3-geo/blob/master/README.md#geoDistance) * d3.geo.interpolate ↦ [d3.geoInterpolate](https://github.com/d3/d3-geo/blob/master/README.md#geoInterpolate) * d3.geo.length ↦ [d3.geoLength](https://github.com/d3/d3-geo/blob/master/README.md#geoLength) * d3.geo.rotation ↦ [d3.geoRotation](https://github.com/d3/d3-geo/blob/master/README.md#geoRotation) * d3.geo.stream ↦ [d3.geoStream](https://github.com/d3/d3-geo/blob/master/README.md#geoStream) * d3.geo.path ↦ [d3.geoPath](https://github.com/d3/d3-geo/blob/master/README.md#geoPath) * d3.geo.projection ↦ [d3.geoProjection](https://github.com/d3/d3-geo/blob/master/README.md#geoProjection) * d3.geo.projectionMutator ↦ [d3.geoProjectionMutator](https://github.com/d3/d3-geo/blob/master/README.md#geoProjectionMutator) * d3.geo.albers ↦ [d3.geoAlbers](https://github.com/d3/d3-geo/blob/master/README.md#geoAlbers) * d3.geo.albersUsa ↦ [d3.geoAlbersUsa](https://github.com/d3/d3-geo/blob/master/README.md#geoAlbersUsa) * d3.geo.azimuthalEqualArea ↦ [d3.geoAzimuthalEqualArea](https://github.com/d3/d3-geo/blob/master/README.md#geoAzimuthalEqualArea) * d3.geo.azimuthalEquidistant ↦ [d3.geoAzimuthalEquidistant](https://github.com/d3/d3-geo/blob/master/README.md#geoAzimuthalEquidistant) * d3.geo.conicConformal ↦ [d3.geoConicConformal](https://github.com/d3/d3-geo/blob/master/README.md#geoConicConformal) * d3.geo.conicEqualArea ↦ [d3.geoConicEqualArea](https://github.com/d3/d3-geo/blob/master/README.md#geoConicEqualArea) * d3.geo.conicEquidistant ↦ [d3.geoConicEquidistant](https://github.com/d3/d3-geo/blob/master/README.md#geoConicEquidistant) * d3.geo.equirectangular ↦ [d3.geoEquirectangular](https://github.com/d3/d3-geo/blob/master/README.md#geoEquirectangular) * d3.geo.gnomonic ↦ [d3.geoGnomonic](https://github.com/d3/d3-geo/blob/master/README.md#geoGnomonic) * d3.geo.mercator ↦ [d3.geoMercator](https://github.com/d3/d3-geo/blob/master/README.md#geoMercator) * d3.geo.orthographic ↦ [d3.geoOrthographic](https://github.com/d3/d3-geo/blob/master/README.md#geoOrthographic) * d3.geo.stereographic ↦ [d3.geoStereographic](https://github.com/d3/d3-geo/blob/master/README.md#geoStereographic) * d3.geo.transverseMercator ↦ [d3.geoTransverseMercator](https://github.com/d3/d3-geo/blob/master/README.md#geoTransverseMercator) Also renamed for consistency: * *circle*.origin ↦ [*circle*.center](https://github.com/d3/d3-geo/blob/master/README.md#circle_center) * *circle*.angle ↦ [*circle*.radius](https://github.com/d3/d3-geo/blob/master/README.md#circle_radius) * *graticule*.majorExtent ↦ [*graticule*.extentMajor](https://github.com/d3/d3-geo/blob/master/README.md#graticule_extentMajor) * *graticule*.minorExtent ↦ [*graticule*.extentMinor](https://github.com/d3/d3-geo/blob/master/README.md#graticule_extentMinor) * *graticule*.majorStep ↦ [*graticule*.stepMajor](https://github.com/d3/d3-geo/blob/master/README.md#graticule_stepMajor) * *graticule*.minorStep ↦ [*graticule*.stepMinor](https://github.com/d3/d3-geo/blob/master/README.md#graticule_stepMinor) Projections now have more appropriate defaults. For example, [d3.geoOrthographic](https://github.com/d3/d3-geo/blob/master/README.md#geoOrthographic) has a 90° clip angle by default, showing only the front hemisphere, and [d3.geoGnomonic](https://github.com/d3/d3-geo/blob/master/README.md#geoGnomonic) has a default 60° clip angle. The default [projection](https://github.com/d3/d3-geo/blob/master/README.md#path_projection) for [d3.geoPath](https://github.com/d3/d3-geo/blob/master/README.md#geoPath) is now null rather than [d3.geoAlbersUsa](https://github.com/d3/d3-geo/blob/master/README.md#geoAlbersUsa); a null projection is used with [pre-projected geometry](https://bl.ocks.org/mbostock/5557726) and is typically faster to render. “Fallback projections”—when you pass a function rather than a projection to [*path*.projection](https://github.com/d3/d3-geo/blob/master/README.md#path_projection)—are no longer supported. For geographic projections, use [d3.geoProjection](https://github.com/d3/d3-geo/blob/master/README.md#geoProjection) or [d3.geoProjectionMutator](https://github.com/d3/d3-geo/blob/master/README.md#geoProjectionMutator) to define a custom projection. For arbitrary geometry transformations, implement the [stream interface](https://github.com/d3/d3-geo/blob/master/README.md#streams); see also [d3.geoTransform](https://github.com/d3/d3-geo/blob/master/README.md#geoTransform). The “raw” projections (e.g., d3.geo.equirectangular.raw) are no longer exported. ## [Hierarchies (d3-hierarchy)](https://github.com/d3/d3-hierarchy/blob/master/README.md) Pursuant to the great namespace flattening: * d3.layout.cluster ↦ [d3.cluster](https://github.com/d3/d3-hierarchy/blob/master/README.md#cluster) * d3.layout.hierarchy ↦ [d3.hierarchy](https://github.com/d3/d3-hierarchy/blob/master/README.md#hierarchy) * d3.layout.pack ↦ [d3.pack](https://github.com/d3/d3-hierarchy/blob/master/README.md#pack) * d3.layout.partition ↦ [d3.partition](https://github.com/d3/d3-hierarchy/blob/master/README.md#partition) * d3.layout.tree ↦ [d3.tree](https://github.com/d3/d3-hierarchy/blob/master/README.md#tree) * d3.layout.treemap ↦ [d3.treemap](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap) As an alternative to using JSON to represent hierarchical data (such as the “flare.json format” used by many D3 examples), the new [d3.stratify](https://github.com/d3/d3-hierarchy/blob/master/README.md#stratify) operator simplifies the conversion of tabular data to hierarchical data! This is convenient if you already have data in a tabular format, such as the result of a SQL query or a CSV file: ``` name,parent Eve, Cain,Eve Seth,Eve Enos,Seth Noam,Seth Abel,Eve Awan,Eve Enoch,Awan Azura,Eve ``` To convert this to a root [*node*](https://github.com/d3/d3-hierarchy/blob/master/README.md#hierarchy): ```js var root = d3.stratify() .id(function(d) { return d.name; }) .parentId(function(d) { return d.parent; }) (nodes); ``` The resulting *root* can be passed to [d3.tree](https://github.com/d3/d3-hierarchy/blob/master/README.md#tree) to produce a tree diagram like this: Root nodes can also be created from JSON data using [d3.hierarchy](https://github.com/d3/d3-hierarchy/blob/master/README.md#hierarchy). The hierarchy layouts now take these root nodes as input rather than operating directly on JSON data, which helps to provide a cleaner separation between the input data and the computed layout. (For example, use [*node*.copy](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_copy) to isolate layout changes.) It also simplifies the API: rather than each hierarchy layout needing to implement value and sorting accessors, there are now generic [*node*.sum](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_sum) and [*node*.sort](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_sort) methods that work with any hierarchy layout. The new d3.hierarchy API also provides a richer set of methods for manipulating hierarchical data. For example, to generate an array of all nodes in topological order, use [*node*.descendants](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_descendants); for just leaf nodes, use [*node*.leaves](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_leaves). To highlight the ancestors of a given *node* on mouseover, use [*node*.ancestors](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_ancestors). To generate an array of {source, target} links for a given hierarchy, use [*node*.links](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_links); this replaces *treemap*.links and similar methods on the other layouts. The new [*node*.path](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_path) method replaces d3.layout.bundle; see also [d3.curveBundle](https://github.com/d3/d3-shape/blob/master/README.md#curveBundle) for hierarchical edge bundling. The hierarchy layouts have been rewritten using new, non-recursive traversal methods ([*node*.each](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_each), [*node*.eachAfter](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_eachAfter) and [*node*.eachBefore](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_eachBefore)), improving performance on large datasets. The d3.tree layout no longer uses a *node*.\_ field to store temporary state during layout. Treemap tiling is now [extensible](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap-tiling) via [*treemap*.tile](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap_tile)! The default squarified tiling algorithm, [d3.treemapSquarify](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemapSquarify), has been completely rewritten, improving performance and fixing bugs in padding and rounding. The *treemap*.sticky method has been replaced with the [d3.treemapResquarify](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemapResquarify), which is identical to d3.treemapSquarify except it performs stable neighbor-preserving updates. The *treemap*.ratio method has been replaced with [*squarify*.ratio](https://github.com/d3/d3-hierarchy/blob/master/README.md#squarify_ratio). And there’s a new [d3.treemapBinary](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemapBinary) for binary treemaps! Treemap padding has also been improved. The treemap now distinguishes between [outer padding](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap_paddingOuter) that separates a parent from its children, and [inner padding](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap_paddingInner) that separates adjacent siblings. You can set the [top-](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap_paddingTop), [right-](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap_paddingRight), [bottom-](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap_paddingBottom) and [left-](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap_paddingLeft)outer padding separately. There are new examples for the traditional [nested treemap](https://bl.ocks.org/mbostock/911ad09bdead40ec0061) and for Lü and Fogarty’s [cascaded treemap](https://bl.ocks.org/mbostock/f85ffb3a5ac518598043). And there’s a new example demonstrating [d3.nest with d3.treemap](https://bl.ocks.org/mbostock/2838bf53e0e65f369f476afd653663a2). The space-filling layouts [d3.treemap](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap) and [d3.partition](https://github.com/d3/d3-hierarchy/blob/master/README.md#partition) now output *x0*, *x1*, *y0*, *y1* on each node instead of *x0*, *dx*, *y0*, *dy*. This improves accuracy by ensuring that the edges of adjacent cells are exactly equal, rather than sometimes being slightly off due to floating point math. The partition layout now supports [rounding](https://github.com/d3/d3-hierarchy/blob/master/README.md#partition_round) and [padding](https://github.com/d3/d3-hierarchy/blob/master/README.md#partition_padding). The circle-packing layout, [d3.pack](https://github.com/d3/d3-hierarchy/blob/master/README.md#pack), has been completely rewritten to better implement Wang et al.’s algorithm, fixing major bugs and improving results! Welzl’s algorithm is now used to compute the exact [smallest enclosing circle](https://bl.ocks.org/mbostock/29c534ff0b270054a01c) for each parent, rather than the approximate answer used by Wang et al. The 3.x output is shown on the left; 4.0 is shown on the right: Circle Packing in 3.x Circle Packing in 4.0 A non-hierarchical implementation is also available as [d3.packSiblings](https://github.com/d3/d3-hierarchy/blob/master/README.md#packSiblings), and the smallest enclosing circle implementation is available as [d3.packEnclose](https://github.com/d3/d3-hierarchy/blob/master/README.md#packEnclose). [Pack padding](https://github.com/d3/d3-hierarchy/blob/master/README.md#pack_padding) now applies between a parent and its children, as well as between adjacent siblings. In addition, you can now specify padding as a function that is computed dynamically for each parent. ## Internals The d3.rebind method has been removed. (See the [3.x source](https://github.com/d3/d3/blob/v3.5.17/src/core/rebind.js).) If you want to wrap a getter-setter method, the recommend pattern is to implement a wrapper method and check the return value. For example, given a *component* that uses an internal [*dispatch*](#dispatches-d3-dispatch), *component*.on can rebind *dispatch*.on as follows: ```js component.on = function() { var value = dispatch.on.apply(dispatch, arguments); return value === dispatch ? component : value; }; ``` The d3.functor method has been removed. (See the [3.x source](https://github.com/d3/d3/blob/v3.5.17/src/core/functor.js).) If you want to promote a constant value to a function, the recommended pattern is to implement a closure that returns the constant value. If desired, you can use a helper method as follows: ```js function constant(x) { return function() { return x; }; } ``` Given a value *x*, to promote *x* to a function if it is not already: ```js var fx = typeof x === "function" ? x : constant(x); ``` ## [Interpolators (d3-interpolate)](https://github.com/d3/d3-interpolate/blob/master/README.md) The [d3.interpolate](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolate) method no longer delegates to d3.interpolators, which has been removed; its behavior is now defined by the library. It is now slightly faster in the common case that *b* is a number. It only uses [d3.interpolateRgb](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateRgb) if *b* is a valid CSS color specifier (and not approximately one). And if the end value *b* is null, undefined, true or false, d3.interpolate now returns a constant function which always returns *b*. The behavior of [d3.interpolateObject](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateObject) and [d3.interpolateArray](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateArray) has changed slightly with respect to properties or elements in the start value *a* that do not exist in the end value *b*: these properties and elements are now ignored, such that the ending value of the interpolator at *t* = 1 is now precisely equal to *b*. So, in 3.x: ```js d3.interpolateObject({foo: 2, bar: 1}, {foo: 3})(0.5); // {bar: 1, foo: 2.5} in 3.x ``` Whereas in 4.0, *a*.bar is ignored: ```js d3.interpolateObject({foo: 2, bar: 1}, {foo: 3})(0.5); // {foo: 2.5} in 4.0 ``` If *a* or *b* are undefined or not an object, they are now implicitly converted to the empty object or empty array as appropriate, rather than throwing a TypeError. The d3.interpolateTransform interpolator has been renamed to [d3.interpolateTransformSvg](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateTransformSvg), and there is a new [d3.interpolateTransformCss](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateTransformCss) to interpolate CSS transforms! This allows [d3-transition](#transitions-d3-transition) to automatically interpolate both the SVG [transform attribute](https://www.w3.org/TR/SVG/coords.html#TransformAttribute) and the CSS [transform style property](https://www.w3.org/TR/css-transforms-1/#transform-property). (Note, however, that only 2D CSS transforms are supported.) The d3.transform method has been removed. Color space interpolators now interpolate opacity (see [d3-color](#colors-d3-color)) and return rgb(…) or rgba(…) CSS color specifier strings rather than using the RGB hexadecimal format. This is necessary to support opacity interpolation, but is also beneficial because it matches CSS computed values. When a channel in the start color *a* is undefined, color interpolators now use the corresponding channel value from the end color *b*, or *vice versa*. This logic previously applied to some channels (such as saturation in HSL), but now applies to all channels in all color spaces, and is especially useful when interpolating to or from transparent. There are now “long” versions of cylindrical color space interpolators: [d3.interpolateHslLong](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateHslLong), [d3.interpolateHclLong](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateHclLong) and [d3.interpolateCubehelixLong](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateCubehelixLong). These interpolators use linear interpolation of hue, rather than using the shortest path around the 360° hue circle. See [d3.interpolateRainbow](https://github.com/d3/d3-scale/blob/master/README.md#interpolateRainbow) for an example. The Cubehelix color space is now supported by [d3-color](#colors-d3-color), and so there are now [d3.interpolateCubehelix](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateCubehelix) and [d3.interpolateCubehelixLong](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateCubehelixLong) interpolators. [Gamma-corrected color interpolation](https://web.archive.org/web/20160112115812/http://www.4p8.com/eric.brasseur/gamma.html) is now supported for both RGB and Cubehelix color spaces as [*interpolate*.gamma](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolate_gamma). For example, to interpolate from purple to orange with a gamma of 2.2 in RGB space: ```js var interpolate = d3.interpolateRgb.gamma(2.2)("purple", "orange"); ``` There are new interpolators for uniform non-rational [B-splines](https://en.wikipedia.org/wiki/B-spline)! These are useful for smoothly interpolating between an arbitrary sequence of values from *t* = 0 to *t* = 1, such as to generate a smooth color gradient from a discrete set of colors. The [d3.interpolateBasis](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateBasis) and [d3.interpolateBasisClosed](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateBasisClosed) interpolators generate one-dimensional B-splines, while [d3.interpolateRgbBasis](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateRgbBasis) and [d3.interpolateRgbBasisClosed](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateRgbBasisClosed) generate three-dimensional B-splines through RGB color space. These are used by [d3-scale-chromatic](https://github.com/d3/d3-scale-chromatic) to generate continuous color scales from ColorBrewer’s discrete color schemes, such as [PiYG](https://bl.ocks.org/mbostock/048d21cf747371b11884f75ad896e5a5). There’s also now a [d3.quantize](https://github.com/d3/d3-interpolate/blob/master/README.md#quantize) method for generating uniformly-spaced discrete samples from a continuous interpolator. This is useful for taking one of the built-in color scales (such as [d3.interpolateViridis](https://github.com/d3/d3-scale/blob/master/README.md#interpolateViridis)) and quantizing it for use with [d3.scaleQuantize](https://github.com/d3/d3-scale/blob/master/README.md#scaleQuantize), [d3.scaleQuantile](https://github.com/d3/d3-scale/blob/master/README.md#scaleQuantile) or [d3.scaleThreshold](https://github.com/d3/d3-scale/blob/master/README.md#scaleThreshold). ## [Paths (d3-path)](https://github.com/d3/d3-path/blob/master/README.md) The [d3.path](https://github.com/d3/d3-path/blob/master/README.md#path) serializer implements the [CanvasPathMethods API](https://www.w3.org/TR/2dcontext/#canvaspathmethods), allowing you to write code that can render to either Canvas or SVG. For example, given some code that draws to a canvas: ```js function drawCircle(context, radius) { context.moveTo(radius, 0); context.arc(0, 0, radius, 0, 2 * Math.PI); } ``` You can render to SVG as follows: ```js var context = d3.path(); drawCircle(context, 40); pathElement.setAttribute("d", context.toString()); ``` The path serializer enables [d3-shape](#shapes-d3-shape) to support both Canvas and SVG; see [*line*.context](https://github.com/d3/d3-shape/blob/master/README.md#line_context) and [*area*.context](https://github.com/d3/d3-shape/blob/master/README.md#area_context), for example. ## [Polygons (d3-polygon)](https://github.com/d3/d3-polygon/blob/master/README.md) There’s no longer a d3.geom.polygon constructor; instead you just pass an array of vertices to the polygon methods. So instead of *polygon*.area and *polygon*.centroid, there’s [d3.polygonArea](https://github.com/d3/d3-polygon/blob/master/README.md#polygonArea) and [d3.polygonCentroid](https://github.com/d3/d3-polygon/blob/master/README.md#polygonCentroid). There are also new [d3.polygonContains](https://github.com/d3/d3-polygon/blob/master/README.md#polygonContains) and [d3.polygonLength](https://github.com/d3/d3-polygon/blob/master/README.md#polygonLength) methods. There’s no longer an equivalent to *polygon*.clip, but if [Sutherland–Hodgman clipping](https://en.wikipedia.org/wiki/Sutherland–Hodgman_algorithm) is needed, please [file a feature request](https://github.com/d3/d3-polygon/issues). The d3.geom.hull operator has been simplified: instead of an operator with *hull*.x and *hull*.y accessors, there’s just the [d3.polygonHull](https://github.com/d3/d3-polygon/blob/master/README.md#polygonHull) method which takes an array of points and returns the convex hull. ## [Quadtrees (d3-quadtree)](https://github.com/d3/d3-quadtree/blob/master/README.md) The d3.geom.quadtree method has been replaced by [d3.quadtree](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree). 4.0 removes the concept of quadtree “generators” (configurable functions that build a quadtree from an array of data); there are now just quadtrees, which you can create via d3.quadtree and add data to via [*quadtree*.add](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_add) and [*quadtree*.addAll](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_addAll). This code in 3.x: ```js var quadtree = d3.geom.quadtree() .extent([[0, 0], [width, height]]) (data); ``` Can be rewritten in 4.0 as: ```js var quadtree = d3.quadtree() .extent([[0, 0], [width, height]]) .addAll(data); ``` The new quadtree implementation is vastly improved! It is no longer recursive, avoiding stack overflows when there are large numbers of coincident points. The internal storage is now more efficient, and the implementation is also faster; constructing a quadtree of 1M normally-distributed points takes about one second in 4.0, as compared to three seconds in 3.x. The change in [internal *node* structure](https://github.com/d3/d3-quadtree/blob/master/README.md#nodes) affects [*quadtree*.visit](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_visit): use *node*.length to distinguish leaf nodes from internal nodes. For example, to iterate over all data in a quadtree: ```js quadtree.visit(function(node) { if (!node.length) { do { console.log(node.data); } while (node = node.next) } }); ``` There’s a new [*quadtree*.visitAfter](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_visitAfter) method for visiting nodes in post-order traversal. This feature is used in [d3-force](#forces-d3-force) to implement the [Barnes–Hut approximation](https://en.wikipedia.org/wiki/Barnes–Hut_simulation). You can now remove data from a quadtree using [*quadtree*.remove](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_remove) and [*quadtree*.removeAll](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_removeAll). When adding data to a quadtree, the quadtree will now expand its extent by repeated doubling if the new point is outside the existing extent of the quadtree. There are also [*quadtree*.extent](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_extent) and [*quadtree*.cover](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_cover) methods for explicitly expanding the extent of the quadtree after creation. Quadtrees support several new utility methods: [*quadtree*.copy](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_copy) returns a copy of the quadtree sharing the same data; [*quadtree*.data](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_data) generates an array of all data in the quadtree; [*quadtree*.size](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_size) returns the number of data points in the quadtree; and [*quadtree*.root](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_root) returns the root node, which is useful for manual traversal of the quadtree. The [*quadtree*.find](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_find) method now takes an optional search radius, which is useful for pointer-based selection in [force-directed graphs](https://bl.ocks.org/mbostock/ad70335eeef6d167bc36fd3c04378048). ## [Queues (d3-queue)](https://github.com/d3/d3-queue/blob/master/README.md) Formerly known as Queue.js and queue-async, [d3.queue](https://github.com/d3/d3-queue) is now included in the default bundle, making it easy to load data files in parallel. It has been rewritten with fewer closures to improve performance, and there are now stricter checks in place to guarantee well-defined behavior. You can now use instanceof d3.queue and inspect the queue’s internal private state. ## [Random Numbers (d3-random)](https://github.com/d3/d3-random/blob/master/README.md) Pursuant to the great namespace flattening, the random number generators have new names: * d3.random.normal ↦ [d3.randomNormal](https://github.com/d3/d3-random/blob/master/README.md#randomNormal) * d3.random.logNormal ↦ [d3.randomLogNormal](https://github.com/d3/d3-random/blob/master/README.md#randomLogNormal) * d3.random.bates ↦ [d3.randomBates](https://github.com/d3/d3-random/blob/master/README.md#randomBates) * d3.random.irwinHall ↦ [d3.randomIrwinHall](https://github.com/d3/d3-random/blob/master/README.md#randomIrwinHall) There are also new random number generators for [exponential](https://github.com/d3/d3-random/blob/master/README.md#randomExponential) and [uniform](https://github.com/d3/d3-random/blob/master/README.md#randomUniform) distributions. The [normal](https://github.com/d3/d3-random/blob/master/README.md#randomNormal) and [log-normal](https://github.com/d3/d3-random/blob/master/README.md#randomLogNormal) random generators have been optimized. ## [Requests (d3-request)](https://github.com/d3/d3-request/blob/master/README.md) The d3.xhr method has been renamed to [d3.request](https://github.com/d3/d3-request/blob/master/README.md#request). Basic authentication is now supported using [*request*.user](https://github.com/d3/d3-request/blob/master/README.md#request_user) and [*request*.password](https://github.com/d3/d3-request/blob/master/README.md#request_password). You can now configure a timeout using [*request*.timeout](https://github.com/d3/d3-request/blob/master/README.md#request_timeout). If an error occurs, the corresponding [ProgressEvent](https://xhr.spec.whatwg.org/#interface-progressevent) of type “error” is now passed to the error listener, rather than the [XMLHttpRequest](https://xhr.spec.whatwg.org/#interface-xmlhttprequest). Likewise, the ProgressEvent is passed to progress event listeners, rather than using [d3.event](https://github.com/d3/d3-selection/blob/master/README.md#event). If [d3.xml](https://github.com/d3/d3-request/blob/master/README.md#xml) encounters an error parsing XML, this error is now reported to error listeners rather than returning a null response. The [d3.request](https://github.com/d3/d3-request/blob/master/README.md#request), [d3.text](https://github.com/d3/d3-request/blob/master/README.md#text) and [d3.xml](https://github.com/d3/d3-request/blob/master/README.md#xml) methods no longer take an optional mime type as the second argument; use [*request*.mimeType](https://github.com/d3/d3-request/blob/master/README.md#request_mimeType) instead. For example: ```js d3.xml("file.svg").mimeType("image/svg+xml").get(function(error, svg) { … }); ``` With the exception of [d3.html](https://github.com/d3/d3-request/blob/master/README.md#html) and [d3.xml](https://github.com/d3/d3-request/blob/master/README.md#xml), Node is now supported via [node-XMLHttpRequest](https://github.com/driverdan/node-XMLHttpRequest). ## [Scales (d3-scale)](https://github.com/d3/d3-scale/blob/master/README.md) Pursuant to the great namespace flattening: * d3.scale.linear ↦ [d3.scaleLinear](https://github.com/d3/d3-scale/blob/master/README.md#scaleLinear) * d3.scale.sqrt ↦ [d3.scaleSqrt](https://github.com/d3/d3-scale/blob/master/README.md#scaleSqrt) * d3.scale.pow ↦ [d3.scalePow](https://github.com/d3/d3-scale/blob/master/README.md#scalePow) * d3.scale.log ↦ [d3.scaleLog](https://github.com/d3/d3-scale/blob/master/README.md#scaleLog) * d3.scale.quantize ↦ [d3.scaleQuantize](https://github.com/d3/d3-scale/blob/master/README.md#scaleQuantize) * d3.scale.threshold ↦ [d3.scaleThreshold](https://github.com/d3/d3-scale/blob/master/README.md#scaleThreshold) * d3.scale.quantile ↦ [d3.scaleQuantile](https://github.com/d3/d3-scale/blob/master/README.md#scaleQuantile) * d3.scale.identity ↦ [d3.scaleIdentity](https://github.com/d3/d3-scale/blob/master/README.md#scaleIdentity) * d3.scale.ordinal ↦ [d3.scaleOrdinal](https://github.com/d3/d3-scale/blob/master/README.md#scaleOrdinal) * d3.time.scale ↦ [d3.scaleTime](https://github.com/d3/d3-scale/blob/master/README.md#scaleTime) * d3.time.scale.utc ↦ [d3.scaleUtc](https://github.com/d3/d3-scale/blob/master/README.md#scaleUtc) Scales now generate ticks in the same order as the domain: if you have a descending domain, you now get descending ticks. This change affects the order of tick elements generated by [axes](#axes-d3-axis). For example: ```js d3.scaleLinear().domain([10, 0]).ticks(5); // [10, 8, 6, 4, 2, 0] ``` [Log tick formatting](https://github.com/d3/d3-scale/blob/master/README.md#log_tickFormat) now assumes a default *count* of ten, not Infinity, if not specified. Log scales with domains that span many powers (such as from 1e+3 to 1e+29) now return only one [tick](https://github.com/d3/d3-scale/blob/master/README.md#log_ticks) per power rather than returning *base* ticks per power. Non-linear quantitative scales are slightly more accurate. You can now control whether an ordinal scale’s domain is implicitly extended when the scale is passed a value that is not already in its domain. By default, [*ordinal*.unknown](https://github.com/d3/d3-scale/blob/master/README.md#ordinal_unknown) is [d3.scaleImplicit](https://github.com/d3/d3-scale/blob/master/README.md#scaleImplicit), causing unknown values to be added to the domain: ```js var x = d3.scaleOrdinal() .domain([0, 1]) .range(["red", "green", "blue"]); x.domain(); // [0, 1] x(2); // "blue" x.domain(); // [0, 1, 2] ``` By setting *ordinal*.unknown, you instead define the output value for unknown inputs. This is particularly useful for choropleth maps where you want to assign a color to missing data. ```js var x = d3.scaleOrdinal() .domain([0, 1]) .range(["red", "green", "blue"]) .unknown(undefined); x.domain(); // [0, 1] x(2); // undefined x.domain(); // [0, 1] ``` The *ordinal*.rangeBands and *ordinal*.rangeRoundBands methods have been replaced with a new subclass of ordinal scale: [band scales](https://github.com/d3/d3-scale/blob/master/README.md#band-scales). The following code in 3.x: ```js var x = d3.scale.ordinal() .domain(["a", "b", "c"]) .rangeBands([0, width]); ``` Is equivalent to this in 4.0: ```js var x = d3.scaleBand() .domain(["a", "b", "c"]) .range([0, width]); ``` The new [*band*.padding](https://github.com/d3/d3-scale/blob/master/README.md#band_padding), [*band*.paddingInner](https://github.com/d3/d3-scale/blob/master/README.md#band_paddingInner) and [*band*.paddingOuter](https://github.com/d3/d3-scale/blob/master/README.md#band_paddingOuter) methods replace the optional arguments to *ordinal*.rangeBands. The new [*band*.bandwidth](https://github.com/d3/d3-scale/blob/master/README.md#band_bandwidth) and [*band*.step](https://github.com/d3/d3-scale/blob/master/README.md#band_step) methods replace *ordinal*.rangeBand. There’s also a new [*band*.align](https://github.com/d3/d3-scale/blob/master/README.md#band_align) method which you can use to control how the extra space outside the bands is distributed, say to shift columns closer to the *y*-axis. Similarly, the *ordinal*.rangePoints and *ordinal*.rangeRoundPoints methods have been replaced with a new subclass of ordinal scale: [point scales](https://github.com/d3/d3-scale/blob/master/README.md#point-scales). The following code in 3.x: ```js var x = d3.scale.ordinal() .domain(["a", "b", "c"]) .rangePoints([0, width]); ``` Is equivalent to this in 4.0: ```js var x = d3.scalePoint() .domain(["a", "b", "c"]) .range([0, width]); ``` The new [*point*.padding](https://github.com/d3/d3-scale/blob/master/README.md#point_padding) method replaces the optional *padding* argument to *ordinal*.rangePoints. Like *ordinal*.rangeBand with *ordinal*.rangePoints, the [*point*.bandwidth](https://github.com/d3/d3-scale/blob/master/README.md#point_bandwidth) method always returns zero; a new [*point*.step](https://github.com/d3/d3-scale/blob/master/README.md#point_step) method returns the interval between adjacent points. The [ordinal scale constructor](https://github.com/d3/d3-scale/blob/master/README.md#ordinal-scales) now takes an optional *range* for a shorter alternative to [*ordinal*.range](https://github.com/d3/d3-scale/blob/master/README.md#ordinal_range). This is especially useful now that the categorical color scales have been changed to simple arrays of colors rather than specialized ordinal scale constructors: * d3.scale.category10 ↦ [d3.schemeCategory10](https://github.com/d3/d3-scale/blob/master/README.md#schemeCategory10) * d3.scale.category20 ↦ [d3.schemeCategory20](https://github.com/d3/d3-scale/blob/master/README.md#schemeCategory20) * d3.scale.category20b ↦ [d3.schemeCategory20b](https://github.com/d3/d3-scale/blob/master/README.md#schemeCategory20b) * d3.scale.category20c ↦ [d3.schemeCategory20c](https://github.com/d3/d3-scale/blob/master/README.md#schemeCategory20c) The following code in 3.x: ```js var color = d3.scale.category10(); ``` Is equivalent to this in 4.0: ```js var color = d3.scaleOrdinal(d3.schemeCategory10); ``` [Sequential scales](https://github.com/d3/d3-scale/blob/master/README.md#scaleSequential), are a new class of scales with a fixed output [interpolator](https://github.com/d3/d3-scale/blob/master/README.md#sequential_interpolator) instead of a [range](https://github.com/d3/d3-scale/blob/master/README.md#continuous_range). Typically these scales are used to implement continuous sequential or diverging color schemes. Inspired by Matplotlib’s new [perceptually-motived colormaps](https://bids.github.io/colormap/), 4.0 now features [viridis](https://github.com/d3/d3-scale/blob/master/README.md#interpolateViridis), [inferno](https://github.com/d3/d3-scale/blob/master/README.md#interpolateInferno), [magma](https://github.com/d3/d3-scale/blob/master/README.md#interpolateMagma), [plasma](https://github.com/d3/d3-scale/blob/master/README.md#interpolatePlasma) interpolators for use with sequential scales. Using [d3.quantize](https://github.com/d3/d3-interpolate/blob/master/README.md#quantize), these interpolators can also be applied to [quantile](https://github.com/d3/d3-scale/blob/master/README.md#quantile-scales), [quantize](https://github.com/d3/d3-scale/blob/master/README.md#quantize-scales) and [threshold](https://github.com/d3/d3-scale/blob/master/README.md#threshold-scales) scales. [viridis](https://github.com/d3/d3-scale/blob/master/README.md#interpolateViridis) [inferno](https://github.com/d3/d3-scale/blob/master/README.md#interpolateInferno) [magma](https://github.com/d3/d3-scale/blob/master/README.md#interpolateMagma) [plasma](https://github.com/d3/d3-scale/blob/master/README.md#interpolatePlasma) 4.0 also ships new Cubehelix schemes, including [Dave Green’s default](https://github.com/d3/d3-scale/blob/master/README.md#interpolateCubehelixDefault) and a [cyclical rainbow](https://github.com/d3/d3-scale/blob/master/README.md#interpolateRainbow) inspired by [Matteo Niccoli](https://mycarta.wordpress.com/2013/02/21/perceptual-rainbow-palette-the-method/): [cubehelix](https://github.com/d3/d3-scale/blob/master/README.md#interpolateCubehelixDefault) [rainbow](https://github.com/d3/d3-scale/blob/master/README.md#interpolateRainbow) [warm](https://github.com/d3/d3-scale/blob/master/README.md#interpolateWarm) [cool](https://github.com/d3/d3-scale/blob/master/README.md#interpolateCool) For even more sequential and categorical color schemes, see [d3-scale-chromatic](https://github.com/d3/d3-scale-chromatic). For an introduction to scales, see [Introducing d3-scale](https://medium.com/@mbostock/introducing-d3-scale-61980c51545f). ## [Selections (d3-selection)](https://github.com/d3/d3-selection/blob/master/README.md) Selections no longer subclass Array using [prototype chain injection](http://perfectionkills.com/how-ecmascript-5-still-does-not-allow-to-subclass-an-array/#wrappers_prototype_chain_injection); they are now plain objects, improving performance. The internal fields (*selection*.\_groups, *selection*.\_parents) are private; please use the documented public API to manipulate selections. The new [*selection*.nodes](https://github.com/d3/d3-selection/blob/master/README.md#selection_nodes) method generates an array of all nodes in a selection. Selections are now immutable: the elements and parents in a selection never change. (The elements’ attributes and content will of course still be modified!) The [*selection*.sort](https://github.com/d3/d3-selection/blob/master/README.md#selection_sort) and [*selection*.data](https://github.com/d3/d3-selection/blob/master/README.md#selection_data) methods now return new selections rather than modifying the selection in-place. In addition, [*selection*.append](https://github.com/d3/d3-selection/blob/master/README.md#selection_append) no longer merges entering nodes into the update selection; use [*selection*.merge](https://github.com/d3/d3-selection/blob/master/README.md#selection_merge) to combine enter and update after a data join. For example, the following [general update pattern](https://bl.ocks.org/mbostock/a8a5baa4c4a470cda598) in 3.x: ```js var circle = svg.selectAll("circle").data(data) // UPDATE .style("fill", "blue"); circle.exit().remove(); // EXIT circle.enter().append("circle") // ENTER; modifies UPDATE! 🌶 .style("fill", "green"); circle // ENTER + UPDATE .style("stroke", "black"); ``` Would be rewritten in 4.0 as: ```js var circle = svg.selectAll("circle").data(data) // UPDATE .style("fill", "blue"); circle.exit().remove(); // EXIT circle.enter().append("circle") // ENTER .style("fill", "green") .merge(circle) // ENTER + UPDATE .style("stroke", "black"); ``` This change is discussed further in [What Makes Software Good](https://medium.com/@mbostock/what-makes-software-good-943557f8a488). In 3.x, the [*selection*.enter](https://github.com/d3/d3-selection/blob/master/README.md#selection_enter) and [*selection*.exit](https://github.com/d3/d3-selection/blob/master/README.md#selection_exit) methods were undefined until you called *selection*.data, resulting in a TypeError if you attempted to access them. In 4.0, now they simply return the empty selection if the selection has not been joined to data. In 3.x, [*selection*.append](https://github.com/d3/d3-selection/blob/master/README.md#selection_append) would always append the new element as the last child of its parent. A little-known trick was to use [*selection*.insert](https://github.com/d3/d3-selection/blob/master/README.md#selection_insert) without specifying a *before* selector when entering nodes, causing the entering nodes to be inserted before the following element in the update selection. In 4.0, this is now the default behavior of *selection*.append; if you do not specify a *before* selector to *selection*.insert, the inserted element is appended as the last child. This change makes the general update pattern preserve the relative order of elements and data. For example, given the following DOM: ```html
    a
    b
    f
    ``` And the following code: ```js var div = d3.select("body").selectAll("div") .data(["a", "b", "c", "d", "e", "f"], function(d) { return d || this.textContent; }); div.enter().append("div") .text(function(d) { return d; }); ``` The resulting DOM will be: ```html
    a
    b
    c
    d
    e
    f
    ``` Thus, the entering *c*, *d* and *e* are inserted before *f*, since *f* is the following element in the update selection. Although this behavior is sufficient to preserve order if the new data’s order is stable, if the data changes order, you must still use [*selection*.order](https://github.com/d3/d3-selection/blob/master/README.md#selection_order) to reorder elements. There is now only one class of selection. 3.x implemented enter selections using a special class with different behavior for *enter*.append and *enter*.select; a consequence of this design was that enter selections in 3.x lacked [certain methods](https://github.com/d3/d3/issues/2043). In 4.0, enter selections are simply normal selections; they have the same methods and the same behavior. Placeholder [enter nodes](https://github.com/d3/d3-selection/blob/master/src/selection/enter.js) now implement [*node*.appendChild](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild), [*node*.insertBefore](https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore), [*node*.querySelector](https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector), and [*node*.querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll). The [*selection*.data](https://github.com/d3/d3-selection/blob/master/README.md#selection_data) method has been changed slightly with respect to duplicate keys. In 3.x, if multiple data had the same key, the duplicate data would be ignored and not included in enter, update or exit; in 4.0 the duplicate data is always put in the enter selection. In both 3.x and 4.0, if multiple elements have the same key, the duplicate elements are put in the exit selection. Thus, 4.0’s behavior is now symmetric for enter and exit, and the general update pattern will now produce a DOM that matches the data even if there are duplicate keys. Selections have several new methods! Use [*selection*.raise](https://github.com/d3/d3-selection/blob/master/README.md#selection_raise) to move the selected elements to the front of their siblings, so that they are drawn on top; use [*selection*.lower](https://github.com/d3/d3-selection/blob/master/README.md#selection_lower) to move them to the back. Use [*selection*.dispatch](https://github.com/d3/d3-selection/blob/master/README.md#selection_dispatch) to dispatch a [custom event](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) to event listeners. When called in getter mode, [*selection*.data](https://github.com/d3/d3-selection/blob/master/README.md#selection_data) now returns the data for all elements in the selection, rather than just the data for the first group of elements. The [*selection*.call](https://github.com/d3/d3-selection/blob/master/README.md#selection_call) method no longer sets the `this` context when invoking the specified function; the *selection* is passed as the first argument to the function, so use that. The [*selection*.on](https://github.com/d3/d3-selection/blob/master/README.md#selection_on) method now accepts multiple whitespace-separated typenames, so you can add or remove multiple listeners simultaneously. For example: ```js selection.on("mousedown touchstart", function() { console.log(d3.event.type); }); ``` The arguments passed to callback functions has changed slightly in 4.0 to be more consistent. The standard arguments are the element’s datum (*d*), the element’s index (*i*), and the element’s group (*nodes*), with *this* as the element. The slight exception to this convention is *selection*.data, which is evaluated for each group rather than each element; it is passed the group’s parent datum (*d*), the group index (*i*), and the selection’s parents (*parents*), with *this* as the group’s parent. The new [d3.local](https://github.com/d3/d3-selection/blob/master/README.md#local-variables) provides a mechanism for defining [local variables](https://bl.ocks.org/mbostock/e1192fe405703d8321a5187350910e08): state that is bound to DOM elements, and available to any descendant element. This can be a convenient alternative to using [*selection*.each](https://github.com/d3/d3-selection/blob/master/README.md#selection_each) or storing local state in data. The d3.ns.prefix namespace prefix map has been renamed to [d3.namespaces](https://github.com/d3/d3-selection/blob/master/README.md#namespaces), and the d3.ns.qualify method has been renamed to [d3.namespace](https://github.com/d3/d3-selection/blob/master/README.md#namespace). Several new low-level methods are now available, as well. [d3.matcher](https://github.com/d3/d3-selection/blob/master/README.md#matcher) is used internally by [*selection*.filter](https://github.com/d3/d3-selection/blob/master/README.md#selection_filter); [d3.selector](https://github.com/d3/d3-selection/blob/master/README.md#selector) is used by [*selection*.select](https://github.com/d3/d3-selection/blob/master/README.md#selection_select); [d3.selectorAll](https://github.com/d3/d3-selection/blob/master/README.md#selectorAll) is used by [*selection*.selectAll](https://github.com/d3/d3-selection/blob/master/README.md#selection_selectAll); [d3.creator](https://github.com/d3/d3-selection/blob/master/README.md#creator) is used by [*selection*.append](https://github.com/d3/d3-selection/blob/master/README.md#selection_append) and [*selection*.insert](https://github.com/d3/d3-selection/blob/master/README.md#selection_insert). The new [d3.window](https://github.com/d3/d3-selection/blob/master/README.md#window) returns the owner window for a given element, window or document. The new [d3.customEvent](https://github.com/d3/d3-selection/blob/master/README.md#customEvent) temporarily sets [d3.event](https://github.com/d3/d3-selection/blob/master/README.md#event) while invoking a function, allowing you to implement controls which dispatch custom events; this is used by [d3-drag](https://github.com/d3/d3-drag), [d3-zoom](https://github.com/d3/d3-zoom) and [d3-brush](https://github.com/d3/d3-brush). For the sake of parsimony, the multi-value methods—where you pass an object to set multiple attributes, styles or properties simultaneously—have been extracted to [d3-selection-multi](https://github.com/d3/d3-selection-multi) and are no longer part of the default bundle. The multi-value map methods have also been renamed to plural form to reduce overload: [*selection*.attrs](https://github.com/d3/d3-selection-multi/blob/master/README.md#selection_attrs), [*selection*.styles](https://github.com/d3/d3-selection-multi/blob/master/README.md#selection_styles) and [*selection*.properties](https://github.com/d3/d3-selection-multi/blob/master/README.md#selection_properties). ## [Shapes (d3-shape)](https://github.com/d3/d3-shape/blob/master/README.md) Pursuant to the great namespace flattening: * d3.svg.line ↦ [d3.line](https://github.com/d3/d3-shape/blob/master/README.md#lines) * d3.svg.line.radial ↦ [d3.radialLine](https://github.com/d3/d3-shape/blob/master/README.md#radialLine) * d3.svg.area ↦ [d3.area](https://github.com/d3/d3-shape/blob/master/README.md#areas) * d3.svg.area.radial ↦ [d3.radialArea](https://github.com/d3/d3-shape/blob/master/README.md#radialArea) * d3.svg.arc ↦ [d3.arc](https://github.com/d3/d3-shape/blob/master/README.md#arcs) * d3.svg.symbol ↦ [d3.symbol](https://github.com/d3/d3-shape/blob/master/README.md#symbols) * d3.svg.symbolTypes ↦ [d3.symbolTypes](https://github.com/d3/d3-shape/blob/master/README.md#symbolTypes) * d3.layout.pie ↦ [d3.pie](https://github.com/d3/d3-shape/blob/master/README.md#pies) * d3.layout.stack ↦ [d3.stack](https://github.com/d3/d3-shape/blob/master/README.md#stacks) * d3.svg.diagonal ↦ REMOVED (see [d3/d3-shape#27](https://github.com/d3/d3-shape/issues/27)) * d3.svg.diagonal.radial ↦ REMOVED Shapes are no longer limited to SVG; they can now render to Canvas! Shape generators now support an optional *context*: given a [CanvasRenderingContext2D](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D), you can render a shape as a canvas path to be filled or stroked. For example, a [canvas pie chart](https://bl.ocks.org/mbostock/8878e7fd82034f1d63cf) might use an arc generator: ```js var arc = d3.arc() .outerRadius(radius - 10) .innerRadius(0) .context(context); ``` To render an arc for a given datum *d*: ```js context.beginPath(); arc(d); context.fill(); ``` See [*line*.context](https://github.com/d3/d3-shape/blob/master/README.md#line_context), [*area*.context](https://github.com/d3/d3-shape/blob/master/README.md#area_context) and [*arc*.context](https://github.com/d3/d3-shape/blob/master/README.md#arc_context) for more. Under the hood, shapes use [d3-path](#paths-d3-path) to serialize canvas path methods to SVG path data when the context is null; thus, shapes are optimized for rendering to canvas. You can also now derive lines from areas. The line shares most of the same accessors, such as [*line*.defined](https://github.com/d3/d3-shape/blob/master/README.md#line_defined) and [*line*.curve](https://github.com/d3/d3-shape/blob/master/README.md#line_curve), with the area from which it is derived. For example, to render the topline of an area, use [*area*.lineY1](https://github.com/d3/d3-shape/blob/master/README.md#area_lineY1); for the baseline, use [*area*.lineY0](https://github.com/d3/d3-shape/blob/master/README.md#area_lineY0). 4.0 introduces a new curve API for specifying how line and area shapes interpolate between data points. The *line*.interpolate and *area*.interpolate methods have been replaced with [*line*.curve](https://github.com/d3/d3-shape/blob/master/README.md#line_curve) and [*area*.curve](https://github.com/d3/d3-shape/blob/master/README.md#area_curve). Curves are implemented using the [curve interface](https://github.com/d3/d3-shape/blob/master/README.md#custom-curves) rather than as a function that returns an SVG path data string; this allows curves to render to either SVG or Canvas. In addition, *line*.curve and *area*.curve now take a function which instantiates a curve for a given *context*, rather than a string. The full list of equivalents: * linear ↦ [d3.curveLinear](https://github.com/d3/d3-shape/blob/master/README.md#curveLinear) * linear-closed ↦ [d3.curveLinearClosed](https://github.com/d3/d3-shape/blob/master/README.md#curveLinearClosed) * step ↦ [d3.curveStep](https://github.com/d3/d3-shape/blob/master/README.md#curveStep) * step-before ↦ [d3.curveStepBefore](https://github.com/d3/d3-shape/blob/master/README.md#curveStepBefore) * step-after ↦ [d3.curveStepAfter](https://github.com/d3/d3-shape/blob/master/README.md#curveStepAfter) * basis ↦ [d3.curveBasis](https://github.com/d3/d3-shape/blob/master/README.md#curveBasis) * basis-open ↦ [d3.curveBasisOpen](https://github.com/d3/d3-shape/blob/master/README.md#curveBasisOpen) * basis-closed ↦ [d3.curveBasisClosed](https://github.com/d3/d3-shape/blob/master/README.md#curveBasisClosed) * bundle ↦ [d3.curveBundle](https://github.com/d3/d3-shape/blob/master/README.md#curveBundle) * cardinal ↦ [d3.curveCardinal](https://github.com/d3/d3-shape/blob/master/README.md#curveCardinal) * cardinal-open ↦ [d3.curveCardinalOpen](https://github.com/d3/d3-shape/blob/master/README.md#curveCardinalOpen) * cardinal-closed ↦ [d3.curveCardinalClosed](https://github.com/d3/d3-shape/blob/master/README.md#curveCardinalClosed) * monotone ↦ [d3.curveMonotoneX](https://github.com/d3/d3-shape/blob/master/README.md#curveMonotoneX) But that’s not all! 4.0 now provides parameterized Catmull–Rom splines as proposed by [Yuksel *et al.*](http://www.cemyuksel.com/research/catmullrom_param/). These are available as [d3.curveCatmullRom](https://github.com/d3/d3-shape/blob/master/README.md#curveCatmullRom), [d3.curveCatmullRomClosed](https://github.com/d3/d3-shape/blob/master/README.md#curveCatmullRomClosed) and [d3.curveCatmullRomOpen](https://github.com/d3/d3-shape/blob/master/README.md#curveCatmullRomOpen). catmullRom catmullRomOpen catmullRomClosed Each curve type can define its own named parameters, replacing *line*.tension and *area*.tension. For example, Catmull–Rom splines are parameterized using [*catmullRom*.alpha](https://github.com/d3/d3-shape/blob/master/README.md#curveCatmullRom_alpha) and defaults to 0.5, which corresponds to a centripetal spline that avoids self-intersections and overshoot. For a uniform Catmull–Rom spline instead: ```js var line = d3.line() .curve(d3.curveCatmullRom.alpha(0)); ``` 4.0 fixes the interpretation of the cardinal spline *tension* parameter, which is now specified as [*cardinal*.tension](https://github.com/d3/d3-shape/blob/master/README.md#curveCardinal_tension) and defaults to zero for a uniform Catmull–Rom spline; a tension of one produces a linear curve. The first and last segments of basis and cardinal curves have also been fixed! The undocumented *interpolate*.reverse field has been removed. Curves can define different behavior for toplines and baselines by counting the sequence of [*curve*.lineStart](https://github.com/d3/d3-shape/blob/master/README.md#curve_lineStart) within [*curve*.areaStart](https://github.com/d3/d3-shape/blob/master/README.md#curve_areaStart). See the [d3.curveStep implementation](https://github.com/d3/d3-shape/blob/master/src/curve/step.js) for an example. 4.0 fixes numerous bugs in the monotone curve implementation, and introduces [d3.curveMonotoneY](https://github.com/d3/d3-shape/blob/master/README.md#curveMonotoneY); this is like d3.curveMonotoneX, except it requires that the input points are monotone in *y* rather than *x*, such as for a vertically-oriented line chart. The new [d3.curveNatural](https://github.com/d3/d3-shape/blob/master/README.md#curveNatural) produces a [natural cubic spline](http://mathworld.wolfram.com/CubicSpline.html). The default [β](https://github.com/d3/d3-shape/blob/master/README.md#bundle_beta) for [d3.curveBundle](https://github.com/d3/d3-shape/blob/master/README.md#curveBundle) is now 0.85, rather than 0.7, matching the values used by [Holten](https://www.win.tue.nl/vis1/home/dholten/papers/bundles_infovis.pdf). 4.0 also has a more robust implementation of arc padding; see [*arc*.padAngle](https://github.com/d3/d3-shape/blob/master/README.md#arc_padAngle) and [*arc*.padRadius](https://github.com/d3/d3-shape/blob/master/README.md#arc_padRadius). 4.0 introduces a new symbol type API. Symbol types are passed to [*symbol*.type](https://github.com/d3/d3-shape/blob/master/README.md#symbol_type) in place of strings. The equivalents are: * circle ↦ [d3.symbolCircle](https://github.com/d3/d3-shape/blob/master/README.md#symbolCircle) * cross ↦ [d3.symbolCross](https://github.com/d3/d3-shape/blob/master/README.md#symbolCross) * diamond ↦ [d3.symbolDiamond](https://github.com/d3/d3-shape/blob/master/README.md#symbolDiamond) * square ↦ [d3.symbolSquare](https://github.com/d3/d3-shape/blob/master/README.md#symbolSquare) * triangle-down ↦ REMOVED * triangle-up ↦ [d3.symbolTriangle](https://github.com/d3/d3-shape/blob/master/README.md#symbolTriangle) * ADDED ↦ [d3.symbolStar](https://github.com/d3/d3-shape/blob/master/README.md#symbolStar) * ADDED ↦ [d3.symbolWye](https://github.com/d3/d3-shape/blob/master/README.md#symbolWye) The full set of symbol types is now: Lastly, 4.0 overhauls the stack layout API, replacing d3.layout.stack with [d3.stack](https://github.com/d3/d3-shape/blob/master/README.md#stacks). The stack generator no longer needs an *x*-accessor. In addition, the API has been simplified: the *stack* generator now accepts tabular input, such as this array of objects: ```js var data = [ {month: new Date(2015, 0, 1), apples: 3840, bananas: 1920, cherries: 960, dates: 400}, {month: new Date(2015, 1, 1), apples: 1600, bananas: 1440, cherries: 960, dates: 400}, {month: new Date(2015, 2, 1), apples: 640, bananas: 960, cherries: 640, dates: 400}, {month: new Date(2015, 3, 1), apples: 320, bananas: 480, cherries: 640, dates: 400} ]; ``` To generate the stack layout, first define a stack generator, and then apply it to the data: ```js var stack = d3.stack() .keys(["apples", "bananas", "cherries", "dates"]) .order(d3.stackOrderNone) .offset(d3.stackOffsetNone); var series = stack(data); ``` The resulting array has one element per *series*. Each series has one point per month, and each point has a lower and upper value defining the baseline and topline: ```js [ [[ 0, 3840], [ 0, 1600], [ 0, 640], [ 0, 320]], // apples [[3840, 5760], [1600, 3040], [ 640, 1600], [ 320, 800]], // bananas [[5760, 6720], [3040, 4000], [1600, 2240], [ 800, 1440]], // cherries [[6720, 7120], [4000, 4400], [2240, 2640], [1440, 1840]], // dates ] ``` Each series in then typically passed to an [area generator](https://github.com/d3/d3-shape/blob/master/README.md#areas) to render an area chart, or used to construct rectangles for a bar chart. Stack generators no longer modify the input data, so *stack*.out has been removed. For an introduction to shapes, see [Introducing d3-shape](https://medium.com/@mbostock/introducing-d3-shape-73f8367e6d12). ## [Time Formats (d3-time-format)](https://github.com/d3/d3-time-format/blob/master/README.md) Pursuant to the great namespace flattening, the format constructors have new names: * d3.time.format ↦ [d3.timeFormat](https://github.com/d3/d3-time-format/blob/master/README.md#timeFormat) * d3.time.format.utc ↦ [d3.utcFormat](https://github.com/d3/d3-time-format/blob/master/README.md#utcFormat) * d3.time.format.iso ↦ [d3.isoFormat](https://github.com/d3/d3-time-format/blob/master/README.md#isoFormat) The *format*.parse method has also been removed in favor of separate [d3.timeParse](https://github.com/d3/d3-time-format/blob/master/README.md#timeParse), [d3.utcParse](https://github.com/d3/d3-time-format/blob/master/README.md#utcParse) and [d3.isoParse](https://github.com/d3/d3-time-format/blob/master/README.md#isoParse) parser constructors. Thus, this code in 3.x: ```js var parseTime = d3.time.format("%c").parse; ``` Can be rewritten in 4.0 as: ```js var parseTime = d3.timeParse("%c"); ``` The multi-scale time format d3.time.format.multi has been replaced by [d3.scaleTime](https://github.com/d3/d3-scale/blob/master/README.md#scaleTime)’s [tick format](https://github.com/d3/d3-scale/blob/master/README.md#time_tickFormat). Time formats now coerce inputs to dates, and time parsers coerce inputs to strings. The `%Z` directive now allows more flexible parsing of time zone offsets, such as `-0700`, `-07:00`, `-07`, and `Z`. The `%p` directive is now parsed correctly when the locale’s period name is longer than two characters (*e.g.*, “a.m.”). The default U.S. English locale now uses 12-hour time and a more concise representation of the date. This aligns with local convention and is consistent with [*date*.toLocaleString](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString) in Chrome, Firefox and Node: ```js var now = new Date; d3.timeFormat("%c")(new Date); // "6/23/2016, 2:01:33 PM" d3.timeFormat("%x")(new Date); // "6/23/2016" d3.timeFormat("%X")(new Date); // "2:01:38 PM" ``` You can now set the default locale using [d3.timeFormatDefaultLocale](https://github.com/d3/d3-time-format/blob/master/README.md#timeFormatDefaultLocale)! The locales are published as [JSON](https://github.com/d3/d3-request/blob/master/README.md#json) to [npm](https://unpkg.com/d3-time-format/locale/). The performance of time formatting and parsing has been improved, and the UTC formatter and parser have a cleaner implementation (that avoids temporarily overriding the Date global). ## [Time Intervals (d3-time)](https://github.com/d3/d3-time/blob/master/README.md) Pursuant to the great namespace flattening, the local time intervals have been renamed: * ADDED ↦ [d3.timeMillisecond](https://github.com/d3/d3-time/blob/master/README.md#timeMillisecond) * d3.time.second ↦ [d3.timeSecond](https://github.com/d3/d3-time/blob/master/README.md#timeSecond) * d3.time.minute ↦ [d3.timeMinute](https://github.com/d3/d3-time/blob/master/README.md#timeMinute) * d3.time.hour ↦ [d3.timeHour](https://github.com/d3/d3-time/blob/master/README.md#timeHour) * d3.time.day ↦ [d3.timeDay](https://github.com/d3/d3-time/blob/master/README.md#timeDay) * d3.time.sunday ↦ [d3.timeSunday](https://github.com/d3/d3-time/blob/master/README.md#timeSunday) * d3.time.monday ↦ [d3.timeMonday](https://github.com/d3/d3-time/blob/master/README.md#timeMonday) * d3.time.tuesday ↦ [d3.timeTuesday](https://github.com/d3/d3-time/blob/master/README.md#timeTuesday) * d3.time.wednesday ↦ [d3.timeWednesday](https://github.com/d3/d3-time/blob/master/README.md#timeWednesday) * d3.time.thursday ↦ [d3.timeThursday](https://github.com/d3/d3-time/blob/master/README.md#timeThursday) * d3.time.friday ↦ [d3.timeFriday](https://github.com/d3/d3-time/blob/master/README.md#timeFriday) * d3.time.saturday ↦ [d3.timeSaturday](https://github.com/d3/d3-time/blob/master/README.md#timeSaturday) * d3.time.week ↦ [d3.timeWeek](https://github.com/d3/d3-time/blob/master/README.md#timeWeek) * d3.time.month ↦ [d3.timeMonth](https://github.com/d3/d3-time/blob/master/README.md#timeMonth) * d3.time.year ↦ [d3.timeYear](https://github.com/d3/d3-time/blob/master/README.md#timeYear) The UTC time intervals have likewise been renamed: * ADDED ↦ [d3.utcMillisecond](https://github.com/d3/d3-time/blob/master/README.md#utcMillisecond) * d3.time.second.utc ↦ [d3.utcSecond](https://github.com/d3/d3-time/blob/master/README.md#utcSecond) * d3.time.minute.utc ↦ [d3.utcMinute](https://github.com/d3/d3-time/blob/master/README.md#utcMinute) * d3.time.hour.utc ↦ [d3.utcHour](https://github.com/d3/d3-time/blob/master/README.md#utcHour) * d3.time.day.utc ↦ [d3.utcDay](https://github.com/d3/d3-time/blob/master/README.md#utcDay) * d3.time.sunday.utc ↦ [d3.utcSunday](https://github.com/d3/d3-time/blob/master/README.md#utcSunday) * d3.time.monday.utc ↦ [d3.utcMonday](https://github.com/d3/d3-time/blob/master/README.md#utcMonday) * d3.time.tuesday.utc ↦ [d3.utcTuesday](https://github.com/d3/d3-time/blob/master/README.md#utcTuesday) * d3.time.wednesday.utc ↦ [d3.utcWednesday](https://github.com/d3/d3-time/blob/master/README.md#utcWednesday) * d3.time.thursday.utc ↦ [d3.utcThursday](https://github.com/d3/d3-time/blob/master/README.md#utcThursday) * d3.time.friday.utc ↦ [d3.utcFriday](https://github.com/d3/d3-time/blob/master/README.md#utcFriday) * d3.time.saturday.utc ↦ [d3.utcSaturday](https://github.com/d3/d3-time/blob/master/README.md#utcSaturday) * d3.time.week.utc ↦ [d3.utcWeek](https://github.com/d3/d3-time/blob/master/README.md#utcWeek) * d3.time.month.utc ↦ [d3.utcMonth](https://github.com/d3/d3-time/blob/master/README.md#utcMonth) * d3.time.year.utc ↦ [d3.utcYear](https://github.com/d3/d3-time/blob/master/README.md#utcYear) The local time range aliases have been renamed: * d3.time.seconds ↦ [d3.timeSeconds](https://github.com/d3/d3-time/blob/master/README.md#timeSeconds) * d3.time.minutes ↦ [d3.timeMinutes](https://github.com/d3/d3-time/blob/master/README.md#timeMinutes) * d3.time.hours ↦ [d3.timeHours](https://github.com/d3/d3-time/blob/master/README.md#timeHours) * d3.time.days ↦ [d3.timeDays](https://github.com/d3/d3-time/blob/master/README.md#timeDays) * d3.time.sundays ↦ [d3.timeSundays](https://github.com/d3/d3-time/blob/master/README.md#timeSundays) * d3.time.mondays ↦ [d3.timeMondays](https://github.com/d3/d3-time/blob/master/README.md#timeMondays) * d3.time.tuesdays ↦ [d3.timeTuesdays](https://github.com/d3/d3-time/blob/master/README.md#timeTuesdays) * d3.time.wednesdays ↦ [d3.timeWednesdays](https://github.com/d3/d3-time/blob/master/README.md#timeWednesdays) * d3.time.thursdays ↦ [d3.timeThursdays](https://github.com/d3/d3-time/blob/master/README.md#timeThursdays) * d3.time.fridays ↦ [d3.timeFridays](https://github.com/d3/d3-time/blob/master/README.md#timeFridays) * d3.time.saturdays ↦ [d3.timeSaturdays](https://github.com/d3/d3-time/blob/master/README.md#timeSaturdays) * d3.time.weeks ↦ [d3.timeWeeks](https://github.com/d3/d3-time/blob/master/README.md#timeWeeks) * d3.time.months ↦ [d3.timeMonths](https://github.com/d3/d3-time/blob/master/README.md#timeMonths) * d3.time.years ↦ [d3.timeYears](https://github.com/d3/d3-time/blob/master/README.md#timeYears) The UTC time range aliases have been renamed: * d3.time.seconds.utc ↦ [d3.utcSeconds](https://github.com/d3/d3-time/blob/master/README.md#utcSeconds) * d3.time.minutes.utc ↦ [d3.utcMinutes](https://github.com/d3/d3-time/blob/master/README.md#utcMinutes) * d3.time.hours.utc ↦ [d3.utcHours](https://github.com/d3/d3-time/blob/master/README.md#utcHours) * d3.time.days.utc ↦ [d3.utcDays](https://github.com/d3/d3-time/blob/master/README.md#utcDays) * d3.time.sundays.utc ↦ [d3.utcSundays](https://github.com/d3/d3-time/blob/master/README.md#utcSundays) * d3.time.mondays.utc ↦ [d3.utcMondays](https://github.com/d3/d3-time/blob/master/README.md#utcMondays) * d3.time.tuesdays.utc ↦ [d3.utcTuesdays](https://github.com/d3/d3-time/blob/master/README.md#utcTuesdays) * d3.time.wednesdays.utc ↦ [d3.utcWednesdays](https://github.com/d3/d3-time/blob/master/README.md#utcWednesdays) * d3.time.thursdays.utc ↦ [d3.utcThursdays](https://github.com/d3/d3-time/blob/master/README.md#utcThursdays) * d3.time.fridays.utc ↦ [d3.utcFridays](https://github.com/d3/d3-time/blob/master/README.md#utcFridays) * d3.time.saturdays.utc ↦ [d3.utcSaturdays](https://github.com/d3/d3-time/blob/master/README.md#utcSaturdays) * d3.time.weeks.utc ↦ [d3.utcWeeks](https://github.com/d3/d3-time/blob/master/README.md#utcWeeks) * d3.time.months.utc ↦ [d3.utcMonths](https://github.com/d3/d3-time/blob/master/README.md#utcMonths) * d3.time.years.utc ↦ [d3.utcYears](https://github.com/d3/d3-time/blob/master/README.md#utcYears) The behavior of [*interval*.range](https://github.com/d3/d3-time/blob/master/README.md#interval_range) (and the convenience aliases such as [d3.timeDays](https://github.com/d3/d3-time/blob/master/README.md#timeDays)) has been changed when *step* is greater than one. Rather than filtering the returned dates using the field number, *interval*.range now behaves like [d3.range](https://github.com/d3/d3-array/blob/master/README.md#range): it simply skips, returning every *step*th date. For example, the following code in 3.x returns only odd days of the month: ```js d3.time.days(new Date(2016, 4, 28), new Date(2016, 5, 5), 2); // [Sun May 29 2016 00:00:00 GMT-0700 (PDT), // Tue May 31 2016 00:00:00 GMT-0700 (PDT), // Wed Jun 01 2016 00:00:00 GMT-0700 (PDT), // Fri Jun 03 2016 00:00:00 GMT-0700 (PDT)] ``` Note the returned array of dates does not start on the *start* date because May 28 is even. Also note that May 31 and June 1 are one day apart, not two! The behavior of d3.timeDays in 4.0 is probably closer to what you expect: ```js d3.timeDays(new Date(2016, 4, 28), new Date(2016, 5, 5), 2); // [Sat May 28 2016 00:00:00 GMT-0700 (PDT), // Mon May 30 2016 00:00:00 GMT-0700 (PDT), // Wed Jun 01 2016 00:00:00 GMT-0700 (PDT), // Fri Jun 03 2016 00:00:00 GMT-0700 (PDT)] ``` If you want a filtered view of a time interval (say to guarantee that two overlapping ranges are consistent, such as when generating [time scale ticks](https://github.com/d3/d3-scale/blob/master/README.md#time_ticks)), you can use the new [*interval*.every](https://github.com/d3/d3-time/blob/master/README.md#interval_every) method or its more general cousin [*interval*.filter](https://github.com/d3/d3-time/blob/master/README.md#interval_filter): ```js d3.timeDay.every(2).range(new Date(2016, 4, 28), new Date(2016, 5, 5)); // [Sun May 29 2016 00:00:00 GMT-0700 (PDT), // Tue May 31 2016 00:00:00 GMT-0700 (PDT), // Wed Jun 01 2016 00:00:00 GMT-0700 (PDT), // Fri Jun 03 2016 00:00:00 GMT-0700 (PDT)] ``` Time intervals now expose an [*interval*.count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) method for counting the number of interval boundaries after a *start* date and before or equal to an *end* date. This replaces d3.time.dayOfYear and related methods in 3.x. For example, this code in 3.x: ```js var now = new Date; d3.time.dayOfYear(now); // 165 ``` Can be rewritten in 4.0 as: ```js var now = new Date; d3.timeDay.count(d3.timeYear(now), now); // 165 ``` Likewise, in place of 3.x’s d3.time.weekOfYear, in 4.0 you would say: ```js d3.timeWeek.count(d3.timeYear(now), now); // 24 ``` The new *interval*.count is of course more general. For example, you can use it to compute hour-of-week for a heatmap: ```js d3.timeHour.count(d3.timeWeek(now), now); // 64 ``` Here are all the equivalences from 3.x to 4.0: * d3.time.dayOfYear ↦ [d3.timeDay](https://github.com/d3/d3-time/blob/master/README.md#timeDay).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.sundayOfYear ↦ [d3.timeSunday](https://github.com/d3/d3-time/blob/master/README.md#timeSunday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.mondayOfYear ↦ [d3.timeMonday](https://github.com/d3/d3-time/blob/master/README.md#timeMonday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.tuesdayOfYear ↦ [d3.timeTuesday](https://github.com/d3/d3-time/blob/master/README.md#timeTuesday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.wednesdayOfYear ↦ [d3.timeWednesday](https://github.com/d3/d3-time/blob/master/README.md#timeWednesday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.thursdayOfYear ↦ [d3.timeThursday](https://github.com/d3/d3-time/blob/master/README.md#timeThursday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.fridayOfYear ↦ [d3.timeFriday](https://github.com/d3/d3-time/blob/master/README.md#timeFriday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.saturdayOfYear ↦ [d3.timeSaturday](https://github.com/d3/d3-time/blob/master/README.md#timeSaturday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.weekOfYear ↦ [d3.timeWeek](https://github.com/d3/d3-time/blob/master/README.md#timeWeek).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.dayOfYear.utc ↦ [d3.utcDay](https://github.com/d3/d3-time/blob/master/README.md#utcDay).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.sundayOfYear.utc ↦ [d3.utcSunday](https://github.com/d3/d3-time/blob/master/README.md#utcSunday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.mondayOfYear.utc ↦ [d3.utcMonday](https://github.com/d3/d3-time/blob/master/README.md#utcMonday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.tuesdayOfYear.utc ↦ [d3.utcTuesday](https://github.com/d3/d3-time/blob/master/README.md#utcTuesday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.wednesdayOfYear.utc ↦ [d3.utcWednesday](https://github.com/d3/d3-time/blob/master/README.md#utcWednesday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.thursdayOfYear.utc ↦ [d3.utcThursday](https://github.com/d3/d3-time/blob/master/README.md#utcThursday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.fridayOfYear.utc ↦ [d3.utcFriday](https://github.com/d3/d3-time/blob/master/README.md#utcFriday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.saturdayOfYear.utc ↦ [d3.utcSaturday](https://github.com/d3/d3-time/blob/master/README.md#utcSaturday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.weekOfYear.utc ↦ [d3.utcWeek](https://github.com/d3/d3-time/blob/master/README.md#utcWeek).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) D3 4.0 now also lets you define custom time intervals using [d3.timeInterval](https://github.com/d3/d3-time/blob/master/README.md#timeInterval). The [d3.timeYear](https://github.com/d3/d3-time/blob/master/README.md#timeYear), [d3.utcYear](https://github.com/d3/d3-time/blob/master/README.md#utcYear), [d3.timeMillisecond](https://github.com/d3/d3-time/blob/master/README.md#timeMillisecond) and [d3.utcMillisecond](https://github.com/d3/d3-time/blob/master/README.md#utcMillisecond) intervals have optimized implementations of [*interval*.every](https://github.com/d3/d3-time/blob/master/README.md#interval_every), which is necessary to generate time ticks for very large or very small domains efficiently. More generally, the performance of time intervals has been improved, and time intervals now do a better job with respect to daylight savings in various locales. ## [Timers (d3-timer)](https://github.com/d3/d3-timer/blob/master/README.md) In D3 3.x, the only way to stop a timer was for its callback to return true. For example, this timer stops after one second: ```js d3.timer(function(elapsed) { console.log(elapsed); return elapsed >= 1000; }); ``` In 4.0, use [*timer*.stop](https://github.com/d3/d3-timer/blob/master/README.md#timer_stop) instead: ```js var t = d3.timer(function(elapsed) { console.log(elapsed); if (elapsed >= 1000) { t.stop(); } }); ``` The primary benefit of *timer*.stop is that timers are not required to self-terminate: they can be stopped externally, allowing for the immediate and synchronous disposal of associated resources, and the separation of concerns. The above is equivalent to: ```js var t = d3.timer(function(elapsed) { console.log(elapsed); }); d3.timeout(function() { t.stop(); }, 1000); ``` This improvement extends to [d3-transition](#transitions-d3-transition): now when a transition is interrupted, its resources are immediately freed rather than having to wait for transition to start. 4.0 also introduces a new [*timer*.restart](https://github.com/d3/d3-timer/blob/master/README.md#timer_restart) method for restarting timers, for replacing the callback of a running timer, or for changing its delay or reference time. Unlike *timer*.stop followed by [d3.timer](https://github.com/d3/d3-timer/blob/master/README.md#timer), *timer*.restart maintains the invocation priority of an existing timer: it guarantees that the order of invocation of active timers remains the same. The d3.timer.flush method has been renamed to [d3.timerFlush](https://github.com/d3/d3-timer/blob/master/README.md#timerFlush). Some usage patterns in D3 3.x could cause the browser to hang when a background page returned to the foreground. For example, the following code schedules a transition every second: ```js setInterval(function() { d3.selectAll("div").transition().call(someAnimation); // BAD }, 1000); ``` If such code runs in the background for hours, thousands of queued transitions will try to run simultaneously when the page is foregrounded. D3 4.0 avoids this hang by freezing time in the background: when a page is in the background, time does not advance, and so no queue of timers accumulates to run when the page returns to the foreground. Use d3.timer instead of transitions to schedule a long-running animation, or use [d3.timeout](https://github.com/d3/d3-timer/blob/master/README.md#timeout) and [d3.interval](https://github.com/d3/d3-timer/blob/master/README.md#interval) in place of setTimeout and setInterval to prevent transitions from being queued in the background: ```js d3.interval(function() { d3.selectAll("div").transition().call(someAnimation); // GOOD }, 1000); ``` By freezing time in the background, timers are effectively “unaware” of being backgrounded. It’s like nothing happened! 4.0 also now uses high-precision time ([performance.now](https://developer.mozilla.org/en-US/docs/Web/API/Performance/now)) where available; the current time is available as [d3.now](https://github.com/d3/d3-timer/blob/master/README.md#now). ## [Transitions (d3-transition)](https://github.com/d3/d3-transition/blob/master/README.md) The [*selection*.transition](https://github.com/d3/d3-transition/blob/master/README.md#selection_transition) method now takes an optional *transition* instance which can be used to synchronize a new transition with an existing transition. (This change is discussed further in [What Makes Software Good?](https://medium.com/@mbostock/what-makes-software-good-943557f8a488)) For example: ```js var t = d3.transition() .duration(750) .ease(d3.easeLinear); d3.selectAll(".apple").transition(t) .style("fill", "red"); d3.selectAll(".orange").transition(t) .style("fill", "orange"); ``` Transitions created this way inherit timing from the closest ancestor element, and thus are synchronized even when the referenced *transition* has variable timing such as a staggered delay. This method replaces the deeply magical behavior of *transition*.each in 3.x; in 4.0, [*transition*.each](https://github.com/d3/d3-transition/blob/master/README.md#transition_each) is identical to [*selection*.each](https://github.com/d3/d3-selection/blob/master/README.md#selection_each). Use the new [*transition*.on](https://github.com/d3/d3-transition/blob/master/README.md#transition_on) method to listen to transition events. The meaning of [*transition*.delay](https://github.com/d3/d3-transition/blob/master/README.md#transition_delay) has changed for chained transitions created by [*transition*.transition](https://github.com/d3/d3-transition/blob/master/README.md#transition_transition). The specified delay is now relative to the *previous* transition in the chain, rather than the *first* transition in the chain; this makes it easier to insert interstitial pauses. For example: ```js d3.selectAll(".apple") .transition() // First fade to green. .style("fill", "green") .transition() // Then red. .style("fill", "red") .transition() // Wait one second. Then brown, and remove. .delay(1000) .style("fill", "brown") .remove(); ``` Time is now frozen in the background; see [d3-timer](#timers-d3-timer) for more information. While it was previously the case that transitions did not run in the background, now they pick up where they left off when the page returns to the foreground. This avoids page hangs by not scheduling an unbounded number of transitions in the background. If you want to schedule an infinitely-repeating transition, use transition events, or use [d3.timeout](https://github.com/d3/d3-timer/blob/master/README.md#timeout) and [d3.interval](https://github.com/d3/d3-timer/blob/master/README.md#interval) in place of [setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout) and [setInterval](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval). The [*selection*.interrupt](https://github.com/d3/d3-transition/blob/master/README.md#selection_interrupt) method now cancels all scheduled transitions on the selected elements, in addition to interrupting any active transition. When transitions are interrupted, any resources associated with the transition are now released immediately, rather than waiting until the transition starts, improving performance. (See also [*timer*.stop](https://github.com/d3/d3-timer/blob/master/README.md#timer_stop).) The new [d3.interrupt](https://github.com/d3/d3-transition/blob/master/README.md#interrupt) method is an alternative to [*selection*.interrupt](https://github.com/d3/d3-transition/blob/master/README.md#selection_interrupt) for quickly interrupting a single node. The new [d3.active](https://github.com/d3/d3-transition/blob/master/README.md#active) method allows you to select the currently-active transition on a given *node*, if any. This is useful for modifying in-progress transitions and for scheduling infinitely-repeating transitions. For example, this transition continuously oscillates between red and blue: ```js d3.select("circle") .transition() .on("start", function repeat() { d3.active(this) .style("fill", "red") .transition() .style("fill", "blue") .transition() .on("start", repeat); }); ``` The [life cycle of a transition](https://github.com/d3/d3-transition/blob/master/README.md#the-life-of-a-transition) is now more formally defined and enforced. For example, attempting to change the duration of a running transition now throws an error rather than silently failing. The [*transition*.remove](https://github.com/d3/d3-transition/blob/master/README.md#transition_remove) method has been fixed if multiple transition names are in use: the element is only removed if it has no scheduled transitions, regardless of name. The [*transition*.ease](https://github.com/d3/d3-transition/blob/master/README.md#transition_ease) method now always takes an [easing function](#easings-d3-ease), not a string. When a transition ends, the tweens are invoked one last time with *t* equal to exactly 1, regardless of the associated easing function. As with [selections](#selections-d3-selection) in 4.0, all transition callback functions now receive the standard arguments: the element’s datum (*d*), the element’s index (*i*), and the element’s group (*nodes*), with *this* as the element. This notably affects [*transition*.attrTween](https://github.com/d3/d3-transition/blob/master/README.md#transition_attrTween) and [*transition*.styleTween](https://github.com/d3/d3-transition/blob/master/README.md#transition_styleTween), which no longer pass the *tween* function the current attribute or style value as the third argument. The *transition*.attrTween and *transition*.styleTween methods can now be called in getter modes for debugging or to share tween definitions between transitions. Homogenous transitions are now optimized! If all elements in a transition share the same tween, interpolator, or event listeners, this state is now shared across the transition rather than separately allocated for each element. 4.0 also uses an optimized default interpolator in place of [d3.interpolate](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolate) for [*transition*.attr](https://github.com/d3/d3-transition/blob/master/README.md#transition_attr) and [*transition*.style](https://github.com/d3/d3-transition/blob/master/README.md#transition_style). And transitions can now interpolate both [CSS](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateTransformCss) and [SVG](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateTransformSvg) transforms. For reusable components that support transitions, such as [axes](#axes-d3-axis), a new [*transition*.selection](https://github.com/d3/d3-transition/blob/master/README.md#transition_selection) method returns the [selection](#selections-d3-selection) that corresponds to a given transition. There is also a new [*transition*.merge](https://github.com/d3/d3-transition/blob/master/README.md#transition_merge) method that is equivalent to [*selection*.merge](https://github.com/d3/d3-selection/blob/master/README.md#selection_merge). For the sake of parsimony, the multi-value map methods have been extracted to [d3-selection-multi](https://github.com/d3/d3-selection-multi) and are no longer part of the default bundle. The multi-value map methods have also been renamed to plural form to reduce overload: [*transition*.attrs](https://github.com/d3/d3-selection-multi/blob/master/README.md#transition_attrs) and [*transition*.styles](https://github.com/d3/d3-selection-multi/blob/master/README.md#transition_styles). ## [Voronoi Diagrams (d3-voronoi)](https://github.com/d3/d3-voronoi/blob/master/README.md) The d3.geom.voronoi method has been renamed to [d3.voronoi](https://github.com/d3/d3-voronoi/blob/master/README.md#voronoi), and the *voronoi*.clipExtent method has been renamed to [*voronoi*.extent](https://github.com/d3/d3-voronoi/blob/master/README.md#voronoi_extent). The undocumented *polygon*.point property in 3.x, which is the element in the input *data* corresponding to the polygon, has been renamed to *polygon*.data. Calling [*voronoi*](https://github.com/d3/d3-voronoi/blob/master/README.md#_voronoi) now returns the full [Voronoi diagram](https://github.com/d3/d3-voronoi/blob/master/README.md#voronoi-diagrams), which includes topological information: each Voronoi edge exposes *edge*.left and *edge*.right specifying the sites on either side of the edge, and each Voronoi cell is defined as an array of these edges and a corresponding site. The Voronoi diagram can be used to efficiently compute both the Voronoi and Delaunay tessellations for a set of points: [*diagram*.polygons](https://github.com/d3/d3-voronoi/blob/master/README.md#diagram_polygons), [*diagram*.links](https://github.com/d3/d3-voronoi/blob/master/README.md#diagram_links), and [*diagram*.triangles](https://github.com/d3/d3-voronoi/blob/master/README.md#diagram_triangles). The new topology is also useful in conjunction with TopoJSON; see the [Voronoi topology example](https://bl.ocks.org/mbostock/cd52a201d7694eb9d890). The [*voronoi*.polygons](https://github.com/d3/d3-voronoi/blob/master/README.md#voronoi_polygons) and [*diagram*.polygons](https://github.com/d3/d3-voronoi/blob/master/README.md#diagram_polygons) now require an [extent](https://github.com/d3/d3-voronoi/blob/master/README.md#voronoi_extent); there is no longer an implicit extent of ±1e6. The [*voronoi*.links](https://github.com/d3/d3-voronoi/blob/master/README.md#voronoi_links), [*voronoi*.triangles](https://github.com/d3/d3-voronoi/blob/master/README.md#voronoi_triangles), [*diagram*.links](https://github.com/d3/d3-voronoi/blob/master/README.md#diagram_links) and [*diagram*.triangles](https://github.com/d3/d3-voronoi/blob/master/README.md#diagram_triangles) are now affected by the clip extent: as the Delaunay is computed as the dual of the Voronoi, two sites are only linked if the clipped cells are touching. To compute the Delaunay triangulation without respect to clipping, set the extent to null. The Voronoi generator finally has well-defined behavior for coincident vertices: the first of a set of coincident points has a defined cell, while the subsequent duplicate points have null cells. The returned array of polygons is sparse, so by using *array*.forEach or *array*.map, you can easily skip undefined cells. The Voronoi generator also now correctly handles the case where no cell edges intersect the extent. ## [Zooming (d3-zoom)](https://github.com/d3/d3-zoom/blob/master/README.md) The zoom behavior d3.behavior.zoom has been renamed to d3.zoom. Zoom behaviors no longer store the active zoom transform (*i.e.*, the visible region; the scale and translate) internally. The zoom transform is now stored on any elements to which the zoom behavior has been applied. The zoom transform is available as *event*.transform within a zoom event or by calling [d3.zoomTransform](https://github.com/d3/d3-zoom/blob/master/README.md#zoomTransform) on a given *element*. To zoom programmatically, use [*zoom*.transform](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_transform) with a given [selection](#selections-d3-selection) or [transition](#transitions-d3-transition); see the [zoom transitions example](https://bl.ocks.org/mbostock/b783fbb2e673561d214e09c7fb5cedee). The *zoom*.event method has been removed. To make programmatic zooming easier, there are several new convenience methods on top of *zoom*.transform: [*zoom*.translateBy](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_translateBy), [*zoom*.scaleBy](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_scaleBy) and [*zoom*.scaleTo](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_scaleTo). There is also a new API for describing [zoom transforms](https://github.com/d3/d3-zoom/blob/master/README.md#zoom-transforms). Zoom behaviors are no longer dependent on [scales](#scales-d3-scale), but you can use [*transform*.rescaleX](https://github.com/d3/d3-zoom/blob/master/README.md#transform_rescaleX), [*transform*.rescaleY](https://github.com/d3/d3-zoom/blob/master/README.md#transform_rescaleY), [*transform*.invertX](https://github.com/d3/d3-zoom/blob/master/README.md#transform_invertX) or [*transform*.invertY](https://github.com/d3/d3-zoom/blob/master/README.md#transform_invertY) to transform a scale’s domain. 3.x’s *event*.scale is replaced with *event*.transform.k, and *event*.translate is replaced with *event*.transform.x and *event*.transform.y. The *zoom*.center method has been removed in favor of programmatic zooming. The zoom behavior finally supports simple constraints on panning! The new [*zoom*.translateExtent](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_translateExtent) lets you define the viewable extent of the world: the currently-visible extent (the extent of the viewport, as defined by [*zoom*.extent](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_extent)) is always contained within the translate extent. The *zoom*.size method has been replaced by *zoom*.extent, and the default behavior is now smarter: it defaults to the extent of the zoom behavior’s owner element, rather than being hardcoded to 960×500. (This also improves the default path chosen during smooth zoom transitions!) The zoom behavior’s interaction has also improved. It now correctly handles concurrent wheeling and dragging, as well as concurrent touching and mousing. The zoom behavior now ignores wheel events at the limits of its scale extent, allowing you to scroll past a zoomable area. The *zoomstart* and *zoomend* events have been renamed *start* and *end*. By default, zoom behaviors now ignore right-clicks intended for the context menu; use [*zoom*.filter](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_filter) to control which events are ignored. The zoom behavior also ignores emulated mouse events on iOS. The zoom behavior now consumes handled events, making it easier to combine with other interactive behaviors such as [dragging](#dragging-d3-drag). ================================================ FILE: inst/www/d3/v4/LICENSE ================================================ Copyright 2010-2017 Mike Bostock All rights reserved. Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: * Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. * Neither the name of the author nor the names of contributors may be used to endorse or promote products derived from this software without specific prior written permission. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. ================================================ FILE: inst/www/d3/v4/README.md ================================================ # D3: Data-Driven Documents **D3** (or **D3.js**) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, Canvas and HTML. D3 combines powerful visualization and interaction techniques with a data-driven approach to DOM manipulation, giving you the full capabilities of modern browsers and the freedom to design the right visual interface for your data. ## Resources * [API Reference](https://github.com/d3/d3/blob/master/API.md) * [Release Notes](https://github.com/d3/d3/releases) * [Gallery](https://github.com/d3/d3/wiki/Gallery) * [Examples](https://bl.ocks.org/mbostock) * [Wiki](https://github.com/d3/d3/wiki) ## Installing If you use npm, `npm install d3`. Otherwise, download the [latest release](https://github.com/d3/d3/releases/latest). The released bundle supports anonymous AMD, CommonJS, and vanilla environments. You can load directly from [d3js.org](https://d3js.org), [CDNJS](https://cdnjs.com/libraries/d3), or [unpkg](https://unpkg.com/d3/). For example: ```html ``` For the minified version: ```html ``` You can also use the standalone D3 microlibraries. For example, [d3-selection](https://github.com/d3/d3-selection): ```html ``` D3 is written using [ES2015 modules](http://www.2ality.com/2014/09/es6-modules-final.html). Create a [custom bundle using Rollup](https://bl.ocks.org/mbostock/bb09af4c39c79cffcde4), Webpack, or your preferred bundler. To import D3 into an ES2015 application, either import specific symbols from specific D3 modules: ```js import {scaleLinear} from "d3-scale"; ``` Or import everything into a namespace (here, `d3`): ```js import * as d3 from "d3"; ``` In Node: ```js var d3 = require("d3"); ``` You can also require individual modules and combine them into a `d3` object using [Object.assign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign): ```js var d3 = Object.assign({}, require("d3-format"), require("d3-geo"), require("d3-geo-projection")); ``` ================================================ FILE: inst/www/d3/v5/API.md ================================================ # D3 API Reference D3 is a [collection of modules](https://github.com/d3) that are designed to work together; you can use the modules independently, or you can use them together as part of the default build. The source and documentation for each module is available in its repository. Follow the links below to learn more. For changes between major versions, see [CHANGES](https://github.com/d3/d3/blob/master/CHANGES.md); see also the [release notes](https://github.com/d3/d3/releases) and the [3.x reference](https://github.com/d3/d3-3.x-api-reference/blob/master/API-Reference.md). * [Arrays](#arrays-d3-array) ([Statistics](#statistics), [Search](#search), [Transformations](#transformations), [Histograms](#histograms)) * [Axes](#axes-d3-axis) * [Brushes](#brushes-d3-brush) * [Chords](#chords-d3-chord) * [Collections](#collections-d3-collection) ([Objects](#objects), [Maps](#maps), [Sets](#sets), [Nests](#nests)) * [Colors](#colors-d3-color) * [Color Schemes](#color-schemes-d3-scale-chromatic) * [Contours](#contours-d3-contour) * [Dispatches](#dispatches-d3-dispatch) * [Dragging](#dragging-d3-drag) * [Delimiter-Separated Values](#delimiter-separated-values-d3-dsv) * [Easings](#easings-d3-ease) * [Fetches](#fetches-d3-fetch) * [Forces](#forces-d3-force) * [Number Formats](#number-formats-d3-format) * [Geographies](#geographies-d3-geo) ([Paths](#paths), [Projections](#projections), [Spherical Math](#spherical-math), [Spherical Shapes](#spherical-shapes), [Streams](#streams), [Transforms](#transforms)) * [Hierarchies](#hierarchies-d3-hierarchy) * [Interpolators](#interpolators-d3-interpolate) * [Paths](#paths-d3-path) * [Polygons](#polygons-d3-polygon) * [Quadtrees](#quadtrees-d3-quadtree) * [Random Numbers](#random-numbers-d3-random) * [Scales](#scales-d3-scale) ([Continuous](#continuous-scales), [Sequential](#sequential-scales), [Diverging](#diverging-scales), [Quantize](#quantize-scales), [Ordinal](#ordinal-scales)) * [Selections](#selections-d3-selection) ([Selecting](#selecting-elements), [Modifying](#modifying-elements), [Data](#joining-data), [Events](#handling-events), [Control](#control-flow), [Local Variables](#local-variables), [Namespaces](#namespaces)) * [Shapes](#shapes-d3-shape) ([Arcs](#arcs), [Pies](#pies), [Lines](#lines), [Areas](#areas), [Curves](#curves), [Links](#links), [Symbols](#symbols), [Stacks](#stacks)) * [Time Formats](#time-formats-d3-time-format) * [Time Intervals](#time-intervals-d3-time) * [Timers](#timers-d3-timer) * [Transitions](#transitions-d3-transition) * [Voronoi Diagrams](#voronoi-diagrams-d3-voronoi) * [Zooming](#zooming-d3-zoom) D3 uses [semantic versioning](http://semver.org/). The current version is exposed as d3.version. ## [Arrays (d3-array)](https://github.com/d3/d3-array/tree/v1.2.4) Array manipulation, ordering, searching, summarizing, etc. ### [Statistics](https://github.com/d3/d3-array/blob/v1.2.4/README.md#statistics) Methods for computing basic summary statistics. * [d3.min](https://github.com/d3/d3-array/blob/v1.2.4/README.md#min) - compute the minimum value in an array. * [d3.max](https://github.com/d3/d3-array/blob/v1.2.4/README.md#max) - compute the maximum value in an array. * [d3.extent](https://github.com/d3/d3-array/blob/v1.2.4/README.md#extent) - compute the minimum and maximum value in an array. * [d3.sum](https://github.com/d3/d3-array/blob/v1.2.4/README.md#sum) - compute the sum of an array of numbers. * [d3.mean](https://github.com/d3/d3-array/blob/v1.2.4/README.md#mean) - compute the arithmetic mean of an array of numbers. * [d3.median](https://github.com/d3/d3-array/blob/v1.2.4/README.md#median) - compute the median of an array of numbers (the 0.5-quantile). * [d3.quantile](https://github.com/d3/d3-array/blob/v1.2.4/README.md#quantile) - compute a quantile for a sorted array of numbers. * [d3.variance](https://github.com/d3/d3-array/blob/v1.2.4/README.md#variance) - compute the variance of an array of numbers. * [d3.deviation](https://github.com/d3/d3-array/blob/v1.2.4/README.md#deviation) - compute the standard deviation of an array of numbers. ### [Search](https://github.com/d3/d3-array/blob/v1.2.4/README.md#search) Methods for searching arrays for a specific element. * [d3.scan](https://github.com/d3/d3-array/blob/v1.2.4/README.md#scan) - linear search for an element using a comparator. * [d3.bisect](https://github.com/d3/d3-array/blob/v1.2.4/README.md#bisect) - binary search for a value in a sorted array. * [d3.bisectRight](https://github.com/d3/d3-array/blob/v1.2.4/README.md#bisectRight) - binary search for a value in a sorted array. * [d3.bisectLeft](https://github.com/d3/d3-array/blob/v1.2.4/README.md#bisectLeft) - binary search for a value in a sorted array. * [d3.bisector](https://github.com/d3/d3-array/blob/v1.2.4/README.md#bisector) - bisect using an accessor or comparator. * [*bisector*.left](https://github.com/d3/d3-array/blob/v1.2.4/README.md#bisector_left) - bisectLeft, with the given comparator. * [*bisector*.right](https://github.com/d3/d3-array/blob/v1.2.4/README.md#bisector_right) - bisectRight, with the given comparator. * [d3.ascending](https://github.com/d3/d3-array/blob/v1.2.4/README.md#ascending) - compute the natural order of two values. * [d3.descending](https://github.com/d3/d3-array/blob/v1.2.4/README.md#descending) - compute the natural order of two values. ### [Transformations](https://github.com/d3/d3-array/blob/v1.2.4/README.md#transformations) Methods for transforming arrays and for generating new arrays. * [d3.cross](https://github.com/d3/d3-array/blob/v1.2.4/README.md#cross) - compute the Cartesian product of two arrays. * [d3.merge](https://github.com/d3/d3-array/blob/v1.2.4/README.md#merge) - merge multiple arrays into one array. * [d3.pairs](https://github.com/d3/d3-array/blob/v1.2.4/README.md#pairs) - create an array of adjacent pairs of elements. * [d3.permute](https://github.com/d3/d3-array/blob/v1.2.4/README.md#permute) - reorder an array of elements according to an array of indexes. * [d3.shuffle](https://github.com/d3/d3-array/blob/v1.2.4/README.md#shuffle) - randomize the order of an array. * [d3.ticks](https://github.com/d3/d3-array/blob/v1.2.4/README.md#ticks) - generate representative values from a numeric interval. * [d3.tickIncrement](https://github.com/d3/d3-array/blob/v1.2.4/README.md#tickIncrement) - generate representative values from a numeric interval. * [d3.tickStep](https://github.com/d3/d3-array/blob/v1.2.4/README.md#tickStep) - generate representative values from a numeric interval. * [d3.range](https://github.com/d3/d3-array/blob/v1.2.4/README.md#range) - generate a range of numeric values. * [d3.transpose](https://github.com/d3/d3-array/blob/v1.2.4/README.md#transpose) - transpose an array of arrays. * [d3.zip](https://github.com/d3/d3-array/blob/v1.2.4/README.md#zip) - transpose a variable number of arrays. ### [Histograms](https://github.com/d3/d3-array/blob/v1.2.4/README.md#histograms) Bin discrete samples into continuous, non-overlapping intervals. * [d3.histogram](https://github.com/d3/d3-array/blob/v1.2.4/README.md#histogram) - create a new histogram generator. * [*histogram*](https://github.com/d3/d3-array/blob/v1.2.4/README.md#_histogram) - compute the histogram for the given array of samples. * [*histogram*.value](https://github.com/d3/d3-array/blob/v1.2.4/README.md#histogram_value) - specify a value accessor for each sample. * [*histogram*.domain](https://github.com/d3/d3-array/blob/v1.2.4/README.md#histogram_domain) - specify the interval of observable values. * [*histogram*.thresholds](https://github.com/d3/d3-array/blob/v1.2.4/README.md#histogram_thresholds) - specify how values are divided into bins. * [d3.thresholdFreedmanDiaconis](https://github.com/d3/d3-array/blob/v1.2.4/README.md#thresholdFreedmanDiaconis) - the Freedman–Diaconis binning rule. * [d3.thresholdScott](https://github.com/d3/d3-array/blob/v1.2.4/README.md#thresholdScott) - Scott’s normal reference binning rule. * [d3.thresholdSturges](https://github.com/d3/d3-array/blob/v1.2.4/README.md#thresholdSturges) - Sturges’ binning formula. ## [Axes (d3-axis)](https://github.com/d3/d3-axis/tree/v1.0.12) Human-readable reference marks for scales. * [d3.axisTop](https://github.com/d3/d3-axis/blob/v1.0.12/README.md#axisTop) - create a new top-oriented axis generator. * [d3.axisRight](https://github.com/d3/d3-axis/blob/v1.0.12/README.md#axisRight) - create a new right-oriented axis generator. * [d3.axisBottom](https://github.com/d3/d3-axis/blob/v1.0.12/README.md#axisBottom) - create a new bottom-oriented axis generator. * [d3.axisLeft](https://github.com/d3/d3-axis/blob/v1.0.12/README.md#axisLeft) - create a new left-oriented axis generator. * [*axis*](https://github.com/d3/d3-axis/blob/v1.0.12/README.md#_axis) - generate an axis for the given selection. * [*axis*.scale](https://github.com/d3/d3-axis/blob/v1.0.12/README.md#axis_scale) - set the scale. * [*axis*.ticks](https://github.com/d3/d3-axis/blob/v1.0.12/README.md#axis_ticks) - customize how ticks are generated and formatted. * [*axis*.tickArguments](https://github.com/d3/d3-axis/blob/v1.0.12/README.md#axis_tickArguments) - customize how ticks are generated and formatted. * [*axis*.tickValues](https://github.com/d3/d3-axis/blob/v1.0.12/README.md#axis_tickValues) - set the tick values explicitly. * [*axis*.tickFormat](https://github.com/d3/d3-axis/blob/v1.0.12/README.md#axis_tickFormat) - set the tick format explicitly. * [*axis*.tickSize](https://github.com/d3/d3-axis/blob/v1.0.12/README.md#axis_tickSize) - set the size of the ticks. * [*axis*.tickSizeInner](https://github.com/d3/d3-axis/blob/v1.0.12/README.md#axis_tickSizeInner) - set the size of inner ticks. * [*axis*.tickSizeOuter](https://github.com/d3/d3-axis/blob/v1.0.12/README.md#axis_tickSizeOuter) - set the size of outer (extent) ticks. * [*axis*.tickPadding](https://github.com/d3/d3-axis/blob/v1.0.12/README.md#axis_tickPadding) - set the padding between ticks and labels. ## [Brushes (d3-brush)](https://github.com/d3/d3-brush/tree/v1.1.5) Select a one- or two-dimensional region using the mouse or touch. * [d3.brush](https://github.com/d3/d3-brush/blob/v1.1.5/README.md#brush) - create a new two-dimensional brush. * [d3.brushX](https://github.com/d3/d3-brush/blob/v1.1.5/README.md#brushX) - create a brush along the *x*-dimension. * [d3.brushY](https://github.com/d3/d3-brush/blob/v1.1.5/README.md#brushY) - create a brush along the *y*-dimension. * [*brush*](https://github.com/d3/d3-brush/blob/v1.1.5/README.md#_brush) - apply the brush to a selection. * [*brush*.move](https://github.com/d3/d3-brush/blob/v1.1.5/README.md#brush_move) - move the brush selection. * [*brush*.clear](https://github.com/d3/d3-brush/blob/v1.1.5/README.md#brush_clear) - clear the brush selection. * [*brush*.extent](https://github.com/d3/d3-brush/blob/v1.1.5/README.md#brush_extent) - define the brushable region. * [*brush*.filter](https://github.com/d3/d3-brush/blob/v1.1.5/README.md#brush_filter) - control which input events initiate brushing. * [*brush*.handleSize](https://github.com/d3/d3-brush/blob/v1.1.5/README.md#brush_handleSize) - set the size of the brush handles. * [*brush*.touchable](https://github.com/d3/d3-brush/blob/v1.1.5/README.md#brush_touchable) - set the touch support detector. * [*brush*.keyModifiers](https://github.com/d3/d3-brush/blob/v1.1.5/README.md#brush_keyModifiers) - enable or disable key interaction. * [*brush*.on](https://github.com/d3/d3-brush/blob/v1.1.5/README.md#brush_on) - listen for brush events. * [d3.brushSelection](https://github.com/d3/d3-brush/blob/v1.1.5/README.md#brushSelection) - get the brush selection for a given node. ## [Chords (d3-chord)](https://github.com/d3/d3-chord/tree/v1.0.6) * [d3.chord](https://github.com/d3/d3-chord/blob/v1.0.6/README.md#chord) - create a new chord layout. * [*chord*](https://github.com/d3/d3-chord/blob/v1.0.6/README.md#_chord) - compute the layout for the given matrix. * [*chord*.padAngle](https://github.com/d3/d3-chord/blob/v1.0.6/README.md#chord_padAngle) - set the padding between adjacent groups. * [*chord*.sortGroups](https://github.com/d3/d3-chord/blob/v1.0.6/README.md#chord_sortGroups) - define the group order. * [*chord*.sortSubgroups](https://github.com/d3/d3-chord/blob/v1.0.6/README.md#chord_sortSubgroups) - define the source and target order within groups. * [*chord*.sortChords](https://github.com/d3/d3-chord/blob/v1.0.6/README.md#chord_sortChords) - define the chord order across groups. * [d3.ribbon](https://github.com/d3/d3-chord/blob/v1.0.6/README.md#ribbon) - create a ribbon shape generator. * [*ribbon*](https://github.com/d3/d3-chord/blob/v1.0.6/README.md#_ribbon) - generate a ribbon shape. * [*ribbon*.source](https://github.com/d3/d3-chord/blob/v1.0.6/README.md#ribbon_source) - set the source accessor. * [*ribbon*.target](https://github.com/d3/d3-chord/blob/v1.0.6/README.md#ribbon_target) - set the target accessor. * [*ribbon*.radius](https://github.com/d3/d3-chord/blob/v1.0.6/README.md#ribbon_radius) - set the ribbon source or target radius. * [*ribbon*.startAngle](https://github.com/d3/d3-chord/blob/v1.0.6/README.md#ribbon_startAngle) - set the ribbon source or target start angle. * [*ribbon*.endAngle](https://github.com/d3/d3-chord/blob/v1.0.6/README.md#ribbon_endAngle) - set the ribbon source or target end angle. * [*ribbon*.context](https://github.com/d3/d3-chord/blob/v1.0.6/README.md#ribbon_context) - set the render context. ## [Collections (d3-collection)](https://github.com/d3/d3-collection/tree/v1.0.7) Handy data structures for elements keyed by string. ### [Objects](https://github.com/d3/d3-collection/blob/v1.0.7/README.md#objects) Methods for converting associative arrays (objects) to arrays. * [d3.keys](https://github.com/d3/d3-collection/blob/v1.0.7/README.md#keys) - list the keys of an associative array. * [d3.values](https://github.com/d3/d3-collection/blob/v1.0.7/README.md#values) - list the values of an associated array. * [d3.entries](https://github.com/d3/d3-collection/blob/v1.0.7/README.md#entries) - list the key-value entries of an associative array. ### [Maps](https://github.com/d3/d3-collection/blob/v1.0.7/README.md#maps) Like ES6 Map, but with string keys and a few other differences. * [d3.map](https://github.com/d3/d3-collection/blob/v1.0.7/README.md#map) - create a new, empty map. * [*map*.has](https://github.com/d3/d3-collection/blob/v1.0.7/README.md#map_has) - returns true if the map contains the given key. * [*map*.get](https://github.com/d3/d3-collection/blob/v1.0.7/README.md#map_get) - get the value for the given key. * [*map*.set](https://github.com/d3/d3-collection/blob/v1.0.7/README.md#map_set) - set the value for the given key. * [*map*.remove](https://github.com/d3/d3-collection/blob/v1.0.7/README.md#map_remove) - remove the entry for given key. * [*map*.clear](https://github.com/d3/d3-collection/blob/v1.0.7/README.md#map_clear) - remove all entries. * [*map*.keys](https://github.com/d3/d3-collection/blob/v1.0.7/README.md#map_keys) - get the array of keys. * [*map*.values](https://github.com/d3/d3-collection/blob/v1.0.7/README.md#map_values) - get the array of values. * [*map*.entries](https://github.com/d3/d3-collection/blob/v1.0.7/README.md#map_entries) - get the array of entries (key-values objects). * [*map*.each](https://github.com/d3/d3-collection/blob/v1.0.7/README.md#map_each) - call a function for each entry. * [*map*.empty](https://github.com/d3/d3-collection/blob/v1.0.7/README.md#map_empty) - returns false if the map has at least one entry. * [*map*.size](https://github.com/d3/d3-collection/blob/v1.0.7/README.md#map_size) - compute the number of entries. ### [Sets](https://github.com/d3/d3-collection/blob/v1.0.7/README.md#sets) Like ES6 Set, but with string keys and a few other differences. * [d3.set](https://github.com/d3/d3-collection/blob/v1.0.7/README.md#set) - create a new, empty set. * [*set*.has](https://github.com/d3/d3-collection/blob/v1.0.7/README.md#set_has) - returns true if the set contains the given value. * [*set*.add](https://github.com/d3/d3-collection/blob/v1.0.7/README.md#set_add) - add the given value. * [*set*.remove](https://github.com/d3/d3-collection/blob/v1.0.7/README.md#set_remove) - remove the given value. * [*set*.clear](https://github.com/d3/d3-collection/blob/v1.0.7/README.md#set_clear) - remove all values. * [*set*.values](https://github.com/d3/d3-collection/blob/v1.0.7/README.md#set_values) - get the array of values. * [*set*.each](https://github.com/d3/d3-collection/blob/v1.0.7/README.md#set_each) - call a function for each value. * [*set*.empty](https://github.com/d3/d3-collection/blob/v1.0.7/README.md#set_empty) - returns true if the set has at least one value. * [*set*.size](https://github.com/d3/d3-collection/blob/v1.0.7/README.md#set_size) - compute the number of values. ### [Nests](https://github.com/d3/d3-collection/blob/v1.0.7/README.md#nests) Group data into arbitrary hierarchies. * [d3.nest](https://github.com/d3/d3-collection/blob/v1.0.7/README.md#nest) - create a new nest generator. * [*nest*.key](https://github.com/d3/d3-collection/blob/v1.0.7/README.md#nest_key) - add a level to the nest hierarchy. * [*nest*.sortKeys](https://github.com/d3/d3-collection/blob/v1.0.7/README.md#nest_sortKeys) - sort the current nest level by key. * [*nest*.sortValues](https://github.com/d3/d3-collection/blob/v1.0.7/README.md#nest_sortValues) - sort the leaf nest level by value. * [*nest*.rollup](https://github.com/d3/d3-collection/blob/v1.0.7/README.md#nest_rollup) - specify a rollup function for leaf values. * [*nest*.map](https://github.com/d3/d3-collection/blob/v1.0.7/README.md#nest_map) - generate the nest, returning a map. * [*nest*.object](https://github.com/d3/d3-collection/blob/v1.0.7/README.md#nest_object) - generate the nest, returning an associative array. * [*nest*.entries](https://github.com/d3/d3-collection/blob/v1.0.7/README.md#nest_entries) - generate the nest, returning an array of key-values tuples. ## [Colors (d3-color)](https://github.com/d3/d3-color/tree/v1.4.1) Color manipulation and color space conversion. * [d3.color](https://github.com/d3/d3-color/blob/v1.4.1/README.md#color) - parse the given CSS color specifier. * [*color*.copy](https://github.com/d3/d3-color/blob/v1.4.1/README.md#color_copy) - return a copy of this color. * [*color*.rgb](https://github.com/d3/d3-color/blob/v1.4.1/README.md#color_rgb) - compute the RGB equivalent of this color. * [*color*.brighter](https://github.com/d3/d3-color/blob/v1.4.1/README.md#color_brighter) - create a brighter copy of this color. * [*color*.darker](https://github.com/d3/d3-color/blob/v1.4.1/README.md#color_darker) - create a darker copy of this color. * [*color*.displayable](https://github.com/d3/d3-color/blob/v1.4.1/README.md#color_displayable) - returns true if the color is displayable on standard hardware. * [*color*.formatHex](https://github.com/d3/d3-color/blob/v1.4.1/README.md#color_formatHex) - returns the hexadecimal RGB string representation of this color. * [*color*.formatHsl](https://github.com/d3/d3-color/blob/v1.4.1/README.md#color_formatHsl) - returns the RGB string representation of this color. * [*color*.formatRgb](https://github.com/d3/d3-color/blob/v1.4.1/README.md#color_formatRgb) - returns the HSL string representation of this color. * [*color*.toString](https://github.com/d3/d3-color/blob/v1.4.1/README.md#color_toString) - returns the RGB string representation of this color. * [d3.rgb](https://github.com/d3/d3-color/blob/v1.4.1/README.md#rgb) - create a new RGB color. * [d3.hsl](https://github.com/d3/d3-color/blob/v1.4.1/README.md#hsl) - create a new HSL color. * [d3.lab](https://github.com/d3/d3-color/blob/v1.4.1/README.md#lab) - create a new Lab color. * [d3.hcl](https://github.com/d3/d3-color/blob/v1.4.1/README.md#hcl) - create a new HCL color. * [d3.lch](https://github.com/d3/d3-color/blob/v1.4.1/README.md#lch) - create a new HCL color. * [d3.gray](https://github.com/d3/d3-color/blob/v1.4.1/README.md#gray) - create a new Lab gray. * [d3.cubehelix](https://github.com/d3/d3-color/blob/v1.4.1/README.md#cubehelix) - create a new Cubehelix color. ## [Color Schemes (d3-scale-chromatic)](https://github.com/d3/d3-scale-chromatic/tree/v1.5.0) Color ramps and palettes for quantitative, ordinal and categorical scales. ### Categorical * [d3.schemeCategory10](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#schemeCategory10) - * [d3.schemeAccent](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#schemeAccent) - * [d3.schemeDark2](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#schemeDark2) - * [d3.schemePaired](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#schemePaired) - * [d3.schemePastel1](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#schemePastel1) - * [d3.schemePastel2](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#schemePastel2) - * [d3.schemeSet1](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#schemeSet1) - * [d3.schemeSet2](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#schemeSet2) - * [d3.schemeSet3](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#schemeSet3) - * [d3.schemeTableau10](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#schemeTableau10) - ### Diverging * [d3.interpolateBrBG](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#interpolateBrBG) - * [d3.interpolatePiYG](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#interpolatePiYG) - * [d3.interpolatePRGn](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#interpolatePRGn) - * [d3.interpolatePuOr](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#interpolatePuOr) - * [d3.interpolateRdBu](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#interpolateRdBu) - * [d3.interpolateRdGy](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#interpolateRdGy) - * [d3.interpolateRdYlBu](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#interpolateRdYlBu) - * [d3.interpolateRdYlGn](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#interpolateRdYlGn) - * [d3.interpolateSpectral](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#interpolateSpectral) - * [d3.schemeBrBG](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#schemeBrBG) - * [d3.schemePiYG](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#schemePiYG) - * [d3.schemePRGn](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#schemePRGn) - * [d3.schemePuOr](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#schemePuOr) - * [d3.schemeRdBu](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#schemeRdBu) - * [d3.schemeRdGy](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#schemeRdGy) - * [d3.schemeRdYlBu](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#schemeRdYlBu) - * [d3.schemeRdYlGn](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#schemeRdYlGn) - * [d3.schemeSpectral](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#schemeSpectral) - ### Sequential (Single Hue) * [d3.interpolateBlues](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#interpolateBlues) - * [d3.interpolateGreens](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#interpolateGreens) - * [d3.interpolateGreys](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#interpolateGreys) - * [d3.interpolateOranges](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#interpolateOranges) - * [d3.interpolatePurples](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#interpolatePurples) - * [d3.interpolateReds](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#interpolateReds) - * [d3.schemeBlues](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#schemeBlues) - * [d3.schemeGreens](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#schemeGreens) - * [d3.schemeGreys](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#schemeGreys) - * [d3.schemeOranges](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#schemeOranges) - * [d3.schemePurples](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#schemePurples) - * [d3.schemeReds](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#schemeReds) - ### Sequential (Multi-Hue) * [d3.interpolateBuGn](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#interpolateBuGn) - * [d3.interpolateBuPu](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#interpolateBuPu) - * [d3.interpolateCividis](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#interpolateCividis) - * [d3.interpolateCool](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#interpolateCool) - * [d3.interpolateCubehelixDefault](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#interpolateCubehelixDefault) - * [d3.interpolateGnBu](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#interpolateGnBu) - * [d3.interpolateInferno](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#interpolateInferno) - * [d3.interpolateMagma](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#interpolateMagma) - * [d3.interpolateOrRd](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#interpolateOrRd) - * [d3.interpolatePlasma](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#interpolatePlasma) - * [d3.interpolatePuBu](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#interpolatePuBu) - * [d3.interpolatePuBuGn](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#interpolatePuBuGn) - * [d3.interpolatePuRd](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#interpolatePuRd) - * [d3.interpolateRdPu](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#interpolateRdPu) - * [d3.interpolateTurbo](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#interpolateTurbo) - * [d3.interpolateViridis](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#interpolateViridis) - * [d3.interpolateWarm](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#interpolateWarm) - * [d3.interpolateYlGn](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#interpolateYlGn) - * [d3.interpolateYlGnBu](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#interpolateYlGnBu) - * [d3.interpolateYlOrBr](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#interpolateYlOrBr) - * [d3.interpolateYlOrRd](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#interpolateYlOrRd) - * [d3.schemeBuGn](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#schemeBuGn) - * [d3.schemeBuPu](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#schemeBuPu) - * [d3.schemeGnBu](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#schemeGnBu) - * [d3.schemeOrRd](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#schemeOrRd) - * [d3.schemePuBu](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#schemePuBu) - * [d3.schemePuBuGn](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#schemePuBuGn) - * [d3.schemePuRd](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#schemePuRd) - * [d3.schemeRdPu](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#schemeRdPu) - * [d3.schemeYlGn](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#schemeYlGn) - * [d3.schemeYlGnBu](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#schemeYlGnBu) - * [d3.schemeYlOrBr](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#schemeYlOrBr) - * [d3.schemeYlOrRd](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#schemeYlOrRd) - ### Cyclical * [d3.interpolateRainbow](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#interpolateRainbow) - the “less-angry” rainbow * [d3.interpolateSinebow](https://github.com/d3/d3-scale-chromatic/blob/v1.5.0/README.md#interpolateSinebow) - the “sinebow” smooth rainbow ## [Contours (d3-contour)](https://github.com/d3/d3-contour/tree/v1.3.2) Compute contour polygons using marching squares. * [d3.contours](https://github.com/d3/d3-contour/blob/v1.3.2/README.md#contours) - create a new contour generator. * [contours](https://github.com/d3/d3-contour/blob/v1.3.2/README.md#_contours) - compute the contours for a given grid of values. * [contours.contour](https://github.com/d3/d3-contour/blob/v1.3.2/README.md#contours_contour) - * [contours.size](https://github.com/d3/d3-contour/blob/v1.3.2/README.md#contours_size) - * [contours.smooth](https://github.com/d3/d3-contour/blob/v1.3.2/README.md#contours_smooth) - * [contours.thresholds](https://github.com/d3/d3-contour/blob/v1.3.2/README.md#contours_thresholds) - * [d3.contourDensity](https://github.com/d3/d3-contour/blob/v1.3.2/README.md#contourDensity) - create a new density estimator. * [density](https://github.com/d3/d3-contour/blob/v1.3.2/README.md#_density) - estimate the density of a given array of samples. * [density.x](https://github.com/d3/d3-contour/blob/v1.3.2/README.md#density_x) - * [density.y](https://github.com/d3/d3-contour/blob/v1.3.2/README.md#density_y) - * [density.size](https://github.com/d3/d3-contour#density_size) - * [density.cellSize](https://github.com/d3/d3-contour/blob/v1.3.2/README.md#density_cellSize) - * [density.thresholds](https://github.com/d3/d3-contour/blob/v1.3.2/README.md#density_thresholds) - * [density.bandwidth](https://github.com/d3/d3-contour/blob/v1.3.2/README.md#density_bandwidth) - * [density.weight](https://github.com/d3/d3-contour/blob/v1.3.2/README.md#density_weight) - ## [Dispatches (d3-dispatch)](https://github.com/d3/d3-dispatch/tree/v1.0.6) Separate concerns using named callbacks. * [d3.dispatch](https://github.com/d3/d3-dispatch/blob/v1.0.6/README.md#dispatch) - create a custom event dispatcher. * [*dispatch*.on](https://github.com/d3/d3-dispatch/blob/v1.0.6/README.md#dispatch_on) - register or unregister an event listener. * [*dispatch*.copy](https://github.com/d3/d3-dispatch/blob/v1.0.6/README.md#dispatch_copy) - create a copy of a dispatcher. * [*dispatch*.*call*](https://github.com/d3/d3-dispatch/blob/v1.0.6/README.md#dispatch_call) - dispatch an event to registered listeners. * [*dispatch*.*apply*](https://github.com/d3/d3-dispatch/blob/v1.0.6/README.md#dispatch_apply) - dispatch an event to registered listeners. ## [Dragging (d3-drag)](https://github.com/d3/d3-drag/tree/v1.2.5) Drag and drop SVG, HTML or Canvas using mouse or touch input. * [d3.drag](https://github.com/d3/d3-drag/blob/v1.2.5/README.md#drag) - create a drag behavior. * [*drag*](https://github.com/d3/d3-drag/blob/v1.2.5/README.md#_drag) - apply the drag behavior to a selection. * [*drag*.container](https://github.com/d3/d3-drag/blob/v1.2.5/README.md#drag_container) - set the coordinate system. * [*drag*.filter](https://github.com/d3/d3-drag/blob/v1.2.5/README.md#drag_filter) - ignore some initiating input events. * [*drag*.touchable](https://github.com/d3/d3-drag/blob/v1.2.5/README.md#drag_touchable) - set the touch support detector. * [*drag*.subject](https://github.com/d3/d3-drag/blob/v1.2.5/README.md#drag_subject) - set the thing being dragged. * [*drag*.clickDistance](https://github.com/d3/d3-drag/blob/v1.2.5/README.md#drag_clickDistance) - set the click distance threshold. * [*drag*.on](https://github.com/d3/d3-drag/blob/v1.2.5/README.md#drag_on) - listen for drag events. * [*event*.on](https://github.com/d3/d3-drag/blob/v1.2.5/README.md#event_on) - listen for drag events on the current gesture. * [d3.dragDisable](https://github.com/d3/d3-drag/blob/v1.2.5/README.md#dragDisable) - prevent native drag-and-drop and text selection. * [d3.dragEnable](https://github.com/d3/d3-drag/blob/v1.2.5/README.md#dragEnable) - enable native drag-and-drop and text selection. ## [Delimiter-Separated Values (d3-dsv)](https://github.com/d3/d3-dsv/tree/v1.2.0) Parse and format delimiter-separated values, most commonly CSV and TSV. * [d3.dsvFormat](https://github.com/d3/d3-dsv/blob/v1.2.0/README.md#dsvFormat) - create a new parser and formatter for the given delimiter. * [*dsv*.parse](https://github.com/d3/d3-dsv/blob/v1.2.0/README.md#dsv_parse) - parse the given string, returning an array of objects. * [*dsv*.parseRows](https://github.com/d3/d3-dsv/blob/v1.2.0/README.md#dsv_parseRows) - parse the given string, returning an array of rows. * [*dsv*.format](https://github.com/d3/d3-dsv/blob/v1.2.0/README.md#dsv_format) - format the given array of objects. * [*dsv*.formatBody](https://github.com/d3/d3-dsv/blob/v1.2.0/README.md#dsv_formatBody) - format the given array of objects. * [*dsv*.formatRows](https://github.com/d3/d3-dsv/blob/v1.2.0/README.md#dsv_formatRows) - format the given array of rows. * [*dsv*.formatRow](https://github.com/d3/d3-dsv/blob/v1.2.0/README.md#dsv_formatRow) - format the given row. * [*dsv*.formatValue](https://github.com/d3/d3-dsv/blob/v1.2.0/README.md#dsv_formatValue) - format the given value. * [d3.autoType](https://github.com/d3/d3-dsv/blob/v1.2.0/README.md#autoType) - automatically infer value types for the given object. * [d3.csvParse](https://github.com/d3/d3-dsv/blob/v1.2.0/README.md#csvParse) - parse the given CSV string, returning an array of objects. * [d3.csvParseRows](https://github.com/d3/d3-dsv/blob/v1.2.0/README.md#csvParseRows) - parse the given CSV string, returning an array of rows. * [d3.csvFormat](https://github.com/d3/d3-dsv/blob/v1.2.0/README.md#csvFormat) - format the given array of objects as CSV. * [d3.csvFormatBody](https://github.com/d3/d3-dsv/blob/v1.2.0/README.md#csvFormatBody) - format the given array of objects as CSV. * [d3.csvFormatRows](https://github.com/d3/d3-dsv/blob/v1.2.0/README.md#csvFormatRows) - format the given array of rows as CSV. * [d3.csvFormatRow](https://github.com/d3/d3-dsv/blob/v1.2.0/README.md#csvFormatRow) - format the given row as CSV. * [d3.csvFormatValue](https://github.com/d3/d3-dsv/blob/v1.2.0/README.md#csvFormatValue) - format the given value as CSV. * [d3.tsvParse](https://github.com/d3/d3-dsv/blob/v1.2.0/README.md#tsvParse) - parse the given TSV string, returning an array of objects. * [d3.tsvParseRows](https://github.com/d3/d3-dsv/blob/v1.2.0/README.md#tsvParseRows) - parse the given TSV string, returning an array of rows. * [d3.tsvFormat](https://github.com/d3/d3-dsv/blob/v1.2.0/README.md#tsvFormat) - format the given array of objects as TSV. * [d3.tsvFormatBody](https://github.com/d3/d3-dsv/blob/v1.2.0/README.md#tsvFormatBody) - format the given array of objects as TSV. * [d3.tsvFormatRows](https://github.com/d3/d3-dsv/blob/v1.2.0/README.md#tsvFormatRows) - format the given array of rows as TSV. * [d3.tsvFormatRow](https://github.com/d3/d3-dsv/blob/v1.2.0/README.md#tsvFormatRow) - format the given row as TSV. * [d3.tsvFormatValue](https://github.com/d3/d3-dsv/blob/v1.2.0/README.md#tsvFormatValue) - format the given value as TSV. ## [Easings (d3-ease)](https://github.com/d3/d3-ease/tree/v1.0.6) Easing functions for smooth animation. * [*ease*](https://github.com/d3/d3-ease/blob/v1.0.6/README.md#_ease) - ease the given normalized time. * [d3.easeLinear](https://github.com/d3/d3-ease/blob/v1.0.6/README.md#easeLinear) - linear easing; the identity function. * [d3.easePolyIn](https://github.com/d3/d3-ease/blob/v1.0.6/README.md#easePolyIn) - polynomial easing; raises time to the given power. * [d3.easePolyOut](https://github.com/d3/d3-ease/blob/v1.0.6/README.md#easePolyOut) - reverse polynomial easing. * [d3.easePolyInOut](https://github.com/d3/d3-ease/blob/v1.0.6/README.md#easePolyInOut) - symmetric polynomial easing. * [*poly*.exponent](https://github.com/d3/d3-ease/blob/v1.0.6/README.md#poly_exponent) - specify the polynomial exponent. * [d3.easeQuad](https://github.com/d3/d3-ease/blob/v1.0.6/README.md#easeQuad) - an alias for easeQuadInOut. * [d3.easeQuadIn](https://github.com/d3/d3-ease/blob/v1.0.6/README.md#easeQuadIn) - quadratic easing; squares time. * [d3.easeQuadOut](https://github.com/d3/d3-ease/blob/v1.0.6/README.md#easeQuadOut) - reverse quadratic easing. * [d3.easeQuadInOut](https://github.com/d3/d3-ease/blob/v1.0.6/README.md#easeQuadInOut) - symmetric quadratic easing. * [d3.easeCubic](https://github.com/d3/d3-ease/blob/v1.0.6/README.md#easeCubic) - an alias for easeCubicInOut. * [d3.easeCubicIn](https://github.com/d3/d3-ease/blob/v1.0.6/README.md#easeCubicIn) - cubic easing; cubes time. * [d3.easeCubicOut](https://github.com/d3/d3-ease/blob/v1.0.6/README.md#easeCubicOut) - reverse cubic easing. * [d3.easeCubicInOut](https://github.com/d3/d3-ease/blob/v1.0.6/README.md#easeCubicInOut) - symmetric cubic easing. * [d3.easeSin](https://github.com/d3/d3-ease/blob/v1.0.6/README.md#easeSin) - an alias for easeSinInOut. * [d3.easeSinIn](https://github.com/d3/d3-ease/blob/v1.0.6/README.md#easeSinIn) - sinusoidal easing. * [d3.easeSinOut](https://github.com/d3/d3-ease/blob/v1.0.6/README.md#easeSinOut) - reverse sinusoidal easing. * [d3.easeSinInOut](https://github.com/d3/d3-ease/blob/v1.0.6/README.md#easeSinInOut) - symmetric sinusoidal easing. * [d3.easeExp](https://github.com/d3/d3-ease/blob/v1.0.6/README.md#easeExp) - an alias for easeExpInOut. * [d3.easeExpIn](https://github.com/d3/d3-ease/blob/v1.0.6/README.md#easeExpIn) - exponential easing. * [d3.easeExpOut](https://github.com/d3/d3-ease/blob/v1.0.6/README.md#easeExpOut) - reverse exponential easing. * [d3.easeExpInOut](https://github.com/d3/d3-ease/blob/v1.0.6/README.md#easeExpInOut) - symmetric exponential easing. * [d3.easeCircle](https://github.com/d3/d3-ease/blob/v1.0.6/README.md#easeCircle) - an alias for easeCircleInOut. * [d3.easeCircleIn](https://github.com/d3/d3-ease/blob/v1.0.6/README.md#easeCircleIn) - circular easing. * [d3.easeCircleOut](https://github.com/d3/d3-ease/blob/v1.0.6/README.md#easeCircleOut) - reverse circular easing. * [d3.easeCircleInOut](https://github.com/d3/d3-ease/blob/v1.0.6/README.md#easeCircleInOut) - symmetric circular easing. * [d3.easeElastic](https://github.com/d3/d3-ease/blob/v1.0.6/README.md#easeElastic) - an alias for easeElasticOut. * [d3.easeElasticIn](https://github.com/d3/d3-ease/blob/v1.0.6/README.md#easeElasticIn) - elastic easing, like a rubber band. * [d3.easeElasticOut](https://github.com/d3/d3-ease/blob/v1.0.6/README.md#easeElasticOut) - reverse elastic easing. * [d3.easeElasticInOut](https://github.com/d3/d3-ease/blob/v1.0.6/README.md#easeElasticInOut) - symmetric elastic easing. * [*elastic*.amplitude](https://github.com/d3/d3-ease/blob/v1.0.6/README.md#elastic_amplitude) - specify the elastic amplitude. * [*elastic*.period](https://github.com/d3/d3-ease/blob/v1.0.6/README.md#elastic_period) - specify the elastic period. * [d3.easeBack](https://github.com/d3/d3-ease/blob/v1.0.6/README.md#easeBack) - an alias for easeBackInOut. * [d3.easeBackIn](https://github.com/d3/d3-ease/blob/v1.0.6/README.md#easeBackIn) - anticipatory easing, like a dancer bending his knees before jumping. * [d3.easeBackOut](https://github.com/d3/d3-ease/blob/v1.0.6/README.md#easeBackOut) - reverse anticipatory easing. * [d3.easeBackInOut](https://github.com/d3/d3-ease/blob/v1.0.6/README.md#easeBackInOut) - symmetric anticipatory easing. * [*back*.overshoot](https://github.com/d3/d3-ease/blob/v1.0.6/README.md#back_overshoot) - specify the amount of overshoot. * [d3.easeBounce](https://github.com/d3/d3-ease/blob/v1.0.6/README.md#easeBounce) - an alias for easeBounceOut. * [d3.easeBounceIn](https://github.com/d3/d3-ease/blob/v1.0.6/README.md#easeBounceIn) - bounce easing, like a rubber ball. * [d3.easeBounceOut](https://github.com/d3/d3-ease/blob/v1.0.6/README.md#easeBounceOut) - reverse bounce easing. * [d3.easeBounceInOut](https://github.com/d3/d3-ease/blob/v1.0.6/README.md#easeBounceInOut) - symmetric bounce easing. ## [Fetches (d3-fetch)](https://github.com/d3/d3-fetch/tree/v1.1.2) Convenience methods on top of the Fetch API. * [d3.blob](https://github.com/d3/d3-fetch/blob/v1.1.2/README.md#blob) - get a file as a blob. * [d3.buffer](https://github.com/d3/d3-fetch/blob/v1.1.2/README.md#buffer) - get a file as an array buffer. * [d3.csv](https://github.com/d3/d3-fetch/blob/v1.1.2/README.md#csv) - get a comma-separated values (CSV) file. * [d3.dsv](https://github.com/d3/d3-fetch/blob/v1.1.2/README.md#dsv) - get a delimiter-separated values (CSV) file. * [d3.image](https://github.com/d3/d3-fetch/blob/v1.1.2/README.md#image) - get an image. * [d3.json](https://github.com/d3/d3-fetch/blob/v1.1.2/README.md#json) - get a JSON file. * [d3.text](https://github.com/d3/d3-fetch/blob/v1.1.2/README.md#text) - get a plain text file. * [d3.tsv](https://github.com/d3/d3-fetch/blob/v1.1.2/README.md#tsv) - get a tab-separated values (TSV) file. ## [Forces (d3-force)](https://github.com/d3/d3-force/tree/v1.2.1) Force-directed graph layout using velocity Verlet integration. * [d3.forceSimulation](https://github.com/d3/d3-force/blob/v1.2.1/README.md#forceSimulation) - create a new force simulation. * [*simulation*.restart](https://github.com/d3/d3-force/blob/v1.2.1/README.md#simulation_restart) - reheat and restart the simulation’s timer. * [*simulation*.stop](https://github.com/d3/d3-force/blob/v1.2.1/README.md#simulation_stop) - stop the simulation’s timer. * [*simulation*.tick](https://github.com/d3/d3-force/blob/v1.2.1/README.md#simulation_tick) - advance the simulation one step. * [*simulation*.nodes](https://github.com/d3/d3-force/blob/v1.2.1/README.md#simulation_nodes) - set the simulation’s nodes. * [*simulation*.alpha](https://github.com/d3/d3-force/blob/v1.2.1/README.md#simulation_alpha) - set the current alpha. * [*simulation*.alphaMin](https://github.com/d3/d3-force/blob/v1.2.1/README.md#simulation_alphaMin) - set the minimum alpha threshold. * [*simulation*.alphaDecay](https://github.com/d3/d3-force/blob/v1.2.1/README.md#simulation_alphaDecay) - set the alpha exponential decay rate. * [*simulation*.alphaTarget](https://github.com/d3/d3-force/blob/v1.2.1/README.md#simulation_alphaTarget) - set the target alpha. * [*simulation*.velocityDecay](https://github.com/d3/d3-force/blob/v1.2.1/README.md#simulation_velocityDecay) - set the velocity decay rate. * [*simulation*.force](https://github.com/d3/d3-force/blob/v1.2.1/README.md#simulation_force) - add or remove a force. * [*simulation*.find](https://github.com/d3/d3-force/blob/v1.2.1/README.md#simulation_find) - find the closest node to the given position. * [*simulation*.on](https://github.com/d3/d3-force/blob/v1.2.1/README.md#simulation_on) - add or remove an event listener. * [*force*](https://github.com/d3/d3-force/blob/v1.2.1/README.md#_force) - apply the force. * [*force*.initialize](https://github.com/d3/d3-force/blob/v1.2.1/README.md#force_initialize) - initialize the force with the given nodes. * [d3.forceCenter](https://github.com/d3/d3-force/blob/v1.2.1/README.md#forceCenter) - create a centering force. * [*center*.x](https://github.com/d3/d3-force/blob/v1.2.1/README.md#center_x) - set the center *x*-coordinate. * [*center*.y](https://github.com/d3/d3-force/blob/v1.2.1/README.md#center_y) - set the center *y*-coordinate. * [d3.forceCollide](https://github.com/d3/d3-force/blob/v1.2.1/README.md#forceCollide) - create a circle collision force. * [*collide*.radius](https://github.com/d3/d3-force/blob/v1.2.1/README.md#collide_radius) - set the circle radius. * [*collide*.strength](https://github.com/d3/d3-force/blob/v1.2.1/README.md#collide_strength) - set the collision resolution strength. * [*collide*.iterations](https://github.com/d3/d3-force/blob/v1.2.1/README.md#collide_iterations) - set the number of iterations. * [d3.forceLink](https://github.com/d3/d3-force/blob/v1.2.1/README.md#forceLink) - create a link force. * [*link*.links](https://github.com/d3/d3-force/blob/v1.2.1/README.md#link_links) - set the array of links. * [*link*.id](https://github.com/d3/d3-force/blob/v1.2.1/README.md#link_id) - link nodes by numeric index or string identifier. * [*link*.distance](https://github.com/d3/d3-force/blob/v1.2.1/README.md#link_distance) - set the link distance. * [*link*.strength](https://github.com/d3/d3-force/blob/v1.2.1/README.md#link_strength) - set the link strength. * [*link*.iterations](https://github.com/d3/d3-force/blob/v1.2.1/README.md#link_iterations) - set the number of iterations. * [d3.forceManyBody](https://github.com/d3/d3-force/blob/v1.2.1/README.md#forceManyBody) - create a many-body force. * [*manyBody*.strength](https://github.com/d3/d3-force/blob/v1.2.1/README.md#manyBody_strength) - set the force strength. * [*manyBody*.theta](https://github.com/d3/d3-force/blob/v1.2.1/README.md#manyBody_theta) - set the Barnes–Hut approximation accuracy. * [*manyBody*.distanceMin](https://github.com/d3/d3-force/blob/v1.2.1/README.md#manyBody_distanceMin) - limit the force when nodes are close. * [*manyBody*.distanceMax](https://github.com/d3/d3-force/blob/v1.2.1/README.md#manyBody_distanceMax) - limit the force when nodes are far. * [d3.forceX](https://github.com/d3/d3-force/blob/v1.2.1/README.md#forceX) - create an *x*-positioning force. * [*x*.strength](https://github.com/d3/d3-force/blob/v1.2.1/README.md#x_strength) - set the force strength. * [*x*.x](https://github.com/d3/d3-force/blob/v1.2.1/README.md#x_x) - set the target *x*-coordinate. * [d3.forceY](https://github.com/d3/d3-force/blob/v1.2.1/README.md#forceY) - create an *y*-positioning force. * [*y*.strength](https://github.com/d3/d3-force/blob/v1.2.1/README.md#y_strength) - set the force strength. * [*y*.y](https://github.com/d3/d3-force/blob/v1.2.1/README.md#y_y) - set the target *y*-coordinate. * [d3.forceRadial](https://github.com/d3/d3-force/blob/v1.2.1/README.md#forceRadial) - create a radial positioning force. * [*radial*.strength](https://github.com/d3/d3-force/blob/v1.2.1/README.md#radial_strength) - set the force strength. * [*radial*.radius](https://github.com/d3/d3-force/blob/v1.2.1/README.md#radial_radius) - set the target radius. * [*radial*.x](https://github.com/d3/d3-force/blob/v1.2.1/README.md#radial_x) - set the target center *x*-coordinate. * [*radial*.y](https://github.com/d3/d3-force/blob/v1.2.1/README.md#radial_y) - set the target center *y*-coordinate. ## [Number Formats (d3-format)](https://github.com/d3/d3-format/tree/v1.4.4) Format numbers for human consumption. * [d3.format](https://github.com/d3/d3-format/blob/v1.4.4/README.md#format) - alias for *locale*.format on the default locale. * [d3.formatPrefix](https://github.com/d3/d3-format/blob/v1.4.4/README.md#formatPrefix) - alias for *locale*.formatPrefix on the default locale. * [d3.formatSpecifier](https://github.com/d3/d3-format/blob/v1.4.4/README.md#formatSpecifier) - parse a number format specifier. * [d3.formatLocale](https://github.com/d3/d3-format/blob/v1.4.4/README.md#formatLocale) - define a custom locale. * [d3.formatDefaultLocale](https://github.com/d3/d3-format/blob/v1.4.4/README.md#formatDefaultLocale) - define the default locale. * [*locale*.format](https://github.com/d3/d3-format/blob/v1.4.4/README.md#locale_format) - create a number format. * [*locale*.formatPrefix](https://github.com/d3/d3-format/blob/v1.4.4/README.md#locale_formatPrefix) - create a SI-prefix number format. * [d3.precisionFixed](https://github.com/d3/d3-format/blob/v1.4.4/README.md#precisionFixed) - compute decimal precision for fixed-point notation. * [d3.precisionPrefix](https://github.com/d3/d3-format/blob/v1.4.4/README.md#precisionPrefix) - compute decimal precision for SI-prefix notation. * [d3.precisionRound](https://github.com/d3/d3-format/blob/v1.4.4/README.md#precisionRound) - compute significant digits for rounded notation. ## [Geographies (d3-geo)](https://github.com/d3/d3-geo/tree/v1.12.0) Geographic projections, shapes and math. ### [Paths](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#paths) * [d3.geoPath](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#geoPath) - create a new geographic path generator. * [*path*](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#_path) - project and render the specified feature. * [*path*.area](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#path_area) - compute the projected planar area of a given feature. * [*path*.bounds](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#path_bounds) - compute the projected planar bounding box of a given feature. * [*path*.centroid](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#path_centroid) - compute the projected planar centroid of a given feature. * [*path*.measure](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#path_measure) - compute the projected planar length of a given feature. * [*path*.projection](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#path_projection) - set the geographic projection. * [*path*.context](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#path_context) - set the render context. * [*path*.pointRadius](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#path_pointRadius) - set the radius to display point features. ### [Projections](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#projections) * [*projection*](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#_projection) - project the specified point from the sphere to the plane. * [*projection*.invert](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#projection_invert) - unproject the specified point from the plane to the sphere. * [*projection*.stream](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#projection_stream) - wrap the specified stream to project geometry. * [*projection*.clipAngle](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#projection_clipAngle) - set the radius of the clip circle. * [*projection*.clipExtent](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#projection_clipExtent) - set the viewport clip extent, in pixels. * [*projection*.angle](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#projection_angle) - set the post-projection rotation. * [*projection*.reflectX](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#projection_reflectX) - reflect the *x*-dimension. * [*projection*.reflectY](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#projection_reflectY) - reflect the *y*-dimension. * [*projection*.scale](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#projection_scale) - set the scale factor. * [*projection*.translate](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#projection_translate) - set the translation offset. * [*projection*.fitExtent](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#projection_fitExtent) - set the scale and translate to fit a GeoJSON object. * [*projection*.fitSize](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#projection_fitSize) - set the scale and translate to fit a GeoJSON object. * [*projection*.fitWidth](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#projection_fitWidth) - set the scale and translate to fit a GeoJSON object. * [*projection*.fitHeight](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#projection_fitHeight) - set the scale and translate to fit a GeoJSON object. * [*projection*.center](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#projection_center) - set the center point. * [*projection*.rotate](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#projection_rotate) - set the three-axis spherical rotation angles. * [*projection*.precision](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#projection_precision) - set the precision threshold for adaptive sampling. * [*projection*.preclip](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#projection.preclip) - set the spherical clipping stream transform. * [*projection*.postclip](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#projection.postclip) - set the planar clipping stream transform. * [d3.geoClipAntimeridian](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#geoClipAntimeridian) - cuts spherical geometries that cross the antimeridian. * [d3.geoClipCircle](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#geoClipCircle) - clips spherical geometries to a small circle. * [d3.geoClipRectangle](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#geoClipRectangle) - clips planar geometries to a rectangular viewport. * [d3.geoAlbers](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#geoAlbers) - the Albers equal-area conic projection. * [d3.geoAlbersUsa](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#geoAlbersUsa) - a composite Albers projection for the United States. * [d3.geoAzimuthalEqualArea](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#geoAzimuthalEqualArea) - the azimuthal equal-area projection. * [d3.geoAzimuthalEquidistant](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#geoAzimuthalEquidistant) - the azimuthal equidistant projection. * [d3.geoConicConformal](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#geoConicConformal) - the conic conformal projection. * [d3.geoConicEqualArea](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#geoConicEqualArea) - the conic equal-area (Albers) projection. * [d3.geoConicEquidistant](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#geoConicEquidistant) - the conic equidistant projection. * [*conic*.parallels](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#conic_parallels) - set the two standard parallels. * [d3.geoEqualEarth](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#geoEqualEarth) - the Equal Earth projection. * [d3.geoEquirectangular](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#geoEquirectangular) - the equirectangular (plate carreé) projection. * [d3.geoGnomonic](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#geoGnomonic) - the gnomonic projection. * [d3.geoMercator](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#geoMercator) - the spherical Mercator projection. * [d3.geoOrthographic](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#geoOrthographic) - the azimuthal orthographic projection. * [d3.geoStereographic](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#geoStereographic) - the azimuthal stereographic projection. * [d3.geoTransverseMercator](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#geoTransverseMercator) - the transverse spherical Mercator projection. * [*project*](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#_project) - project the specified point from the sphere to the plane. * [*project*.invert](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#project_invert) - unproject the specified point from the plane to the sphere. * [d3.geoProjection](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#geoProjection) - create a custom projection. * [d3.geoProjectionMutator](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#geoProjectionMutator) - create a custom configurable projection. * [d3.geoAzimuthalEqualAreaRaw](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#geoAzimuthalEqualAreaRaw) - the raw azimuthal equal-area projection. * [d3.geoAzimuthalEquidistantRaw](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#geoAzimuthalEquidistantRaw) - the raw azimuthal equidistant projection. * [d3.geoConicConformalRaw](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#geoConicConformalRaw) - the raw conic conformal projection. * [d3.geoConicEqualAreaRaw](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#geoConicEqualAreaRaw) - the raw conic equal-area (Albers) projection. * [d3.geoConicEquidistantRaw](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#geoConicEquidistantRaw) - the raw conic equidistant projection. * [d3.geoEquirectangularRaw](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#geoEquirectangularRaw) - the raw equirectangular (plate carreé) projection. * [d3.geoGnomonicRaw](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#geoGnomonicRaw) - the raw gnomonic projection. * [d3.geoMercatorRaw](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#geoMercatorRaw) - the raw Mercator projection. * [d3.geoOrthographicRaw](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#geoOrthographicRaw) - the raw azimuthal orthographic projection. * [d3.geoStereographicRaw](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#geoStereographicRaw) - the raw azimuthal stereographic projection. * [d3.geoTransverseMercatorRaw](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#geoTransverseMercatorRaw) - the raw transverse spherical Mercator projection. ### [Spherical Math](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#spherical-math) * [d3.geoArea](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#geoArea) - compute the spherical area of a given feature. * [d3.geoBounds](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#geoBounds) - compute the latitude-longitude bounding box for a given feature. * [d3.geoCentroid](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#geoCentroid) - compute the spherical centroid of a given feature. * [d3.geoContains](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#geoContains) - test whether a point is inside a given feature. * [d3.geoDistance](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#geoDistance) - compute the great-arc distance between two points. * [d3.geoLength](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#geoLength) - compute the length of a line string or the perimeter of a polygon. * [d3.geoInterpolate](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#geoInterpolate) - interpolate between two points along a great arc. * [d3.geoRotation](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#geoRotation) - create a rotation function for the specified angles. * [*rotation*](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#_rotation) - rotate the given point around the sphere. * [*rotation*.invert](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#rotation_invert) - unrotate the given point around the sphere. ### [Spherical Shapes](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#spherical-shapes) * [d3.geoCircle](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#geoCircle) - create a circle generator. * [*circle*](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#_circle) - generate a piecewise circle as a Polygon. * [*circle*.center](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#circle_center) - specify the circle center in latitude and longitude. * [*circle*.radius](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#circle_radius) - specify the angular radius in degrees. * [*circle*.precision](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#circle_precision) - specify the precision of the piecewise circle. * [d3.geoGraticule](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#geoGraticule) - create a graticule generator. * [*graticule*](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#_graticule) - generate a MultiLineString of meridians and parallels. * [*graticule*.lines](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#graticule_lines) - generate an array of LineStrings of meridians and parallels. * [*graticule*.outline](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#graticule_outline) - generate a Polygon of the graticule’s extent. * [*graticule*.extent](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#graticule_extent) - get or set the major & minor extents. * [*graticule*.extentMajor](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#graticule_extentMajor) - get or set the major extent. * [*graticule*.extentMinor](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#graticule_extentMinor) - get or set the minor extent. * [*graticule*.step](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#graticule_step) - get or set the major & minor step intervals. * [*graticule*.stepMajor](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#graticule_stepMajor) - get or set the major step intervals. * [*graticule*.stepMinor](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#graticule_stepMinor) - get or set the minor step intervals. * [*graticule*.precision](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#graticule_precision) - get or set the latitudinal precision. * [d3.geoGraticule10](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#geoGraticule10) - generate the default 10° global graticule. ### [Streams](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#streams) * [d3.geoStream](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#geoStream) - convert a GeoJSON object to a geometry stream. * [*stream*.point](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#stream_point) - indicates a point with the specified coordinates. * [*stream*.lineStart](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#stream_lineStart) - indicates the start of a line or ring. * [*stream*.lineEnd](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#stream_lineEnd) - indicates the end of a line or ring. * [*stream*.polygonStart](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#stream_polygonStart) - indicates the start of a polygon. * [*stream*.polygonEnd](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#stream_polygonEnd) - indicates the end of a polygon. * [*stream*.sphere](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#stream_sphere) - indicates the sphere. ### [Transforms](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#transforms) * [d3.geoIdentity](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#geoIdentity) - scale, translate or clip planar geometry. * [d3.geoTransform](https://github.com/d3/d3-geo/blob/v1.12.0/README.md#geoTransform) - define a custom geometry transform. ## [Hierarchies (d3-hierarchy)](https://github.com/d3/d3-hierarchy/tree/v1.1.9) Layout algorithms for visualizing hierarchical data. * [d3.hierarchy](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#hierarchy) - constructs a root node from hierarchical data. * [*node*.ancestors](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#node_ancestors) - generate an array of ancestors. * [*node*.descendants](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#node_descendants) - generate an array of descendants. * [*node*.leaves](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#node_leaves) - generate an array of leaves. * [*node*.path](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#node_path) - generate the shortest path to another node. * [*node*.links](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#node_links) - generate an array of links. * [*node*.sum](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#node_sum) - evaluate and aggregate quantitative values. * [*node*.sort](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#node_sort) - sort all descendant siblings. * [*node*.count](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#node_count) - count the number of leaves. * [*node*.each](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#node_each) - breadth-first traversal. * [*node*.eachAfter](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#node_eachAfter) - post-order traversal. * [*node*.eachBefore](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#node_eachBefore) - pre-order traversal. * [*node*.copy](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#node_copy) - copy a hierarchy. * [d3.stratify](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#stratify) - create a new stratify operator. * [*stratify*](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#_stratify) - construct a root node from tabular data. * [*stratify*.id](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#stratify_id) - set the node id accessor. * [*stratify*.parentId](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#stratify_parentId) - set the parent node id accessor. * [d3.cluster](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#cluster) - create a new cluster (dendrogram) layout. * [*cluster*](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#_cluster) - layout the specified hierarchy in a dendrogram. * [*cluster*.size](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#cluster_size) - set the layout size. * [*cluster*.nodeSize](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#cluster_nodeSize) - set the node size. * [*cluster*.separation](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#cluster_separation) - set the separation between leaves. * [d3.tree](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#tree) - create a new tidy tree layout. * [*tree*](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#_tree) - layout the specified hierarchy in a tidy tree. * [*tree*.size](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#tree_size) - set the layout size. * [*tree*.nodeSize](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#tree_nodeSize) - set the node size. * [*tree*.separation](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#tree_separation) - set the separation between nodes. * [d3.treemap](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#treemap) - create a new treemap layout. * [*treemap*](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#_treemap) - layout the specified hierarchy as a treemap. * [*treemap*.tile](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#treemap_tile) - set the tiling method. * [*treemap*.size](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#treemap_size) - set the layout size. * [*treemap*.round](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#treemap_round) - set whether the output coordinates are rounded. * [*treemap*.padding](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#treemap_padding) - set the padding. * [*treemap*.paddingInner](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#treemap_paddingInner) - set the padding between siblings. * [*treemap*.paddingOuter](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#treemap_paddingOuter) - set the padding between parent and children. * [*treemap*.paddingTop](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#treemap_paddingTop) - set the padding between the parent’s top edge and children. * [*treemap*.paddingRight](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#treemap_paddingRight) - set the padding between the parent’s right edge and children. * [*treemap*.paddingBottom](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#treemap_paddingBottom) - set the padding between the parent’s bottom edge and children. * [*treemap*.paddingLeft](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#treemap_paddingLeft) - set the padding between the parent’s left edge and children. * [d3.treemapBinary](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#treemapBinary) - tile using a balanced binary tree. * [d3.treemapDice](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#treemapDice) - tile into a horizontal row. * [d3.treemapSlice](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#treemapSlice) - tile into a vertical column. * [d3.treemapSliceDice](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#treemapSliceDice) - alternate between slicing and dicing. * [d3.treemapSquarify](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#treemapSquarify) - tile using squarified rows per Bruls *et. al.* * [d3.treemapResquarify](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#treemapResquarify) - like d3.treemapSquarify, but performs stable updates. * [*squarify*.ratio](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#squarify_ratio) - set the desired rectangle aspect ratio. * [d3.partition](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#partition) - create a new partition (icicle or sunburst) layout. * [*partition*](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#_partition) - layout the specified hierarchy as a partition diagram. * [*partition*.size](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#partition_size) - set the layout size. * [*partition*.round](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#partition_round) - set whether the output coordinates are rounded. * [*partition*.padding](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#partition_padding) - set the padding. * [d3.pack](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#pack) - create a new circle-packing layout. * [*pack*](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#_pack) - layout the specified hierarchy using circle-packing. * [*pack*.radius](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#pack_radius) - set the radius accessor. * [*pack*.size](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#pack_size) - set the layout size. * [*pack*.padding](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#pack_padding) - set the padding. * [d3.packSiblings](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#packSiblings) - pack the specified array of circles. * [d3.packEnclose](https://github.com/d3/d3-hierarchy/blob/v1.1.9/README.md#packEnclose) - enclose the specified array of circles. ## [Interpolators (d3-interpolate)](https://github.com/d3/d3-interpolate/tree/v1.4.0) Interpolate numbers, colors, strings, arrays, objects, whatever! * [d3.interpolate](https://github.com/d3/d3-interpolate/blob/v1.4.0/README.md#interpolate) - interpolate arbitrary values. * [d3.interpolateArray](https://github.com/d3/d3-interpolate/blob/v1.4.0/README.md#interpolateArray) - interpolate arrays of arbitrary values. * [d3.interpolateDate](https://github.com/d3/d3-interpolate/blob/v1.4.0/README.md#interpolateDate) - interpolate dates. * [d3.interpolateNumber](https://github.com/d3/d3-interpolate/blob/v1.4.0/README.md#interpolateNumber) - interpolate numbers. * [d3.interpolateNumberArray](https://github.com/d3/d3-interpolate/blob/v1.4.0/README.md#interpolateNumberArray) - interpolate arrays of numbers. * [d3.interpolateObject](https://github.com/d3/d3-interpolate/blob/v1.4.0/README.md#interpolateObject) - interpolate arbitrary objects. * [d3.interpolateRound](https://github.com/d3/d3-interpolate/blob/v1.4.0/README.md#interpolateRound) - interpolate integers. * [d3.interpolateString](https://github.com/d3/d3-interpolate/blob/v1.4.0/README.md#interpolateString) - interpolate strings with embedded numbers. * [d3.interpolateTransformCss](https://github.com/d3/d3-interpolate/blob/v1.4.0/README.md#interpolateTransformCss) - interpolate 2D CSS transforms. * [d3.interpolateTransformSvg](https://github.com/d3/d3-interpolate/blob/v1.4.0/README.md#interpolateTransformSvg) - interpolate 2D SVG transforms. * [d3.interpolateZoom](https://github.com/d3/d3-interpolate/blob/v1.4.0/README.md#interpolateZoom) - zoom and pan between two views. * [d3.interpolateRgb](https://github.com/d3/d3-interpolate/blob/v1.4.0/README.md#interpolateRgb) - interpolate RGB colors. * [d3.interpolateRgbBasis](https://github.com/d3/d3-interpolate/blob/v1.4.0/README.md#interpolateRgbBasis) - generate a B-spline through a set of colors. * [d3.interpolateRgbBasisClosed](https://github.com/d3/d3-interpolate/blob/v1.4.0/README.md#interpolateRgbBasisClosed) - generate a closed B-spline through a set of colors. * [d3.interpolateHsl](https://github.com/d3/d3-interpolate/blob/v1.4.0/README.md#interpolateHsl) - interpolate HSL colors. * [d3.interpolateHslLong](https://github.com/d3/d3-interpolate/blob/v1.4.0/README.md#interpolateHslLong) - interpolate HSL colors, the long way. * [d3.interpolateLab](https://github.com/d3/d3-interpolate/blob/v1.4.0/README.md#interpolateLab) - interpolate Lab colors. * [d3.interpolateHcl](https://github.com/d3/d3-interpolate/blob/v1.4.0/README.md#interpolateHcl) - interpolate HCL colors. * [d3.interpolateHclLong](https://github.com/d3/d3-interpolate/blob/v1.4.0/README.md#interpolateHclLong) - interpolate HCL colors, the long way. * [d3.interpolateCubehelix](https://github.com/d3/d3-interpolate/blob/v1.4.0/README.md#interpolateCubehelix) - interpolate Cubehelix colors. * [d3.interpolateCubehelixLong](https://github.com/d3/d3-interpolate/blob/v1.4.0/README.md#interpolateCubehelixLong) - interpolate Cubehelix colors, the long way. * [*interpolate*.gamma](https://github.com/d3/d3-interpolate/blob/v1.4.0/README.md#interpolate_gamma) - apply gamma correction during interpolation. * [d3.interpolateHue](https://github.com/d3/d3-interpolate/blob/v1.4.0/README.md#interpolateHue) - interpolate a hue angle. * [d3.interpolateDiscrete](https://github.com/d3/d3-interpolate/blob/v1.4.0/README.md#interpolateDiscrete) - generate a discrete interpolator from a set of values. * [d3.interpolateBasis](https://github.com/d3/d3-interpolate/blob/v1.4.0/README.md#interpolateBasis) - generate a B-spline through a set of values. * [d3.interpolateBasisClosed](https://github.com/d3/d3-interpolate/blob/v1.4.0/README.md#interpolateBasisClosed) - generate a closed B-spline through a set of values. * [d3.piecewise](https://github.com/d3/d3-interpolate/blob/v1.4.0/README.md#piecewise) - generate a piecewise linear interpolator from a set of values. * [d3.quantize](https://github.com/d3/d3-interpolate/blob/v1.4.0/README.md#quantize) - generate uniformly-spaced samples from an interpolator. ## [Paths (d3-path)](https://github.com/d3/d3-path/tree/v1.0.9) Serialize Canvas path commands to SVG. * [d3.path](https://github.com/d3/d3-path/blob/v1.0.9/README.md#path) - create a new path serializer. * [*path*.moveTo](https://github.com/d3/d3-path/blob/v1.0.9/README.md#path_moveTo) - move to the given point. * [*path*.closePath](https://github.com/d3/d3-path/blob/v1.0.9/README.md#path_closePath) - close the current subpath. * [*path*.lineTo](https://github.com/d3/d3-path/blob/v1.0.9/README.md#path_lineTo) - draw a straight line segment. * [*path*.quadraticCurveTo](https://github.com/d3/d3-path/blob/v1.0.9/README.md#path_quadraticCurveTo) - draw a quadratic Bézier segment. * [*path*.bezierCurveTo](https://github.com/d3/d3-path/blob/v1.0.9/README.md#path_bezierCurveTo) - draw a cubic Bézier segment. * [*path*.arcTo](https://github.com/d3/d3-path/blob/v1.0.9/README.md#path_arcTo) - draw a circular arc segment. * [*path*.arc](https://github.com/d3/d3-path/blob/v1.0.9/README.md#path_arc) - draw a circular arc segment. * [*path*.rect](https://github.com/d3/d3-path/blob/v1.0.9/README.md#path_rect) - draw a rectangle. * [*path*.toString](https://github.com/d3/d3-path/blob/v1.0.9/README.md#path_toString) - serialize to an SVG path data string. ## [Polygons (d3-polygon)](https://github.com/d3/d3-polygon/tree/v1.0.6) Geometric operations for two-dimensional polygons. * [d3.polygonArea](https://github.com/d3/d3-polygon/blob/v1.0.6/README.md#polygonArea) - compute the area of the given polygon. * [d3.polygonCentroid](https://github.com/d3/d3-polygon/blob/v1.0.6/README.md#polygonCentroid) - compute the centroid of the given polygon. * [d3.polygonHull](https://github.com/d3/d3-polygon/blob/v1.0.6/README.md#polygonHull) - compute the convex hull of the given points. * [d3.polygonContains](https://github.com/d3/d3-polygon/blob/v1.0.6/README.md#polygonContains) - test whether a point is inside a polygon. * [d3.polygonLength](https://github.com/d3/d3-polygon/blob/v1.0.6/README.md#polygonLength) - compute the length of the given polygon’s perimeter. ## [Quadtrees (d3-quadtree)](https://github.com/d3/d3-quadtree/tree/v1.0.7) Two-dimensional recursive spatial subdivision. * [d3.quadtree](https://github.com/d3/d3-quadtree/blob/v1.0.7/README.md#quadtree) - create a new, empty quadtree. * [*quadtree*.x](https://github.com/d3/d3-quadtree/blob/v1.0.7/README.md#quadtree_x) - set the *x* accessor. * [*quadtree*.y](https://github.com/d3/d3-quadtree/blob/v1.0.7/README.md#quadtree_y) - set the *y* accessor. * [*quadtree*.add](https://github.com/d3/d3-quadtree/blob/v1.0.7/README.md#quadtree_add) - add a datum to a quadtree. * [*quadtree*.addAll](https://github.com/d3/d3-quadtree/blob/v1.0.7/README.md#quadtree_addAll) - add an array of data to a quadtree. * [*quadtree*.remove](https://github.com/d3/d3-quadtree/blob/v1.0.7/README.md#quadtree_remove) - remove a datum from a quadtree. * [*quadtree*.removeAll](https://github.com/d3/d3-quadtree/blob/v1.0.7/README.md#quadtree_removeAll) - remove an array of data from a quadtree. * [*quadtree*.copy](https://github.com/d3/d3-quadtree/blob/v1.0.7/README.md#quadtree_copy) - create a copy of a quadtree. * [*quadtree*.root](https://github.com/d3/d3-quadtree/blob/v1.0.7/README.md#quadtree_root) - get the quadtree’s root node. * [*quadtree*.data](https://github.com/d3/d3-quadtree/blob/v1.0.7/README.md#quadtree_data) - retrieve all data from the quadtree. * [*quadtree*.size](https://github.com/d3/d3-quadtree/blob/v1.0.7/README.md#quadtree_size) - count the number of data in the quadtree. * [*quadtree*.find](https://github.com/d3/d3-quadtree/blob/v1.0.7/README.md#quadtree_find) - quickly find the closest datum in a quadtree. * [*quadtree*.visit](https://github.com/d3/d3-quadtree/blob/v1.0.7/README.md#quadtree_visit) - selectively visit nodes in a quadtree. * [*quadtree*.visitAfter](https://github.com/d3/d3-quadtree/blob/v1.0.7/README.md#quadtree_visitAfter) - visit all nodes in a quadtree. * [*quadtree*.cover](https://github.com/d3/d3-quadtree/blob/v1.0.7/README.md#quadtree_cover) - extend the quadtree to cover a point. * [*quadtree*.extent](https://github.com/d3/d3-quadtree/blob/v1.0.7/README.md#quadtree_extent) - extend the quadtree to cover an extent. ## [Random Numbers (d3-random)](https://github.com/d3/d3-random/tree/v1.1.2) Generate random numbers from various distributions. * [d3.randomUniform](https://github.com/d3/d3-random/blob/v1.1.2/README.md#randomUniform) - from a uniform distribution. * [d3.randomNormal](https://github.com/d3/d3-random/blob/v1.1.2/README.md#randomNormal) - from a normal distribution. * [d3.randomLogNormal](https://github.com/d3/d3-random/blob/v1.1.2/README.md#randomLogNormal) - from a log-normal distribution. * [d3.randomBates](https://github.com/d3/d3-random/blob/v1.1.2/README.md#randomBates) - from a Bates distribution. * [d3.randomIrwinHall](https://github.com/d3/d3-random/blob/v1.1.2/README.md#randomIrwinHall) - from an Irwin–Hall distribution. * [d3.randomExponential](https://github.com/d3/d3-random/blob/v1.1.2/README.md#randomExponential) - from an exponential distribution. * [*random*.source](https://github.com/d3/d3-random/blob/v1.1.2/README.md#random_source) - set the source of randomness. ## [Scales (d3-scale)](https://github.com/d3/d3-scale/tree/v2.2.2) Encodings that map abstract data to visual representation. ### [Continuous Scales](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#continuous-scales) Map a continuous, quantitative domain to a continuous range. * [*continuous*](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#_continuous) - compute the range value corresponding to a given domain value. * [*continuous*.invert](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#continuous_invert) - compute the domain value corresponding to a given range value. * [*continuous*.domain](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#continuous_domain) - set the input domain. * [*continuous*.range](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#continuous_range) - set the output range. * [*continuous*.rangeRound](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#continuous_rangeRound) - set the output range and enable rounding. * [*continuous*.clamp](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#continuous_clamp) - enable clamping to the domain or range. * [*continuous*.interpolate](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#continuous_interpolate) - set the output interpolator. * [*continuous*.unknown](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#continuous_unknown) - set the output value for unknown inputs. * [*continuous*.ticks](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#continuous_ticks) - compute representative values from the domain. * [*continuous*.tickFormat](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#continuous_tickFormat) - format ticks for human consumption. * [*continuous*.nice](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#continuous_nice) - extend the domain to nice round numbers. * [*continuous*.copy](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#continuous_copy) - create a copy of this scale. * [d3.scaleLinear](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#scaleLinear) - create a quantitative linear scale. * [d3.scalePow](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#scalePow) - create a quantitative power scale. * [*pow*](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#_pow) - compute the range value corresponding to a given domain value. * [*pow*.invert](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#pow_invert) - compute the domain value corresponding to a given range value. * [*pow*.exponent](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#pow_exponent) - set the power exponent. * [*pow*.domain](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#pow_domain) - set the input domain. * [*pow*.range](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#pow_range) - set the output range. * [*pow*.rangeRound](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#pow_rangeRound) - set the output range and enable rounding. * [*pow*.clamp](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#pow_clamp) - enable clamping to the domain or range. * [*pow*.interpolate](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#pow_interpolate) - set the output interpolator. * [*pow*.ticks](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#pow_ticks) - compute representative values from the domain. * [*pow*.tickFormat](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#pow_tickFormat) - format ticks for human consumption. * [*pow*.nice](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#pow_nice) - extend the domain to nice round numbers. * [*pow*.copy](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#pow_copy) - create a copy of this scale. * [d3.scaleSqrt](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#scaleSqrt) - create a quantitative power scale with exponent 0.5. * [d3.scaleLog](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#scaleLog) - create a quantitative logarithmic scale. * [*log*](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#_log) - compute the range value corresponding to a given domain value. * [*log*.invert](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#log_invert) - compute the domain value corresponding to a given range value. * [*log*.base](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#log_base) - set the logarithm base. * [*log*.domain](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#log_domain) - set the input domain. * [*log*.range](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#log_range) - set the output range. * [*log*.rangeRound](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#log_rangeRound) - set the output range and enable rounding. * [*log*.clamp](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#log_clamp) - enable clamping to the domain or range. * [*log*.interpolate](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#log_interpolate) - set the output interpolator. * [*log*.ticks](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#log_ticks) - compute representative values from the domain. * [*log*.tickFormat](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#log_tickFormat) - format ticks for human consumption. * [*log*.nice](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#log_nice) - extend the domain to nice round numbers. * [*log*.copy](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#log_copy) - create a copy of this scale. * [d3.scaleSymlog](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#scaleSymlog) - create a symmetric logarithmic scale. * [d3.scaleIdentity](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#identity) - create a quantitative identity scale. * [d3.scaleTime](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#scaleTime) - create a linear scale for time. * [*time*](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#_time) - compute the range value corresponding to a given domain value. * [*time*.invert](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#time_invert) - compute the domain value corresponding to a given range value. * [*time*.domain](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#time_domain) - set the input domain. * [*time*.range](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#time_range) - set the output range. * [*time*.rangeRound](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#time_rangeRound) - set the output range and enable rounding. * [*time*.clamp](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#time_clamp) - enable clamping to the domain or range. * [*time*.interpolate](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#time_interpolate) - set the output interpolator. * [*time*.ticks](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#time_ticks) - compute representative values from the domain. * [*time*.tickFormat](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#time_tickFormat) - format ticks for human consumption. * [*time*.nice](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#time_nice) - extend the domain to nice round times. * [*time*.copy](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#time_copy) - create a copy of this scale. * [d3.scaleUtc](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#scaleUtc) - create a linear scale for UTC. * [d3.tickFormat](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#tickFormat) - format ticks for human consumption. ### [Sequential Scales](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#sequential-scales) Map a continuous, quantitative domain to a continuous, fixed interpolator. * [d3.scaleSequential](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#scaleSequential) - create a sequential scale. * [*sequential*.interpolator](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#sequential_interpolator) - set the scale’s output interpolator. * [d3.scaleSequentialLog](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#scaleSequentialLog) - * [d3.scaleSequentialPow](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#scaleSequentialPow) - * [d3.scaleSequentialSqrt](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#scaleSequentialSqrt) - * [d3.scaleSequentialSymlog](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#scaleSequentialSymlog) - * [d3.scaleSequentialQuantile](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#scaleSequentialQuantile) - ### [Diverging Scales](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#diverging-scales) Map a continuous, quantitative domain to a continuous, fixed interpolator. * [d3.scaleDiverging](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#scaleDiverging) - create a diverging scale. * [*diverging*.interpolator](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#diverging_interpolator) - set the scale’s output interpolator. * [d3.scaleDivergingLog](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#scaleDivergingLog) - * [d3.scaleDivergingPow](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#scaleDivergingPow) - * [d3.scaleDivergingSqrt](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#scaleDivergingSqrt) - * [d3.scaleDivergingSymlog](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#scaleDivergingSymlog) - ### [Quantize Scales](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#quantize-scales) Map a continuous, quantitative domain to a discrete range. * [d3.scaleQuantize](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#scaleQuantize) - create a uniform quantizing linear scale. * [*quantize*](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#_quantize) - compute the range value corresponding to a given domain value. * [*quantize*.invertExtent](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#quantize_invertExtent) - compute the domain values corresponding to a given range value. * [*quantize*.domain](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#quantize_domain) - set the input domain. * [*quantize*.range](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#quantize_range) - set the output range. * [*quantize*.nice](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#quantize_nice) - extend the domain to nice round numbers. * [*quantize*.ticks](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#quantize_ticks) - compute representative values from the domain. * [*quantize*.tickFormat](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#quantize_tickFormat) - format ticks for human consumption. * [*quantize*.copy](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#quantize_copy) - create a copy of this scale. * [d3.scaleQuantile](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#scaleQuantile) - create a quantile quantizing linear scale. * [*quantile*](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#_quantile) - compute the range value corresponding to a given domain value. * [*quantile*.invertExtent](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#quantile_invertExtent) - compute the domain values corresponding to a given range value. * [*quantile*.domain](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#quantile_domain) - set the input domain. * [*quantile*.range](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#quantile_range) - set the output range. * [*quantile*.quantiles](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#quantile_quantiles) - get the quantile thresholds. * [*quantile*.copy](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#quantile_copy) - create a copy of this scale. * [d3.scaleThreshold](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#scaleThreshold) - create an arbitrary quantizing linear scale. * [*threshold*](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#_threshold) - compute the range value corresponding to a given domain value. * [*threshold*.invertExtent](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#threshold_invertExtent) - compute the domain values corresponding to a given range value. * [*threshold*.domain](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#threshold_domain) - set the input domain. * [*threshold*.range](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#threshold_range) - set the output range. * [*threshold*.copy](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#threshold_copy) - create a copy of this scale. ### [Ordinal Scales](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#ordinal-scales) Map a discrete domain to a discrete range. * [d3.scaleOrdinal](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#scaleOrdinal) - create an ordinal scale. * [*ordinal*](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#_ordinal) - compute the range value corresponding to a given domain value. * [*ordinal*.domain](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#ordinal_domain) - set the input domain. * [*ordinal*.range](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#ordinal_range) - set the output range. * [*ordinal*.unknown](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#ordinal_unknown) - set the output value for unknown inputs. * [*ordinal*.copy](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#ordinal_copy) - create a copy of this scale. * [d3.scaleImplicit](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#scaleImplicit) - a special unknown value for implicit domains. * [d3.scaleBand](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#scaleBand) - create an ordinal band scale. * [*band*](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#_band) - compute the band start corresponding to a given domain value. * [*band*.domain](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#band_domain) - set the input domain. * [*band*.range](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#band_range) - set the output range. * [*band*.rangeRound](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#band_rangeRound) - set the output range and enable rounding. * [*band*.round](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#band_round) - enable rounding. * [*band*.paddingInner](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#band_paddingInner) - set padding between bands. * [*band*.paddingOuter](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#band_paddingOuter) - set padding outside the first and last bands. * [*band*.padding](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#band_padding) - set padding outside and between bands. * [*band*.align](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#band_align) - set band alignment, if there is extra space. * [*band*.bandwidth](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#band_bandwidth) - get the width of each band. * [*band*.step](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#band_step) - get the distance between the starts of adjacent bands. * [*band*.copy](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#band_copy) - create a copy of this scale. * [d3.scalePoint](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#scalePoint) - create an ordinal point scale. * [*point*](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#_point) - compute the point corresponding to a given domain value. * [*point*.domain](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#point_domain) - set the input domain. * [*point*.range](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#point_range) - set the output range. * [*point*.rangeRound](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#point_rangeRound) - set the output range and enable rounding. * [*point*.round](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#point_round) - enable rounding. * [*point*.padding](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#point_padding) - set padding outside the first and last point. * [*point*.align](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#point_align) - set point alignment, if there is extra space. * [*point*.bandwidth](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#point_bandwidth) - returns zero. * [*point*.step](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#point_step) - get the distance between the starts of adjacent points. * [*point*.copy](https://github.com/d3/d3-scale/blob/v2.2.2/README.md#point_copy) - create a copy of this scale. ## [Selections (d3-selection)](https://github.com/d3/d3-selection/tree/v1.4.1) Transform the DOM by selecting elements and joining to data. ### [Selecting Elements](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selecting-elements) * [d3.selection](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection) - select the root document element. * [d3.select](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#select) - select an element from the document. * [d3.selectAll](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selectAll) - select multiple elements from the document. * [*selection*.select](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_select) - select a descendant element for each selected element. * [*selection*.selectAll](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_selectAll) - select multiple descendants for each selected element. * [*selection*.filter](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_filter) - filter elements based on data. * [*selection*.merge](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_merge) - merge this selection with another. * [d3.matcher](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#matcher) - test whether an element matches a selector. * [d3.selector](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selector) - select an element. * [d3.selectorAll](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selectorAll) - select elements. * [d3.window](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#window) - get a node’s owner window. * [d3.style](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#style) - get a node’s current style value. ### [Modifying Elements](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#modifying-elements) * [*selection*.attr](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_attr) - get or set an attribute. * [*selection*.classed](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_classed) - get, add or remove CSS classes. * [*selection*.style](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_style) - get or set a style property. * [*selection*.property](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_property) - get or set a (raw) property. * [*selection*.text](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_text) - get or set the text content. * [*selection*.html](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_html) - get or set the inner HTML. * [*selection*.append](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_append) - create, append and select new elements. * [*selection*.insert](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_insert) - create, insert and select new elements. * [*selection*.remove](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_remove) - remove elements from the document. * [*selection*.clone](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_clone) - insert clones of selected elements. * [*selection*.sort](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_sort) - sort elements in the document based on data. * [*selection*.order](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_order) - reorders elements in the document to match the selection. * [*selection*.raise](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_raise) - reorders each element as the last child of its parent. * [*selection*.lower](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_lower) - reorders each element as the first child of its parent. * [d3.create](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#create) - create and select a detached element. * [d3.creator](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#creator) - create an element by name. ### [Joining Data](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#joining-data) * [*selection*.data](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_data) - bind elements to data. * [*selection*.join](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_join) - enter, update or exit elements based on data. * [*selection*.enter](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_enter) - get the enter selection (data missing elements). * [*selection*.exit](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_exit) - get the exit selection (elements missing data). * [*selection*.datum](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_datum) - get or set element data (without joining). ### [Handling Events](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#handling-events) * [*selection*.on](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_on) - add or remove event listeners. * [*selection*.dispatch](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_dispatch) - dispatch a custom event. * [d3.event](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#event) - the current user event, during interaction. * [d3.customEvent](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#customEvent) - temporarily define a custom event. * [d3.mouse](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#mouse) - get the mouse position relative to a given container. * [d3.touch](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#touch) - get a touch position relative to a given container. * [d3.touches](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#touches) - get the touch positions relative to a given container. * [d3.clientPoint](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#clientPoint) - get a position relative to a given container. ### [Control Flow](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#control-flow) * [*selection*.each](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_each) - call a function for each element. * [*selection*.call](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_call) - call a function with this selection. * [*selection*.empty](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_empty) - returns true if this selection is empty. * [*selection*.nodes](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_nodes) - returns an array of all selected elements. * [*selection*.node](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_node) - returns the first (non-null) element. * [*selection*.size](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_size) - returns the count of elements. ### [Local Variables](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#local-variables) * [d3.local](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#local) - declares a new local variable. * [*local*.set](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#local_set) - set a local variable’s value. * [*local*.get](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#local_get) - get a local variable’s value. * [*local*.remove](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#local_remove) - delete a local variable. * [*local*.toString](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#local_toString) - get the property identifier of a local variable. ### [Namespaces](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#namespaces) * [d3.namespace](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#namespace) - qualify a prefixed XML name, such as “xlink:href”. * [d3.namespaces](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#namespaces) - the built-in XML namespaces. ## [Shapes (d3-shape)](https://github.com/d3/d3-shape/tree/v1.3.7) Graphical primitives for visualization. ### [Arcs](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#arcs) Circular or annular sectors, as in a pie or donut chart. * [d3.arc](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#arc) - create a new arc generator. * [*arc*](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#_arc) - generate an arc for the given datum. * [*arc*.centroid](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#arc_centroid) - compute an arc’s midpoint. * [*arc*.innerRadius](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#arc_innerRadius) - set the inner radius. * [*arc*.outerRadius](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#arc_outerRadius) - set the outer radius. * [*arc*.cornerRadius](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#arc_cornerRadius) - set the corner radius, for rounded corners. * [*arc*.startAngle](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#arc_startAngle) - set the start angle. * [*arc*.endAngle](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#arc_endAngle) - set the end angle. * [*arc*.padAngle](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#arc_padAngle) - set the angle between adjacent arcs, for padded arcs. * [*arc*.padRadius](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#arc_padRadius) - set the radius at which to linearize padding. * [*arc*.context](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#arc_context) - set the rendering context. ### [Pies](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#pies) Compute the necessary angles to represent a tabular dataset as a pie or donut chart. * [d3.pie](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#pie) - create a new pie generator. * [*pie*](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#_pie) - compute the arc angles for the given dataset. * [*pie*.value](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#pie_value) - set the value accessor. * [*pie*.sort](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#pie_sort) - set the sort order comparator. * [*pie*.sortValues](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#pie_sortValues) - set the sort order comparator. * [*pie*.startAngle](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#pie_startAngle) - set the overall start angle. * [*pie*.endAngle](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#pie_endAngle) - set the overall end angle. * [*pie*.padAngle](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#pie_padAngle) - set the pad angle between adjacent arcs. ### [Lines](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#lines) A spline or polyline, as in a line chart. * [d3.line](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#line) - create a new line generator. * [*line*](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#_line) - generate a line for the given dataset. * [*line*.x](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#line_x) - set the *x* accessor. * [*line*.y](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#line_y) - set the *y* accessor. * [*line*.defined](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#line_defined) - set the defined accessor. * [*line*.curve](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#line_curve) - set the curve interpolator. * [*line*.context](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#line_context) - set the rendering context. * [d3.lineRadial](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#lineRadial) - create a new radial line generator. * [*lineRadial*](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#_lineRadial) - generate a line for the given dataset. * [*lineRadial*.angle](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#lineRadial_angle) - set the angle accessor. * [*lineRadial*.radius](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#lineRadial_radius) - set the radius accessor. * [*lineRadial*.defined](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#lineRadial_defined) - set the defined accessor. * [*lineRadial*.curve](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#lineRadial_curve) - set the curve interpolator. * [*lineRadial*.context](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#lineRadial_context) - set the rendering context. ### [Areas](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#areas) An area, defined by a bounding topline and baseline, as in an area chart. * [d3.area](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#area) - create a new area generator. * [*area*](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#_area) - generate an area for the given dataset. * [*area*.x](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#area_x) - set the *x0* and *x1* accessors. * [*area*.x0](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#area_x0) - set the baseline *x* accessor. * [*area*.x1](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#area_x1) - set the topline *x* accessor. * [*area*.y](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#area_y) - set the *y0* and *y1* accessors. * [*area*.y0](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#area_y0) - set the baseline *y* accessor. * [*area*.y1](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#area_y1) - set the topline *y* accessor. * [*area*.defined](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#area_defined) - set the defined accessor. * [*area*.curve](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#area_curve) - set the curve interpolator. * [*area*.context](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#area_context) - set the rendering context. * [*area*.lineX0](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#area_lineX0) - derive a line for the left edge of an area. * [*area*.lineX1](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#area_lineX1) - derive a line for the right edge of an area. * [*area*.lineY0](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#area_lineY0) - derive a line for the top edge of an area. * [*area*.lineY1](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#area_lineY1) - derive a line for the bottom edge of an area. * [d3.radialArea](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#radialArea) - create a new radial area generator. * [*radialArea*](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#_radialArea) - generate an area for the given dataset. * [*radialArea*.angle](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#radialArea_angle) - set the start and end angle accessors. * [*radialArea*.startAngle](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#radialArea_startAngle) - set the start angle accessor. * [*radialArea*.endAngle](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#radialArea_endAngle) - set the end angle accessor. * [*radialArea*.radius](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#radialArea_radius) - set the inner and outer radius accessors. * [*radialArea*.innerRadius](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#radialArea_innerRadius) - set the inner radius accessor. * [*radialArea*.outerRadius](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#radialArea_outerRadius) - set the outer radius accessor. * [*radialArea*.defined](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#radialArea_defined) - set the defined accessor. * [*radialArea*.curve](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#radialArea_curve) - set the curve interpolator. * [*radialArea*.context](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#radialArea_context) - set the rendering context. * [*radialArea*.lineStartAngle](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#area_lineStartAngle) - derive a line for the start edge of an area. * [*radialArea*.lineEndAngle](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#area_lineEndAngle) - derive a line for the end edge of an area. * [*radialArea*.lineInnerRadius](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#area_lineInnerRadius) - derive a line for the inner edge of an area. * [*radialArea*.lineOuterRadius](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#area_lineOuterRadius) - derive a line for the outer edge of an area. ### [Curves](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#curves) Interpolate between points to produce a continuous shape. * [d3.curveBasis](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#curveBasis) - a cubic basis spline, repeating the end points. * [d3.curveBasisClosed](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#curveBasisClosed) - a closed cubic basis spline. * [d3.curveBasisOpen](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#curveBasisOpen) - a cubic basis spline. * [d3.curveBundle](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#curveBundle) - a straightened cubic basis spline. * [*bundle*.beta](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#bundle_beta) - set the bundle tension *beta*. * [d3.curveCardinal](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#curveCardinal) - a cubic cardinal spline, with one-sided difference at each end. * [d3.curveCardinalClosed](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#curveCardinalClosed) - a closed cubic cardinal spline. * [d3.curveCardinalOpen](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#curveCardinalOpen) - a cubic cardinal spline. * [*cardinal*.tension](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#cardinal_tension) - set the cardinal spline tension. * [d3.curveCatmullRom](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#curveCatmullRom) - a cubic Catmull–Rom spline, with one-sided difference at each end. * [d3.curveCatmullRomClosed](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#curveCatmullRomClosed) - a closed cubic Catmull–Rom spline. * [d3.curveCatmullRomOpen](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#curveCatmullRomOpen) - a cubic Catmull–Rom spline. * [*catmullRom*.alpha](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#catmullRom_alpha) - set the Catmull–Rom parameter *alpha*. * [d3.curveLinear](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#curveLinear) - a polyline. * [d3.curveLinearClosed](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#curveLinearClosed) - a closed polyline. * [d3.curveMonotoneX](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#curveMonotoneX) - a cubic spline that, given monotonicity in *x*, preserves it in *y*. * [d3.curveMonotoneY](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#curveMonotoneY) - a cubic spline that, given monotonicity in *y*, preserves it in *x*. * [d3.curveNatural](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#curveNatural) - a natural cubic spline. * [d3.curveStep](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#curveStep) - a piecewise constant function. * [d3.curveStepAfter](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#curveStepAfter) - a piecewise constant function. * [d3.curveStepBefore](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#curveStepBefore) - a piecewise constant function. * [*curve*.areaStart](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#curve_areaStart) - start a new area segment. * [*curve*.areaEnd](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#curve_areaEnd) - end the current area segment. * [*curve*.lineStart](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#curve_lineStart) - start a new line segment. * [*curve*.lineEnd](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#curve_lineEnd) - end the current line segment. * [*curve*.point](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#curve_point) - add a point to the current line segment. ### [Links](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#links) A smooth cubic Bézier curve from a source to a target. * [d3.linkVertical](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#linkVertical) - create a new vertical link generator. * [d3.linkHorizontal](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#linkHorizontal) - create a new horizontal link generator. * [*link*](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#_link) - generate a link. * [*link*.source](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#link_source) - set the source accessor. * [*link*.target](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#link_target) - set the target accessor. * [*link*.x](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#link_x) - set the point *x*-accessor. * [*link*.y](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#link_y) - set the point *y*-accessor. * [*link*.context](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#link_context) - set the rendering context. * [d3.linkRadial](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#linkRadial) - create a new radial link generator. * [*radialLink*.angle](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#radialLink_angle) - set the point *angle* accessor. * [*radialLink*.radius](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#radialLink_radius) - set the point *radius* accessor. ### [Symbols](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#symbols) A categorical shape encoding, as in a scatterplot. * [d3.symbol](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#symbol) - create a new symbol generator. * [*symbol*](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#_symbol) - generate a symbol for the given datum. * [*symbol*.type](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#symbol_type) - set the symbol type. * [*symbol*.size](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#symbol_size) - set the size of the symbol in square pixels. * [*symbol*.context](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#symbol_context) - set the rendering context. * [d3.symbols](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#symbols) - the array of built-in symbol types. * [d3.symbolCircle](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#symbolCircle) - a circle. * [d3.symbolCross](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#symbolCross) - a Greek cross with arms of equal length. * [d3.symbolDiamond](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#symbolDiamond) - a rhombus. * [d3.symbolSquare](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#symbolSquare) - a square. * [d3.symbolStar](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#symbolStar) - a pentagonal star (pentagram). * [d3.symbolTriangle](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#symbolTriangle) - an up-pointing triangle. * [d3.symbolWye](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#symbolWye) - a Y shape. * [d3.pointRadial](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#pointRadial) - * [*symbolType*.draw](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#symbolType_draw) - draw this symbol to the given context. ### [Stacks](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#stacks) Stack shapes, placing one adjacent to another, as in a stacked bar chart. * [d3.stack](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#stack) - create a new stack generator. * [*stack*](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#_stack) - generate a stack for the given dataset. * [*stack*.keys](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#stack_keys) - set the keys accessor. * [*stack*.value](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#stack_value) - set the value accessor. * [*stack*.order](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#stack_order) - set the order accessor. * [*stack*.offset](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#stack_offset) - set the offset accessor. * [d3.stackOrderAppearance](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#stackOrderAppearance) - put the earliest series on bottom. * [d3.stackOrderAscending](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#stackOrderAscending) - put the smallest series on bottom. * [d3.stackOrderDescending](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#stackOrderDescending) - put the largest series on bottom. * [d3.stackOrderInsideOut](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#stackOrderInsideOut) - put earlier series in the middle. * [d3.stackOrderNone](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#stackOrderNone) - use the given series order. * [d3.stackOrderReverse](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#stackOrderReverse) - use the reverse of the given series order. * [d3.stackOffsetExpand](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#stackOffsetExpand) - normalize the baseline to zero and topline to one. * [d3.stackOffsetDiverging](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#stackOffsetDiverging) - positive above zero; negative below zero. * [d3.stackOffsetNone](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#stackOffsetNone) - apply a zero baseline. * [d3.stackOffsetSilhouette](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#stackOffsetSilhouette) - center the streamgraph around zero. * [d3.stackOffsetWiggle](https://github.com/d3/d3-shape/blob/v1.3.7/README.md#stackOffsetWiggle) - minimize streamgraph wiggling. ## [Time Formats (d3-time-format)](https://github.com/d3/d3-time-format/tree/v2.2.3) Parse and format times, inspired by strptime and strftime. * [d3.timeFormat](https://github.com/d3/d3-time-format/blob/v2.2.3/README.md#timeFormat) - alias for *locale*.format on the default locale. * [d3.timeParse](https://github.com/d3/d3-time-format/blob/v2.2.3/README.md#timeParse) - alias for *locale*.parse on the default locale. * [d3.utcFormat](https://github.com/d3/d3-time-format/blob/v2.2.3/README.md#utcFormat) - alias for *locale*.utcFormat on the default locale. * [d3.utcParse](https://github.com/d3/d3-time-format/blob/v2.2.3/README.md#utcParse) - alias for *locale*.utcParse on the default locale. * [d3.isoFormat](https://github.com/d3/d3-time-format/blob/v2.2.3/README.md#isoFormat) - an ISO 8601 UTC formatter. * [d3.isoParse](https://github.com/d3/d3-time-format/blob/v2.2.3/README.md#isoParse) - an ISO 8601 UTC parser. * [d3.timeFormatLocale](https://github.com/d3/d3-time-format/blob/v2.2.3/README.md#timeFormatLocale) - define a custom locale. * [d3.timeFormatDefaultLocale](https://github.com/d3/d3-time-format/blob/v2.2.3/README.md#timeFormatDefaultLocale) - define the default locale. * [*locale*.format](https://github.com/d3/d3-time-format/blob/v2.2.3/README.md#locale_format) - create a time formatter. * [*locale*.parse](https://github.com/d3/d3-time-format/blob/v2.2.3/README.md#locale_parse) - create a time parser. * [*locale*.utcFormat](https://github.com/d3/d3-time-format/blob/v2.2.3/README.md#locale_utcFormat) - create a UTC formatter. * [*locale*.utcParse](https://github.com/d3/d3-time-format/blob/v2.2.3/README.md#locale_utcParse) - create a UTC parser. ## [Time Intervals (d3-time)](https://github.com/d3/d3-time/tree/v1.1.0) A calculator for humanity’s peculiar conventions of time. * [d3.timeInterval](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeInterval) - implement a new custom time interval. * [*interval*](https://github.com/d3/d3-time/blob/v1.1.0/README.md#_interval) - alias for *interval*.floor. * [*interval*.floor](https://github.com/d3/d3-time/blob/v1.1.0/README.md#interval_floor) - round down to the nearest boundary. * [*interval*.round](https://github.com/d3/d3-time/blob/v1.1.0/README.md#interval_round) - round to the nearest boundary. * [*interval*.ceil](https://github.com/d3/d3-time/blob/v1.1.0/README.md#interval_ceil) - round up to the nearest boundary. * [*interval*.offset](https://github.com/d3/d3-time/blob/v1.1.0/README.md#interval_offset) - offset a date by some number of intervals. * [*interval*.range](https://github.com/d3/d3-time/blob/v1.1.0/README.md#interval_range) - generate a range of dates at interval boundaries. * [*interval*.filter](https://github.com/d3/d3-time/blob/v1.1.0/README.md#interval_filter) - create a filtered subset of this interval. * [*interval*.every](https://github.com/d3/d3-time/blob/v1.1.0/README.md#interval_every) - create a filtered subset of this interval. * [*interval*.count](https://github.com/d3/d3-time/blob/v1.1.0/README.md#interval_count) - count interval boundaries between two dates. * [d3.timeMillisecond](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeMillisecond), [d3.utcMillisecond](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeMillisecond) - the millisecond interval. * [d3.timeMilliseconds](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeMillisecond), [d3.utcMilliseconds](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeMillisecond) - aliases for millisecond.range. * [d3.timeSecond](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeSecond), [d3.utcSecond](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeSecond) - the second interval. * [d3.timeSeconds](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeSecond), [d3.utcSeconds](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeSecond) - aliases for second.range. * [d3.timeMinute](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeMinute), [d3.utcMinute](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeMinute) - the minute interval. * [d3.timeMinutes](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeMinute), [d3.utcMinutes](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeMinute) - aliases for minute.range. * [d3.timeHour](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeHour), [d3.utcHour](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeHour) - the hour interval. * [d3.timeHours](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeHour), [d3.utcHours](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeHour) - aliases for hour.range. * [d3.timeDay](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeDay), [d3.utcDay](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeDay) - the day interval. * [d3.timeDays](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeDay), [d3.utcDays](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeDay) - aliases for day.range. * [d3.timeWeek](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeWeek), [d3.utcWeek](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeWeek) - aliases for sunday. * [d3.timeWeeks](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeWeek), [d3.utcWeeks](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeWeek) - aliases for week.range. * [d3.timeSunday](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeSunday), [d3.utcSunday](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeSunday) - the week interval, starting on Sunday. * [d3.timeSundays](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeSunday), [d3.utcSundays](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeSunday) - aliases for sunday.range. * [d3.timeMonday](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeMonday), [d3.utcMonday](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeMonday) - the week interval, starting on Monday. * [d3.timeMondays](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeMonday), [d3.utcMondays](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeMonday) - aliases for monday.range. * [d3.timeTuesday](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeTuesday), [d3.utcTuesday](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeTuesday) - the week interval, starting on Tuesday. * [d3.timeTuesdays](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeTuesday), [d3.utcTuesdays](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeTuesday) - aliases for tuesday.range. * [d3.timeWednesday](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeWednesday), [d3.utcWednesday](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeWednesday) - the week interval, starting on Wednesday. * [d3.timeWednesdays](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeWednesday), [d3.utcWednesdays](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeWednesday) - aliases for wednesday.range. * [d3.timeThursday](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeThursday), [d3.utcThursday](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeThursday) - the week interval, starting on Thursday. * [d3.timeThursdays](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeThursday), [d3.utcThursdays](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeThursday) - aliases for thursday.range. * [d3.timeFriday](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeFriday), [d3.utcFriday](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeFriday) - the week interval, starting on Friday. * [d3.timeFridays](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeFriday), [d3.utcFridays](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeFriday) - aliases for friday.range. * [d3.timeSaturday](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeSaturday), [d3.utcSaturday](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeSaturday) - the week interval, starting on Saturday. * [d3.timeSaturdays](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeSaturday), [d3.utcSaturdays](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeSaturday) - aliases for saturday.range. * [d3.timeMonth](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeMonth), [d3.utcMonth](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeMonth) - the month interval. * [d3.timeMonths](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeMonth), [d3.utcMonths](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeMonth) - aliases for month.range. * [d3.timeYear](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeYear), [d3.utcYear](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeYear) - the year interval. * [d3.timeYears](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeYear), [d3.utcYears](https://github.com/d3/d3-time/blob/v1.1.0/README.md#timeYear) - aliases for year.range. ## [Timers (d3-timer)](https://github.com/d3/d3-timer/tree/v1.0.10) An efficient queue for managing thousands of concurrent animations. * [d3.now](https://github.com/d3/d3-timer/blob/v1.0.10/README.md#now) - get the current high-resolution time. * [d3.timer](https://github.com/d3/d3-timer/blob/v1.0.10/README.md#timer) - schedule a new timer. * [*timer*.restart](https://github.com/d3/d3-timer/blob/v1.0.10/README.md#timer_restart) - reset the timer’s start time and callback. * [*timer*.stop](https://github.com/d3/d3-timer/blob/v1.0.10/README.md#timer_stop) - stop the timer. * [d3.timerFlush](https://github.com/d3/d3-timer/blob/v1.0.10/README.md#timerFlush) - immediately execute any eligible timers. * [d3.timeout](https://github.com/d3/d3-timer/blob/v1.0.10/README.md#timeout) - schedule a timer that stops on its first callback. * [d3.interval](https://github.com/d3/d3-timer/blob/v1.0.10/README.md#interval) - schedule a timer that is called with a configurable period. ## [Transitions (d3-transition)](https://github.com/d3/d3-transition/tree/v1.3.2) Animated transitions for [selections](#selections). * [*selection*.transition](https://github.com/d3/d3-transition/blob/v1.3.2/README.md#selection_transition) - schedule a transition for the selected elements. * [*selection*.interrupt](https://github.com/d3/d3-transition/blob/v1.3.2/README.md#selection_interrupt) - interrupt and cancel transitions on the selected elements. * [d3.transition](https://github.com/d3/d3-transition/blob/v1.3.2/README.md#transition) - schedule a transition on the root document element. * [*transition*.select](https://github.com/d3/d3-transition/blob/v1.3.2/README.md#transition_select) - schedule a transition on the selected elements. * [*transition*.selectAll](https://github.com/d3/d3-transition/blob/v1.3.2/README.md#transition_selectAll) - schedule a transition on the selected elements. * [*transition*.filter](https://github.com/d3/d3-transition/blob/v1.3.2/README.md#transition_filter) - filter elements based on data. * [*transition*.merge](https://github.com/d3/d3-transition/blob/v1.3.2/README.md#transition_merge) - merge this transition with another. * [*transition*.selection](https://github.com/d3/d3-transition/blob/v1.3.2/README.md#transition_selection) - returns a selection for this transition. * [*transition*.transition](https://github.com/d3/d3-transition/blob/v1.3.2/README.md#transition_transition) - schedule a new transition following this one. * [*transition*.call](https://github.com/d3/d3-transition/blob/v1.3.2/README.md#transition_call) - call a function with this transition. * [*transition*.nodes](https://github.com/d3/d3-transition/blob/v1.3.2/README.md#transition_nodes) - returns an array of all selected elements. * [*transition*.node](https://github.com/d3/d3-transition/blob/v1.3.2/README.md#transition_node) - returns the first (non-null) element. * [*transition*.size](https://github.com/d3/d3-transition/blob/v1.3.2/README.md#transition_size) - returns the count of elements. * [*transition*.empty](https://github.com/d3/d3-transition/blob/v1.3.2/README.md#transition_empty) - returns true if this transition is empty. * [*transition*.each](https://github.com/d3/d3-transition/blob/v1.3.2/README.md#transition_each) - call a function for each element. * [*transition*.on](https://github.com/d3/d3-transition/blob/v1.3.2/README.md#transition_on) - add or remove transition event listeners. * [*transition*.end](https://github.com/d3/d3-transition/blob/v1.3.2/README.md#transition_on) - await the end of a transition. * [*transition*.attr](https://github.com/d3/d3-transition/blob/v1.3.2/README.md#transition_attr) - tween the given attribute using the default interpolator. * [*transition*.attrTween](https://github.com/d3/d3-transition/blob/v1.3.2/README.md#transition_attrTween) - tween the given attribute using a custom interpolator. * [*transition*.style](https://github.com/d3/d3-transition/blob/v1.3.2/README.md#transition_style) - tween the given style property using the default interpolator. * [*transition*.styleTween](https://github.com/d3/d3-transition/blob/v1.3.2/README.md#transition_styleTween) - tween the given style property using a custom interpolator. * [*transition*.text](https://github.com/d3/d3-transition/blob/v1.3.2/README.md#transition_text) - set the text content when the transition starts. * [*transition*.textTween](https://github.com/d3/d3-transition/blob/v1.3.2/README.md#transition_textTween) - tween the text using a custom interpolator. * [*transition*.remove](https://github.com/d3/d3-transition/blob/v1.3.2/README.md#transition_remove) - remove the selected elements when the transition ends. * [*transition*.tween](https://github.com/d3/d3-transition/blob/v1.3.2/README.md#transition_tween) - run custom code during the transition. * [*transition*.delay](https://github.com/d3/d3-transition/blob/v1.3.2/README.md#transition_delay) - specify per-element delay in milliseconds. * [*transition*.duration](https://github.com/d3/d3-transition/blob/v1.3.2/README.md#transition_duration) - specify per-element duration in milliseconds. * [*transition*.ease](https://github.com/d3/d3-transition/blob/v1.3.2/README.md#transition_ease) - specify the easing function. * [d3.active](https://github.com/d3/d3-transition/blob/v1.3.2/README.md#active) - select the active transition for a given node. * [d3.interrupt](https://github.com/d3/d3-transition/blob/v1.3.2/README.md#interrupt) - interrupt the active transition for a given node. ## [Voronoi Diagrams (d3-voronoi)](https://github.com/d3/d3-voronoi/tree/v1.1.4) Compute the Voronoi diagram of a given set of points. * [d3.voronoi](https://github.com/d3/d3-voronoi/blob/v1.1.4/README.md#voronoi) - create a new Voronoi generator. * [*voronoi*](https://github.com/d3/d3-voronoi/blob/v1.1.4/README.md#_voronoi) - generate a new Voronoi diagram for the given points. * [*voronoi*.polygons](https://github.com/d3/d3-voronoi/blob/v1.1.4/README.md#voronoi_polygons) - compute the Voronoi polygons for the given points. * [*voronoi*.triangles](https://github.com/d3/d3-voronoi/blob/v1.1.4/README.md#voronoi_triangles) - compute the Delaunay triangles for the given points. * [*voronoi*.links](https://github.com/d3/d3-voronoi/blob/v1.1.4/README.md#voronoi_links) - compute the Delaunay links for the given points. * [*voronoi*.x](https://github.com/d3/d3-voronoi/blob/v1.1.4/README.md#voronoi_x) - set the *x* accessor. * [*voronoi*.y](https://github.com/d3/d3-voronoi/blob/v1.1.4/README.md#voronoi_y) - set the *y* accessor. * [*voronoi*.extent](https://github.com/d3/d3-voronoi/blob/v1.1.4/README.md#voronoi_extent) - set the observed extent of points. * [*voronoi*.size](https://github.com/d3/d3-voronoi/blob/v1.1.4/README.md#voronoi_size) - set the observed extent of points. * [*diagram*.polygons](https://github.com/d3/d3-voronoi/blob/v1.1.4/README.md#diagram_polygons) - compute the polygons for this Voronoi diagram. * [*diagram*.triangles](https://github.com/d3/d3-voronoi/blob/v1.1.4/README.md#diagram_triangles) - compute the triangles for this Voronoi diagram. * [*diagram*.links](https://github.com/d3/d3-voronoi/blob/v1.1.4/README.md#diagram_links) - compute the links for this Voronoi diagram. * [*diagram*.find](https://github.com/d3/d3-voronoi/blob/v1.1.4/README.md#diagram_find) - find the closest point in this Voronoi diagram. ## [Zooming (d3-zoom)](https://github.com/d3/d3-zoom/tree/v1.8.3) Pan and zoom SVG, HTML or Canvas using mouse or touch input. * [d3.zoom](https://github.com/d3/d3-zoom/blob/v1.8.3/README.md#zoom) - create a zoom behavior. * [*zoom*](https://github.com/d3/d3-zoom/blob/v1.8.3/README.md#_zoom) - apply the zoom behavior to the selected elements. * [*zoom*.transform](https://github.com/d3/d3-zoom/blob/v1.8.3/README.md#zoom_transform) - change the transform for the selected elements. * [*zoom*.translateTo](https://github.com/d3/d3-zoom/blob/v1.8.3/README.md#zoom_translateTo) - translate the transform for the selected elements. * [*zoom*.translateBy](https://github.com/d3/d3-zoom/blob/v1.8.3/README.md#zoom_translateBy) - translate the transform for the selected elements. * [*zoom*.scaleBy](https://github.com/d3/d3-zoom/blob/v1.8.3/README.md#zoom_scaleBy) - scale the transform for the selected elements. * [*zoom*.scaleTo](https://github.com/d3/d3-zoom/blob/v1.8.3/README.md#zoom_scaleTo) - scale the transform for the selected elements. * [*zoom*.filter](https://github.com/d3/d3-zoom/blob/v1.8.3/README.md#zoom_filter) - control which input events initiate zooming. * [*zoom*.touchable](https://github.com/d3/d3-zoom/blob/v1.8.3/README.md#zoom_touchable) - set the touch support detector. * [*zoom*.wheelDelta](https://github.com/d3/d3-zoom/blob/v1.8.3/README.md#zoom_wheelDelta) - override scaling for wheel events. * [*zoom*.clickDistance](https://github.com/d3/d3-zoom/blob/v1.8.3/README.md#zoom_clickDistance) - set the click distance threshold. * [*zoom*.extent](https://github.com/d3/d3-zoom/blob/v1.8.3/README.md#zoom_extent) - set the extent of the viewport. * [*zoom*.scaleExtent](https://github.com/d3/d3-zoom/blob/v1.8.3/README.md#zoom_scaleExtent) - set the allowed scale range. * [*zoom*.translateExtent](https://github.com/d3/d3-zoom/blob/v1.8.3/README.md#zoom_translateExtent) - set the extent of the zoomable world. * [*zoom*.constrain](https://github.com/d3/d3-zoom/blob/v1.8.3/README.md#zoom_constrain) - override the transform constraint logic. * [*zoom*.duration](https://github.com/d3/d3-zoom/blob/v1.8.3/README.md#zoom_duration) - set the duration of zoom transitions. * [*zoom*.interpolate](https://github.com/d3/d3-zoom/blob/v1.8.3/README.md#zoom_interpolate) - control the interpolation of zoom transitions. * [*zoom*.on](https://github.com/d3/d3-zoom/blob/v1.8.3/README.md#zoom_on) - listen for zoom events. * [d3.zoomTransform](https://github.com/d3/d3-zoom/blob/v1.8.3/README.md#zoomTransform) - get the zoom transform for a given element. * [*transform*.scale](https://github.com/d3/d3-zoom/blob/v1.8.3/README.md#transform_scale) - scale a transform by the specified amount. * [*transform*.translate](https://github.com/d3/d3-zoom/blob/v1.8.3/README.md#transform_translate) - translate a transform by the specified amount. * [*transform*.apply](https://github.com/d3/d3-zoom/blob/v1.8.3/README.md#transform_apply) - apply the transform to the given point. * [*transform*.applyX](https://github.com/d3/d3-zoom/blob/v1.8.3/README.md#transform_applyX) - apply the transform to the given *x*-coordinate. * [*transform*.applyY](https://github.com/d3/d3-zoom/blob/v1.8.3/README.md#transform_applyY) - apply the transform to the given *y*-coordinate. * [*transform*.invert](https://github.com/d3/d3-zoom/blob/v1.8.3/README.md#transform_invert) - unapply the transform to the given point. * [*transform*.invertX](https://github.com/d3/d3-zoom/blob/v1.8.3/README.md#transform_invertX) - unapply the transform to the given *x*-coordinate. * [*transform*.invertY](https://github.com/d3/d3-zoom/blob/v1.8.3/README.md#transform_invertY) - unapply the transform to the given *y*-coordinate. * [*transform*.rescaleX](https://github.com/d3/d3-zoom/blob/v1.8.3/README.md#transform_rescaleX) - apply the transform to an *x*-scale’s domain. * [*transform*.rescaleY](https://github.com/d3/d3-zoom/blob/v1.8.3/README.md#transform_rescaleY) - apply the transform to a *y*-scale’s domain. * [*transform*.toString](https://github.com/d3/d3-zoom/blob/v1.8.3/README.md#transform_toString) - format the transform as an SVG transform string. * [d3.zoomIdentity](https://github.com/d3/d3-zoom/blob/v1.8.3/README.md#zoomIdentity) - the identity transform. ================================================ FILE: inst/www/d3/v5/CHANGES.md ================================================ # Changes in D3 5.0 [Released March 22, 2018.](https://github.com/d3/d3/releases/tag/v5.0.0) *This document covers only major changes. For minor and patch changes, please see the [release notes](https://github.com/d3/d3/releases).* D3 5.0 introduces only a few non-backwards-compatible changes. D3 now uses [Promises](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Using_promises) instead of asynchronous callbacks to load data. Promises simplify the structure of asynchronous code, especially in modern browsers that support [async and await](https://javascript.info/async-await). (See this [introduction to promises](https://observablehq.com/@observablehq/introduction-to-promises) on [Observable](https://observablehq.com).) For example, to load a CSV file in v4, you might say: ```js d3.csv("file.csv", function(error, data) { if (error) throw error; console.log(data); }); ``` In v5, using promises: ```js d3.csv("file.csv").then(function(data) { console.log(data); }); ``` Note that you don’t need to rethrow the error—the promise will reject automatically, and you can *promise*.catch if desired. Using await, the code is even simpler: ```js const data = await d3.csv("file.csv"); console.log(data); ``` With the adoption of promises, D3 now uses the [Fetch API](https://fetch.spec.whatwg.org/) instead of [XMLHttpRequest](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest): the [d3-request](https://github.com/d3/d3-request) module has been replaced by [d3-fetch](https://github.com/d3/d3-fetch). Fetch supports many powerful new features, such as [streaming responses](https://observablehq.com/@mbostock/streaming-shapefiles). D3 5.0 also deprecates and removes the [d3-queue](https://github.com/d3/d3-queue) module. Use [Promise.all](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise/all) to run a batch of asynchronous tasks in parallel, or a helper library such as [p-queue](https://github.com/sindresorhus/p-queue) to [control concurrency](https://observablehq.com/@mbostock/hello-p-queue). D3 no longer provides the d3.schemeCategory20* categorical color schemes. These twenty-color schemes were flawed because their grouped design could falsely imply relationships in the data: a shared hue can imply that the encoded data are part of a group (a super-category), while relative lightness can imply order. Instead, D3 now includes [d3-scale-chromatic](https://github.com/d3/d3-scale-chromatic), which implements excellent schemes from ColorBrewer, including [categorical](https://github.com/d3/d3-scale-chromatic/blob/master/README.md#categorical), [diverging](https://github.com/d3/d3-scale-chromatic/blob/master/README.md#diverging), [sequential single-hue](https://github.com/d3/d3-scale-chromatic/blob/master/README.md#sequential-single-hue) and [sequential multi-hue](https://github.com/d3/d3-scale-chromatic/blob/master/README.md#sequential-multi-hue) schemes. These schemes are available in both discrete and continuous variants. D3 now provides implementations of [marching squares](https://observablehq.com/@d3/contours) and [density estimation](https://observablehq.com/@d3/density-contours) via [d3-contour](https://github.com/d3/d3-contour)! There are two new [d3-selection](https://github.com/d3/d3-selection) methods: [*selection*.clone](https://github.com/d3/d3-selection/blob/master/README.md#selection_clone) for inserting clones of the selected nodes, and [d3.create](https://github.com/d3/d3-selection/blob/master/README.md#create) for creating detached elements. [Geographic projections](https://github.com/d3/d3-geo) now support [*projection*.angle](https://github.com/d3/d3-geo/blob/master/README.md#projection_angle), which has enabled several fantastic new [polyhedral projections](https://github.com/d3/d3-geo-polygon) by Philippe Rivière. Lastly, D3’s [package.json](https://github.com/d3/d3/blob/master/package.json) no longer pins exact versions of the dependent D3 modules. This fixes an issue with [duplicate installs](https://github.com/d3/d3/issues/3256) of D3 modules. # Changes in D3 4.0 [Released June 28, 2016.](https://github.com/d3/d3/releases/tag/v4.0.0) D3 4.0 is modular. Instead of one library, D3 is now [many small libraries](#table-of-contents) that are designed to work together. You can pick and choose which parts to use as you see fit. Each library is maintained in its own repository, allowing decentralized ownership and independent release cycles. The default bundle combines about thirty of these microlibraries. ```html ``` As before, you can load optional plugins on top of the default bundle, such as [ColorBrewer scales](https://github.com/d3/d3-scale-chromatic): ```html ``` You are not required to use the default bundle! If you’re just using [d3-selection](https://github.com/d3/d3-selection), use it as a standalone library. Like the default bundle, you can load D3 microlibraries using vanilla script tags or RequireJS (great for HTTP/2!): ```html ``` You can also `cat` D3 microlibraries into a custom bundle, or use tools such as [Webpack](https://webpack.github.io/) and [Rollup](http://rollupjs.org/) to create [optimized bundles](https://bl.ocks.org/mbostock/bb09af4c39c79cffcde4). Custom bundles are great for applications that use a subset of D3’s features; for example, a React chart library might use D3 for scales and shapes, and React to manipulate the DOM. The D3 microlibraries are written as [ES6 modules](http://www.2ality.com/2014/09/es6-modules-final.html), and Rollup lets you pick at the symbol level to produce smaller bundles. Small files are nice, but modularity is also about making D3 more *fun*. Microlibraries are easier to understand, develop and test. They make it easier for new people to get involved and contribute. They reduce the distinction between a “core module” and a “plugin”, and increase the pace of development in D3 features. If you don’t care about modularity, you can mostly ignore this change and keep using the default bundle. However, there is one unavoidable consequence of adopting ES6 modules: every symbol in D3 4.0 now shares a flat namespace rather than the nested one of D3 3.x. For example, d3.scale.linear is now d3.scaleLinear, and d3.layout.treemap is now d3.treemap. The adoption of ES6 modules also means that D3 is now written exclusively in [strict mode](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode) and has better readability. And there have been many other significant improvements to D3’s features! (Nearly all of the code from D3 3.x has been rewritten.) These changes are covered below. ### Other Global Changes The default [UMD bundle](https://github.com/umdjs/umd) is now [anonymous](https://github.com/requirejs/requirejs/wiki/Updating-existing-libraries#register-as-an-anonymous-module-). No `d3` global is exported if AMD or CommonJS is detected. In a vanilla environment, the D3 microlibraries share the `d3` global, even if you load them independently; thus, code you write is the same whether or not you use the default bundle. (See [Let’s Make a (D3) Plugin](https://bost.ocks.org/mike/d3-plugin/) for more.) The generated bundle is no longer stored in the Git repository; Bower has been repointed to [d3-bower](https://github.com/mbostock-bower/d3-bower), and you can find the generated files on [npm](https://unpkg.com/d3) or attached to the [latest release](https://github.com/d3/d3/releases/latest). The non-minified default bundle is no longer mangled, making it more readable and preserving inline comments. To the consternation of some users, 3.x employed Unicode variable names such as λ, φ, τ and π for a concise representation of mathematical operations. A downside of this approach was that a SyntaxError would occur if you loaded the non-minified D3 using ISO-8859-1 instead of UTF-8. 3.x also used Unicode string literals, such as the SI-prefix µ for 1e-6. 4.0 uses only ASCII variable names and ASCII string literals (see [rollup-plugin-ascii](https://github.com/mbostock/rollup-plugin-ascii)), avoiding encoding problems. ### Table of Contents * [Arrays](#arrays-d3-array) * [Axes](#axes-d3-axis) * [Brushes](#brushes-d3-brush) * [Chords](#chords-d3-chord) * [Collections](#collections-d3-collection) * [Colors](#colors-d3-color) * [Dispatches](#dispatches-d3-dispatch) * [Dragging](#dragging-d3-drag) * [Delimiter-Separated Values](#delimiter-separated-values-d3-dsv) * [Easings](#easings-d3-ease) * [Forces](#forces-d3-force) * [Number Formats](#number-formats-d3-format) * [Geographies](#geographies-d3-geo) * [Hierarchies](#hierarchies-d3-hierarchy) * [Internals](#internals) * [Interpolators](#interpolators-d3-interpolate) * [Paths](#paths-d3-path) * [Polygons](#polygons-d3-polygon) * [Quadtrees](#quadtrees-d3-quadtree) * [Queues](#queues-d3-queue) * [Random Numbers](#random-numbers-d3-random) * [Requests](#requests-d3-request) * [Scales](#scales-d3-scale) * [Selections](#selections-d3-selection) * [Shapes](#shapes-d3-shape) * [Time Formats](#time-formats-d3-time-format) * [Time Intervals](#time-intervals-d3-time) * [Timers](#timers-d3-timer) * [Transitions](#transitions-d3-transition) * [Voronoi Diagrams](#voronoi-diagrams-d3-voronoi) * [Zooming](#zooming-d3-zoom) ## [Arrays (d3-array)](https://github.com/d3/d3-array/blob/master/README.md) The new [d3.scan](https://github.com/d3/d3-array/blob/master/README.md#scan) method performs a linear scan of an array, returning the index of the least element according to the specified comparator. This is similar to [d3.min](https://github.com/d3/d3-array/blob/master/README.md#min) and [d3.max](https://github.com/d3/d3-array/blob/master/README.md#max), except you can use it to find the position of an extreme element, rather than just calculate an extreme value. ```js var data = [ {name: "Alice", value: 2}, {name: "Bob", value: 3}, {name: "Carol", value: 1}, {name: "Dwayne", value: 5} ]; var i = d3.scan(data, function(a, b) { return a.value - b.value; }); // 2 data[i]; // {name: "Carol", value: 1} ``` The new [d3.ticks](https://github.com/d3/d3-array/blob/master/README.md#ticks) and [d3.tickStep](https://github.com/d3/d3-array/blob/master/README.md#tickStep) methods are useful for generating human-readable numeric ticks. These methods are a low-level alternative to [*continuous*.ticks](https://github.com/d3/d3-scale/blob/master/README.md#continuous_ticks) from [d3-scale](https://github.com/d3/d3-scale). The new implementation is also more accurate, returning the optimal number of ticks as measured by relative error. ```js var ticks = d3.ticks(0, 10, 5); // [0, 2, 4, 6, 8, 10] ``` The [d3.range](https://github.com/d3/d3-array/blob/master/README.md#range) method no longer makes an elaborate attempt to avoid floating-point error when *step* is not an integer. The returned values are strictly defined as *start* + *i* \* *step*, where *i* is an integer. (Learn more about [floating point math](http://0.30000000000000004.com/).) d3.range returns the empty array for infinite ranges, rather than throwing an error. The method signature for optional accessors has been changed to be more consistent with array methods such as [*array*.forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach): the accessor is passed the current element (*d*), the index (*i*), and the array (*data*), with *this* as undefined. This affects [d3.min](https://github.com/d3/d3-array/blob/master/README.md#min), [d3.max](https://github.com/d3/d3-array/blob/master/README.md#max), [d3.extent](https://github.com/d3/d3-array/blob/master/README.md#extent), [d3.sum](https://github.com/d3/d3-array/blob/master/README.md#sum), [d3.mean](https://github.com/d3/d3-array/blob/master/README.md#mean), [d3.median](https://github.com/d3/d3-array/blob/master/README.md#median), [d3.quantile](https://github.com/d3/d3-array/blob/master/README.md#quantile), [d3.variance](https://github.com/d3/d3-array/blob/master/README.md#variance) and [d3.deviation](https://github.com/d3/d3-array/blob/master/README.md#deviation). The [d3.quantile](https://github.com/d3/d3-array/blob/master/README.md#quantile) method previously did not take an accessor. Some methods with optional arguments now treat those arguments as missing if they are null or undefined, rather than strictly checking arguments.length. The new [d3.histogram](https://github.com/d3/d3-array/blob/master/README.md#histograms) API replaces d3.layout.histogram. Rather than exposing *bin*.x and *bin*.dx on each returned bin, the histogram exposes *bin*.x0 and *bin*.x1, guaranteeing that *bin*.x0 is exactly equal to *bin*.x1 on the preceding bin. The “frequency” and “probability” modes are no longer supported; each bin is simply an array of elements from the input data, so *bin*.length is equal to D3 3.x’s *bin*.y in frequency mode. To compute a probability distribution, divide the number of elements in each bin by the total number of elements. The *histogram*.range method has been renamed [*histogram*.domain](https://github.com/d3/d3-array/blob/master/README.md#histogram_domain) for consistency with scales. The *histogram*.bins method has been renamed [*histogram*.thresholds](https://github.com/d3/d3-array/blob/master/README.md#histogram_thresholds), and no longer accepts an upper value: *n* thresholds will produce *n* + 1 bins. If you specify a desired number of bins rather than thresholds, d3.histogram now uses [d3.ticks](https://github.com/d3/d3-array/blob/master/README.md#ticks) to compute nice bin thresholds. In addition to the default Sturges’ formula, D3 now implements the [Freedman-Diaconis rule](https://github.com/d3/d3-array/blob/master/README.md#thresholdFreedmanDiaconis) and [Scott’s normal reference rule](https://github.com/d3/d3-array/blob/master/README.md#thresholdScott). ## [Axes (d3-axis)](https://github.com/d3/d3-axis/blob/master/README.md) To render axes properly in D3 3.x, you needed to style them: ```html ``` If you didn’t, you saw this: D3 4.0 provides default styles and shorter syntax. In place of d3.svg.axis and *axis*.orient, D3 4.0 now provides four constructors for each orientation: [d3.axisTop](https://github.com/d3/d3-axis/blob/master/README.md#axisTop), [d3.axisRight](https://github.com/d3/d3-axis/blob/master/README.md#axisRight), [d3.axisBottom](https://github.com/d3/d3-axis/blob/master/README.md#axisBottom), [d3.axisLeft](https://github.com/d3/d3-axis/blob/master/README.md#axisLeft). These constructors accept a scale, so you can reduce all of the above to: ```html ``` And get this: As before, you can customize the axis appearance either by applying stylesheets or by modifying the axis elements. The default appearance has been changed slightly to offset the axis by a half-pixel; this fixes a crisp-edges rendering issue on Safari where the axis would be drawn two-pixels thick. There’s now an [*axis*.tickArguments](https://github.com/d3/d3-axis/blob/master/README.md#axis_tickArguments) method, as an alternative to [*axis*.ticks](https://github.com/d3/d3-axis/blob/master/README.md#axis_ticks) that also allows the axis tick arguments to be inspected. The [*axis*.tickSize](https://github.com/d3/d3-axis/blob/master/README.md#axis_tickSize) method has been changed to only allow a single argument when setting the tick size. The *axis*.innerTickSize and *axis*.outerTickSize methods have been renamed [*axis*.tickSizeInner](https://github.com/d3/d3-axis/blob/master/README.md#axis_tickSizeInner) and [*axis*.tickSizeOuter](https://github.com/d3/d3-axis/blob/master/README.md#axis_tickSizeOuter), respectively. ## [Brushes (d3-brush)](https://github.com/d3/d3-brush/blob/master/README.md) Replacing d3.svg.brush, there are now three classes of brush for brushing along the *x*-dimension, the *y*-dimension, or both: [d3.brushX](https://github.com/d3/d3-brush/blob/master/README.md#brushX), [d3.brushY](https://github.com/d3/d3-brush/blob/master/README.md#brushY), [d3.brush](https://github.com/d3/d3-brush/blob/master/README.md#brush). Brushes are no longer dependent on [scales](#scales-d3-scale); instead, each brush defines a selection in screen coordinates. This selection can be [inverted](https://github.com/d3/d3-scale/blob/master/README.md#continuous_invert) if you want to compute the corresponding data domain. And rather than rely on the scales’ ranges to determine the brushable area, there is now a [*brush*.extent](https://github.com/d3/d3-brush/blob/master/README.md#brush_extent) method for setting it. If you do not set the brush extent, it defaults to the full extent of the owner SVG element. The *brush*.clamp method has also been eliminated; brushing is always restricted to the brushable area defined by the brush extent. Brushes no longer store the active brush selection (*i.e.*, the highlighted region; the brush’s position) internally. The brush’s position is now stored on any elements to which the brush has been applied. The brush’s position is available as *event*.selection within a brush event or by calling [d3.brushSelection](https://github.com/d3/d3-brush/blob/master/README.md#brushSelection) on a given *element*. To move the brush programmatically, use [*brush*.move](https://github.com/d3/d3-brush/blob/master/README.md#brush_move) with a given [selection](#selections-d3-selection) or [transition](#transitions-d3-transition); see the [brush snapping example](https://bl.ocks.org/mbostock/6232537). The *brush*.event method has been removed. Brush interaction has been improved. By default, brushes now ignore right-clicks intended for the context menu; you can change this behavior using [*brush*.filter](https://github.com/d3/d3-brush/blob/master/README.md#brush_filter). Brushes also ignore emulated mouse events on iOS. Holding down SHIFT (⇧) while brushing locks the *x*- or *y*-position of the brush. Holding down META (⌘) while clicking and dragging starts a new selection, rather than translating the existing selection. The default appearance of the brush has also been improved and slightly simplified. Previously it was necessary to apply styles to the brush to give it a reasonable appearance, such as: ```css .brush .extent { stroke: #fff; fill-opacity: .125; shape-rendering: crispEdges; } ``` These styles are now applied by default as attributes; if you want to customize the brush appearance, you can still apply external styles or modify the brush elements. (D3 4.0 features a similar improvement to [axes](#axes-d3-axis).) A new [*brush*.handleSize](https://github.com/d3/d3-brush/blob/master/README.md#brush_handleSize) method lets you override the brush handle size; it defaults to six pixels. The brush now consumes handled events, making it easier to combine with other interactive behaviors such as [dragging](#dragging-d3-drag) and [zooming](#zooming-d3-zoom). The *brushstart* and *brushend* events have been renamed to *start* and *end*, respectively. The brush event no longer reports a *event*.mode to distinguish between resizing and dragging the brush. ## [Chords (d3-chord)](https://github.com/d3/d3-chord/blob/master/README.md) Pursuant to the great namespace flattening: * d3.layout.chord ↦ [d3.chord](https://github.com/d3/d3-chord/blob/master/README.md#chord) * d3.svg.chord ↦ [d3.ribbon](https://github.com/d3/d3-chord/blob/master/README.md#ribbon) For consistency with [*arc*.padAngle](https://github.com/d3/d3-shape/blob/master/README.md#arc_padAngle), *chord*.padding has also been renamed to [*ribbon*.padAngle](https://github.com/d3/d3-chord/blob/master/README.md#ribbon_padAngle). A new [*ribbon*.context](https://github.com/d3/d3-chord/blob/master/README.md#ribbon_context) method lets you render chord diagrams to Canvas! See also [d3-path](#paths-d3-path). ## [Collections (d3-collection)](https://github.com/d3/d3-collection/blob/master/README.md) The [d3.set](https://github.com/d3/d3-collection/blob/master/README.md#set) constructor now accepts an existing set for making a copy. If you pass an array to d3.set, you can also pass a value accessor. This accessor takes the standard arguments: the current element (*d*), the index (*i*), and the array (*data*), with *this* undefined. For example: ```js var yields = [ {yield: 22.13333, variety: "Manchuria", year: 1932, site: "Grand Rapids"}, {yield: 26.76667, variety: "Peatland", year: 1932, site: "Grand Rapids"}, {yield: 28.10000, variety: "No. 462", year: 1931, site: "Duluth"}, {yield: 38.50000, variety: "Svansota", year: 1932, site: "Waseca"}, {yield: 40.46667, variety: "Svansota", year: 1931, site: "Crookston"}, {yield: 36.03333, variety: "Peatland", year: 1932, site: "Waseca"}, {yield: 34.46667, variety: "Wisconsin No. 38", year: 1931, site: "Grand Rapids"} ]; var sites = d3.set(yields, function(d) { return d.site; }); // Grand Rapids, Duluth, Waseca, Crookston ``` The [d3.map](https://github.com/d3/d3-collection/blob/master/README.md#map) constructor also follows the standard array accessor argument pattern. The *map*.forEach and *set*.forEach methods have been renamed to [*map*.each](https://github.com/d3/d3-collection/blob/master/README.md#map_each) and [*set*.each](https://github.com/d3/d3-collection/blob/master/README.md#set_each) respectively. The order of arguments for *map*.each has also been changed to *value*, *key* and *map*, while the order of arguments for *set*.each is now *value*, *value* and *set*. This is closer to ES6 [*map*.forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/forEach) and [*set*.forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/forEach). Also like ES6 Map and Set, *map*.set and *set*.add now return the current collection (rather than the added value) to facilitate method chaining. New [*map*.clear](https://github.com/d3/d3-collection/blob/master/README.md#map_clear) and [*set*.clear](https://github.com/d3/d3-collection/blob/master/README.md#set_clear) methods can be used to empty collections. The [*nest*.map](https://github.com/d3/d3-collection/blob/master/README.md#nest_map) method now always returns a d3.map instance. For a plain object, use [*nest*.object](https://github.com/d3/d3-collection/blob/master/README.md#nest_object) instead. When used in conjunction with [*nest*.rollup](https://github.com/d3/d3-collection/blob/master/README.md#nest_rollup), [*nest*.entries](https://github.com/d3/d3-collection/blob/master/README.md#nest_entries) now returns {key, value} objects for the leaf entries, instead of {key, values}. This makes *nest*.rollup easier to use in conjunction with [hierarchies](#hierarchies-d3-hierarchy), as in this [Nest Treemap example](https://bl.ocks.org/mbostock/2838bf53e0e65f369f476afd653663a2). ## [Colors (d3-color)](https://github.com/d3/d3-color/blob/master/README.md) All colors now have opacity exposed as *color*.opacity, which is a number in [0, 1]. You can pass an optional opacity argument to the color space constructors [d3.rgb](https://github.com/d3/d3-color/blob/master/README.md#rgb), [d3.hsl](https://github.com/d3/d3-color/blob/master/README.md#hsl), [d3.lab](https://github.com/d3/d3-color/blob/master/README.md#lab), [d3.hcl](https://github.com/d3/d3-color/blob/master/README.md#hcl) or [d3.cubehelix](https://github.com/d3/d3-color/blob/master/README.md#cubehelix). You can now parse rgba(…) and hsla(…) CSS color specifiers or the string “transparent” using [d3.color](https://github.com/d3/d3-color/blob/master/README.md#color). The “transparent” color is defined as an RGB color with zero opacity and undefined red, green and blue channels; this differs slightly from CSS which defines it as transparent black, but is useful for simplifying color interpolation logic where either the starting or ending color has undefined channels. The [*color*.toString](https://github.com/d3/d3-color/blob/master/README.md#color_toString) method now likewise returns an rgb(…) or rgba(…) string with integer channel values, not the hexadecimal RGB format, consistent with CSS computed values. This improves performance by short-circuiting transitions when the element’s starting style matches its ending style. The new [d3.color](https://github.com/d3/d3-color/blob/master/README.md#color) method is the primary method for parsing colors: it returns a d3.color instance in the appropriate color space, or null if the CSS color specifier is invalid. For example: ```js var red = d3.color("hsl(0, 80%, 50%)"); // {h: 0, l: 0.5, s: 0.8, opacity: 1} ``` The parsing implementation is now more robust. For example, you can no longer mix integers and percentages in rgb(…), and it correctly handles whitespace, decimal points, number signs, and other edge cases. The color space constructors d3.rgb, d3.hsl, d3.lab, d3.hcl and d3.cubehelix now always return a copy of the input color, converted to the corresponding color space. While [*color*.rgb](https://github.com/d3/d3-color/blob/master/README.md#color_rgb) remains, *rgb*.hsl has been removed; use d3.hsl to convert a color to the RGB color space. The RGB color space no longer greedily quantizes and clamps channel values when creating colors, improving accuracy in color space conversion. Quantization and clamping now occurs in *color*.toString when formatting a color for display. You can use the new [*color*.displayable](https://github.com/d3/d3-color/blob/master/README.md#color_displayable) to test whether a color is [out-of-gamut](https://en.wikipedia.org/wiki/Gamut). The [*rgb*.brighter](https://github.com/d3/d3-color/blob/master/README.md#rgb_brighter) method no longer special-cases black. This is a multiplicative operator, defining a new color *r*′, *g*′, *b*′ where *r*′ = *r* × *pow*(0.7, *k*), *g*′ = *g* × *pow*(0.7, *k*) and *b*′ = *b* × *pow*(0.7, *k*); a brighter black is still black. There’s a new [d3.cubehelix](https://github.com/d3/d3-color/blob/master/README.md#cubehelix) color space, generalizing Dave Green’s color scheme! (See also [d3.interpolateCubehelixDefault](https://github.com/d3/d3-scale/blob/master/README.md#interpolateCubehelixDefault) from [d3-scale](#scales-d3-scale).) You can continue to define your own custom color spaces, too; see [d3-hsv](https://github.com/d3/d3-hsv) for an example. ## [Dispatches (d3-dispatch)](https://github.com/d3/d3-dispatch/blob/master/README.md) Rather than decorating the *dispatch* object with each event type, the dispatch object now exposes generic [*dispatch*.call](https://github.com/d3/d3-dispatch/blob/master/README.md#dispatch_call) and [*dispatch*.apply](https://github.com/d3/d3-dispatch/blob/master/README.md#dispatch_apply) methods which take the *type* string as the first argument. For example, in D3 3.x, you might say: ```js dispatcher.foo.call(that, "Hello, Foo!"); ``` To dispatch a *foo* event in D3 4.0, you’d say: ```js dispatcher.call("foo", that, "Hello, Foo!"); ``` The [*dispatch*.on](https://github.com/d3/d3-dispatch/blob/master/README.md#dispatch_on) method now accepts multiple typenames, allowing you to add or remove listeners for multiple events simultaneously. For example, to send both *foo* and *bar* events to the same listener: ```js dispatcher.on("foo bar", function(message) { console.log(message); }); ``` This matches the new behavior of [*selection*.on](https://github.com/d3/d3-selection/blob/master/README.md#selection_on) in [d3-selection](#selections-d3-selection). The *dispatch*.on method now validates that the specifier *listener* is a function, rather than throwing an error in the future. The new implementation d3.dispatch is faster, using fewer closures to improve performance. There’s also a new [*dispatch*.copy](https://github.com/d3/d3-dispatch/blob/master/README.md#dispatch_copy) method for making a copy of a dispatcher; this is used by [d3-transition](#transitions-d3-transition) to improve the performance of transitions in the common case where all elements in a transition have the same transition event listeners. ## [Dragging (d3-drag)](https://github.com/d3/d3-drag/blob/master/README.md) The drag behavior d3.behavior.drag has been renamed to d3.drag. The *drag*.origin method has been replaced by [*drag*.subject](https://github.com/d3/d3-drag/blob/master/README.md#drag_subject), which allows you to define the thing being dragged at the start of a drag gesture. This is particularly useful with Canvas, where draggable objects typically share a Canvas element (as opposed to SVG, where draggable objects typically have distinct DOM elements); see the [circle dragging example](https://bl.ocks.org/mbostock/444757cc9f0fde320a5f469cd36860f4). A new [*drag*.container](https://github.com/d3/d3-drag/blob/master/README.md#drag_container) method lets you override the parent element that defines the drag gesture coordinate system. This defaults to the parent node of the element to which the drag behavior was applied. For dragging on Canvas elements, you probably want to use the Canvas element as the container. [Drag events](https://github.com/d3/d3-drag/blob/master/README.md#drag-events) now expose an [*event*.on](https://github.com/d3/d3-drag/blob/master/README.md#event_on) method for registering temporary listeners for duration of the current drag gesture; these listeners can capture state for the current gesture, such as the thing being dragged. A new *event*.active property lets you detect whether multiple (multitouch) drag gestures are active concurrently. The *dragstart* and *dragend* events have been renamed to *start* and *end*. By default, drag behaviors now ignore right-clicks intended for the context menu; use [*drag*.filter](https://github.com/d3/d3-drag/blob/master/README.md#drag_filter) to control which events are ignored. The drag behavior also ignores emulated mouse events on iOS. The drag behavior now consumes handled events, making it easier to combine with other interactive behaviors such as [zooming](#zooming-d3-zoom). The new [d3.dragEnable](https://github.com/d3/d3-drag/blob/master/README.md#dragEnable) and [d3.dragDisable](https://github.com/d3/d3-drag/blob/master/README.md#dragDisable) methods provide a low-level API for implementing drag gestures across browsers and devices. These methods are also used by other D3 components, such as the [brush](#brushes-d3-brush). ## [Delimiter-Separated Values (d3-dsv)](https://github.com/d3/d3-dsv/blob/master/README.md) Pursuant to the great namespace flattening, various CSV and TSV methods have new names: * d3.csv.parse ↦ [d3.csvParse](https://github.com/d3/d3-dsv/blob/master/README.md#csvParse) * d3.csv.parseRows ↦ [d3.csvParseRows](https://github.com/d3/d3-dsv/blob/master/README.md#csvParseRows) * d3.csv.format ↦ [d3.csvFormat](https://github.com/d3/d3-dsv/blob/master/README.md#csvFormat) * d3.csv.formatRows ↦ [d3.csvFormatRows](https://github.com/d3/d3-dsv/blob/master/README.md#csvFormatRows) * d3.tsv.parse ↦ [d3.tsvParse](https://github.com/d3/d3-dsv/blob/master/README.md#tsvParse) * d3.tsv.parseRows ↦ [d3.tsvParseRows](https://github.com/d3/d3-dsv/blob/master/README.md#tsvParseRows) * d3.tsv.format ↦ [d3.tsvFormat](https://github.com/d3/d3-dsv/blob/master/README.md#tsvFormat) * d3.tsv.formatRows ↦ [d3.tsvFormatRows](https://github.com/d3/d3-dsv/blob/master/README.md#tsvFormatRows) The [d3.csv](https://github.com/d3/d3-request/blob/master/README.md#csv) and [d3.tsv](https://github.com/d3/d3-request/blob/master/README.md#tsv) methods for loading files of the corresponding formats have not been renamed, however! Those are defined in [d3-request](#requests-d3-request).There’s no longer a d3.dsv method, which served the triple purpose of defining a DSV formatter, a DSV parser and a DSV requestor; instead, there’s just [d3.dsvFormat](https://github.com/d3/d3-dsv/blob/master/README.md#dsvFormat) which you can use to define a DSV formatter and parser. You can use [*request*.response](https://github.com/d3/d3-request/blob/master/README.md#request_response) to make a request and then parse the response body, or just use [d3.text](https://github.com/d3/d3-request/blob/master/README.md#text). The [*dsv*.parse](https://github.com/d3/d3-dsv/blob/master/README.md#dsv_parse) method now exposes the column names and their input order as *data*.columns. For example: ```js d3.csv("cars.csv", function(error, data) { if (error) throw error; console.log(data.columns); // ["Year", "Make", "Model", "Length"] }); ``` You can likewise pass an optional array of column names to [*dsv*.format](https://github.com/d3/d3-dsv/blob/master/README.md#dsv_format) to format only a subset of columns, or to specify the column order explicitly: ```js var string = d3.csvFormat(data, ["Year", "Model", "Length"]); ``` The parser is a bit faster and the formatter is a bit more robust: inputs are coerced to strings before formatting, fixing an obscure crash, and deprecated support for falling back to [*dsv*.formatRows](https://github.com/d3/d3-dsv/blob/master/README.md#dsv_formatRows) when the input *data* is an array of arrays has been removed. ## [Easings (d3-ease)](https://github.com/d3/d3-ease/blob/master/README.md) D3 3.x used strings, such as “cubic-in-out”, to identify easing methods; these strings could be passed to d3.ease or *transition*.ease. D3 4.0 uses symbols instead, such as [d3.easeCubicInOut](https://github.com/d3/d3-ease/blob/master/README.md#easeCubicInOut). Symbols are simpler and cleaner. They work well with Rollup to produce smaller custom bundles. You can still define your own custom easing function, too, if desired. Here’s the full list of equivalents: * linear ↦ [d3.easeLinear](https://github.com/d3/d3-ease/blob/master/README.md#easeLinear)¹ * linear-in ↦ [d3.easeLinear](https://github.com/d3/d3-ease/blob/master/README.md#easeLinear)¹ * linear-out ↦ [d3.easeLinear](https://github.com/d3/d3-ease/blob/master/README.md#easeLinear)¹ * linear-in-out ↦ [d3.easeLinear](https://github.com/d3/d3-ease/blob/master/README.md#easeLinear)¹ * linear-out-in ↦ [d3.easeLinear](https://github.com/d3/d3-ease/blob/master/README.md#easeLinear)¹ * poly-in ↦ [d3.easePolyIn](https://github.com/d3/d3-ease/blob/master/README.md#easePolyIn) * poly-out ↦ [d3.easePolyOut](https://github.com/d3/d3-ease/blob/master/README.md#easePolyOut) * poly-in-out ↦ [d3.easePolyInOut](https://github.com/d3/d3-ease/blob/master/README.md#easePolyInOut) * poly-out-in ↦ REMOVED² * quad-in ↦ [d3.easeQuadIn](https://github.com/d3/d3-ease/blob/master/README.md#easeQuadIn) * quad-out ↦ [d3.easeQuadOut](https://github.com/d3/d3-ease/blob/master/README.md#easeQuadOut) * quad-in-out ↦ [d3.easeQuadInOut](https://github.com/d3/d3-ease/blob/master/README.md#easeQuadInOut) * quad-out-in ↦ REMOVED² * cubic-in ↦ [d3.easeCubicIn](https://github.com/d3/d3-ease/blob/master/README.md#easeCubicIn) * cubic-out ↦ [d3.easeCubicOut](https://github.com/d3/d3-ease/blob/master/README.md#easeCubicOut) * cubic-in-out ↦ [d3.easeCubicInOut](https://github.com/d3/d3-ease/blob/master/README.md#easeCubicInOut) * cubic-out-in ↦ REMOVED² * sin-in ↦ [d3.easeSinIn](https://github.com/d3/d3-ease/blob/master/README.md#easeSinIn) * sin-out ↦ [d3.easeSinOut](https://github.com/d3/d3-ease/blob/master/README.md#easeSinOut) * sin-in-out ↦ [d3.easeSinInOut](https://github.com/d3/d3-ease/blob/master/README.md#easeSinInOut) * sin-out-in ↦ REMOVED² * exp-in ↦ [d3.easeExpIn](https://github.com/d3/d3-ease/blob/master/README.md#easeExpIn) * exp-out ↦ [d3.easeExpOut](https://github.com/d3/d3-ease/blob/master/README.md#easeExpOut) * exp-in-out ↦ [d3.easeExpInOut](https://github.com/d3/d3-ease/blob/master/README.md#easeExpInOut) * exp-out-in ↦ REMOVED² * circle-in ↦ [d3.easeCircleIn](https://github.com/d3/d3-ease/blob/master/README.md#easeCircleIn) * circle-out ↦ [d3.easeCircleOut](https://github.com/d3/d3-ease/blob/master/README.md#easeCircleOut) * circle-in-out ↦ [d3.easeCircleInOut](https://github.com/d3/d3-ease/blob/master/README.md#easeCircleInOut) * circle-out-in ↦ REMOVED² * elastic-in ↦ [d3.easeElasticOut](https://github.com/d3/d3-ease/blob/master/README.md#easeElasticOut)² * elastic-out ↦ [d3.easeElasticIn](https://github.com/d3/d3-ease/blob/master/README.md#easeElasticIn)² * elastic-in-out ↦ REMOVED² * elastic-out-in ↦ [d3.easeElasticInOut](https://github.com/d3/d3-ease/blob/master/README.md#easeElasticInOut)² * back-in ↦ [d3.easeBackIn](https://github.com/d3/d3-ease/blob/master/README.md#easeBackIn) * back-out ↦ [d3.easeBackOut](https://github.com/d3/d3-ease/blob/master/README.md#easeBackOut) * back-in-out ↦ [d3.easeBackInOut](https://github.com/d3/d3-ease/blob/master/README.md#easeBackInOut) * back-out-in ↦ REMOVED² * bounce-in ↦ [d3.easeBounceOut](https://github.com/d3/d3-ease/blob/master/README.md#easeBounceOut)² * bounce-out ↦ [d3.easeBounceIn](https://github.com/d3/d3-ease/blob/master/README.md#easeBounceIn)² * bounce-in-out ↦ REMOVED² * bounce-out-in ↦ [d3.easeBounceInOut](https://github.com/d3/d3-ease/blob/master/README.md#easeBounceInOut)² ¹ The -in, -out and -in-out variants of linear easing are identical, so there’s just d3.easeLinear.
    ² Elastic and bounce easing were inadvertently reversed in 3.x, so 4.0 eliminates -out-in easing! For convenience, there are also default aliases for each easing method. For example, [d3.easeCubic](https://github.com/d3/d3-ease/blob/master/README.md#easeCubic) is an alias for [d3.easeCubicInOut](https://github.com/d3/d3-ease/blob/master/README.md#easeCubicInOut). Most default to -in-out; the exceptions are [d3.easeBounce](https://github.com/d3/d3-ease/blob/master/README.md#easeBounce) and [d3.easeElastic](https://github.com/d3/d3-ease/blob/master/README.md#easeElastic), which default to -out. Rather than pass optional arguments to d3.ease or *transition*.ease, parameterizable easing functions now have named parameters: [*poly*.exponent](https://github.com/d3/d3-ease/blob/master/README.md#poly_exponent), [*elastic*.amplitude](https://github.com/d3/d3-ease/blob/master/README.md#elastic_amplitude), [*elastic*.period](https://github.com/d3/d3-ease/blob/master/README.md#elastic_period) and [*back*.overshoot](https://github.com/d3/d3-ease/blob/master/README.md#back_overshoot). For example, in D3 3.x you might say: ```js var e = d3.ease("elastic-out-in", 1.2); ``` The equivalent in D3 4.0 is: ```js var e = d3.easeElastic.amplitude(1.2); ``` Many of the easing functions have been optimized for performance and accuracy. Several bugs have been fixed, as well, such as the interpretation of the overshoot parameter for back easing, and the period parameter for elastic easing. Also, [d3-transition](#transitions-d3-transition) now explicitly guarantees that the last tick of the transition happens at exactly *t* = 1, avoiding floating point errors in some easing functions. There’s now a nice [visual reference](https://github.com/d3/d3-ease/blob/master/README.md) and an [animated reference](https://bl.ocks.org/mbostock/248bac3b8e354a9103c4) to the new easing functions, too! ## [Forces (d3-force)](https://github.com/d3/d3-force/blob/master/README.md) The force layout d3.layout.force has been renamed to d3.forceSimulation. The force simulation now uses [velocity Verlet integration](https://en.wikipedia.org/wiki/Verlet_integration#Velocity_Verlet) rather than position Verlet, tracking the nodes’ positions (*node*.x, *node*.y) and velocities (*node*.vx, *node*.vy) rather than their previous positions (*node*.px, *node*.py). Rather than hard-coding a set of built-in forces, the force simulation is now extensible: you specify which forces you want! The approach affords greater flexibility through composition. The new forces are more flexible, too: force parameters can typically be configured per-node or per-link. There are separate positioning forces for [*x*](https://github.com/d3/d3-force/blob/master/README.md#forceX) and [*y*](https://github.com/d3/d3-force/blob/master/README.md#forceY) that replace *force*.gravity; [*x*.x](https://github.com/d3/d3-force/blob/master/README.md#x_x) and [*y*.y](https://github.com/d3/d3-force/blob/master/README.md#y_y) replace *force*.size. The new [link force](https://github.com/d3/d3-force/blob/master/README.md#forceLink) replaces *force*.linkStrength and employs better default heuristics to improve stability. The new [many-body force](https://github.com/d3/d3-force/blob/master/README.md#forceManyBody) replaces *force*.charge and supports a new [minimum-distance parameter](https://github.com/d3/d3-force/blob/master/README.md#manyBody_distanceMin) and performance improvements thanks to 4.0’s [new quadtrees](#quadtrees-d3-quadtree). There are also brand-new forces for [centering nodes](https://github.com/d3/d3-force/blob/master/README.md#forceCenter) and [collision resolution](https://github.com/d3/d3-force/blob/master/README.md#forceCollision). The new forces and simulation have been carefully crafted to avoid nondeterminism. Rather than initializing nodes randomly, if the nodes do not have preset positions, they are placed in a phyllotaxis pattern: Phyllotaxis Random jitter is still needed to resolve link, collision and many-body forces if there are coincident nodes, but at least in the common case, the force simulation (and the resulting force-directed graph layout) is now consistent across browsers and reloads. D3 no longer plays dice! The force simulation has several new methods for greater control over heating, such as [*simulation*.alphaMin](https://github.com/d3/d3-force/blob/master/README.md#simulation_alphaMin) and [*simulation*.alphaDecay](https://github.com/d3/d3-force/blob/master/README.md#simulation_alphaDecay), and the internal timer. Calling [*simulation*.alpha](https://github.com/d3/d3-force/blob/master/README.md#simulation_alpha) now has no effect on the internal timer, which is controlled independently via [*simulation*.stop](https://github.com/d3/d3-force/blob/master/README.md#simulation_stop) and [*simulation*.restart](https://github.com/d3/d3-force/blob/master/README.md#simulation_restart). The force layout’s internal timer now starts automatically on creation, removing *force*.start. As in 3.x, you can advance the simulation manually using [*simulation*.tick](https://github.com/d3/d3-force/blob/master/README.md#simulation_tick). The *force*.friction parameter is replaced by *simulation*.velocityDecay. A new [*simulation*.alphaTarget](https://github.com/d3/d3-force/blob/master/README.md#simulation_alphaTarget) method allows you to set the desired alpha (temperature) of the simulation, such that the simulation can be smoothly reheated during interaction, and then smoothly cooled again. This improves the stability of the graph during interaction. The force layout no longer depends on the [drag behavior](#dragging-d3-drag), though you can certainly create [draggable force-directed graphs](https://bl.ocks.org/mbostock/ad70335eeef6d167bc36fd3c04378048)! Set *node*.fx and *node*.fy to fix a node’s position. As an alternative to a [Voronoi](#voronoi-d3-voronoi) SVG overlay, you can now use [*simulation*.find](https://github.com/d3/d3-force/blob/master/README.md#simulation_find) to find the closest node to a pointer. ## [Number Formats (d3-format)](https://github.com/d3/d3-format/blob/master/README.md) If a precision is not specified, the formatting behavior has changed: there is now a default precision of 6 for all directives except *none*, which defaults to 12. In 3.x, if you did not specify a precision, the number was formatted using its shortest unique representation (per [*number*.toString](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString)); this could lead to unexpected digits due to [floating point math](http://0.30000000000000004.com/). The new default precision in 4.0 produces more consistent results: ```js var f = d3.format("e"); f(42); // "4.200000e+1" f(0.1 + 0.2); // "3.000000e-1" ``` To trim insignificant trailing zeroes, use the *none* directive, which is similar `g`. For example: ```js var f = d3.format(".3"); f(0.12345); // "0.123" f(0.10000); // "0.1" f(0.1 + 0.2); // "0.3" ``` Under the hood, number formatting has improved accuracy with very large and very small numbers by using [*number*.toExponential](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toExponential) rather than [Math.log](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/log) to extract the mantissa and exponent. Negative zero (-0, an IEEE 754 construct) and very small numbers that round to zero are now formatted as unsigned zero. The inherently unsafe d3.round method has been removed, along with d3.requote. The [d3.formatPrefix](https://github.com/d3/d3-format/blob/master/README.md#formatPrefix) method has been changed. Rather than returning an SI-prefix string, it returns an SI-prefix format function for a given *specifier* and reference *value*. For example, to format thousands: ```js var f = d3.formatPrefix(",.0", 1e3); f(1e3); // "1k" f(1e4); // "10k" f(1e5); // "100k" f(1e6); // "1,000k" ``` Unlike the `s` format directive, d3.formatPrefix always employs the same SI-prefix, producing consistent results: ```js var f = d3.format(".0s"); f(1e3); // "1k" f(1e4); // "10k" f(1e5); // "100k" f(1e6); // "1M" ``` The new `(` sign option uses parentheses for negative values. This is particularly useful in conjunction with `$`. For example: ```js d3.format("+.0f")(-42); // "-42" d3.format("(.0f")(-42); // "(42)" d3.format("+$.0f")(-42); // "-$42" d3.format("($.0f")(-42); // "($42)" ``` The new `=` align option places any sign and symbol to the left of any padding: ```js d3.format(">6d")(-42); // " -42" d3.format("=6d")(-42); // "- 42" d3.format(">(6d")(-42); // " (42)" d3.format("=(6d")(-42); // "( 42)" ``` The `b`, `o`, `d` and `x` directives now round to the nearest integer, rather than returning the empty string for non-integers: ```js d3.format("b")(41.9); // "101010" d3.format("o")(41.9); // "52" d3.format("d")(41.9); // "42" d3.format("x")(41.9); // "2a" ``` The `c` directive is now for character data (*i.e.*, literal strings), not for character codes. The is useful if you just want to apply padding and alignment and don’t care about formatting numbers. For example, the infamous [left-pad](http://blog.npmjs.org/post/141577284765/kik-left-pad-and-npm) (as well as center- and right-pad!) can be conveniently implemented as: ```js d3.format(">10c")("foo"); // " foo" d3.format("^10c")("foo"); // " foo " d3.format("<10c")("foo"); // "foo " ``` There are several new methods for computing suggested decimal precisions; these are used by [d3-scale](#scales-d3-scale) for tick formatting, and are helpful for implementing custom number formats: [d3.precisionFixed](https://github.com/d3/d3-format/blob/master/README.md#precisionFixed), [d3.precisionPrefix](https://github.com/d3/d3-format/blob/master/README.md#precisionPrefix) and [d3.precisionRound](https://github.com/d3/d3-format/blob/master/README.md#precisionRound). There’s also a new [d3.formatSpecifier](https://github.com/d3/d3-format/blob/master/README.md#formatSpecifier) method for parsing, validating and debugging format specifiers; it’s also good for deriving related format specifiers, such as when you want to substitute the precision automatically. You can now set the default locale using [d3.formatDefaultLocale](https://github.com/d3/d3-format/blob/master/README.md#formatDefaultLocale)! The locales are published as [JSON](https://github.com/d3/d3-request/blob/master/README.md#json) to [npm](https://unpkg.com/d3-format/locale/). ## [Geographies (d3-geo)](https://github.com/d3/d3-geo/blob/master/README.md) Pursuant to the great namespace flattening, various methods have new names: * d3.geo.graticule ↦ [d3.geoGraticule](https://github.com/d3/d3-geo/blob/master/README.md#geoGraticule) * d3.geo.circle ↦ [d3.geoCircle](https://github.com/d3/d3-geo/blob/master/README.md#geoCircle) * d3.geo.area ↦ [d3.geoArea](https://github.com/d3/d3-geo/blob/master/README.md#geoArea) * d3.geo.bounds ↦ [d3.geoBounds](https://github.com/d3/d3-geo/blob/master/README.md#geoBounds) * d3.geo.centroid ↦ [d3.geoCentroid](https://github.com/d3/d3-geo/blob/master/README.md#geoCentroid) * d3.geo.distance ↦ [d3.geoDistance](https://github.com/d3/d3-geo/blob/master/README.md#geoDistance) * d3.geo.interpolate ↦ [d3.geoInterpolate](https://github.com/d3/d3-geo/blob/master/README.md#geoInterpolate) * d3.geo.length ↦ [d3.geoLength](https://github.com/d3/d3-geo/blob/master/README.md#geoLength) * d3.geo.rotation ↦ [d3.geoRotation](https://github.com/d3/d3-geo/blob/master/README.md#geoRotation) * d3.geo.stream ↦ [d3.geoStream](https://github.com/d3/d3-geo/blob/master/README.md#geoStream) * d3.geo.path ↦ [d3.geoPath](https://github.com/d3/d3-geo/blob/master/README.md#geoPath) * d3.geo.projection ↦ [d3.geoProjection](https://github.com/d3/d3-geo/blob/master/README.md#geoProjection) * d3.geo.projectionMutator ↦ [d3.geoProjectionMutator](https://github.com/d3/d3-geo/blob/master/README.md#geoProjectionMutator) * d3.geo.albers ↦ [d3.geoAlbers](https://github.com/d3/d3-geo/blob/master/README.md#geoAlbers) * d3.geo.albersUsa ↦ [d3.geoAlbersUsa](https://github.com/d3/d3-geo/blob/master/README.md#geoAlbersUsa) * d3.geo.azimuthalEqualArea ↦ [d3.geoAzimuthalEqualArea](https://github.com/d3/d3-geo/blob/master/README.md#geoAzimuthalEqualArea) * d3.geo.azimuthalEquidistant ↦ [d3.geoAzimuthalEquidistant](https://github.com/d3/d3-geo/blob/master/README.md#geoAzimuthalEquidistant) * d3.geo.conicConformal ↦ [d3.geoConicConformal](https://github.com/d3/d3-geo/blob/master/README.md#geoConicConformal) * d3.geo.conicEqualArea ↦ [d3.geoConicEqualArea](https://github.com/d3/d3-geo/blob/master/README.md#geoConicEqualArea) * d3.geo.conicEquidistant ↦ [d3.geoConicEquidistant](https://github.com/d3/d3-geo/blob/master/README.md#geoConicEquidistant) * d3.geo.equirectangular ↦ [d3.geoEquirectangular](https://github.com/d3/d3-geo/blob/master/README.md#geoEquirectangular) * d3.geo.gnomonic ↦ [d3.geoGnomonic](https://github.com/d3/d3-geo/blob/master/README.md#geoGnomonic) * d3.geo.mercator ↦ [d3.geoMercator](https://github.com/d3/d3-geo/blob/master/README.md#geoMercator) * d3.geo.orthographic ↦ [d3.geoOrthographic](https://github.com/d3/d3-geo/blob/master/README.md#geoOrthographic) * d3.geo.stereographic ↦ [d3.geoStereographic](https://github.com/d3/d3-geo/blob/master/README.md#geoStereographic) * d3.geo.transverseMercator ↦ [d3.geoTransverseMercator](https://github.com/d3/d3-geo/blob/master/README.md#geoTransverseMercator) Also renamed for consistency: * *circle*.origin ↦ [*circle*.center](https://github.com/d3/d3-geo/blob/master/README.md#circle_center) * *circle*.angle ↦ [*circle*.radius](https://github.com/d3/d3-geo/blob/master/README.md#circle_radius) * *graticule*.majorExtent ↦ [*graticule*.extentMajor](https://github.com/d3/d3-geo/blob/master/README.md#graticule_extentMajor) * *graticule*.minorExtent ↦ [*graticule*.extentMinor](https://github.com/d3/d3-geo/blob/master/README.md#graticule_extentMinor) * *graticule*.majorStep ↦ [*graticule*.stepMajor](https://github.com/d3/d3-geo/blob/master/README.md#graticule_stepMajor) * *graticule*.minorStep ↦ [*graticule*.stepMinor](https://github.com/d3/d3-geo/blob/master/README.md#graticule_stepMinor) Projections now have more appropriate defaults. For example, [d3.geoOrthographic](https://github.com/d3/d3-geo/blob/master/README.md#geoOrthographic) has a 90° clip angle by default, showing only the front hemisphere, and [d3.geoGnomonic](https://github.com/d3/d3-geo/blob/master/README.md#geoGnomonic) has a default 60° clip angle. The default [projection](https://github.com/d3/d3-geo/blob/master/README.md#path_projection) for [d3.geoPath](https://github.com/d3/d3-geo/blob/master/README.md#geoPath) is now null rather than [d3.geoAlbersUsa](https://github.com/d3/d3-geo/blob/master/README.md#geoAlbersUsa); a null projection is used with [pre-projected geometry](https://bl.ocks.org/mbostock/5557726) and is typically faster to render. “Fallback projections”—when you pass a function rather than a projection to [*path*.projection](https://github.com/d3/d3-geo/blob/master/README.md#path_projection)—are no longer supported. For geographic projections, use [d3.geoProjection](https://github.com/d3/d3-geo/blob/master/README.md#geoProjection) or [d3.geoProjectionMutator](https://github.com/d3/d3-geo/blob/master/README.md#geoProjectionMutator) to define a custom projection. For arbitrary geometry transformations, implement the [stream interface](https://github.com/d3/d3-geo/blob/master/README.md#streams); see also [d3.geoTransform](https://github.com/d3/d3-geo/blob/master/README.md#geoTransform). The “raw” projections (e.g., d3.geo.equirectangular.raw) are no longer exported. ## [Hierarchies (d3-hierarchy)](https://github.com/d3/d3-hierarchy/blob/master/README.md) Pursuant to the great namespace flattening: * d3.layout.cluster ↦ [d3.cluster](https://github.com/d3/d3-hierarchy/blob/master/README.md#cluster) * d3.layout.hierarchy ↦ [d3.hierarchy](https://github.com/d3/d3-hierarchy/blob/master/README.md#hierarchy) * d3.layout.pack ↦ [d3.pack](https://github.com/d3/d3-hierarchy/blob/master/README.md#pack) * d3.layout.partition ↦ [d3.partition](https://github.com/d3/d3-hierarchy/blob/master/README.md#partition) * d3.layout.tree ↦ [d3.tree](https://github.com/d3/d3-hierarchy/blob/master/README.md#tree) * d3.layout.treemap ↦ [d3.treemap](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap) As an alternative to using JSON to represent hierarchical data (such as the “flare.json format” used by many D3 examples), the new [d3.stratify](https://github.com/d3/d3-hierarchy/blob/master/README.md#stratify) operator simplifies the conversion of tabular data to hierarchical data! This is convenient if you already have data in a tabular format, such as the result of a SQL query or a CSV file: ``` name,parent Eve, Cain,Eve Seth,Eve Enos,Seth Noam,Seth Abel,Eve Awan,Eve Enoch,Awan Azura,Eve ``` To convert this to a root [*node*](https://github.com/d3/d3-hierarchy/blob/master/README.md#hierarchy): ```js var root = d3.stratify() .id(function(d) { return d.name; }) .parentId(function(d) { return d.parent; }) (nodes); ``` The resulting *root* can be passed to [d3.tree](https://github.com/d3/d3-hierarchy/blob/master/README.md#tree) to produce a tree diagram like this: Root nodes can also be created from JSON data using [d3.hierarchy](https://github.com/d3/d3-hierarchy/blob/master/README.md#hierarchy). The hierarchy layouts now take these root nodes as input rather than operating directly on JSON data, which helps to provide a cleaner separation between the input data and the computed layout. (For example, use [*node*.copy](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_copy) to isolate layout changes.) It also simplifies the API: rather than each hierarchy layout needing to implement value and sorting accessors, there are now generic [*node*.sum](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_sum) and [*node*.sort](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_sort) methods that work with any hierarchy layout. The new d3.hierarchy API also provides a richer set of methods for manipulating hierarchical data. For example, to generate an array of all nodes in topological order, use [*node*.descendants](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_descendants); for just leaf nodes, use [*node*.leaves](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_leaves). To highlight the ancestors of a given *node* on mouseover, use [*node*.ancestors](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_ancestors). To generate an array of {source, target} links for a given hierarchy, use [*node*.links](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_links); this replaces *treemap*.links and similar methods on the other layouts. The new [*node*.path](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_path) method replaces d3.layout.bundle; see also [d3.curveBundle](https://github.com/d3/d3-shape/blob/master/README.md#curveBundle) for hierarchical edge bundling. The hierarchy layouts have been rewritten using new, non-recursive traversal methods ([*node*.each](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_each), [*node*.eachAfter](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_eachAfter) and [*node*.eachBefore](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_eachBefore)), improving performance on large datasets. The d3.tree layout no longer uses a *node*.\_ field to store temporary state during layout. Treemap tiling is now [extensible](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap-tiling) via [*treemap*.tile](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap_tile)! The default squarified tiling algorithm, [d3.treemapSquarify](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemapSquarify), has been completely rewritten, improving performance and fixing bugs in padding and rounding. The *treemap*.sticky method has been replaced with the [d3.treemapResquarify](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemapResquarify), which is identical to d3.treemapSquarify except it performs stable neighbor-preserving updates. The *treemap*.ratio method has been replaced with [*squarify*.ratio](https://github.com/d3/d3-hierarchy/blob/master/README.md#squarify_ratio). And there’s a new [d3.treemapBinary](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemapBinary) for binary treemaps! Treemap padding has also been improved. The treemap now distinguishes between [outer padding](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap_paddingOuter) that separates a parent from its children, and [inner padding](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap_paddingInner) that separates adjacent siblings. You can set the [top-](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap_paddingTop), [right-](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap_paddingRight), [bottom-](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap_paddingBottom) and [left-](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap_paddingLeft)outer padding separately. There are new examples for the traditional [nested treemap](https://bl.ocks.org/mbostock/911ad09bdead40ec0061) and for Lü and Fogarty’s [cascaded treemap](https://bl.ocks.org/mbostock/f85ffb3a5ac518598043). And there’s a new example demonstrating [d3.nest with d3.treemap](https://bl.ocks.org/mbostock/2838bf53e0e65f369f476afd653663a2). The space-filling layouts [d3.treemap](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap) and [d3.partition](https://github.com/d3/d3-hierarchy/blob/master/README.md#partition) now output *x0*, *x1*, *y0*, *y1* on each node instead of *x0*, *dx*, *y0*, *dy*. This improves accuracy by ensuring that the edges of adjacent cells are exactly equal, rather than sometimes being slightly off due to floating point math. The partition layout now supports [rounding](https://github.com/d3/d3-hierarchy/blob/master/README.md#partition_round) and [padding](https://github.com/d3/d3-hierarchy/blob/master/README.md#partition_padding). The circle-packing layout, [d3.pack](https://github.com/d3/d3-hierarchy/blob/master/README.md#pack), has been completely rewritten to better implement Wang et al.’s algorithm, fixing major bugs and improving results! Welzl’s algorithm is now used to compute the exact [smallest enclosing circle](https://bl.ocks.org/mbostock/29c534ff0b270054a01c) for each parent, rather than the approximate answer used by Wang et al. The 3.x output is shown on the left; 4.0 is shown on the right: Circle Packing in 3.x Circle Packing in 4.0 A non-hierarchical implementation is also available as [d3.packSiblings](https://github.com/d3/d3-hierarchy/blob/master/README.md#packSiblings), and the smallest enclosing circle implementation is available as [d3.packEnclose](https://github.com/d3/d3-hierarchy/blob/master/README.md#packEnclose). [Pack padding](https://github.com/d3/d3-hierarchy/blob/master/README.md#pack_padding) now applies between a parent and its children, as well as between adjacent siblings. In addition, you can now specify padding as a function that is computed dynamically for each parent. ## Internals The d3.rebind method has been removed. (See the [3.x source](https://github.com/d3/d3/blob/v3.5.17/src/core/rebind.js).) If you want to wrap a getter-setter method, the recommend pattern is to implement a wrapper method and check the return value. For example, given a *component* that uses an internal [*dispatch*](#dispatches-d3-dispatch), *component*.on can rebind *dispatch*.on as follows: ```js component.on = function() { var value = dispatch.on.apply(dispatch, arguments); return value === dispatch ? component : value; }; ``` The d3.functor method has been removed. (See the [3.x source](https://github.com/d3/d3/blob/v3.5.17/src/core/functor.js).) If you want to promote a constant value to a function, the recommended pattern is to implement a closure that returns the constant value. If desired, you can use a helper method as follows: ```js function constant(x) { return function() { return x; }; } ``` Given a value *x*, to promote *x* to a function if it is not already: ```js var fx = typeof x === "function" ? x : constant(x); ``` ## [Interpolators (d3-interpolate)](https://github.com/d3/d3-interpolate/blob/master/README.md) The [d3.interpolate](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolate) method no longer delegates to d3.interpolators, which has been removed; its behavior is now defined by the library. It is now slightly faster in the common case that *b* is a number. It only uses [d3.interpolateRgb](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateRgb) if *b* is a valid CSS color specifier (and not approximately one). And if the end value *b* is null, undefined, true or false, d3.interpolate now returns a constant function which always returns *b*. The behavior of [d3.interpolateObject](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateObject) and [d3.interpolateArray](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateArray) has changed slightly with respect to properties or elements in the start value *a* that do not exist in the end value *b*: these properties and elements are now ignored, such that the ending value of the interpolator at *t* = 1 is now precisely equal to *b*. So, in 3.x: ```js d3.interpolateObject({foo: 2, bar: 1}, {foo: 3})(0.5); // {bar: 1, foo: 2.5} in 3.x ``` Whereas in 4.0, *a*.bar is ignored: ```js d3.interpolateObject({foo: 2, bar: 1}, {foo: 3})(0.5); // {foo: 2.5} in 4.0 ``` If *a* or *b* are undefined or not an object, they are now implicitly converted to the empty object or empty array as appropriate, rather than throwing a TypeError. The d3.interpolateTransform interpolator has been renamed to [d3.interpolateTransformSvg](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateTransformSvg), and there is a new [d3.interpolateTransformCss](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateTransformCss) to interpolate CSS transforms! This allows [d3-transition](#transitions-d3-transition) to automatically interpolate both the SVG [transform attribute](https://www.w3.org/TR/SVG/coords.html#TransformAttribute) and the CSS [transform style property](https://www.w3.org/TR/css-transforms-1/#transform-property). (Note, however, that only 2D CSS transforms are supported.) The d3.transform method has been removed. Color space interpolators now interpolate opacity (see [d3-color](#colors-d3-color)) and return rgb(…) or rgba(…) CSS color specifier strings rather than using the RGB hexadecimal format. This is necessary to support opacity interpolation, but is also beneficial because it matches CSS computed values. When a channel in the start color *a* is undefined, color interpolators now use the corresponding channel value from the end color *b*, or *vice versa*. This logic previously applied to some channels (such as saturation in HSL), but now applies to all channels in all color spaces, and is especially useful when interpolating to or from transparent. There are now “long” versions of cylindrical color space interpolators: [d3.interpolateHslLong](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateHslLong), [d3.interpolateHclLong](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateHclLong) and [d3.interpolateCubehelixLong](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateCubehelixLong). These interpolators use linear interpolation of hue, rather than using the shortest path around the 360° hue circle. See [d3.interpolateRainbow](https://github.com/d3/d3-scale/blob/master/README.md#interpolateRainbow) for an example. The Cubehelix color space is now supported by [d3-color](#colors-d3-color), and so there are now [d3.interpolateCubehelix](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateCubehelix) and [d3.interpolateCubehelixLong](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateCubehelixLong) interpolators. [Gamma-corrected color interpolation](https://web.archive.org/web/20160112115812/http://www.4p8.com/eric.brasseur/gamma.html) is now supported for both RGB and Cubehelix color spaces as [*interpolate*.gamma](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolate_gamma). For example, to interpolate from purple to orange with a gamma of 2.2 in RGB space: ```js var interpolate = d3.interpolateRgb.gamma(2.2)("purple", "orange"); ``` There are new interpolators for uniform non-rational [B-splines](https://en.wikipedia.org/wiki/B-spline)! These are useful for smoothly interpolating between an arbitrary sequence of values from *t* = 0 to *t* = 1, such as to generate a smooth color gradient from a discrete set of colors. The [d3.interpolateBasis](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateBasis) and [d3.interpolateBasisClosed](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateBasisClosed) interpolators generate one-dimensional B-splines, while [d3.interpolateRgbBasis](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateRgbBasis) and [d3.interpolateRgbBasisClosed](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateRgbBasisClosed) generate three-dimensional B-splines through RGB color space. These are used by [d3-scale-chromatic](https://github.com/d3/d3-scale-chromatic) to generate continuous color scales from ColorBrewer’s discrete color schemes, such as [PiYG](https://bl.ocks.org/mbostock/048d21cf747371b11884f75ad896e5a5). There’s also now a [d3.quantize](https://github.com/d3/d3-interpolate/blob/master/README.md#quantize) method for generating uniformly-spaced discrete samples from a continuous interpolator. This is useful for taking one of the built-in color scales (such as [d3.interpolateViridis](https://github.com/d3/d3-scale/blob/master/README.md#interpolateViridis)) and quantizing it for use with [d3.scaleQuantize](https://github.com/d3/d3-scale/blob/master/README.md#scaleQuantize), [d3.scaleQuantile](https://github.com/d3/d3-scale/blob/master/README.md#scaleQuantile) or [d3.scaleThreshold](https://github.com/d3/d3-scale/blob/master/README.md#scaleThreshold). ## [Paths (d3-path)](https://github.com/d3/d3-path/blob/master/README.md) The [d3.path](https://github.com/d3/d3-path/blob/master/README.md#path) serializer implements the [CanvasPathMethods API](https://www.w3.org/TR/2dcontext/#canvaspathmethods), allowing you to write code that can render to either Canvas or SVG. For example, given some code that draws to a canvas: ```js function drawCircle(context, radius) { context.moveTo(radius, 0); context.arc(0, 0, radius, 0, 2 * Math.PI); } ``` You can render to SVG as follows: ```js var context = d3.path(); drawCircle(context, 40); pathElement.setAttribute("d", context.toString()); ``` The path serializer enables [d3-shape](#shapes-d3-shape) to support both Canvas and SVG; see [*line*.context](https://github.com/d3/d3-shape/blob/master/README.md#line_context) and [*area*.context](https://github.com/d3/d3-shape/blob/master/README.md#area_context), for example. ## [Polygons (d3-polygon)](https://github.com/d3/d3-polygon/blob/master/README.md) There’s no longer a d3.geom.polygon constructor; instead you just pass an array of vertices to the polygon methods. So instead of *polygon*.area and *polygon*.centroid, there’s [d3.polygonArea](https://github.com/d3/d3-polygon/blob/master/README.md#polygonArea) and [d3.polygonCentroid](https://github.com/d3/d3-polygon/blob/master/README.md#polygonCentroid). There are also new [d3.polygonContains](https://github.com/d3/d3-polygon/blob/master/README.md#polygonContains) and [d3.polygonLength](https://github.com/d3/d3-polygon/blob/master/README.md#polygonLength) methods. There’s no longer an equivalent to *polygon*.clip, but if [Sutherland–Hodgman clipping](https://en.wikipedia.org/wiki/Sutherland–Hodgman_algorithm) is needed, please [file a feature request](https://github.com/d3/d3-polygon/issues). The d3.geom.hull operator has been simplified: instead of an operator with *hull*.x and *hull*.y accessors, there’s just the [d3.polygonHull](https://github.com/d3/d3-polygon/blob/master/README.md#polygonHull) method which takes an array of points and returns the convex hull. ## [Quadtrees (d3-quadtree)](https://github.com/d3/d3-quadtree/blob/master/README.md) The d3.geom.quadtree method has been replaced by [d3.quadtree](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree). 4.0 removes the concept of quadtree “generators” (configurable functions that build a quadtree from an array of data); there are now just quadtrees, which you can create via d3.quadtree and add data to via [*quadtree*.add](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_add) and [*quadtree*.addAll](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_addAll). This code in 3.x: ```js var quadtree = d3.geom.quadtree() .extent([[0, 0], [width, height]]) (data); ``` Can be rewritten in 4.0 as: ```js var quadtree = d3.quadtree() .extent([[0, 0], [width, height]]) .addAll(data); ``` The new quadtree implementation is vastly improved! It is no longer recursive, avoiding stack overflows when there are large numbers of coincident points. The internal storage is now more efficient, and the implementation is also faster; constructing a quadtree of 1M normally-distributed points takes about one second in 4.0, as compared to three seconds in 3.x. The change in [internal *node* structure](https://github.com/d3/d3-quadtree/blob/master/README.md#nodes) affects [*quadtree*.visit](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_visit): use *node*.length to distinguish leaf nodes from internal nodes. For example, to iterate over all data in a quadtree: ```js quadtree.visit(function(node) { if (!node.length) { do { console.log(node.data); } while (node = node.next) } }); ``` There’s a new [*quadtree*.visitAfter](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_visitAfter) method for visiting nodes in post-order traversal. This feature is used in [d3-force](#forces-d3-force) to implement the [Barnes–Hut approximation](https://en.wikipedia.org/wiki/Barnes–Hut_simulation). You can now remove data from a quadtree using [*quadtree*.remove](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_remove) and [*quadtree*.removeAll](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_removeAll). When adding data to a quadtree, the quadtree will now expand its extent by repeated doubling if the new point is outside the existing extent of the quadtree. There are also [*quadtree*.extent](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_extent) and [*quadtree*.cover](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_cover) methods for explicitly expanding the extent of the quadtree after creation. Quadtrees support several new utility methods: [*quadtree*.copy](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_copy) returns a copy of the quadtree sharing the same data; [*quadtree*.data](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_data) generates an array of all data in the quadtree; [*quadtree*.size](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_size) returns the number of data points in the quadtree; and [*quadtree*.root](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_root) returns the root node, which is useful for manual traversal of the quadtree. The [*quadtree*.find](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_find) method now takes an optional search radius, which is useful for pointer-based selection in [force-directed graphs](https://bl.ocks.org/mbostock/ad70335eeef6d167bc36fd3c04378048). ## [Queues (d3-queue)](https://github.com/d3/d3-queue/blob/master/README.md) Formerly known as Queue.js and queue-async, [d3.queue](https://github.com/d3/d3-queue) is now included in the default bundle, making it easy to load data files in parallel. It has been rewritten with fewer closures to improve performance, and there are now stricter checks in place to guarantee well-defined behavior. You can now use instanceof d3.queue and inspect the queue’s internal private state. ## [Random Numbers (d3-random)](https://github.com/d3/d3-random/blob/master/README.md) Pursuant to the great namespace flattening, the random number generators have new names: * d3.random.normal ↦ [d3.randomNormal](https://github.com/d3/d3-random/blob/master/README.md#randomNormal) * d3.random.logNormal ↦ [d3.randomLogNormal](https://github.com/d3/d3-random/blob/master/README.md#randomLogNormal) * d3.random.bates ↦ [d3.randomBates](https://github.com/d3/d3-random/blob/master/README.md#randomBates) * d3.random.irwinHall ↦ [d3.randomIrwinHall](https://github.com/d3/d3-random/blob/master/README.md#randomIrwinHall) There are also new random number generators for [exponential](https://github.com/d3/d3-random/blob/master/README.md#randomExponential) and [uniform](https://github.com/d3/d3-random/blob/master/README.md#randomUniform) distributions. The [normal](https://github.com/d3/d3-random/blob/master/README.md#randomNormal) and [log-normal](https://github.com/d3/d3-random/blob/master/README.md#randomLogNormal) random generators have been optimized. ## [Requests (d3-request)](https://github.com/d3/d3-request/blob/master/README.md) The d3.xhr method has been renamed to [d3.request](https://github.com/d3/d3-request/blob/master/README.md#request). Basic authentication is now supported using [*request*.user](https://github.com/d3/d3-request/blob/master/README.md#request_user) and [*request*.password](https://github.com/d3/d3-request/blob/master/README.md#request_password). You can now configure a timeout using [*request*.timeout](https://github.com/d3/d3-request/blob/master/README.md#request_timeout). If an error occurs, the corresponding [ProgressEvent](https://xhr.spec.whatwg.org/#interface-progressevent) of type “error” is now passed to the error listener, rather than the [XMLHttpRequest](https://xhr.spec.whatwg.org/#interface-xmlhttprequest). Likewise, the ProgressEvent is passed to progress event listeners, rather than using [d3.event](https://github.com/d3/d3-selection/blob/master/README.md#event). If [d3.xml](https://github.com/d3/d3-request/blob/master/README.md#xml) encounters an error parsing XML, this error is now reported to error listeners rather than returning a null response. The [d3.request](https://github.com/d3/d3-request/blob/master/README.md#request), [d3.text](https://github.com/d3/d3-request/blob/master/README.md#text) and [d3.xml](https://github.com/d3/d3-request/blob/master/README.md#xml) methods no longer take an optional mime type as the second argument; use [*request*.mimeType](https://github.com/d3/d3-request/blob/master/README.md#request_mimeType) instead. For example: ```js d3.xml("file.svg").mimeType("image/svg+xml").get(function(error, svg) { … }); ``` With the exception of [d3.html](https://github.com/d3/d3-request/blob/master/README.md#html) and [d3.xml](https://github.com/d3/d3-request/blob/master/README.md#xml), Node is now supported via [node-XMLHttpRequest](https://github.com/driverdan/node-XMLHttpRequest). ## [Scales (d3-scale)](https://github.com/d3/d3-scale/blob/master/README.md) Pursuant to the great namespace flattening: * d3.scale.linear ↦ [d3.scaleLinear](https://github.com/d3/d3-scale/blob/master/README.md#scaleLinear) * d3.scale.sqrt ↦ [d3.scaleSqrt](https://github.com/d3/d3-scale/blob/master/README.md#scaleSqrt) * d3.scale.pow ↦ [d3.scalePow](https://github.com/d3/d3-scale/blob/master/README.md#scalePow) * d3.scale.log ↦ [d3.scaleLog](https://github.com/d3/d3-scale/blob/master/README.md#scaleLog) * d3.scale.quantize ↦ [d3.scaleQuantize](https://github.com/d3/d3-scale/blob/master/README.md#scaleQuantize) * d3.scale.threshold ↦ [d3.scaleThreshold](https://github.com/d3/d3-scale/blob/master/README.md#scaleThreshold) * d3.scale.quantile ↦ [d3.scaleQuantile](https://github.com/d3/d3-scale/blob/master/README.md#scaleQuantile) * d3.scale.identity ↦ [d3.scaleIdentity](https://github.com/d3/d3-scale/blob/master/README.md#scaleIdentity) * d3.scale.ordinal ↦ [d3.scaleOrdinal](https://github.com/d3/d3-scale/blob/master/README.md#scaleOrdinal) * d3.time.scale ↦ [d3.scaleTime](https://github.com/d3/d3-scale/blob/master/README.md#scaleTime) * d3.time.scale.utc ↦ [d3.scaleUtc](https://github.com/d3/d3-scale/blob/master/README.md#scaleUtc) Scales now generate ticks in the same order as the domain: if you have a descending domain, you now get descending ticks. This change affects the order of tick elements generated by [axes](#axes-d3-axis). For example: ```js d3.scaleLinear().domain([10, 0]).ticks(5); // [10, 8, 6, 4, 2, 0] ``` [Log tick formatting](https://github.com/d3/d3-scale/blob/master/README.md#log_tickFormat) now assumes a default *count* of ten, not Infinity, if not specified. Log scales with domains that span many powers (such as from 1e+3 to 1e+29) now return only one [tick](https://github.com/d3/d3-scale/blob/master/README.md#log_ticks) per power rather than returning *base* ticks per power. Non-linear quantitative scales are slightly more accurate. You can now control whether an ordinal scale’s domain is implicitly extended when the scale is passed a value that is not already in its domain. By default, [*ordinal*.unknown](https://github.com/d3/d3-scale/blob/master/README.md#ordinal_unknown) is [d3.scaleImplicit](https://github.com/d3/d3-scale/blob/master/README.md#scaleImplicit), causing unknown values to be added to the domain: ```js var x = d3.scaleOrdinal() .domain([0, 1]) .range(["red", "green", "blue"]); x.domain(); // [0, 1] x(2); // "blue" x.domain(); // [0, 1, 2] ``` By setting *ordinal*.unknown, you instead define the output value for unknown inputs. This is particularly useful for choropleth maps where you want to assign a color to missing data. ```js var x = d3.scaleOrdinal() .domain([0, 1]) .range(["red", "green", "blue"]) .unknown(undefined); x.domain(); // [0, 1] x(2); // undefined x.domain(); // [0, 1] ``` The *ordinal*.rangeBands and *ordinal*.rangeRoundBands methods have been replaced with a new subclass of ordinal scale: [band scales](https://github.com/d3/d3-scale/blob/master/README.md#band-scales). The following code in 3.x: ```js var x = d3.scale.ordinal() .domain(["a", "b", "c"]) .rangeBands([0, width]); ``` Is equivalent to this in 4.0: ```js var x = d3.scaleBand() .domain(["a", "b", "c"]) .range([0, width]); ``` The new [*band*.padding](https://github.com/d3/d3-scale/blob/master/README.md#band_padding), [*band*.paddingInner](https://github.com/d3/d3-scale/blob/master/README.md#band_paddingInner) and [*band*.paddingOuter](https://github.com/d3/d3-scale/blob/master/README.md#band_paddingOuter) methods replace the optional arguments to *ordinal*.rangeBands. The new [*band*.bandwidth](https://github.com/d3/d3-scale/blob/master/README.md#band_bandwidth) and [*band*.step](https://github.com/d3/d3-scale/blob/master/README.md#band_step) methods replace *ordinal*.rangeBand. There’s also a new [*band*.align](https://github.com/d3/d3-scale/blob/master/README.md#band_align) method which you can use to control how the extra space outside the bands is distributed, say to shift columns closer to the *y*-axis. Similarly, the *ordinal*.rangePoints and *ordinal*.rangeRoundPoints methods have been replaced with a new subclass of ordinal scale: [point scales](https://github.com/d3/d3-scale/blob/master/README.md#point-scales). The following code in 3.x: ```js var x = d3.scale.ordinal() .domain(["a", "b", "c"]) .rangePoints([0, width]); ``` Is equivalent to this in 4.0: ```js var x = d3.scalePoint() .domain(["a", "b", "c"]) .range([0, width]); ``` The new [*point*.padding](https://github.com/d3/d3-scale/blob/master/README.md#point_padding) method replaces the optional *padding* argument to *ordinal*.rangePoints. Like *ordinal*.rangeBand with *ordinal*.rangePoints, the [*point*.bandwidth](https://github.com/d3/d3-scale/blob/master/README.md#point_bandwidth) method always returns zero; a new [*point*.step](https://github.com/d3/d3-scale/blob/master/README.md#point_step) method returns the interval between adjacent points. The [ordinal scale constructor](https://github.com/d3/d3-scale/blob/master/README.md#ordinal-scales) now takes an optional *range* for a shorter alternative to [*ordinal*.range](https://github.com/d3/d3-scale/blob/master/README.md#ordinal_range). This is especially useful now that the categorical color scales have been changed to simple arrays of colors rather than specialized ordinal scale constructors: * d3.scale.category10 ↦ [d3.schemeCategory10](https://github.com/d3/d3-scale/blob/master/README.md#schemeCategory10) * d3.scale.category20 ↦ [d3.schemeCategory20](https://github.com/d3/d3-scale/blob/master/README.md#schemeCategory20) * d3.scale.category20b ↦ [d3.schemeCategory20b](https://github.com/d3/d3-scale/blob/master/README.md#schemeCategory20b) * d3.scale.category20c ↦ [d3.schemeCategory20c](https://github.com/d3/d3-scale/blob/master/README.md#schemeCategory20c) The following code in 3.x: ```js var color = d3.scale.category10(); ``` Is equivalent to this in 4.0: ```js var color = d3.scaleOrdinal(d3.schemeCategory10); ``` [Sequential scales](https://github.com/d3/d3-scale/blob/master/README.md#scaleSequential), are a new class of scales with a fixed output [interpolator](https://github.com/d3/d3-scale/blob/master/README.md#sequential_interpolator) instead of a [range](https://github.com/d3/d3-scale/blob/master/README.md#continuous_range). Typically these scales are used to implement continuous sequential or diverging color schemes. Inspired by Matplotlib’s new [perceptually-motived colormaps](https://bids.github.io/colormap/), 4.0 now features [viridis](https://github.com/d3/d3-scale/blob/master/README.md#interpolateViridis), [inferno](https://github.com/d3/d3-scale/blob/master/README.md#interpolateInferno), [magma](https://github.com/d3/d3-scale/blob/master/README.md#interpolateMagma), [plasma](https://github.com/d3/d3-scale/blob/master/README.md#interpolatePlasma) interpolators for use with sequential scales. Using [d3.quantize](https://github.com/d3/d3-interpolate/blob/master/README.md#quantize), these interpolators can also be applied to [quantile](https://github.com/d3/d3-scale/blob/master/README.md#quantile-scales), [quantize](https://github.com/d3/d3-scale/blob/master/README.md#quantize-scales) and [threshold](https://github.com/d3/d3-scale/blob/master/README.md#threshold-scales) scales. [viridis](https://github.com/d3/d3-scale/blob/master/README.md#interpolateViridis) [inferno](https://github.com/d3/d3-scale/blob/master/README.md#interpolateInferno) [magma](https://github.com/d3/d3-scale/blob/master/README.md#interpolateMagma) [plasma](https://github.com/d3/d3-scale/blob/master/README.md#interpolatePlasma) 4.0 also ships new Cubehelix schemes, including [Dave Green’s default](https://github.com/d3/d3-scale/blob/master/README.md#interpolateCubehelixDefault) and a [cyclical rainbow](https://github.com/d3/d3-scale/blob/master/README.md#interpolateRainbow) inspired by [Matteo Niccoli](https://mycarta.wordpress.com/2013/02/21/perceptual-rainbow-palette-the-method/): [cubehelix](https://github.com/d3/d3-scale/blob/master/README.md#interpolateCubehelixDefault) [rainbow](https://github.com/d3/d3-scale/blob/master/README.md#interpolateRainbow) [warm](https://github.com/d3/d3-scale/blob/master/README.md#interpolateWarm) [cool](https://github.com/d3/d3-scale/blob/master/README.md#interpolateCool) For even more sequential and categorical color schemes, see [d3-scale-chromatic](https://github.com/d3/d3-scale-chromatic). For an introduction to scales, see [Introducing d3-scale](https://medium.com/@mbostock/introducing-d3-scale-61980c51545f). ## [Selections (d3-selection)](https://github.com/d3/d3-selection/blob/master/README.md) Selections no longer subclass Array using [prototype chain injection](http://perfectionkills.com/how-ecmascript-5-still-does-not-allow-to-subclass-an-array/#wrappers_prototype_chain_injection); they are now plain objects, improving performance. The internal fields (*selection*.\_groups, *selection*.\_parents) are private; please use the documented public API to manipulate selections. The new [*selection*.nodes](https://github.com/d3/d3-selection/blob/master/README.md#selection_nodes) method generates an array of all nodes in a selection. Selections are now immutable: the elements and parents in a selection never change. (The elements’ attributes and content will of course still be modified!) The [*selection*.sort](https://github.com/d3/d3-selection/blob/master/README.md#selection_sort) and [*selection*.data](https://github.com/d3/d3-selection/blob/master/README.md#selection_data) methods now return new selections rather than modifying the selection in-place. In addition, [*selection*.append](https://github.com/d3/d3-selection/blob/master/README.md#selection_append) no longer merges entering nodes into the update selection; use [*selection*.merge](https://github.com/d3/d3-selection/blob/master/README.md#selection_merge) to combine enter and update after a data join. For example, the following [general update pattern](https://bl.ocks.org/mbostock/a8a5baa4c4a470cda598) in 3.x: ```js var circle = svg.selectAll("circle").data(data) // UPDATE .style("fill", "blue"); circle.exit().remove(); // EXIT circle.enter().append("circle") // ENTER; modifies UPDATE! 🌶 .style("fill", "green"); circle // ENTER + UPDATE .style("stroke", "black"); ``` Would be rewritten in 4.0 as: ```js var circle = svg.selectAll("circle").data(data) // UPDATE .style("fill", "blue"); circle.exit().remove(); // EXIT circle.enter().append("circle") // ENTER .style("fill", "green") .merge(circle) // ENTER + UPDATE .style("stroke", "black"); ``` This change is discussed further in [What Makes Software Good](https://medium.com/@mbostock/what-makes-software-good-943557f8a488). In 3.x, the [*selection*.enter](https://github.com/d3/d3-selection/blob/master/README.md#selection_enter) and [*selection*.exit](https://github.com/d3/d3-selection/blob/master/README.md#selection_exit) methods were undefined until you called *selection*.data, resulting in a TypeError if you attempted to access them. In 4.0, now they simply return the empty selection if the selection has not been joined to data. In 3.x, [*selection*.append](https://github.com/d3/d3-selection/blob/master/README.md#selection_append) would always append the new element as the last child of its parent. A little-known trick was to use [*selection*.insert](https://github.com/d3/d3-selection/blob/master/README.md#selection_insert) without specifying a *before* selector when entering nodes, causing the entering nodes to be inserted before the following element in the update selection. In 4.0, this is now the default behavior of *selection*.append; if you do not specify a *before* selector to *selection*.insert, the inserted element is appended as the last child. This change makes the general update pattern preserve the relative order of elements and data. For example, given the following DOM: ```html
    a
    b
    f
    ``` And the following code: ```js var div = d3.select("body").selectAll("div") .data(["a", "b", "c", "d", "e", "f"], function(d) { return d || this.textContent; }); div.enter().append("div") .text(function(d) { return d; }); ``` The resulting DOM will be: ```html
    a
    b
    c
    d
    e
    f
    ``` Thus, the entering *c*, *d* and *e* are inserted before *f*, since *f* is the following element in the update selection. Although this behavior is sufficient to preserve order if the new data’s order is stable, if the data changes order, you must still use [*selection*.order](https://github.com/d3/d3-selection/blob/master/README.md#selection_order) to reorder elements. There is now only one class of selection. 3.x implemented enter selections using a special class with different behavior for *enter*.append and *enter*.select; a consequence of this design was that enter selections in 3.x lacked [certain methods](https://github.com/d3/d3/issues/2043). In 4.0, enter selections are simply normal selections; they have the same methods and the same behavior. Placeholder [enter nodes](https://github.com/d3/d3-selection/blob/master/src/selection/enter.js) now implement [*node*.appendChild](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild), [*node*.insertBefore](https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore), [*node*.querySelector](https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector), and [*node*.querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll). The [*selection*.data](https://github.com/d3/d3-selection/blob/master/README.md#selection_data) method has been changed slightly with respect to duplicate keys. In 3.x, if multiple data had the same key, the duplicate data would be ignored and not included in enter, update or exit; in 4.0 the duplicate data is always put in the enter selection. In both 3.x and 4.0, if multiple elements have the same key, the duplicate elements are put in the exit selection. Thus, 4.0’s behavior is now symmetric for enter and exit, and the general update pattern will now produce a DOM that matches the data even if there are duplicate keys. Selections have several new methods! Use [*selection*.raise](https://github.com/d3/d3-selection/blob/master/README.md#selection_raise) to move the selected elements to the front of their siblings, so that they are drawn on top; use [*selection*.lower](https://github.com/d3/d3-selection/blob/master/README.md#selection_lower) to move them to the back. Use [*selection*.dispatch](https://github.com/d3/d3-selection/blob/master/README.md#selection_dispatch) to dispatch a [custom event](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) to event listeners. When called in getter mode, [*selection*.data](https://github.com/d3/d3-selection/blob/master/README.md#selection_data) now returns the data for all elements in the selection, rather than just the data for the first group of elements. The [*selection*.call](https://github.com/d3/d3-selection/blob/master/README.md#selection_call) method no longer sets the `this` context when invoking the specified function; the *selection* is passed as the first argument to the function, so use that. The [*selection*.on](https://github.com/d3/d3-selection/blob/master/README.md#selection_on) method now accepts multiple whitespace-separated typenames, so you can add or remove multiple listeners simultaneously. For example: ```js selection.on("mousedown touchstart", function() { console.log(d3.event.type); }); ``` The arguments passed to callback functions has changed slightly in 4.0 to be more consistent. The standard arguments are the element’s datum (*d*), the element’s index (*i*), and the element’s group (*nodes*), with *this* as the element. The slight exception to this convention is *selection*.data, which is evaluated for each group rather than each element; it is passed the group’s parent datum (*d*), the group index (*i*), and the selection’s parents (*parents*), with *this* as the group’s parent. The new [d3.local](https://github.com/d3/d3-selection/blob/master/README.md#local-variables) provides a mechanism for defining [local variables](https://bl.ocks.org/mbostock/e1192fe405703d8321a5187350910e08): state that is bound to DOM elements, and available to any descendant element. This can be a convenient alternative to using [*selection*.each](https://github.com/d3/d3-selection/blob/master/README.md#selection_each) or storing local state in data. The d3.ns.prefix namespace prefix map has been renamed to [d3.namespaces](https://github.com/d3/d3-selection/blob/master/README.md#namespaces), and the d3.ns.qualify method has been renamed to [d3.namespace](https://github.com/d3/d3-selection/blob/master/README.md#namespace). Several new low-level methods are now available, as well. [d3.matcher](https://github.com/d3/d3-selection/blob/master/README.md#matcher) is used internally by [*selection*.filter](https://github.com/d3/d3-selection/blob/master/README.md#selection_filter); [d3.selector](https://github.com/d3/d3-selection/blob/master/README.md#selector) is used by [*selection*.select](https://github.com/d3/d3-selection/blob/master/README.md#selection_select); [d3.selectorAll](https://github.com/d3/d3-selection/blob/master/README.md#selectorAll) is used by [*selection*.selectAll](https://github.com/d3/d3-selection/blob/master/README.md#selection_selectAll); [d3.creator](https://github.com/d3/d3-selection/blob/master/README.md#creator) is used by [*selection*.append](https://github.com/d3/d3-selection/blob/master/README.md#selection_append) and [*selection*.insert](https://github.com/d3/d3-selection/blob/master/README.md#selection_insert). The new [d3.window](https://github.com/d3/d3-selection/blob/master/README.md#window) returns the owner window for a given element, window or document. The new [d3.customEvent](https://github.com/d3/d3-selection/blob/master/README.md#customEvent) temporarily sets [d3.event](https://github.com/d3/d3-selection/blob/master/README.md#event) while invoking a function, allowing you to implement controls which dispatch custom events; this is used by [d3-drag](https://github.com/d3/d3-drag), [d3-zoom](https://github.com/d3/d3-zoom) and [d3-brush](https://github.com/d3/d3-brush). For the sake of parsimony, the multi-value methods—where you pass an object to set multiple attributes, styles or properties simultaneously—have been extracted to [d3-selection-multi](https://github.com/d3/d3-selection-multi) and are no longer part of the default bundle. The multi-value map methods have also been renamed to plural form to reduce overload: [*selection*.attrs](https://github.com/d3/d3-selection-multi/blob/master/README.md#selection_attrs), [*selection*.styles](https://github.com/d3/d3-selection-multi/blob/master/README.md#selection_styles) and [*selection*.properties](https://github.com/d3/d3-selection-multi/blob/master/README.md#selection_properties). ## [Shapes (d3-shape)](https://github.com/d3/d3-shape/blob/master/README.md) Pursuant to the great namespace flattening: * d3.svg.line ↦ [d3.line](https://github.com/d3/d3-shape/blob/master/README.md#lines) * d3.svg.line.radial ↦ [d3.radialLine](https://github.com/d3/d3-shape/blob/master/README.md#radialLine) * d3.svg.area ↦ [d3.area](https://github.com/d3/d3-shape/blob/master/README.md#areas) * d3.svg.area.radial ↦ [d3.radialArea](https://github.com/d3/d3-shape/blob/master/README.md#radialArea) * d3.svg.arc ↦ [d3.arc](https://github.com/d3/d3-shape/blob/master/README.md#arcs) * d3.svg.symbol ↦ [d3.symbol](https://github.com/d3/d3-shape/blob/master/README.md#symbols) * d3.svg.symbolTypes ↦ [d3.symbolTypes](https://github.com/d3/d3-shape/blob/master/README.md#symbolTypes) * d3.layout.pie ↦ [d3.pie](https://github.com/d3/d3-shape/blob/master/README.md#pies) * d3.layout.stack ↦ [d3.stack](https://github.com/d3/d3-shape/blob/master/README.md#stacks) * d3.svg.diagonal ↦ REMOVED (see [d3/d3-shape#27](https://github.com/d3/d3-shape/issues/27)) * d3.svg.diagonal.radial ↦ REMOVED Shapes are no longer limited to SVG; they can now render to Canvas! Shape generators now support an optional *context*: given a [CanvasRenderingContext2D](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D), you can render a shape as a canvas path to be filled or stroked. For example, a [canvas pie chart](https://bl.ocks.org/mbostock/8878e7fd82034f1d63cf) might use an arc generator: ```js var arc = d3.arc() .outerRadius(radius - 10) .innerRadius(0) .context(context); ``` To render an arc for a given datum *d*: ```js context.beginPath(); arc(d); context.fill(); ``` See [*line*.context](https://github.com/d3/d3-shape/blob/master/README.md#line_context), [*area*.context](https://github.com/d3/d3-shape/blob/master/README.md#area_context) and [*arc*.context](https://github.com/d3/d3-shape/blob/master/README.md#arc_context) for more. Under the hood, shapes use [d3-path](#paths-d3-path) to serialize canvas path methods to SVG path data when the context is null; thus, shapes are optimized for rendering to canvas. You can also now derive lines from areas. The line shares most of the same accessors, such as [*line*.defined](https://github.com/d3/d3-shape/blob/master/README.md#line_defined) and [*line*.curve](https://github.com/d3/d3-shape/blob/master/README.md#line_curve), with the area from which it is derived. For example, to render the topline of an area, use [*area*.lineY1](https://github.com/d3/d3-shape/blob/master/README.md#area_lineY1); for the baseline, use [*area*.lineY0](https://github.com/d3/d3-shape/blob/master/README.md#area_lineY0). 4.0 introduces a new curve API for specifying how line and area shapes interpolate between data points. The *line*.interpolate and *area*.interpolate methods have been replaced with [*line*.curve](https://github.com/d3/d3-shape/blob/master/README.md#line_curve) and [*area*.curve](https://github.com/d3/d3-shape/blob/master/README.md#area_curve). Curves are implemented using the [curve interface](https://github.com/d3/d3-shape/blob/master/README.md#custom-curves) rather than as a function that returns an SVG path data string; this allows curves to render to either SVG or Canvas. In addition, *line*.curve and *area*.curve now take a function which instantiates a curve for a given *context*, rather than a string. The full list of equivalents: * linear ↦ [d3.curveLinear](https://github.com/d3/d3-shape/blob/master/README.md#curveLinear) * linear-closed ↦ [d3.curveLinearClosed](https://github.com/d3/d3-shape/blob/master/README.md#curveLinearClosed) * step ↦ [d3.curveStep](https://github.com/d3/d3-shape/blob/master/README.md#curveStep) * step-before ↦ [d3.curveStepBefore](https://github.com/d3/d3-shape/blob/master/README.md#curveStepBefore) * step-after ↦ [d3.curveStepAfter](https://github.com/d3/d3-shape/blob/master/README.md#curveStepAfter) * basis ↦ [d3.curveBasis](https://github.com/d3/d3-shape/blob/master/README.md#curveBasis) * basis-open ↦ [d3.curveBasisOpen](https://github.com/d3/d3-shape/blob/master/README.md#curveBasisOpen) * basis-closed ↦ [d3.curveBasisClosed](https://github.com/d3/d3-shape/blob/master/README.md#curveBasisClosed) * bundle ↦ [d3.curveBundle](https://github.com/d3/d3-shape/blob/master/README.md#curveBundle) * cardinal ↦ [d3.curveCardinal](https://github.com/d3/d3-shape/blob/master/README.md#curveCardinal) * cardinal-open ↦ [d3.curveCardinalOpen](https://github.com/d3/d3-shape/blob/master/README.md#curveCardinalOpen) * cardinal-closed ↦ [d3.curveCardinalClosed](https://github.com/d3/d3-shape/blob/master/README.md#curveCardinalClosed) * monotone ↦ [d3.curveMonotoneX](https://github.com/d3/d3-shape/blob/master/README.md#curveMonotoneX) But that’s not all! 4.0 now provides parameterized Catmull–Rom splines as proposed by [Yuksel *et al.*](http://www.cemyuksel.com/research/catmullrom_param/). These are available as [d3.curveCatmullRom](https://github.com/d3/d3-shape/blob/master/README.md#curveCatmullRom), [d3.curveCatmullRomClosed](https://github.com/d3/d3-shape/blob/master/README.md#curveCatmullRomClosed) and [d3.curveCatmullRomOpen](https://github.com/d3/d3-shape/blob/master/README.md#curveCatmullRomOpen). catmullRom catmullRomOpen catmullRomClosed Each curve type can define its own named parameters, replacing *line*.tension and *area*.tension. For example, Catmull–Rom splines are parameterized using [*catmullRom*.alpha](https://github.com/d3/d3-shape/blob/master/README.md#curveCatmullRom_alpha) and defaults to 0.5, which corresponds to a centripetal spline that avoids self-intersections and overshoot. For a uniform Catmull–Rom spline instead: ```js var line = d3.line() .curve(d3.curveCatmullRom.alpha(0)); ``` 4.0 fixes the interpretation of the cardinal spline *tension* parameter, which is now specified as [*cardinal*.tension](https://github.com/d3/d3-shape/blob/master/README.md#curveCardinal_tension) and defaults to zero for a uniform Catmull–Rom spline; a tension of one produces a linear curve. The first and last segments of basis and cardinal curves have also been fixed! The undocumented *interpolate*.reverse field has been removed. Curves can define different behavior for toplines and baselines by counting the sequence of [*curve*.lineStart](https://github.com/d3/d3-shape/blob/master/README.md#curve_lineStart) within [*curve*.areaStart](https://github.com/d3/d3-shape/blob/master/README.md#curve_areaStart). See the [d3.curveStep implementation](https://github.com/d3/d3-shape/blob/master/src/curve/step.js) for an example. 4.0 fixes numerous bugs in the monotone curve implementation, and introduces [d3.curveMonotoneY](https://github.com/d3/d3-shape/blob/master/README.md#curveMonotoneY); this is like d3.curveMonotoneX, except it requires that the input points are monotone in *y* rather than *x*, such as for a vertically-oriented line chart. The new [d3.curveNatural](https://github.com/d3/d3-shape/blob/master/README.md#curveNatural) produces a [natural cubic spline](http://mathworld.wolfram.com/CubicSpline.html). The default [β](https://github.com/d3/d3-shape/blob/master/README.md#bundle_beta) for [d3.curveBundle](https://github.com/d3/d3-shape/blob/master/README.md#curveBundle) is now 0.85, rather than 0.7, matching the values used by [Holten](https://www.win.tue.nl/vis1/home/dholten/papers/bundles_infovis.pdf). 4.0 also has a more robust implementation of arc padding; see [*arc*.padAngle](https://github.com/d3/d3-shape/blob/master/README.md#arc_padAngle) and [*arc*.padRadius](https://github.com/d3/d3-shape/blob/master/README.md#arc_padRadius). 4.0 introduces a new symbol type API. Symbol types are passed to [*symbol*.type](https://github.com/d3/d3-shape/blob/master/README.md#symbol_type) in place of strings. The equivalents are: * circle ↦ [d3.symbolCircle](https://github.com/d3/d3-shape/blob/master/README.md#symbolCircle) * cross ↦ [d3.symbolCross](https://github.com/d3/d3-shape/blob/master/README.md#symbolCross) * diamond ↦ [d3.symbolDiamond](https://github.com/d3/d3-shape/blob/master/README.md#symbolDiamond) * square ↦ [d3.symbolSquare](https://github.com/d3/d3-shape/blob/master/README.md#symbolSquare) * triangle-down ↦ REMOVED * triangle-up ↦ [d3.symbolTriangle](https://github.com/d3/d3-shape/blob/master/README.md#symbolTriangle) * ADDED ↦ [d3.symbolStar](https://github.com/d3/d3-shape/blob/master/README.md#symbolStar) * ADDED ↦ [d3.symbolWye](https://github.com/d3/d3-shape/blob/master/README.md#symbolWye) The full set of symbol types is now: Lastly, 4.0 overhauls the stack layout API, replacing d3.layout.stack with [d3.stack](https://github.com/d3/d3-shape/blob/master/README.md#stacks). The stack generator no longer needs an *x*-accessor. In addition, the API has been simplified: the *stack* generator now accepts tabular input, such as this array of objects: ```js var data = [ {month: new Date(2015, 0, 1), apples: 3840, bananas: 1920, cherries: 960, dates: 400}, {month: new Date(2015, 1, 1), apples: 1600, bananas: 1440, cherries: 960, dates: 400}, {month: new Date(2015, 2, 1), apples: 640, bananas: 960, cherries: 640, dates: 400}, {month: new Date(2015, 3, 1), apples: 320, bananas: 480, cherries: 640, dates: 400} ]; ``` To generate the stack layout, first define a stack generator, and then apply it to the data: ```js var stack = d3.stack() .keys(["apples", "bananas", "cherries", "dates"]) .order(d3.stackOrderNone) .offset(d3.stackOffsetNone); var series = stack(data); ``` The resulting array has one element per *series*. Each series has one point per month, and each point has a lower and upper value defining the baseline and topline: ```js [ [[ 0, 3840], [ 0, 1600], [ 0, 640], [ 0, 320]], // apples [[3840, 5760], [1600, 3040], [ 640, 1600], [ 320, 800]], // bananas [[5760, 6720], [3040, 4000], [1600, 2240], [ 800, 1440]], // cherries [[6720, 7120], [4000, 4400], [2240, 2640], [1440, 1840]], // dates ] ``` Each series in then typically passed to an [area generator](https://github.com/d3/d3-shape/blob/master/README.md#areas) to render an area chart, or used to construct rectangles for a bar chart. Stack generators no longer modify the input data, so *stack*.out has been removed. For an introduction to shapes, see [Introducing d3-shape](https://medium.com/@mbostock/introducing-d3-shape-73f8367e6d12). ## [Time Formats (d3-time-format)](https://github.com/d3/d3-time-format/blob/master/README.md) Pursuant to the great namespace flattening, the format constructors have new names: * d3.time.format ↦ [d3.timeFormat](https://github.com/d3/d3-time-format/blob/master/README.md#timeFormat) * d3.time.format.utc ↦ [d3.utcFormat](https://github.com/d3/d3-time-format/blob/master/README.md#utcFormat) * d3.time.format.iso ↦ [d3.isoFormat](https://github.com/d3/d3-time-format/blob/master/README.md#isoFormat) The *format*.parse method has also been removed in favor of separate [d3.timeParse](https://github.com/d3/d3-time-format/blob/master/README.md#timeParse), [d3.utcParse](https://github.com/d3/d3-time-format/blob/master/README.md#utcParse) and [d3.isoParse](https://github.com/d3/d3-time-format/blob/master/README.md#isoParse) parser constructors. Thus, this code in 3.x: ```js var parseTime = d3.time.format("%c").parse; ``` Can be rewritten in 4.0 as: ```js var parseTime = d3.timeParse("%c"); ``` The multi-scale time format d3.time.format.multi has been replaced by [d3.scaleTime](https://github.com/d3/d3-scale/blob/master/README.md#scaleTime)’s [tick format](https://github.com/d3/d3-scale/blob/master/README.md#time_tickFormat). Time formats now coerce inputs to dates, and time parsers coerce inputs to strings. The `%Z` directive now allows more flexible parsing of time zone offsets, such as `-0700`, `-07:00`, `-07`, and `Z`. The `%p` directive is now parsed correctly when the locale’s period name is longer than two characters (*e.g.*, “a.m.”). The default U.S. English locale now uses 12-hour time and a more concise representation of the date. This aligns with local convention and is consistent with [*date*.toLocaleString](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString) in Chrome, Firefox and Node: ```js var now = new Date; d3.timeFormat("%c")(new Date); // "6/23/2016, 2:01:33 PM" d3.timeFormat("%x")(new Date); // "6/23/2016" d3.timeFormat("%X")(new Date); // "2:01:38 PM" ``` You can now set the default locale using [d3.timeFormatDefaultLocale](https://github.com/d3/d3-time-format/blob/master/README.md#timeFormatDefaultLocale)! The locales are published as [JSON](https://github.com/d3/d3-request/blob/master/README.md#json) to [npm](https://unpkg.com/d3-time-format/locale/). The performance of time formatting and parsing has been improved, and the UTC formatter and parser have a cleaner implementation (that avoids temporarily overriding the Date global). ## [Time Intervals (d3-time)](https://github.com/d3/d3-time/blob/master/README.md) Pursuant to the great namespace flattening, the local time intervals have been renamed: * ADDED ↦ [d3.timeMillisecond](https://github.com/d3/d3-time/blob/master/README.md#timeMillisecond) * d3.time.second ↦ [d3.timeSecond](https://github.com/d3/d3-time/blob/master/README.md#timeSecond) * d3.time.minute ↦ [d3.timeMinute](https://github.com/d3/d3-time/blob/master/README.md#timeMinute) * d3.time.hour ↦ [d3.timeHour](https://github.com/d3/d3-time/blob/master/README.md#timeHour) * d3.time.day ↦ [d3.timeDay](https://github.com/d3/d3-time/blob/master/README.md#timeDay) * d3.time.sunday ↦ [d3.timeSunday](https://github.com/d3/d3-time/blob/master/README.md#timeSunday) * d3.time.monday ↦ [d3.timeMonday](https://github.com/d3/d3-time/blob/master/README.md#timeMonday) * d3.time.tuesday ↦ [d3.timeTuesday](https://github.com/d3/d3-time/blob/master/README.md#timeTuesday) * d3.time.wednesday ↦ [d3.timeWednesday](https://github.com/d3/d3-time/blob/master/README.md#timeWednesday) * d3.time.thursday ↦ [d3.timeThursday](https://github.com/d3/d3-time/blob/master/README.md#timeThursday) * d3.time.friday ↦ [d3.timeFriday](https://github.com/d3/d3-time/blob/master/README.md#timeFriday) * d3.time.saturday ↦ [d3.timeSaturday](https://github.com/d3/d3-time/blob/master/README.md#timeSaturday) * d3.time.week ↦ [d3.timeWeek](https://github.com/d3/d3-time/blob/master/README.md#timeWeek) * d3.time.month ↦ [d3.timeMonth](https://github.com/d3/d3-time/blob/master/README.md#timeMonth) * d3.time.year ↦ [d3.timeYear](https://github.com/d3/d3-time/blob/master/README.md#timeYear) The UTC time intervals have likewise been renamed: * ADDED ↦ [d3.utcMillisecond](https://github.com/d3/d3-time/blob/master/README.md#utcMillisecond) * d3.time.second.utc ↦ [d3.utcSecond](https://github.com/d3/d3-time/blob/master/README.md#utcSecond) * d3.time.minute.utc ↦ [d3.utcMinute](https://github.com/d3/d3-time/blob/master/README.md#utcMinute) * d3.time.hour.utc ↦ [d3.utcHour](https://github.com/d3/d3-time/blob/master/README.md#utcHour) * d3.time.day.utc ↦ [d3.utcDay](https://github.com/d3/d3-time/blob/master/README.md#utcDay) * d3.time.sunday.utc ↦ [d3.utcSunday](https://github.com/d3/d3-time/blob/master/README.md#utcSunday) * d3.time.monday.utc ↦ [d3.utcMonday](https://github.com/d3/d3-time/blob/master/README.md#utcMonday) * d3.time.tuesday.utc ↦ [d3.utcTuesday](https://github.com/d3/d3-time/blob/master/README.md#utcTuesday) * d3.time.wednesday.utc ↦ [d3.utcWednesday](https://github.com/d3/d3-time/blob/master/README.md#utcWednesday) * d3.time.thursday.utc ↦ [d3.utcThursday](https://github.com/d3/d3-time/blob/master/README.md#utcThursday) * d3.time.friday.utc ↦ [d3.utcFriday](https://github.com/d3/d3-time/blob/master/README.md#utcFriday) * d3.time.saturday.utc ↦ [d3.utcSaturday](https://github.com/d3/d3-time/blob/master/README.md#utcSaturday) * d3.time.week.utc ↦ [d3.utcWeek](https://github.com/d3/d3-time/blob/master/README.md#utcWeek) * d3.time.month.utc ↦ [d3.utcMonth](https://github.com/d3/d3-time/blob/master/README.md#utcMonth) * d3.time.year.utc ↦ [d3.utcYear](https://github.com/d3/d3-time/blob/master/README.md#utcYear) The local time range aliases have been renamed: * d3.time.seconds ↦ [d3.timeSeconds](https://github.com/d3/d3-time/blob/master/README.md#timeSeconds) * d3.time.minutes ↦ [d3.timeMinutes](https://github.com/d3/d3-time/blob/master/README.md#timeMinutes) * d3.time.hours ↦ [d3.timeHours](https://github.com/d3/d3-time/blob/master/README.md#timeHours) * d3.time.days ↦ [d3.timeDays](https://github.com/d3/d3-time/blob/master/README.md#timeDays) * d3.time.sundays ↦ [d3.timeSundays](https://github.com/d3/d3-time/blob/master/README.md#timeSundays) * d3.time.mondays ↦ [d3.timeMondays](https://github.com/d3/d3-time/blob/master/README.md#timeMondays) * d3.time.tuesdays ↦ [d3.timeTuesdays](https://github.com/d3/d3-time/blob/master/README.md#timeTuesdays) * d3.time.wednesdays ↦ [d3.timeWednesdays](https://github.com/d3/d3-time/blob/master/README.md#timeWednesdays) * d3.time.thursdays ↦ [d3.timeThursdays](https://github.com/d3/d3-time/blob/master/README.md#timeThursdays) * d3.time.fridays ↦ [d3.timeFridays](https://github.com/d3/d3-time/blob/master/README.md#timeFridays) * d3.time.saturdays ↦ [d3.timeSaturdays](https://github.com/d3/d3-time/blob/master/README.md#timeSaturdays) * d3.time.weeks ↦ [d3.timeWeeks](https://github.com/d3/d3-time/blob/master/README.md#timeWeeks) * d3.time.months ↦ [d3.timeMonths](https://github.com/d3/d3-time/blob/master/README.md#timeMonths) * d3.time.years ↦ [d3.timeYears](https://github.com/d3/d3-time/blob/master/README.md#timeYears) The UTC time range aliases have been renamed: * d3.time.seconds.utc ↦ [d3.utcSeconds](https://github.com/d3/d3-time/blob/master/README.md#utcSeconds) * d3.time.minutes.utc ↦ [d3.utcMinutes](https://github.com/d3/d3-time/blob/master/README.md#utcMinutes) * d3.time.hours.utc ↦ [d3.utcHours](https://github.com/d3/d3-time/blob/master/README.md#utcHours) * d3.time.days.utc ↦ [d3.utcDays](https://github.com/d3/d3-time/blob/master/README.md#utcDays) * d3.time.sundays.utc ↦ [d3.utcSundays](https://github.com/d3/d3-time/blob/master/README.md#utcSundays) * d3.time.mondays.utc ↦ [d3.utcMondays](https://github.com/d3/d3-time/blob/master/README.md#utcMondays) * d3.time.tuesdays.utc ↦ [d3.utcTuesdays](https://github.com/d3/d3-time/blob/master/README.md#utcTuesdays) * d3.time.wednesdays.utc ↦ [d3.utcWednesdays](https://github.com/d3/d3-time/blob/master/README.md#utcWednesdays) * d3.time.thursdays.utc ↦ [d3.utcThursdays](https://github.com/d3/d3-time/blob/master/README.md#utcThursdays) * d3.time.fridays.utc ↦ [d3.utcFridays](https://github.com/d3/d3-time/blob/master/README.md#utcFridays) * d3.time.saturdays.utc ↦ [d3.utcSaturdays](https://github.com/d3/d3-time/blob/master/README.md#utcSaturdays) * d3.time.weeks.utc ↦ [d3.utcWeeks](https://github.com/d3/d3-time/blob/master/README.md#utcWeeks) * d3.time.months.utc ↦ [d3.utcMonths](https://github.com/d3/d3-time/blob/master/README.md#utcMonths) * d3.time.years.utc ↦ [d3.utcYears](https://github.com/d3/d3-time/blob/master/README.md#utcYears) The behavior of [*interval*.range](https://github.com/d3/d3-time/blob/master/README.md#interval_range) (and the convenience aliases such as [d3.timeDays](https://github.com/d3/d3-time/blob/master/README.md#timeDays)) has been changed when *step* is greater than one. Rather than filtering the returned dates using the field number, *interval*.range now behaves like [d3.range](https://github.com/d3/d3-array/blob/master/README.md#range): it simply skips, returning every *step*th date. For example, the following code in 3.x returns only odd days of the month: ```js d3.time.days(new Date(2016, 4, 28), new Date(2016, 5, 5), 2); // [Sun May 29 2016 00:00:00 GMT-0700 (PDT), // Tue May 31 2016 00:00:00 GMT-0700 (PDT), // Wed Jun 01 2016 00:00:00 GMT-0700 (PDT), // Fri Jun 03 2016 00:00:00 GMT-0700 (PDT)] ``` Note the returned array of dates does not start on the *start* date because May 28 is even. Also note that May 31 and June 1 are one day apart, not two! The behavior of d3.timeDays in 4.0 is probably closer to what you expect: ```js d3.timeDays(new Date(2016, 4, 28), new Date(2016, 5, 5), 2); // [Sat May 28 2016 00:00:00 GMT-0700 (PDT), // Mon May 30 2016 00:00:00 GMT-0700 (PDT), // Wed Jun 01 2016 00:00:00 GMT-0700 (PDT), // Fri Jun 03 2016 00:00:00 GMT-0700 (PDT)] ``` If you want a filtered view of a time interval (say to guarantee that two overlapping ranges are consistent, such as when generating [time scale ticks](https://github.com/d3/d3-scale/blob/master/README.md#time_ticks)), you can use the new [*interval*.every](https://github.com/d3/d3-time/blob/master/README.md#interval_every) method or its more general cousin [*interval*.filter](https://github.com/d3/d3-time/blob/master/README.md#interval_filter): ```js d3.timeDay.every(2).range(new Date(2016, 4, 28), new Date(2016, 5, 5)); // [Sun May 29 2016 00:00:00 GMT-0700 (PDT), // Tue May 31 2016 00:00:00 GMT-0700 (PDT), // Wed Jun 01 2016 00:00:00 GMT-0700 (PDT), // Fri Jun 03 2016 00:00:00 GMT-0700 (PDT)] ``` Time intervals now expose an [*interval*.count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) method for counting the number of interval boundaries after a *start* date and before or equal to an *end* date. This replaces d3.time.dayOfYear and related methods in 3.x. For example, this code in 3.x: ```js var now = new Date; d3.time.dayOfYear(now); // 165 ``` Can be rewritten in 4.0 as: ```js var now = new Date; d3.timeDay.count(d3.timeYear(now), now); // 165 ``` Likewise, in place of 3.x’s d3.time.weekOfYear, in 4.0 you would say: ```js d3.timeWeek.count(d3.timeYear(now), now); // 24 ``` The new *interval*.count is of course more general. For example, you can use it to compute hour-of-week for a heatmap: ```js d3.timeHour.count(d3.timeWeek(now), now); // 64 ``` Here are all the equivalences from 3.x to 4.0: * d3.time.dayOfYear ↦ [d3.timeDay](https://github.com/d3/d3-time/blob/master/README.md#timeDay).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.sundayOfYear ↦ [d3.timeSunday](https://github.com/d3/d3-time/blob/master/README.md#timeSunday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.mondayOfYear ↦ [d3.timeMonday](https://github.com/d3/d3-time/blob/master/README.md#timeMonday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.tuesdayOfYear ↦ [d3.timeTuesday](https://github.com/d3/d3-time/blob/master/README.md#timeTuesday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.wednesdayOfYear ↦ [d3.timeWednesday](https://github.com/d3/d3-time/blob/master/README.md#timeWednesday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.thursdayOfYear ↦ [d3.timeThursday](https://github.com/d3/d3-time/blob/master/README.md#timeThursday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.fridayOfYear ↦ [d3.timeFriday](https://github.com/d3/d3-time/blob/master/README.md#timeFriday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.saturdayOfYear ↦ [d3.timeSaturday](https://github.com/d3/d3-time/blob/master/README.md#timeSaturday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.weekOfYear ↦ [d3.timeWeek](https://github.com/d3/d3-time/blob/master/README.md#timeWeek).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.dayOfYear.utc ↦ [d3.utcDay](https://github.com/d3/d3-time/blob/master/README.md#utcDay).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.sundayOfYear.utc ↦ [d3.utcSunday](https://github.com/d3/d3-time/blob/master/README.md#utcSunday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.mondayOfYear.utc ↦ [d3.utcMonday](https://github.com/d3/d3-time/blob/master/README.md#utcMonday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.tuesdayOfYear.utc ↦ [d3.utcTuesday](https://github.com/d3/d3-time/blob/master/README.md#utcTuesday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.wednesdayOfYear.utc ↦ [d3.utcWednesday](https://github.com/d3/d3-time/blob/master/README.md#utcWednesday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.thursdayOfYear.utc ↦ [d3.utcThursday](https://github.com/d3/d3-time/blob/master/README.md#utcThursday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.fridayOfYear.utc ↦ [d3.utcFriday](https://github.com/d3/d3-time/blob/master/README.md#utcFriday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.saturdayOfYear.utc ↦ [d3.utcSaturday](https://github.com/d3/d3-time/blob/master/README.md#utcSaturday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.weekOfYear.utc ↦ [d3.utcWeek](https://github.com/d3/d3-time/blob/master/README.md#utcWeek).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) D3 4.0 now also lets you define custom time intervals using [d3.timeInterval](https://github.com/d3/d3-time/blob/master/README.md#timeInterval). The [d3.timeYear](https://github.com/d3/d3-time/blob/master/README.md#timeYear), [d3.utcYear](https://github.com/d3/d3-time/blob/master/README.md#utcYear), [d3.timeMillisecond](https://github.com/d3/d3-time/blob/master/README.md#timeMillisecond) and [d3.utcMillisecond](https://github.com/d3/d3-time/blob/master/README.md#utcMillisecond) intervals have optimized implementations of [*interval*.every](https://github.com/d3/d3-time/blob/master/README.md#interval_every), which is necessary to generate time ticks for very large or very small domains efficiently. More generally, the performance of time intervals has been improved, and time intervals now do a better job with respect to daylight savings in various locales. ## [Timers (d3-timer)](https://github.com/d3/d3-timer/blob/master/README.md) In D3 3.x, the only way to stop a timer was for its callback to return true. For example, this timer stops after one second: ```js d3.timer(function(elapsed) { console.log(elapsed); return elapsed >= 1000; }); ``` In 4.0, use [*timer*.stop](https://github.com/d3/d3-timer/blob/master/README.md#timer_stop) instead: ```js var t = d3.timer(function(elapsed) { console.log(elapsed); if (elapsed >= 1000) { t.stop(); } }); ``` The primary benefit of *timer*.stop is that timers are not required to self-terminate: they can be stopped externally, allowing for the immediate and synchronous disposal of associated resources, and the separation of concerns. The above is equivalent to: ```js var t = d3.timer(function(elapsed) { console.log(elapsed); }); d3.timeout(function() { t.stop(); }, 1000); ``` This improvement extends to [d3-transition](#transitions-d3-transition): now when a transition is interrupted, its resources are immediately freed rather than having to wait for transition to start. 4.0 also introduces a new [*timer*.restart](https://github.com/d3/d3-timer/blob/master/README.md#timer_restart) method for restarting timers, for replacing the callback of a running timer, or for changing its delay or reference time. Unlike *timer*.stop followed by [d3.timer](https://github.com/d3/d3-timer/blob/master/README.md#timer), *timer*.restart maintains the invocation priority of an existing timer: it guarantees that the order of invocation of active timers remains the same. The d3.timer.flush method has been renamed to [d3.timerFlush](https://github.com/d3/d3-timer/blob/master/README.md#timerFlush). Some usage patterns in D3 3.x could cause the browser to hang when a background page returned to the foreground. For example, the following code schedules a transition every second: ```js setInterval(function() { d3.selectAll("div").transition().call(someAnimation); // BAD }, 1000); ``` If such code runs in the background for hours, thousands of queued transitions will try to run simultaneously when the page is foregrounded. D3 4.0 avoids this hang by freezing time in the background: when a page is in the background, time does not advance, and so no queue of timers accumulates to run when the page returns to the foreground. Use d3.timer instead of transitions to schedule a long-running animation, or use [d3.timeout](https://github.com/d3/d3-timer/blob/master/README.md#timeout) and [d3.interval](https://github.com/d3/d3-timer/blob/master/README.md#interval) in place of setTimeout and setInterval to prevent transitions from being queued in the background: ```js d3.interval(function() { d3.selectAll("div").transition().call(someAnimation); // GOOD }, 1000); ``` By freezing time in the background, timers are effectively “unaware” of being backgrounded. It’s like nothing happened! 4.0 also now uses high-precision time ([performance.now](https://developer.mozilla.org/en-US/docs/Web/API/Performance/now)) where available; the current time is available as [d3.now](https://github.com/d3/d3-timer/blob/master/README.md#now). ## [Transitions (d3-transition)](https://github.com/d3/d3-transition/blob/master/README.md) The [*selection*.transition](https://github.com/d3/d3-transition/blob/master/README.md#selection_transition) method now takes an optional *transition* instance which can be used to synchronize a new transition with an existing transition. (This change is discussed further in [What Makes Software Good?](https://medium.com/@mbostock/what-makes-software-good-943557f8a488)) For example: ```js var t = d3.transition() .duration(750) .ease(d3.easeLinear); d3.selectAll(".apple").transition(t) .style("fill", "red"); d3.selectAll(".orange").transition(t) .style("fill", "orange"); ``` Transitions created this way inherit timing from the closest ancestor element, and thus are synchronized even when the referenced *transition* has variable timing such as a staggered delay. This method replaces the deeply magical behavior of *transition*.each in 3.x; in 4.0, [*transition*.each](https://github.com/d3/d3-transition/blob/master/README.md#transition_each) is identical to [*selection*.each](https://github.com/d3/d3-selection/blob/master/README.md#selection_each). Use the new [*transition*.on](https://github.com/d3/d3-transition/blob/master/README.md#transition_on) method to listen to transition events. The meaning of [*transition*.delay](https://github.com/d3/d3-transition/blob/master/README.md#transition_delay) has changed for chained transitions created by [*transition*.transition](https://github.com/d3/d3-transition/blob/master/README.md#transition_transition). The specified delay is now relative to the *previous* transition in the chain, rather than the *first* transition in the chain; this makes it easier to insert interstitial pauses. For example: ```js d3.selectAll(".apple") .transition() // First fade to green. .style("fill", "green") .transition() // Then red. .style("fill", "red") .transition() // Wait one second. Then brown, and remove. .delay(1000) .style("fill", "brown") .remove(); ``` Time is now frozen in the background; see [d3-timer](#timers-d3-timer) for more information. While it was previously the case that transitions did not run in the background, now they pick up where they left off when the page returns to the foreground. This avoids page hangs by not scheduling an unbounded number of transitions in the background. If you want to schedule an infinitely-repeating transition, use transition events, or use [d3.timeout](https://github.com/d3/d3-timer/blob/master/README.md#timeout) and [d3.interval](https://github.com/d3/d3-timer/blob/master/README.md#interval) in place of [setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout) and [setInterval](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval). The [*selection*.interrupt](https://github.com/d3/d3-transition/blob/master/README.md#selection_interrupt) method now cancels all scheduled transitions on the selected elements, in addition to interrupting any active transition. When transitions are interrupted, any resources associated with the transition are now released immediately, rather than waiting until the transition starts, improving performance. (See also [*timer*.stop](https://github.com/d3/d3-timer/blob/master/README.md#timer_stop).) The new [d3.interrupt](https://github.com/d3/d3-transition/blob/master/README.md#interrupt) method is an alternative to [*selection*.interrupt](https://github.com/d3/d3-transition/blob/master/README.md#selection_interrupt) for quickly interrupting a single node. The new [d3.active](https://github.com/d3/d3-transition/blob/master/README.md#active) method allows you to select the currently-active transition on a given *node*, if any. This is useful for modifying in-progress transitions and for scheduling infinitely-repeating transitions. For example, this transition continuously oscillates between red and blue: ```js d3.select("circle") .transition() .on("start", function repeat() { d3.active(this) .style("fill", "red") .transition() .style("fill", "blue") .transition() .on("start", repeat); }); ``` The [life cycle of a transition](https://github.com/d3/d3-transition/blob/master/README.md#the-life-of-a-transition) is now more formally defined and enforced. For example, attempting to change the duration of a running transition now throws an error rather than silently failing. The [*transition*.remove](https://github.com/d3/d3-transition/blob/master/README.md#transition_remove) method has been fixed if multiple transition names are in use: the element is only removed if it has no scheduled transitions, regardless of name. The [*transition*.ease](https://github.com/d3/d3-transition/blob/master/README.md#transition_ease) method now always takes an [easing function](#easings-d3-ease), not a string. When a transition ends, the tweens are invoked one last time with *t* equal to exactly 1, regardless of the associated easing function. As with [selections](#selections-d3-selection) in 4.0, all transition callback functions now receive the standard arguments: the element’s datum (*d*), the element’s index (*i*), and the element’s group (*nodes*), with *this* as the element. This notably affects [*transition*.attrTween](https://github.com/d3/d3-transition/blob/master/README.md#transition_attrTween) and [*transition*.styleTween](https://github.com/d3/d3-transition/blob/master/README.md#transition_styleTween), which no longer pass the *tween* function the current attribute or style value as the third argument. The *transition*.attrTween and *transition*.styleTween methods can now be called in getter modes for debugging or to share tween definitions between transitions. Homogenous transitions are now optimized! If all elements in a transition share the same tween, interpolator, or event listeners, this state is now shared across the transition rather than separately allocated for each element. 4.0 also uses an optimized default interpolator in place of [d3.interpolate](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolate) for [*transition*.attr](https://github.com/d3/d3-transition/blob/master/README.md#transition_attr) and [*transition*.style](https://github.com/d3/d3-transition/blob/master/README.md#transition_style). And transitions can now interpolate both [CSS](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateTransformCss) and [SVG](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateTransformSvg) transforms. For reusable components that support transitions, such as [axes](#axes-d3-axis), a new [*transition*.selection](https://github.com/d3/d3-transition/blob/master/README.md#transition_selection) method returns the [selection](#selections-d3-selection) that corresponds to a given transition. There is also a new [*transition*.merge](https://github.com/d3/d3-transition/blob/master/README.md#transition_merge) method that is equivalent to [*selection*.merge](https://github.com/d3/d3-selection/blob/master/README.md#selection_merge). For the sake of parsimony, the multi-value map methods have been extracted to [d3-selection-multi](https://github.com/d3/d3-selection-multi) and are no longer part of the default bundle. The multi-value map methods have also been renamed to plural form to reduce overload: [*transition*.attrs](https://github.com/d3/d3-selection-multi/blob/master/README.md#transition_attrs) and [*transition*.styles](https://github.com/d3/d3-selection-multi/blob/master/README.md#transition_styles). ## [Voronoi Diagrams (d3-voronoi)](https://github.com/d3/d3-voronoi/blob/master/README.md) The d3.geom.voronoi method has been renamed to [d3.voronoi](https://github.com/d3/d3-voronoi/blob/master/README.md#voronoi), and the *voronoi*.clipExtent method has been renamed to [*voronoi*.extent](https://github.com/d3/d3-voronoi/blob/master/README.md#voronoi_extent). The undocumented *polygon*.point property in 3.x, which is the element in the input *data* corresponding to the polygon, has been renamed to *polygon*.data. Calling [*voronoi*](https://github.com/d3/d3-voronoi/blob/master/README.md#_voronoi) now returns the full [Voronoi diagram](https://github.com/d3/d3-voronoi/blob/master/README.md#voronoi-diagrams), which includes topological information: each Voronoi edge exposes *edge*.left and *edge*.right specifying the sites on either side of the edge, and each Voronoi cell is defined as an array of these edges and a corresponding site. The Voronoi diagram can be used to efficiently compute both the Voronoi and Delaunay tessellations for a set of points: [*diagram*.polygons](https://github.com/d3/d3-voronoi/blob/master/README.md#diagram_polygons), [*diagram*.links](https://github.com/d3/d3-voronoi/blob/master/README.md#diagram_links), and [*diagram*.triangles](https://github.com/d3/d3-voronoi/blob/master/README.md#diagram_triangles). The new topology is also useful in conjunction with TopoJSON; see the [Voronoi topology example](https://bl.ocks.org/mbostock/cd52a201d7694eb9d890). The [*voronoi*.polygons](https://github.com/d3/d3-voronoi/blob/master/README.md#voronoi_polygons) and [*diagram*.polygons](https://github.com/d3/d3-voronoi/blob/master/README.md#diagram_polygons) now require an [extent](https://github.com/d3/d3-voronoi/blob/master/README.md#voronoi_extent); there is no longer an implicit extent of ±1e6. The [*voronoi*.links](https://github.com/d3/d3-voronoi/blob/master/README.md#voronoi_links), [*voronoi*.triangles](https://github.com/d3/d3-voronoi/blob/master/README.md#voronoi_triangles), [*diagram*.links](https://github.com/d3/d3-voronoi/blob/master/README.md#diagram_links) and [*diagram*.triangles](https://github.com/d3/d3-voronoi/blob/master/README.md#diagram_triangles) are now affected by the clip extent: as the Delaunay is computed as the dual of the Voronoi, two sites are only linked if the clipped cells are touching. To compute the Delaunay triangulation without respect to clipping, set the extent to null. The Voronoi generator finally has well-defined behavior for coincident vertices: the first of a set of coincident points has a defined cell, while the subsequent duplicate points have null cells. The returned array of polygons is sparse, so by using *array*.forEach or *array*.map, you can easily skip undefined cells. The Voronoi generator also now correctly handles the case where no cell edges intersect the extent. ## [Zooming (d3-zoom)](https://github.com/d3/d3-zoom/blob/master/README.md) The zoom behavior d3.behavior.zoom has been renamed to d3.zoom. Zoom behaviors no longer store the active zoom transform (*i.e.*, the visible region; the scale and translate) internally. The zoom transform is now stored on any elements to which the zoom behavior has been applied. The zoom transform is available as *event*.transform within a zoom event or by calling [d3.zoomTransform](https://github.com/d3/d3-zoom/blob/master/README.md#zoomTransform) on a given *element*. To zoom programmatically, use [*zoom*.transform](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_transform) with a given [selection](#selections-d3-selection) or [transition](#transitions-d3-transition); see the [zoom transitions example](https://bl.ocks.org/mbostock/b783fbb2e673561d214e09c7fb5cedee). The *zoom*.event method has been removed. To make programmatic zooming easier, there are several new convenience methods on top of *zoom*.transform: [*zoom*.translateBy](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_translateBy), [*zoom*.scaleBy](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_scaleBy) and [*zoom*.scaleTo](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_scaleTo). There is also a new API for describing [zoom transforms](https://github.com/d3/d3-zoom/blob/master/README.md#zoom-transforms). Zoom behaviors are no longer dependent on [scales](#scales-d3-scale), but you can use [*transform*.rescaleX](https://github.com/d3/d3-zoom/blob/master/README.md#transform_rescaleX), [*transform*.rescaleY](https://github.com/d3/d3-zoom/blob/master/README.md#transform_rescaleY), [*transform*.invertX](https://github.com/d3/d3-zoom/blob/master/README.md#transform_invertX) or [*transform*.invertY](https://github.com/d3/d3-zoom/blob/master/README.md#transform_invertY) to transform a scale’s domain. 3.x’s *event*.scale is replaced with *event*.transform.k, and *event*.translate is replaced with *event*.transform.x and *event*.transform.y. The *zoom*.center method has been removed in favor of programmatic zooming. The zoom behavior finally supports simple constraints on panning! The new [*zoom*.translateExtent](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_translateExtent) lets you define the viewable extent of the world: the currently-visible extent (the extent of the viewport, as defined by [*zoom*.extent](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_extent)) is always contained within the translate extent. The *zoom*.size method has been replaced by *zoom*.extent, and the default behavior is now smarter: it defaults to the extent of the zoom behavior’s owner element, rather than being hardcoded to 960×500. (This also improves the default path chosen during smooth zoom transitions!) The zoom behavior’s interaction has also improved. It now correctly handles concurrent wheeling and dragging, as well as concurrent touching and mousing. The zoom behavior now ignores wheel events at the limits of its scale extent, allowing you to scroll past a zoomable area. The *zoomstart* and *zoomend* events have been renamed *start* and *end*. By default, zoom behaviors now ignore right-clicks intended for the context menu; use [*zoom*.filter](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_filter) to control which events are ignored. The zoom behavior also ignores emulated mouse events on iOS. The zoom behavior now consumes handled events, making it easier to combine with other interactive behaviors such as [dragging](#dragging-d3-drag). ================================================ FILE: inst/www/d3/v5/LICENSE ================================================ Copyright 2010-2017 Mike Bostock All rights reserved. Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: * Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. * Neither the name of the author nor the names of contributors may be used to endorse or promote products derived from this software without specific prior written permission. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. ================================================ FILE: inst/www/d3/v5/README.md ================================================ # D3: Data-Driven Documents **D3** (or **D3.js**) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, Canvas and HTML. D3 combines powerful visualization and interaction techniques with a data-driven approach to DOM manipulation, giving you the full capabilities of modern browsers and the freedom to design the right visual interface for your data. ## Resources * [Introduction](https://observablehq.com/@d3/learn-d3) * [API Reference](https://github.com/d3/d3/blob/master/API.md) * [Releases](https://github.com/d3/d3/releases) * [Examples](https://observablehq.com/@d3/gallery) * [Wiki](https://github.com/d3/d3/wiki) ## Installing If you use npm, `npm install d3`. Otherwise, download the [latest release](https://github.com/d3/d3/releases/latest). The released bundle supports anonymous AMD, CommonJS, and vanilla environments. You can load directly from [d3js.org](https://d3js.org), [CDNJS](https://cdnjs.com/libraries/d3), or [unpkg](https://unpkg.com/d3/). For example: ```html ``` For the minified version: ```html ``` You can also use the standalone D3 microlibraries. For example, [d3-selection](https://github.com/d3/d3-selection): ```html ``` D3 is written using [ES2015 modules](http://www.2ality.com/2014/09/es6-modules-final.html). Create a [custom bundle using Rollup](https://bl.ocks.org/mbostock/bb09af4c39c79cffcde4), Webpack, or your preferred bundler. To import D3 into an ES2015 application, either import specific symbols from specific D3 modules: ```js import {scaleLinear} from "d3-scale"; ``` Or import everything into a namespace (here, `d3`): ```js import * as d3 from "d3"; ``` In Node: ```js var d3 = require("d3"); ``` You can also require individual modules and combine them into a `d3` object using [Object.assign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign): ```js var d3 = Object.assign({}, require("d3-format"), require("d3-geo"), require("d3-geo-projection")); ``` ================================================ FILE: inst/www/d3/v6/API.md ================================================ # D3 API Reference D3 is a [collection of modules](https://github.com/d3) that are designed to work together; you can use the modules independently, or you can use them together as part of the default build. The source and documentation for each module is available in its repository. Follow the links below to learn more. For changes between major versions, see [CHANGES](https://github.com/d3/d3/blob/master/CHANGES.md); see also the [release notes](https://github.com/d3/d3/releases) and the [3.x reference](https://github.com/d3/d3-3.x-api-reference/blob/master/API-Reference.md). * [Arrays](#arrays-d3-array) ([Statistics](#statistics), [Search](#search), [Iterables](#iterables), [Sets](#sets), [Transformations](#transformations), [Histograms](#histograms), [Interning](#interning)) * [Axes](#axes-d3-axis) * [Brushes](#brushes-d3-brush) * [Chords](#chords-d3-chord) * [Colors](#colors-d3-color) * [Color Schemes](#color-schemes-d3-scale-chromatic) * [Contours](#contours-d3-contour) * [Voronoi Diagrams](#voronoi-diagrams-d3-delaunay) * [Dispatches](#dispatches-d3-dispatch) * [Dragging](#dragging-d3-drag) * [Delimiter-Separated Values](#delimiter-separated-values-d3-dsv) * [Easings](#easings-d3-ease) * [Fetches](#fetches-d3-fetch) * [Forces](#forces-d3-force) * [Number Formats](#number-formats-d3-format) * [Geographies](#geographies-d3-geo) ([Paths](#paths), [Projections](#projections), [Spherical Math](#spherical-math), [Spherical Shapes](#spherical-shapes), [Streams](#streams), [Transforms](#transforms)) * [Hierarchies](#hierarchies-d3-hierarchy) * [Interpolators](#interpolators-d3-interpolate) * [Paths](#paths-d3-path) * [Polygons](#polygons-d3-polygon) * [Quadtrees](#quadtrees-d3-quadtree) * [Random Numbers](#random-numbers-d3-random) * [Scales](#scales-d3-scale) ([Continuous](#continuous-scales), [Sequential](#sequential-scales), [Diverging](#diverging-scales), [Quantize](#quantize-scales), [Ordinal](#ordinal-scales)) * [Selections](#selections-d3-selection) ([Selecting](#selecting-elements), [Modifying](#modifying-elements), [Data](#joining-data), [Events](#handling-events), [Control](#control-flow), [Local Variables](#local-variables), [Namespaces](#namespaces)) * [Shapes](#shapes-d3-shape) ([Arcs](#arcs), [Pies](#pies), [Lines](#lines), [Areas](#areas), [Curves](#curves), [Links](#links), [Symbols](#symbols), [Stacks](#stacks)) * [Time Formats](#time-formats-d3-time-format) * [Time Intervals](#time-intervals-d3-time) * [Timers](#timers-d3-timer) * [Transitions](#transitions-d3-transition) * [Zooming](#zooming-d3-zoom) D3 uses [semantic versioning](http://semver.org/). The current version is exposed as d3.version. ## [Arrays (d3-array)](https://github.com/d3/d3-array/tree/v2.12.1) Array manipulation, ordering, searching, summarizing, etc. ### [Statistics](https://github.com/d3/d3-array/blob/v2.12.1/README.md#statistics) Methods for computing basic summary statistics. * [d3.min](https://github.com/d3/d3-array/blob/v2.12.1/README.md#min) - compute the minimum value in an iterable. * [d3.minIndex](https://github.com/d3/d3-array/blob/v2.12.1/README.md#minIndex) - compute the index of the minimum value in an iterable. * [d3.max](https://github.com/d3/d3-array/blob/v2.12.1/README.md#max) - compute the maximum value in an iterable. * [d3.maxIndex](https://github.com/d3/d3-array/blob/v2.12.1/README.md#maxIndex) - compute the index of the maximum value in an iterable. * [d3.extent](https://github.com/d3/d3-array/blob/v2.12.1/README.md#extent) - compute the minimum and maximum value in an iterable. * [d3.sum](https://github.com/d3/d3-array/blob/v2.12.1/README.md#sum) - compute the sum of an iterable of numbers. * [d3.mean](https://github.com/d3/d3-array/blob/v2.12.1/README.md#mean) - compute the arithmetic mean of an iterable of numbers. * [d3.median](https://github.com/d3/d3-array/blob/v2.12.1/README.md#median) - compute the median of an iterable of numbers (the 0.5-quantile). * [d3.cumsum](https://github.com/d3/d3-array/blob/v2.12.1/README.md#cumsum) - compute the cumulative sum of an iterable. * [d3.quantile](https://github.com/d3/d3-array/blob/v2.12.1/README.md#quantile) - compute a quantile for an iterable of numbers. * [d3.quantileSorted](https://github.com/d3/d3-array/blob/v2.12.1/README.md#quantileSorted) - compute a quantile for a sorted array of numbers. * [d3.variance](https://github.com/d3/d3-array/blob/v2.12.1/README.md#variance) - compute the variance of an iterable of numbers. * [d3.deviation](https://github.com/d3/d3-array/blob/v2.12.1/README.md#deviation) - compute the standard deviation of an iterable of numbers. * [d3.fcumsum](https://github.com/d3/d3-array/blob/v2.12.1/README.md#fcumsum) - compute a full precision cumulative summation of numbers. * [d3.fsum](https://github.com/d3/d3-array/blob/v2.12.1/README.md#fsum) - compute a full precision summation of an iterable of numbers. * [new d3.Adder](https://github.com/d3/d3-array/blob/v2.12.1/README.md#adder) - creates a full precision adder. * [*adder*.add](https://github.com/d3/d3-array/blob/v2.12.1/README.md#adder_add) - add a value to an adder. * [*adder*.valueOf](https://github.com/d3/d3-array/blob/v2.12.1/README.md#adder_valueOf) - returns a double precision representation of an adder’s value. ### [Search](https://github.com/d3/d3-array/blob/v2.12.1/README.md#search) Methods for searching arrays for a specific element. * [d3.least](https://github.com/d3/d3-array/blob/v2.12.1/README.md#least) - returns the least element of an iterable. * [d3.leastIndex](https://github.com/d3/d3-array/blob/v2.12.1/README.md#leastIndex) - returns the index of the least element of an iterable. * [d3.greatest](https://github.com/d3/d3-array/blob/v2.12.1/README.md#greatest) - returns the greatest element of an iterable. * [d3.greatestIndex](https://github.com/d3/d3-array/blob/v2.12.1/README.md#greatestIndex) - returns the index of the greatest element of an iterable. * [d3.bisectCenter](https://github.com/d3/d3-array/blob/v2.12.1/README.md#bisectCenter) - binary search for a value in a sorted array. * [d3.bisectLeft](https://github.com/d3/d3-array/blob/v2.12.1/README.md#bisectLeft) - binary search for a value in a sorted array. * [d3.bisect](https://github.com/d3/d3-array/blob/v2.12.1/README.md#bisect) - binary search for a value in a sorted array. * [d3.bisectRight](https://github.com/d3/d3-array/blob/v2.12.1/README.md#bisectRight) - binary search for a value in a sorted array. * [d3.bisector](https://github.com/d3/d3-array/blob/v2.12.1/README.md#bisector) - bisect using an accessor or comparator. * [*bisector*.center](https://github.com/d3/d3-array/blob/v2.12.1/README.md#bisector_center) - binary search for a value in a sorted array. * [*bisector*.left](https://github.com/d3/d3-array/blob/v2.12.1/README.md#bisector_left) - bisectLeft, with the given comparator. * [*bisector*.right](https://github.com/d3/d3-array/blob/v2.12.1/README.md#bisector_right) - bisectRight, with the given comparator. * [d3.quickselect](https://github.com/d3/d3-array/blob/v2.12.1/README.md#quickselect) - reorder an array of numbers. * [d3.ascending](https://github.com/d3/d3-array/blob/v2.12.1/README.md#ascending) - compute the natural order of two values. * [d3.descending](https://github.com/d3/d3-array/blob/v2.12.1/README.md#descending) - compute the natural order of two values. ### [Transformations](https://github.com/d3/d3-array/blob/v2.12.1/README.md#transformations) Methods for transforming arrays and for generating new arrays. * [d3.group](https://github.com/d3/d3-array/blob/v2.12.1/README.md#group) - group an iterable into a nested Map. * [d3.groups](https://github.com/d3/d3-array/blob/v2.12.1/README.md#groups) - group an iterable into a nested array. * [d3.index](https://github.com/d3/d3-array/blob/v2.12.1/README.md#index) - index an iterable into a nested Map. * [d3.indexes](https://github.com/d3/d3-array/blob/v2.12.1/README.md#indexes) - index an iterable into a nested array. * [d3.rollup](https://github.com/d3/d3-array/blob/v2.12.1/README.md#rollup) - reduce an iterable into a nested Map. * [d3.rollups](https://github.com/d3/d3-array/blob/v2.12.1/README.md#rollups) - reduce an iterable into a nested array. * [d3.groupSort](https://github.com/d3/d3-array/blob/v2.12.1/README.md#groupSort) - sort keys according to grouped values. * [d3.count](https://github.com/d3/d3-array/blob/v2.12.1/README.md#count) - count valid number values in an iterable. * [d3.cross](https://github.com/d3/d3-array/blob/v2.12.1/README.md#cross) - compute the Cartesian product of two iterables. * [d3.merge](https://github.com/d3/d3-array/blob/v2.12.1/README.md#merge) - merge multiple iterables into one array. * [d3.pairs](https://github.com/d3/d3-array/blob/v2.12.1/README.md#pairs) - create an array of adjacent pairs of elements. * [d3.permute](https://github.com/d3/d3-array/blob/v2.12.1/README.md#permute) - reorder an iterable of elements according to an iterable of indexes. * [d3.shuffle](https://github.com/d3/d3-array/blob/v2.12.1/README.md#shuffle) - randomize the order of an iterable. * [d3.shuffler](https://github.com/d3/d3-array/blob/v2.12.1/README.md#shuffler) - randomize the order of an iterable. * [d3.ticks](https://github.com/d3/d3-array/blob/v2.12.1/README.md#ticks) - generate representative values from a numeric interval. * [d3.tickIncrement](https://github.com/d3/d3-array/blob/v2.12.1/README.md#tickIncrement) - generate representative values from a numeric interval. * [d3.tickStep](https://github.com/d3/d3-array/blob/v2.12.1/README.md#tickStep) - generate representative values from a numeric interval. * [d3.nice](https://github.com/d3/d3-array/blob/v2.12.1/README.md#nice) - extend an interval to align with ticks. * [d3.range](https://github.com/d3/d3-array/blob/v2.12.1/README.md#range) - generate a range of numeric values. * [d3.transpose](https://github.com/d3/d3-array/blob/v2.12.1/README.md#transpose) - transpose an array of arrays. * [d3.zip](https://github.com/d3/d3-array/blob/v2.12.1/README.md#zip) - transpose a variable number of arrays. ### [Iterables](https://github.com/d3/d3-array/blob/v2.12.1/README.md#iterables) * [d3.every](https://github.com/d3/d3-array/blob/v2.12.1/README.md#every) - test if all values satisfy a condition. * [d3.some](https://github.com/d3/d3-array/blob/v2.12.1/README.md#some) - test if any value satisfies a condition. * [d3.filter](https://github.com/d3/d3-array/blob/v2.12.1/README.md#filter) - filter values. * [d3.map](https://github.com/d3/d3-array/blob/v2.12.1/README.md#map) - map values. * [d3.reduce](https://github.com/d3/d3-array/blob/v2.12.1/README.md#reduce) - reduce values. * [d3.reverse](https://github.com/d3/d3-array/blob/v2.12.1/README.md#reverse) - reverse the order of values. * [d3.sort](https://github.com/d3/d3-array/blob/v2.12.1/README.md#sort) - sort values. ### [Sets](https://github.com/d3/d3-array/blob/v2.12.1/README.md#sets) * [d3.difference](https://github.com/d3/d3-array/blob/v2.12.1/README.md#difference) - compute a set difference. * [d3.disjoint](https://github.com/d3/d3-array/blob/v2.12.1/README.md#disjoint) - test whether two sets are disjoint. * [d3.intersection](https://github.com/d3/d3-array/blob/v2.12.1/README.md#intersection) - compute a set intersection. * [d3.superset](https://github.com/d3/d3-array/blob/v2.12.1/README.md#superset) - test whether a set is a superset of another. * [d3.subset](https://github.com/d3/d3-array/blob/v2.12.1/README.md#subset) - test whether a set is a subset of another. * [d3.union](https://github.com/d3/d3-array/blob/v2.12.1/README.md#union) - compute a set union. ### [Histograms](https://github.com/d3/d3-array/blob/v2.12.1/README.md#bins) Bin discrete samples into continuous, non-overlapping intervals. * [d3.bin](https://github.com/d3/d3-array/blob/v2.12.1/README.md#bin) - create a new bin generator. * [*bin*](https://github.com/d3/d3-array/blob/v2.12.1/README.md#_bin) - bins a given array of samples. * [*bin*.value](https://github.com/d3/d3-array/blob/v2.12.1/README.md#bin_value) - specify a value accessor for each sample. * [*bin*.domain](https://github.com/d3/d3-array/blob/v2.12.1/README.md#bin_domain) - specify the interval of observable values. * [*bin*.thresholds](https://github.com/d3/d3-array/blob/v2.12.1/README.md#bin_thresholds) - specify how values are divided into bins. * [d3.thresholdFreedmanDiaconis](https://github.com/d3/d3-array/blob/v2.12.1/README.md#thresholdFreedmanDiaconis) - the Freedman–Diaconis binning rule. * [d3.thresholdScott](https://github.com/d3/d3-array/blob/v2.12.1/README.md#thresholdScott) - Scott’s normal reference binning rule. * [d3.thresholdSturges](https://github.com/d3/d3-array/blob/v2.12.1/README.md#thresholdSturges) - Sturges’ binning formula. ### [Interning](https://github.com/d3/d3-array/blob/v2.12.1/README.md#interning) * [d3.InternMap](https://github.com/d3/d3-array/blob/v2.12.1/README.md#InternMap) - a key-interning Map. * [d3.InternSet](https://github.com/d3/d3-array/blob/v2.12.1/README.md#InternSet) - a value-interning Set. ## [Axes (d3-axis)](https://github.com/d3/d3-axis/tree/v2.1.0) Human-readable reference marks for scales. * [d3.axisTop](https://github.com/d3/d3-axis/blob/v2.1.0/README.md#axisTop) - create a new top-oriented axis generator. * [d3.axisRight](https://github.com/d3/d3-axis/blob/v2.1.0/README.md#axisRight) - create a new right-oriented axis generator. * [d3.axisBottom](https://github.com/d3/d3-axis/blob/v2.1.0/README.md#axisBottom) - create a new bottom-oriented axis generator. * [d3.axisLeft](https://github.com/d3/d3-axis/blob/v2.1.0/README.md#axisLeft) - create a new left-oriented axis generator. * [*axis*](https://github.com/d3/d3-axis/blob/v2.1.0/README.md#_axis) - generate an axis for the given selection. * [*axis*.scale](https://github.com/d3/d3-axis/blob/v2.1.0/README.md#axis_scale) - set the scale. * [*axis*.ticks](https://github.com/d3/d3-axis/blob/v2.1.0/README.md#axis_ticks) - customize how ticks are generated and formatted. * [*axis*.tickArguments](https://github.com/d3/d3-axis/blob/v2.1.0/README.md#axis_tickArguments) - customize how ticks are generated and formatted. * [*axis*.tickValues](https://github.com/d3/d3-axis/blob/v2.1.0/README.md#axis_tickValues) - set the tick values explicitly. * [*axis*.tickFormat](https://github.com/d3/d3-axis/blob/v2.1.0/README.md#axis_tickFormat) - set the tick format explicitly. * [*axis*.tickSize](https://github.com/d3/d3-axis/blob/v2.1.0/README.md#axis_tickSize) - set the size of the ticks. * [*axis*.tickSizeInner](https://github.com/d3/d3-axis/blob/v2.1.0/README.md#axis_tickSizeInner) - set the size of inner ticks. * [*axis*.tickSizeOuter](https://github.com/d3/d3-axis/blob/v2.1.0/README.md#axis_tickSizeOuter) - set the size of outer (extent) ticks. * [*axis*.tickPadding](https://github.com/d3/d3-axis/blob/v2.1.0/README.md#axis_tickPadding) - set the padding between ticks and labels. * [*axis*.offset]()https://github.com/d3/d3-axis/blob/v2.1.0/README.md#axis_offset) - set the pixel offset for crisp edges. ## [Brushes (d3-brush)](https://github.com/d3/d3-brush/tree/v2.0.0) Select a one- or two-dimensional region using the mouse or touch. * [d3.brush](https://github.com/d3/d3-brush/blob/v2.0.0/README.md#brush) - create a new two-dimensional brush. * [d3.brushX](https://github.com/d3/d3-brush/blob/v2.0.0/README.md#brushX) - create a brush along the *x*-dimension. * [d3.brushY](https://github.com/d3/d3-brush/blob/v2.0.0/README.md#brushY) - create a brush along the *y*-dimension. * [*brush*](https://github.com/d3/d3-brush/blob/v2.0.0/README.md#_brush) - apply the brush to a selection. * [*brush*.move](https://github.com/d3/d3-brush/blob/v2.0.0/README.md#brush_move) - move the brush selection. * [*brush*.clear](https://github.com/d3/d3-brush/blob/v2.0.0/README.md#brush_clear) - clear the brush selection. * [*brush*.extent](https://github.com/d3/d3-brush/blob/v2.0.0/README.md#brush_extent) - define the brushable region. * [*brush*.filter](https://github.com/d3/d3-brush/blob/v2.0.0/README.md#brush_filter) - control which input events initiate brushing. * [*brush*.touchable](https://github.com/d3/d3-brush/blob/v2.0.0/README.md#brush_touchable) - set the touch support detector. * [*brush*.keyModifiers](https://github.com/d3/d3-brush/blob/v2.0.0/README.md#brush_keyModifiers) - enable or disable key interaction. * [*brush*.handleSize](https://github.com/d3/d3-brush/blob/v2.0.0/README.md#brush_handleSize) - set the size of the brush handles. * [*brush*.on](https://github.com/d3/d3-brush/blob/v2.0.0/README.md#brush_on) - listen for brush events. * [d3.brushSelection](https://github.com/d3/d3-brush/blob/v2.0.0/README.md#brushSelection) - get the brush selection for a given node. ## [Chords (d3-chord)](https://github.com/d3/d3-chord/tree/v2.0.0) * [d3.chord](https://github.com/d3/d3-chord/blob/v2.0.0/README.md#chord) - create a new chord layout. * [*chord*](https://github.com/d3/d3-chord/blob/v2.0.0/README.md#_chord) - compute the layout for the given matrix. * [*chord*.padAngle](https://github.com/d3/d3-chord/blob/v2.0.0/README.md#chord_padAngle) - set the padding between adjacent groups. * [*chord*.sortGroups](https://github.com/d3/d3-chord/blob/v2.0.0/README.md#chord_sortGroups) - define the group order. * [*chord*.sortSubgroups](https://github.com/d3/d3-chord/blob/v2.0.0/README.md#chord_sortSubgroups) - define the source and target order within groups. * [*chord*.sortChords](https://github.com/d3/d3-chord/blob/v2.0.0/README.md#chord_sortChords) - define the chord order across groups. * [d3.chordDirected](https://github.com/d3/d3-chord/blob/v2.0.0/README.md#chordDirected) - create a directed chord generator. * [d3.chordTranspose](https://github.com/d3/d3-chord/blob/v2.0.0/README.md#chordTranspose) - create a transposed chord generator. * [d3.ribbon](https://github.com/d3/d3-chord/blob/v2.0.0/README.md#ribbon) - create a ribbon shape generator. * [*ribbon*](https://github.com/d3/d3-chord/blob/v2.0.0/README.md#_ribbon) - generate a ribbon shape. * [*ribbon*.source](https://github.com/d3/d3-chord/blob/v2.0.0/README.md#ribbon_source) - set the source accessor. * [*ribbon*.target](https://github.com/d3/d3-chord/blob/v2.0.0/README.md#ribbon_target) - set the target accessor. * [*ribbon*.radius](https://github.com/d3/d3-chord/blob/v2.0.0/README.md#ribbon_radius) - set the ribbon source and target radius. * [*ribbon*.sourceRadius](https://github.com/d3/d3-chord/blob/v2.0.0/README.md#ribbon_sourceRadius) - set the ribbon source radius. * [*ribbon*.targetRadius](https://github.com/d3/d3-chord/blob/v2.0.0/README.md#ribbon_targetRadius) - set the ribbon target radius. * [*ribbon*.startAngle](https://github.com/d3/d3-chord/blob/v2.0.0/README.md#ribbon_startAngle) - set the ribbon source or target start angle. * [*ribbon*.endAngle](https://github.com/d3/d3-chord/blob/v2.0.0/README.md#ribbon_endAngle) - set the ribbon source or target end angle. * [*ribbon*.padAngle](https://github.com/d3/d3-chord/blob/v2.0.0/README.md#ribbon_padAngle) - set the pad angle accessor. * [*ribbon*.context](https://github.com/d3/d3-chord/blob/v2.0.0/README.md#ribbon_context) - set the render context. * [d3.ribbonArrow](https://github.com/d3/d3-chord/blob/v2.0.0/README.md#ribbonArrow) - create an arrow ribbon generator. * [*ribbonArrow*.headRadius](https://github.com/d3/d3-chord/blob/v2.0.0/README.md#ribbonArrow_headRadius) - set the arrowhead radius accessor. ## [Colors (d3-color)](https://github.com/d3/d3-color/tree/v2.0.0) Color manipulation and color space conversion. * [d3.color](https://github.com/d3/d3-color/blob/v2.0.0/README.md#color) - parse the given CSS color specifier. * [*color*.opacity](https://github.com/d3/d3-color/blob/v2.0.0/README.md#color_opacity) - the color’s opacity. * [*color*.rgb](https://github.com/d3/d3-color/blob/v2.0.0/README.md#color_rgb) - compute the RGB equivalent of this color. * [*color*.copy](https://github.com/d3/d3-color/blob/v2.0.0/README.md#color_copy) - return a copy of this color. * [*color*.brighter](https://github.com/d3/d3-color/blob/v2.0.0/README.md#color_brighter) - create a brighter copy of this color. * [*color*.darker](https://github.com/d3/d3-color/blob/v2.0.0/README.md#color_darker) - create a darker copy of this color. * [*color*.displayable](https://github.com/d3/d3-color/blob/v2.0.0/README.md#color_displayable) - returns true if the color is displayable on standard hardware. * [*color*.formatHex](https://github.com/d3/d3-color/blob/v2.0.0/README.md#color_formatHex) - returns the hexadecimal RGB string representation of this color. * [*color*.formatHsl](https://github.com/d3/d3-color/blob/v2.0.0/README.md#color_formatHsl) - returns the RGB string representation of this color. * [*color*.formatRgb](https://github.com/d3/d3-color/blob/v2.0.0/README.md#color_formatRgb) - returns the HSL string representation of this color. * [*color*.toString](https://github.com/d3/d3-color/blob/v2.0.0/README.md#color_toString) - returns the RGB string representation of this color. * [d3.rgb](https://github.com/d3/d3-color/blob/v2.0.0/README.md#rgb) - create a new RGB color. * [d3.hsl](https://github.com/d3/d3-color/blob/v2.0.0/README.md#hsl) - create a new HSL color. * [d3.lab](https://github.com/d3/d3-color/blob/v2.0.0/README.md#lab) - create a new Lab color. * [d3.gray](https://github.com/d3/d3-color/blob/v2.0.0/README.md#gray) - create a new Lab gray. * [d3.hcl](https://github.com/d3/d3-color/blob/v2.0.0/README.md#hcl) - create a new HCL color. * [d3.lch](https://github.com/d3/d3-color/blob/v2.0.0/README.md#lch) - create a new HCL color. * [d3.cubehelix](https://github.com/d3/d3-color/blob/v2.0.0/README.md#cubehelix) - create a new Cubehelix color. ## [Color Schemes (d3-scale-chromatic)](https://github.com/d3/d3-scale-chromatic/tree/v2.0.0) Color ramps and palettes for quantitative, ordinal and categorical scales. ### Categorical * [d3.schemeCategory10](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#schemeCategory10) - an array of ten categorical colors. * [d3.schemeAccent](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#schemeAccent) - an array of eight categorical colors. * [d3.schemeDark2](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#schemeDark2) - an array of eight categorical colors. * [d3.schemePaired](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#schemePaired) - an array of twelve categorical colors. * [d3.schemePastel1](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#schemePastel1) - an array of nine categorical colors. * [d3.schemePastel2](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#schemePastel2) - an array of eight categorical colors. * [d3.schemeSet1](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#schemeSet1) - an array of nine categorical colors. * [d3.schemeSet2](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#schemeSet2) - an array of eight categorical colors. * [d3.schemeSet3](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#schemeSet3) - an array of twelve categorical colors. * [d3.schemeTableau10](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#schemeTableau10) - an array of ten categorical colors. ### Diverging * [d3.interpolateBrBG](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#interpolateBrBG) - ColorBrewer BrBG interpolator. * [d3.interpolatePiYG](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#interpolatePiYG) - ColorBrewer PiYG interpolator. * [d3.interpolatePRGn](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#interpolatePRGn) - ColorBrewer PRGn interpolator. * [d3.interpolatePuOr](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#interpolatePuOr) - ColorBrewer PuOr interpolator. * [d3.interpolateRdBu](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#interpolateRdBu) - ColorBrewer RdBu interpolator. * [d3.interpolateRdGy](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#interpolateRdGy) - ColorBrewer RdGy interpolator. * [d3.interpolateRdYlBu](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#interpolateRdYlBu) - ColorBrewer RdYlBu interpolator. * [d3.interpolateRdYlGn](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#interpolateRdYlGn) - ColorBrewer RdYlGn interpolator. * [d3.interpolateSpectral](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#interpolateSpectral) - ColorBrewer spectral interpolator. * [d3.schemeBrBG](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#schemeBrBG) - ColorBrewer BrBG scheme. * [d3.schemePiYG](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#schemePiYG) - ColorBrewer PiYG scheme. * [d3.schemePRGn](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#schemePRGn) - ColorBrewer PRGn scheme. * [d3.schemePuOr](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#schemePuOr) - ColorBrewer PuOr scheme. * [d3.schemeRdBu](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#schemeRdBu) - ColorBrewer RdBu scheme. * [d3.schemeRdGy](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#schemeRdGy) - ColorBrewer RdGy scheme. * [d3.schemeRdYlBu](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#schemeRdYlBu) - ColorBrewer RdYlBu scheme. * [d3.schemeRdYlGn](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#schemeRdYlGn) - ColorBrewer RdYlGn scheme. * [d3.schemeSpectral](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#schemeSpectral) - ColorBrewer spectral scheme. ### Sequential (Single Hue) * [d3.interpolateBlues](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#interpolateBlues) - * [d3.interpolateGreens](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#interpolateGreens) - * [d3.interpolateGreys](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#interpolateGreys) - * [d3.interpolateOranges](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#interpolateOranges) - * [d3.interpolatePurples](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#interpolatePurples) - * [d3.interpolateReds](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#interpolateReds) - * [d3.schemeBlues](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#schemeBlues) - * [d3.schemeGreens](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#schemeGreens) - * [d3.schemeGreys](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#schemeGreys) - * [d3.schemeOranges](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#schemeOranges) - * [d3.schemePurples](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#schemePurples) - * [d3.schemeReds](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#schemeReds) - ### Sequential (Multi-Hue) * [d3.interpolateBuGn](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#interpolateBuGn) - ColorBrewer BuGn interpolator. * [d3.interpolateBuPu](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#interpolateBuPu) - ColorBrewer BuPu interpolator. * [d3.interpolateCividis](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#interpolateCividis) - cividis interpolator. * [d3.interpolateCool](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#interpolateCool) - cool interpolator. * [d3.interpolateCubehelixDefault](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#interpolateCubehelixDefault) - cubehelix interpolator. * [d3.interpolateGnBu](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#interpolateGnBu) - ColorBrewer GnBu interpolator. * [d3.interpolateInferno](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#interpolateInferno) - inferno interpolator. * [d3.interpolateMagma](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#interpolateMagma) - magma interpolator. * [d3.interpolateOrRd](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#interpolateOrRd) - ColorBrewer OrRd interpolator. * [d3.interpolatePlasma](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#interpolatePlasma) - plasma interpolator. * [d3.interpolatePuBu](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#interpolatePuBu) - ColorBrewer PuBu interpolator. * [d3.interpolatePuBuGn](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#interpolatePuBuGn) - ColorBrewer PuBuGn interpolator. * [d3.interpolatePuRd](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#interpolatePuRd) - ColorBrewer PuRd interpolator. * [d3.interpolateRdPu](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#interpolateRdPu) - ColorBrewer RdPu interpolator. * [d3.interpolateTurbo](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#interpolateTurbo) - turbo interpolator. * [d3.interpolateViridis](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#interpolateViridis) - viridis interpolator. * [d3.interpolateWarm](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#interpolateWarm) - warm interpolator. * [d3.interpolateYlGn](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#interpolateYlGn) - ColorBrewer YlGn interpolator. * [d3.interpolateYlGnBu](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#interpolateYlGnBu) - ColorBrewer YlGnBu interpolator. * [d3.interpolateYlOrBr](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#interpolateYlOrBr) - ColorBrewer YlOrBr interpolator. * [d3.interpolateYlOrRd](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#interpolateYlOrRd) - ColorBrewer YlOrRd interpolator. * [d3.schemeBuGn](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#schemeBuGn) - ColorBrewer BuGn scheme. * [d3.schemeBuPu](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#schemeBuPu) - ColorBrewer BuPu scheme. * [d3.schemeGnBu](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#schemeGnBu) - ColorBrewer GnBu scheme. * [d3.schemeOrRd](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#schemeOrRd) - ColorBrewer OrRd scheme. * [d3.schemePuBu](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#schemePuBu) - ColorBrewer PuBu scheme. * [d3.schemePuBuGn](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#schemePuBuGn) - ColorBrewer PuBuGn scheme. * [d3.schemePuRd](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#schemePuRd) - ColorBrewer PuRd scheme. * [d3.schemeRdPu](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#schemeRdPu) - ColorBrewer RdPu scheme. * [d3.schemeYlGn](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#schemeYlGn) - ColorBrewer YlGn scheme. * [d3.schemeYlGnBu](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#schemeYlGnBu) - ColorBrewer YlGnBu scheme. * [d3.schemeYlOrBr](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#schemeYlOrBr) - ColorBrewer YlOrBr scheme. * [d3.schemeYlOrRd](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#schemeYlOrRd) - ColorBrewer YlOrRd scheme. ### Cyclical * [d3.interpolateRainbow](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#interpolateRainbow) - the “less-angry” rainbow * [d3.interpolateSinebow](https://github.com/d3/d3-scale-chromatic/blob/v2.0.0/README.md#interpolateSinebow) - the “sinebow” smooth rainbow ## [Contours (d3-contour)](https://github.com/d3/d3-contour/tree/v2.0.0) Compute contour polygons using marching squares. * [d3.contours](https://github.com/d3/d3-contour/blob/v2.0.0/README.md#contours) - create a new contour generator. * [*contours*](https://github.com/d3/d3-contour/blob/v2.0.0/README.md#_contours) - compute the contours for a given grid of values. * [*contours*.contour](https://github.com/d3/d3-contour/blob/v2.0.0/README.md#contours_contour) - compute a contour for a given value. * [*contours*.size](https://github.com/d3/d3-contour/blob/v2.0.0/README.md#contours_size) - set the size of a contour generator. * [*contours*.smooth](https://github.com/d3/d3-contour/blob/v2.0.0/README.md#contours_smooth) - set whether or not the generated contours are smoothed. * [*contours*.thresholds](https://github.com/d3/d3-contour/blob/v2.0.0/README.md#contours_thresholds) - set the thresholds of a contour generator. * [d3.contourDensity](https://github.com/d3/d3-contour/blob/v2.0.0/README.md#contourDensity) - create a new density estimator. * [*density*](https://github.com/d3/d3-contour/blob/v2.0.0/README.md#_density) - estimate the density of a given array of samples. * [*density*.x](https://github.com/d3/d3-contour/blob/v2.0.0/README.md#density_x) - set the *x* accessor of the density estimator. * [*density*.y](https://github.com/d3/d3-contour/blob/v2.0.0/README.md#density_y) - set the *y* accessor of the density estimator. * [*density*.weight](https://github.com/d3/d3-contour/blob/v2.0.0/README.md#density_weight) - set the *weight* accessor of the density estimator. * [*density*.size](https://github.com/d3/d3-contour/blob/v2.0.0/README.md#density_size) - set the size of the density estimator. * [*density*.cellSize](https://github.com/d3/d3-contour/blob/v2.0.0/README.md#density_cellSize) - set the cell size of the density estimator. * [*density*.thresholds](https://github.com/d3/d3-contour/blob/v2.0.0/README.md#density_thresholds) - set the thresholds of the density estimator. * [*density*.bandwidth](https://github.com/d3/d3-contour/blob/v2.0.0/README.md#density_bandwidth) - set the bandwidth of the density estimator. ## [Voronoi Diagrams (d3-delaunay)](https://github.com/d3/d3-delaunay/tree/v5.3.0) Compute the Voronoi diagram of a set of two-dimensional points. * [new Delaunay](https://github.com/d3/d3-delaunay/blob/v5.3.0/README.md#new_Delaunay) - create a delaunay triangulation for an array of point coordinates. * [Delaunay.from](https://github.com/d3/d3-delaunay/blob/v5.3.0/README.md#delaunay_from) - create a delaunay triangulation for an iterable of points. * [*delaunay*.points](https://github.com/d3/d3-delaunay/blob/v5.3.0/README.md#delaunay_points) - the coordinates of the points. * [*delaunay*.halfedges](https://github.com/d3/d3-delaunay/blob/v5.3.0/README.md#delaunay_halfedges) - the delaunay halfedges. * [*delaunay*.hull](https://github.com/d3/d3-delaunay/blob/v5.3.0/README.md#delaunay_hull) - the convex hull as point indices. * [*delaunay*.triangles](https://github.com/d3/d3-delaunay/blob/v5.3.0/README.md#delaunay_triangles) - the delaunay triangles. * [*delaunay*.inedges](https://github.com/d3/d3-delaunay/blob/v5.3.0/README.md#delaunay_inedges) - the delaunay inedges * [*delaunay*.find](https://github.com/d3/d3-delaunay/blob/v5.3.0/README.md#delaunay_find) - find the closest point in the delaunay triangulation. * [*delaunay*.neighbors](https://github.com/d3/d3-delaunay/blob/v5.3.0/README.md#delaunay_neighbors) - the neighbors of a point in the delaunay triangulation. * [*delaunay*.render](https://github.com/d3/d3-delaunay/blob/v5.3.0/README.md#delaunay_render) - render the edges of the delaunay triangulation. * [*delaunay*.renderHull](https://github.com/d3/d3-delaunay/blob/v5.3.0/README.md#delaunay_renderHull) - render the convex hull. * [*delaunay*.renderTriangle](https://github.com/d3/d3-delaunay/blob/v5.3.0/README.md#delaunay_renderTriangle) - render a triangle. * [*delaunay*.renderPoints](https://github.com/d3/d3-delaunay/blob/v5.3.0/README.md#delaunay_renderPoints) - render the points. * [*delaunay*.hullPolygon](https://github.com/d3/d3-delaunay/blob/v5.3.0/README.md#delaunay_hullPolygon) - the closed convex hull as point coordinates. * [*delaunay*.trianglePolygons](https://github.com/d3/d3-delaunay/blob/v5.3.0/README.md#delaunay_trianglePolygons) - iterate over all the triangles as polygons. * [*delaunay*.trianglePolygon](https://github.com/d3/d3-delaunay/blob/v5.3.0/README.md#delaunay_trianglePolygon) - return a triangle as a polygon. * [*delaunay*.update](https://github.com/d3/d3-delaunay/blob/v5.3.0/README.md#delaunay_update) - update a delaunay triangulation in place. * [*delaunay*.voronoi](https://github.com/d3/d3-delaunay/blob/v5.3.0/README.md#delaunay_voronoi) - compute the voronoi diagram associated with a delaunay triangulation. * [*voronoi*.delaunay](https://github.com/d3/d3-delaunay/blob/v5.3.0/README.md#voronoi_delaunay) - the voronoi diagram’s source delaunay triangulation. * [*voronoi*.circumcenters](https://github.com/d3/d3-delaunay/blob/v5.3.0/README.md#voronoi_circumcenters) - the triangles’ circumcenters. * [*voronoi*.vectors](https://github.com/d3/d3-delaunay/blob/v5.3.0/README.md#voronoi_vectors) - directions for the outer (infinite) cells of the voronoi diagram. * [*voronoi*.xmin](https://github.com/d3/d3-delaunay/blob/v5.3.0/README.md#voronoi_xmin) - set the *xmin* bound of the extent. * [*voronoi*.ymin](https://github.com/d3/d3-delaunay/blob/v5.3.0/README.md#voronoi_ymin) - set the *ymin* bound of the extent. * [*voronoi*.xmax](https://github.com/d3/d3-delaunay/blob/v5.3.0/README.md#voronoi_xmax) - set the *xmax* bound of the extent. * [*voronoi*.ymax](https://github.com/d3/d3-delaunay/blob/v5.3.0/README.md#voronoi_ymax) - set the *ymax* bound of the extent. * [*voronoi*.contains](https://github.com/d3/d3-delaunay/blob/v5.3.0/README.md#voronoi_contains) - test whether a point is inside a voronoi cell. * [*voronoi*.neighbors](https://github.com/d3/d3-delaunay/blob/v5.3.0/README.md#voronoi_neighbors) - the neighbors of a point in the voronoi diagram. * [*voronoi*.render](https://github.com/d3/d3-delaunay/blob/v5.3.0/README.md#voronoi_render) - render the mesh of voronoi cells. * [*voronoi*.renderBounds](https://github.com/d3/d3-delaunay/blob/v5.3.0/README.md#voronoi_renderBounds) - render the extent. * [*voronoi*.renderCell](https://github.com/d3/d3-delaunay/blob/v5.3.0/README.md#voronoi_renderCell) - render a voronoi cell. * [*voronoi*.cellPolygons](https://github.com/d3/d3-delaunay/blob/v5.3.0/README.md#voronoi_cellPolygons) - iterate over all the cells as polygons. * [*voronoi*.cellPolygon](https://github.com/d3/d3-delaunay/blob/v5.3.0/README.md#voronoi_cellPolygon) - return a cell as a polygon. * [*voronoi*.update](https://github.com/d3/d3-delaunay/blob/v5.3.0/README.md#voronoi_update) - update a voronoi diagram in place. ## [Dispatches (d3-dispatch)](https://github.com/d3/d3-dispatch/tree/v2.0.0) Separate concerns using named callbacks. * [d3.dispatch](https://github.com/d3/d3-dispatch/blob/v2.0.0/README.md#dispatch) - create a custom event dispatcher. * [*dispatch*.on](https://github.com/d3/d3-dispatch/blob/v2.0.0/README.md#dispatch_on) - register or unregister an event listener. * [*dispatch*.copy](https://github.com/d3/d3-dispatch/blob/v2.0.0/README.md#dispatch_copy) - create a copy of a dispatcher. * [*dispatch*.call](https://github.com/d3/d3-dispatch/blob/v2.0.0/README.md#dispatch_call) - dispatch an event to registered listeners. * [*dispatch*.apply](https://github.com/d3/d3-dispatch/blob/v2.0.0/README.md#dispatch_apply) - dispatch an event to registered listeners. ## [Dragging (d3-drag)](https://github.com/d3/d3-drag/tree/v2.0.0) Drag and drop SVG, HTML or Canvas using mouse or touch input. * [d3.drag](https://github.com/d3/d3-drag/blob/v2.0.0/README.md#drag) - create a drag behavior. * [*drag*](https://github.com/d3/d3-drag/blob/v2.0.0/README.md#_drag) - apply the drag behavior to a selection. * [*drag*.container](https://github.com/d3/d3-drag/blob/v2.0.0/README.md#drag_container) - set the coordinate system. * [*drag*.filter](https://github.com/d3/d3-drag/blob/v2.0.0/README.md#drag_filter) - ignore some initiating input events. * [*drag*.touchable](https://github.com/d3/d3-drag/blob/v2.0.0/README.md#drag_touchable) - set the touch support detector. * [*drag*.subject](https://github.com/d3/d3-drag/blob/v2.0.0/README.md#drag_subject) - set the thing being dragged. * [*drag*.clickDistance](https://github.com/d3/d3-drag/blob/v2.0.0/README.md#drag_clickDistance) - set the click distance threshold. * [*drag*.on](https://github.com/d3/d3-drag/blob/v2.0.0/README.md#drag_on) - listen for drag events. * [d3.dragDisable](https://github.com/d3/d3-drag/blob/v2.0.0/README.md#dragDisable) - prevent native drag-and-drop and text selection. * [d3.dragEnable](https://github.com/d3/d3-drag/blob/v2.0.0/README.md#dragEnable) - enable native drag-and-drop and text selection. * [*event*.on](https://github.com/d3/d3-drag/blob/v2.0.0/README.md#event_on) - listen for drag events on the current gesture. ## [Delimiter-Separated Values (d3-dsv)](https://github.com/d3/d3-dsv/tree/v2.0.0) Parse and format delimiter-separated values, most commonly CSV and TSV. * [d3.csvParse](https://github.com/d3/d3-dsv/blob/v2.0.0/README.md#csvParse) - parse the given CSV string, returning an array of objects. * [d3.csvParseRows](https://github.com/d3/d3-dsv/blob/v2.0.0/README.md#csvParseRows) - parse the given CSV string, returning an array of rows. * [d3.csvFormat](https://github.com/d3/d3-dsv/blob/v2.0.0/README.md#csvFormat) - format the given array of objects as CSV. * [d3.csvFormatBody](https://github.com/d3/d3-dsv/blob/v2.0.0/README.md#csvFormatBody) - format the given array of objects as CSV. * [d3.csvFormatRows](https://github.com/d3/d3-dsv/blob/v2.0.0/README.md#csvFormatRows) - format the given array of rows as CSV. * [d3.csvFormatRow](https://github.com/d3/d3-dsv/blob/v2.0.0/README.md#csvFormatRow) - format the given row as CSV. * [d3.csvFormatValue](https://github.com/d3/d3-dsv/blob/v2.0.0/README.md#csvFormatValue) - format the given value as CSV. * [d3.tsvParse](https://github.com/d3/d3-dsv/blob/v2.0.0/README.md#tsvParse) - parse the given TSV string, returning an array of objects. * [d3.tsvParseRows](https://github.com/d3/d3-dsv/blob/v2.0.0/README.md#tsvParseRows) - parse the given TSV string, returning an array of rows. * [d3.tsvFormat](https://github.com/d3/d3-dsv/blob/v2.0.0/README.md#tsvFormat) - format the given array of objects as TSV. * [d3.tsvFormatBody](https://github.com/d3/d3-dsv/blob/v2.0.0/README.md#tsvFormatBody) - format the given array of objects as TSV. * [d3.tsvFormatRows](https://github.com/d3/d3-dsv/blob/v2.0.0/README.md#tsvFormatRows) - format the given array of rows as TSV. * [d3.tsvFormatRow](https://github.com/d3/d3-dsv/blob/v2.0.0/README.md#tsvFormatRow) - format the given row as TSV. * [d3.tsvFormatValue](https://github.com/d3/d3-dsv/blob/v2.0.0/README.md#tsvFormatValue) - format the given value as TSV. * [d3.dsvFormat](https://github.com/d3/d3-dsv/blob/v2.0.0/README.md#dsvFormat) - create a new parser and formatter for the given delimiter. * [*dsv*.parse](https://github.com/d3/d3-dsv/blob/v2.0.0/README.md#dsv_parse) - parse the given string, returning an array of objects. * [*dsv*.parseRows](https://github.com/d3/d3-dsv/blob/v2.0.0/README.md#dsv_parseRows) - parse the given string, returning an array of rows. * [*dsv*.format](https://github.com/d3/d3-dsv/blob/v2.0.0/README.md#dsv_format) - format the given array of objects. * [*dsv*.formatBody](https://github.com/d3/d3-dsv/blob/v2.0.0/README.md#dsv_formatBody) - format the given array of objects. * [*dsv*.formatRows](https://github.com/d3/d3-dsv/blob/v2.0.0/README.md#dsv_formatRows) - format the given array of rows. * [*dsv*.formatRow](https://github.com/d3/d3-dsv/blob/v2.0.0/README.md#dsv_formatRow) - format the given row. * [*dsv*.formatValue](https://github.com/d3/d3-dsv/blob/v2.0.0/README.md#dsv_formatValue) - format the given value. * [d3.autoType](https://github.com/d3/d3-dsv/blob/v2.0.0/README.md#autoType) - automatically infer value types for the given object. ## [Easings (d3-ease)](https://github.com/d3/d3-ease/tree/v2.0.0) Easing functions for smooth animation. * [*ease*](https://github.com/d3/d3-ease/blob/v2.0.0/README.md#_ease) - ease the given normalized time. * [d3.easeLinear](https://github.com/d3/d3-ease/blob/v2.0.0/README.md#easeLinear) - linear easing; the identity function. * [d3.easePolyIn](https://github.com/d3/d3-ease/blob/v2.0.0/README.md#easePolyIn) - polynomial easing; raises time to the given power. * [d3.easePolyOut](https://github.com/d3/d3-ease/blob/v2.0.0/README.md#easePolyOut) - reverse polynomial easing. * [d3.easePoly](https://github.com/d3/d3-ease/blob/v2.0.0/README.md#easePoly) - an alias for easePolyInOut. * [d3.easePolyInOut](https://github.com/d3/d3-ease/blob/v2.0.0/README.md#easePolyInOut) - symmetric polynomial easing. * [*poly*.exponent](https://github.com/d3/d3-ease/blob/v2.0.0/README.md#poly_exponent) - specify the polynomial exponent. * [d3.easeQuadIn](https://github.com/d3/d3-ease/blob/v2.0.0/README.md#easeQuadIn) - quadratic easing; squares time. * [d3.easeQuadOut](https://github.com/d3/d3-ease/blob/v2.0.0/README.md#easeQuadOut) - reverse quadratic easing. * [d3.easeQuad](https://github.com/d3/d3-ease/blob/v2.0.0/README.md#easeQuad) - an alias for easeQuadInOut. * [d3.easeQuadInOut](https://github.com/d3/d3-ease/blob/v2.0.0/README.md#easeQuadInOut) - symmetric quadratic easing. * [d3.easeCubicIn](https://github.com/d3/d3-ease/blob/v2.0.0/README.md#easeCubicIn) - cubic easing; cubes time. * [d3.easeCubicOut](https://github.com/d3/d3-ease/blob/v2.0.0/README.md#easeCubicOut) - reverse cubic easing. * [d3.easeCubic](https://github.com/d3/d3-ease/blob/v2.0.0/README.md#easeCubic) - an alias for easeCubicInOut. * [d3.easeCubicInOut](https://github.com/d3/d3-ease/blob/v2.0.0/README.md#easeCubicInOut) - symmetric cubic easing. * [d3.easeSinIn](https://github.com/d3/d3-ease/blob/v2.0.0/README.md#easeSinIn) - sinusoidal easing. * [d3.easeSinOut](https://github.com/d3/d3-ease/blob/v2.0.0/README.md#easeSinOut) - reverse sinusoidal easing. * [d3.easeSin](https://github.com/d3/d3-ease/blob/v2.0.0/README.md#easeSin) - an alias for easeSinInOut. * [d3.easeSinInOut](https://github.com/d3/d3-ease/blob/v2.0.0/README.md#easeSinInOut) - symmetric sinusoidal easing. * [d3.easeExpIn](https://github.com/d3/d3-ease/blob/v2.0.0/README.md#easeExpIn) - exponential easing. * [d3.easeExpOut](https://github.com/d3/d3-ease/blob/v2.0.0/README.md#easeExpOut) - reverse exponential easing. * [d3.easeExp](https://github.com/d3/d3-ease/blob/v2.0.0/README.md#easeExp) - an alias for easeExpInOut. * [d3.easeExpInOut](https://github.com/d3/d3-ease/blob/v2.0.0/README.md#easeExpInOut) - symmetric exponential easing. * [d3.easeCircleIn](https://github.com/d3/d3-ease/blob/v2.0.0/README.md#easeCircleIn) - circular easing. * [d3.easeCircleOut](https://github.com/d3/d3-ease/blob/v2.0.0/README.md#easeCircleOut) - reverse circular easing. * [d3.easeCircle](https://github.com/d3/d3-ease/blob/v2.0.0/README.md#easeCircle) - an alias for easeCircleInOut. * [d3.easeCircleInOut](https://github.com/d3/d3-ease/blob/v2.0.0/README.md#easeCircleInOut) - symmetric circular easing. * [d3.easeElasticIn](https://github.com/d3/d3-ease/blob/v2.0.0/README.md#easeElasticIn) - elastic easing, like a rubber band. * [d3.easeElastic](https://github.com/d3/d3-ease/blob/v2.0.0/README.md#easeElastic) - an alias for easeElasticOut. * [d3.easeElasticOut](https://github.com/d3/d3-ease/blob/v2.0.0/README.md#easeElasticOut) - reverse elastic easing. * [d3.easeElasticInOut](https://github.com/d3/d3-ease/blob/v2.0.0/README.md#easeElasticInOut) - symmetric elastic easing. * [*elastic*.amplitude](https://github.com/d3/d3-ease/blob/v2.0.0/README.md#elastic_amplitude) - specify the elastic amplitude. * [*elastic*.period](https://github.com/d3/d3-ease/blob/v2.0.0/README.md#elastic_period) - specify the elastic period. * [d3.easeBackIn](https://github.com/d3/d3-ease/blob/v2.0.0/README.md#easeBackIn) - anticipatory easing, like a dancer bending his knees before jumping. * [d3.easeBackOut](https://github.com/d3/d3-ease/blob/v2.0.0/README.md#easeBackOut) - reverse anticipatory easing. * [d3.easeBack](https://github.com/d3/d3-ease/blob/v2.0.0/README.md#easeBack) - an alias for easeBackInOut. * [d3.easeBackInOut](https://github.com/d3/d3-ease/blob/v2.0.0/README.md#easeBackInOut) - symmetric anticipatory easing. * [*back*.overshoot](https://github.com/d3/d3-ease/blob/v2.0.0/README.md#back_overshoot) - specify the amount of overshoot. * [d3.easeBounceIn](https://github.com/d3/d3-ease/blob/v2.0.0/README.md#easeBounceIn) - bounce easing, like a rubber ball. * [d3.easeBounce](https://github.com/d3/d3-ease/blob/v2.0.0/README.md#easeBounce) - an alias for easeBounceOut. * [d3.easeBounceOut](https://github.com/d3/d3-ease/blob/v2.0.0/README.md#easeBounceOut) - reverse bounce easing. * [d3.easeBounceInOut](https://github.com/d3/d3-ease/blob/v2.0.0/README.md#easeBounceInOut) - symmetric bounce easing. ## [Fetches (d3-fetch)](https://github.com/d3/d3-fetch/tree/v2.0.0) Convenience methods on top of the Fetch API. * [d3.blob](https://github.com/d3/d3-fetch/blob/v2.0.0/README.md#blob) - get a file as a blob. * [d3.buffer](https://github.com/d3/d3-fetch/blob/v2.0.0/README.md#buffer) - get a file as an array buffer. * [d3.csv](https://github.com/d3/d3-fetch/blob/v2.0.0/README.md#csv) - get a comma-separated values (CSV) file. * [d3.dsv](https://github.com/d3/d3-fetch/blob/v2.0.0/README.md#dsv) - get a delimiter-separated values (CSV) file. * [d3.html](https://github.com/d3/d3-fetch/blob/v2.0.0/README.md#html) - get an HTML file. * [d3.image](https://github.com/d3/d3-fetch/blob/v2.0.0/README.md#image) - get an image. * [d3.json](https://github.com/d3/d3-fetch/blob/v2.0.0/README.md#json) - get a JSON file. * [d3.svg](https://github.com/d3/d3-fetch/blob/v2.0.0/README.md#svg) - get an SVG file. * [d3.text](https://github.com/d3/d3-fetch/blob/v2.0.0/README.md#text) - get a plain text file. * [d3.tsv](https://github.com/d3/d3-fetch/blob/v2.0.0/README.md#tsv) - get a tab-separated values (TSV) file. * [d3.xml](https://github.com/d3/d3-fetch/blob/v2.0.0/README.md#xml) - get an XML file. ## [Forces (d3-force)](https://github.com/d3/d3-force/tree/v2.1.1) Force-directed graph layout using velocity Verlet integration. * [d3.forceSimulation](https://github.com/d3/d3-force/blob/v2.1.1/README.md#forceSimulation) - create a new force simulation. * [*simulation*.restart](https://github.com/d3/d3-force/blob/v2.1.1/README.md#simulation_restart) - reheat and restart the simulation’s timer. * [*simulation*.stop](https://github.com/d3/d3-force/blob/v2.1.1/README.md#simulation_stop) - stop the simulation’s timer. * [*simulation*.tick](https://github.com/d3/d3-force/blob/v2.1.1/README.md#simulation_tick) - advance the simulation one step. * [*simulation*.nodes](https://github.com/d3/d3-force/blob/v2.1.1/README.md#simulation_nodes) - set the simulation’s nodes. * [*simulation*.alpha](https://github.com/d3/d3-force/blob/v2.1.1/README.md#simulation_alpha) - set the current alpha. * [*simulation*.alphaMin](https://github.com/d3/d3-force/blob/v2.1.1/README.md#simulation_alphaMin) - set the minimum alpha threshold. * [*simulation*.alphaDecay](https://github.com/d3/d3-force/blob/v2.1.1/README.md#simulation_alphaDecay) - set the alpha exponential decay rate. * [*simulation*.alphaTarget](https://github.com/d3/d3-force/blob/v2.1.1/README.md#simulation_alphaTarget) - set the target alpha. * [*simulation*.velocityDecay](https://github.com/d3/d3-force/blob/v2.1.1/README.md#simulation_velocityDecay) - set the velocity decay rate. * [*simulation*.force](https://github.com/d3/d3-force/blob/v2.1.1/README.md#simulation_force) - add or remove a force. * [*simulation*.find](https://github.com/d3/d3-force/blob/v2.1.1/README.md#simulation_find) - find the closest node to the given position. * [*simulation*.randomSource](https://github.com/d3/d3-force/blob/v2.1.1/README.md#simulation_randomSource) - set the simulation’s random source. * [*simulation*.on](https://github.com/d3/d3-force/blob/v2.1.1/README.md#simulation_on) - add or remove an event listener. * [*force*](https://github.com/d3/d3-force/blob/v2.1.1/README.md#_force) - apply the force. * [*force*.initialize](https://github.com/d3/d3-force/blob/v2.1.1/README.md#force_initialize) - initialize the force with the given nodes. * [d3.forceCenter](https://github.com/d3/d3-force/blob/v2.1.1/README.md#forceCenter) - create a centering force. * [*center*.x](https://github.com/d3/d3-force/blob/v2.1.1/README.md#center_x) - set the center *x*-coordinate. * [*center*.y](https://github.com/d3/d3-force/blob/v2.1.1/README.md#center_y) - set the center *y*-coordinate. * [*center*.strength](https://github.com/d3/d3-force/blob/v2.1.1/README.md#center_strength) - set the strength of the centering force. * [d3.forceCollide](https://github.com/d3/d3-force/blob/v2.1.1/README.md#forceCollide) - create a circle collision force. * [*collide*.radius](https://github.com/d3/d3-force/blob/v2.1.1/README.md#collide_radius) - set the circle radius. * [*collide*.strength](https://github.com/d3/d3-force/blob/v2.1.1/README.md#collide_strength) - set the collision resolution strength. * [*collide*.iterations](https://github.com/d3/d3-force/blob/v2.1.1/README.md#collide_iterations) - set the number of iterations. * [d3.forceLink](https://github.com/d3/d3-force/blob/v2.1.1/README.md#forceLink) - create a link force. * [*link*.links](https://github.com/d3/d3-force/blob/v2.1.1/README.md#link_links) - set the array of links. * [*link*.id](https://github.com/d3/d3-force/blob/v2.1.1/README.md#link_id) - link nodes by numeric index or string identifier. * [*link*.distance](https://github.com/d3/d3-force/blob/v2.1.1/README.md#link_distance) - set the link distance. * [*link*.strength](https://github.com/d3/d3-force/blob/v2.1.1/README.md#link_strength) - set the link strength. * [*link*.iterations](https://github.com/d3/d3-force/blob/v2.1.1/README.md#link_iterations) - set the number of iterations. * [d3.forceManyBody](https://github.com/d3/d3-force/blob/v2.1.1/README.md#forceManyBody) - create a many-body force. * [*manyBody*.strength](https://github.com/d3/d3-force/blob/v2.1.1/README.md#manyBody_strength) - set the force strength. * [*manyBody*.theta](https://github.com/d3/d3-force/blob/v2.1.1/README.md#manyBody_theta) - set the Barnes–Hut approximation accuracy. * [*manyBody*.distanceMin](https://github.com/d3/d3-force/blob/v2.1.1/README.md#manyBody_distanceMin) - limit the force when nodes are close. * [*manyBody*.distanceMax](https://github.com/d3/d3-force/blob/v2.1.1/README.md#manyBody_distanceMax) - limit the force when nodes are far. * [d3.forceX](https://github.com/d3/d3-force/blob/v2.1.1/README.md#forceX) - create an *x*-positioning force. * [*x*.strength](https://github.com/d3/d3-force/blob/v2.1.1/README.md#x_strength) - set the force strength. * [*x*.x](https://github.com/d3/d3-force/blob/v2.1.1/README.md#x_x) - set the target *x*-coordinate. * [d3.forceY](https://github.com/d3/d3-force/blob/v2.1.1/README.md#forceY) - create an *y*-positioning force. * [*y*.strength](https://github.com/d3/d3-force/blob/v2.1.1/README.md#y_strength) - set the force strength. * [*y*.y](https://github.com/d3/d3-force/blob/v2.1.1/README.md#y_y) - set the target *y*-coordinate. * [d3.forceRadial](https://github.com/d3/d3-force/blob/v2.1.1/README.md#forceRadial) - create a radial positioning force. * [*radial*.strength](https://github.com/d3/d3-force/blob/v2.1.1/README.md#radial_strength) - set the force strength. * [*radial*.radius](https://github.com/d3/d3-force/blob/v2.1.1/README.md#radial_radius) - set the target radius. * [*radial*.x](https://github.com/d3/d3-force/blob/v2.1.1/README.md#radial_x) - set the target center *x*-coordinate. * [*radial*.y](https://github.com/d3/d3-force/blob/v2.1.1/README.md#radial_y) - set the target center *y*-coordinate. ## [Number Formats (d3-format)](https://github.com/d3/d3-format/tree/v2.0.0) Format numbers for human consumption. * [d3.format](https://github.com/d3/d3-format/blob/v2.0.0/README.md#format) - alias for *locale*.format on the default locale. * [d3.formatPrefix](https://github.com/d3/d3-format/blob/v2.0.0/README.md#formatPrefix) - alias for *locale*.formatPrefix on the default locale. * [*locale*.format](https://github.com/d3/d3-format/blob/v2.0.0/README.md#locale_format) - create a number format. * [*locale*.formatPrefix](https://github.com/d3/d3-format/blob/v2.0.0/README.md#locale_formatPrefix) - create a SI-prefix number format. * [d3.formatSpecifier](https://github.com/d3/d3-format/blob/v2.0.0/README.md#formatSpecifier) - parse a number format specifier. * [new d3.FormatSpecifier](https://github.com/d3/d3-format/blob/v2.0.0/README.md#FormatSpecifier) - augments a number format specifier object. * [d3.precisionFixed](https://github.com/d3/d3-format/blob/v2.0.0/README.md#precisionFixed) - compute decimal precision for fixed-point notation. * [d3.precisionPrefix](https://github.com/d3/d3-format/blob/v2.0.0/README.md#precisionPrefix) - compute decimal precision for SI-prefix notation. * [d3.precisionRound](https://github.com/d3/d3-format/blob/v2.0.0/README.md#precisionRound) - compute significant digits for rounded notation. * [d3.formatLocale](https://github.com/d3/d3-format/blob/v2.0.0/README.md#formatLocale) - define a custom locale. * [d3.formatDefaultLocale](https://github.com/d3/d3-format/blob/v2.0.0/README.md#formatDefaultLocale) - define the default locale. ## [Geographies (d3-geo)](https://github.com/d3/d3-geo/tree/v2.0.0) Geographic projections, shapes and math. ### [Paths](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#paths) * [d3.geoPath](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#geoPath) - create a new geographic path generator. * [*path*](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#_path) - project and render the specified feature. * [*path*.area](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#path_area) - compute the projected planar area of a given feature. * [*path*.bounds](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#path_bounds) - compute the projected planar bounding box of a given feature. * [*path*.centroid](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#path_centroid) - compute the projected planar centroid of a given feature. * [*path*.measure](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#path_measure) - compute the projected planar length of a given feature. * [*path*.projection](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#path_projection) - set the geographic projection. * [*path*.context](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#path_context) - set the render context. * [*path*.pointRadius](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#path_pointRadius) - set the radius to display point features. ### [Projections](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#projections) * [*projection*](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#_projection) - project the specified point from the sphere to the plane. * [*projection*.invert](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#projection_invert) - unproject the specified point from the plane to the sphere. * [*projection*.stream](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#projection_stream) - wrap the specified stream to project geometry. * [*projection*.preclip](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#projection_preclip) - set the projection’s spherical clipping function. * [*projection*.postclip](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#projection_postclip) - set the projection’s cartesian clipping function. * [*projection*.clipAngle](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#projection_clipAngle) - set the radius of the clip circle. * [*projection*.clipExtent](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#projection_clipExtent) - set the viewport clip extent, in pixels. * [*projection*.scale](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#projection_scale) - set the scale factor. * [*projection*.translate](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#projection_translate) - set the translation offset. * [*projection*.center](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#projection_center) - set the center point. * [*projection*.angle](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#projection_angle) - set the post-projection rotation. * [*projection*.reflectX](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#projection_reflectX) - reflect the *x*-dimension. * [*projection*.reflectY](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#projection_reflectY) - reflect the *y*-dimension. * [*projection*.rotate](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#projection_rotate) - set the three-axis spherical rotation angles. * [*projection*.precision](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#projection_precision) - set the precision threshold for adaptive sampling. * [*projection*.fitExtent](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#projection_fitExtent) - set the scale and translate to fit a GeoJSON object. * [*projection*.fitSize](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#projection_fitSize) - set the scale and translate to fit a GeoJSON object. * [*projection*.fitWidth](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#projection_fitWidth) - set the scale and translate to fit a GeoJSON object. * [*projection*.fitHeight](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#projection_fitHeight) - set the scale and translate to fit a GeoJSON object. * [d3.geoAzimuthalEqualArea](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#geoAzimuthalEqualArea) - the azimuthal equal-area projection. * [d3.geoAzimuthalEqualAreaRaw](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#geoAzimuthalEqualAreaRaw) - the raw azimuthal equal-area projection. * [d3.geoAzimuthalEquidistant](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#geoAzimuthalEquidistant) - the azimuthal equidistant projection. * [d3.geoAzimuthalEquidistantRaw](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#geoAzimuthalEquidistantRaw) - the raw azimuthal equidistant projection. * [d3.geoGnomonic](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#geoGnomonic) - the gnomonic projection. * [d3.geoGnomonicRaw](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#geoGnomonicRaw) - the raw gnomonic projection. * [d3.geoOrthographic](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#geoOrthographic) - the azimuthal orthographic projection. * [d3.geoOrthographicRaw](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#geoOrthographicRaw) - the raw azimuthal orthographic projection. * [d3.geoStereographic](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#geoStereographic) - the azimuthal stereographic projection. * [d3.geoStereographicRaw](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#geoStereographicRaw) - the raw azimuthal stereographic projection. * [d3.geoEqualEarth](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#geoEqualEarth) - the Equal Earth projection. * [d3.geoEqualEarthRaw](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#geoEqualEarthRaw) - the raw Equal Earth projection. * [d3.geoAlbersUsa](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#geoAlbersUsa) - a composite Albers projection for the United States. * [*conic*.parallels](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#conic_parallels) - set the two standard parallels. * [d3.geoAlbers](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#geoAlbers) - the Albers equal-area conic projection. * [d3.geoConicConformal](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#geoConicConformal) - the conic conformal projection. * [d3.geoConicConformalRaw](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#geoConicConformalRaw) - the raw conic conformal projection. * [d3.geoConicEqualArea](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#geoConicEqualArea) - the conic equal-area (Albers) projection. * [d3.geoConicEqualAreaRaw](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#geoConicEqualAreaRaw) - the raw conic equal-area (Albers) projection. * [d3.geoConicEquidistant](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#geoConicEquidistant) - the conic equidistant projection. * [d3.geoConicEquidistantRaw](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#geoConicEquidistantRaw) - the raw conic equidistant projection. * [d3.geoEquirectangular](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#geoEquirectangular) - the equirectangular (plate carreé) projection. * [d3.geoEquirectangularRaw](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#geoEquirectangularRaw) - the raw equirectangular (plate carreé) projection. * [d3.geoMercator](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#geoMercator) - the spherical Mercator projection. * [d3.geoMercatorRaw](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#geoMercatorRaw) - the raw Mercator projection. * [d3.geoTransverseMercator](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#geoTransverseMercator) - the transverse spherical Mercator projection. * [d3.geoTransverseMercatorRaw](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#geoTransverseMercatorRaw) - the raw transverse spherical Mercator projection. * [d3.geoNaturalEarth1](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#geoNaturalEarth1) - the Equal Earth projection, version 1. * [d3.geoNaturalEarth1Raw](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#geoNaturalEarth1Raw) - the raw Equal Earth projection, version 1 ### [Raw projections](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#raw-projections) * [*project*](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#_project) - project the specified point from the sphere to the plane. * [*project*.invert](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#project_invert) - unproject the specified point from the plane to the sphere. * [d3.geoProjection](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#geoProjection) - create a custom projection. * [d3.geoProjectionMutator](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#geoProjectionMutator) - create a custom configurable projection. ### [Spherical Math](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#spherical-math) * [d3.geoArea](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#geoArea) - compute the spherical area of a given feature. * [d3.geoBounds](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#geoBounds) - compute the latitude-longitude bounding box for a given feature. * [d3.geoCentroid](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#geoCentroid) - compute the spherical centroid of a given feature. * [d3.geoDistance](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#geoDistance) - compute the great-arc distance between two points. * [d3.geoLength](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#geoLength) - compute the length of a line string or the perimeter of a polygon. * [d3.geoInterpolate](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#geoInterpolate) - interpolate between two points along a great arc. * [d3.geoContains](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#geoContains) - test whether a point is inside a given feature. * [d3.geoRotation](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#geoRotation) - create a rotation function for the specified angles. * [*rotation*](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#_rotation) - rotate the given point around the sphere. * [*rotation*.invert](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#rotation_invert) - unrotate the given point around the sphere. ### [Spherical Shapes](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#spherical-shapes) * [d3.geoCircle](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#geoCircle) - create a circle generator. * [*circle*](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#_circle) - generate a piecewise circle as a Polygon. * [*circle*.center](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#circle_center) - specify the circle center in latitude and longitude. * [*circle*.radius](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#circle_radius) - specify the angular radius in degrees. * [*circle*.precision](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#circle_precision) - specify the precision of the piecewise circle. * [d3.geoGraticule](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#geoGraticule) - create a graticule generator. * [*graticule*](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#_graticule) - generate a MultiLineString of meridians and parallels. * [*graticule*.lines](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#graticule_lines) - generate an array of LineStrings of meridians and parallels. * [*graticule*.outline](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#graticule_outline) - generate a Polygon of the graticule’s extent. * [*graticule*.extent](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#graticule_extent) - get or set the major & minor extents. * [*graticule*.extentMajor](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#graticule_extentMajor) - get or set the major extent. * [*graticule*.extentMinor](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#graticule_extentMinor) - get or set the minor extent. * [*graticule*.step](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#graticule_step) - get or set the major & minor step intervals. * [*graticule*.stepMajor](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#graticule_stepMajor) - get or set the major step intervals. * [*graticule*.stepMinor](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#graticule_stepMinor) - get or set the minor step intervals. * [*graticule*.precision](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#graticule_precision) - get or set the latitudinal precision. * [d3.geoGraticule10](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#geoGraticule10) - generate the default 10° global graticule. ### [Streams](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#streams) * [d3.geoStream](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#geoStream) - convert a GeoJSON object to a geometry stream. * [*stream*.point](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#stream_point) - indicates a point with the specified coordinates. * [*stream*.lineStart](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#stream_lineStart) - indicates the start of a line or ring. * [*stream*.lineEnd](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#stream_lineEnd) - indicates the end of a line or ring. * [*stream*.polygonStart](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#stream_polygonStart) - indicates the start of a polygon. * [*stream*.polygonEnd](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#stream_polygonEnd) - indicates the end of a polygon. * [*stream*.sphere](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#stream_sphere) - indicates the sphere. ### [Transforms](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#transforms) * [d3.geoTransform](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#geoTransform) - define a custom geometry transform. * [d3.geoIdentity](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#geoIdentity) - scale, translate or clip planar geometry. ### [Clipping](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#clipping) * [*preclip*](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#preclip) - pre-clipping in geographic coordinates. * [*postclip*](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#postclip) - post-clipping in planar coordinates. * [d3.geoClipAntimeridian](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#geoClipAntimeridian) - cuts spherical geometries that cross the antimeridian. * [d3.geoClipCircle](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#geoClipCircle) - clips spherical geometries to a small circle. * [d3.geoClipRectangle](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#geoClipRectangle) - clips planar geometries to a rectangular viewport. ## [Hierarchies (d3-hierarchy)](https://github.com/d3/d3-hierarchy/tree/v2.0.0) Layout algorithms for visualizing hierarchical data. * [d3.hierarchy](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#hierarchy) - constructs a root node from hierarchical data. * [*node*.ancestors](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#node_ancestors) - generate an array of ancestors. * [*node*.descendants](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#node_descendants) - generate an array of descendants. * [*node*.leaves](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#node_leaves) - generate an array of leaves. * [*node*.find](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#node_find) - find a node in the hierarchy. * [*node*.path](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#node_path) - generate the shortest path to another node. * [*node*.links](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#node_links) - generate an array of links. * [*node*.sum](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#node_sum) - evaluate and aggregate quantitative values. * [*node*.count](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#node_count) - count the number of leaves. * [*node*.sort](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#node_sort) - sort all descendant siblings. * [*node*[Symbol.iterator]](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#node_iterator) - iterate on a hierarchy. * [*node*.each](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#node_each) - breadth-first traversal. * [*node*.eachAfter](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#node_eachAfter) - post-order traversal. * [*node*.eachBefore](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#node_eachBefore) - pre-order traversal. * [*node*.copy](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#node_copy) - copy a hierarchy. * [d3.stratify](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#stratify) - create a new stratify operator. * [*stratify*](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#_stratify) - construct a root node from tabular data. * [*stratify*.id](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#stratify_id) - set the node id accessor. * [*stratify*.parentId](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#stratify_parentId) - set the parent node id accessor. * [d3.cluster](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#cluster) - create a new cluster (dendrogram) layout. * [*cluster*](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#_cluster) - layout the specified hierarchy in a dendrogram. * [*cluster*.size](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#cluster_size) - set the layout size. * [*cluster*.nodeSize](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#cluster_nodeSize) - set the node size. * [*cluster*.separation](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#cluster_separation) - set the separation between leaves. * [d3.tree](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#tree) - create a new tidy tree layout. * [*tree*](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#_tree) - layout the specified hierarchy in a tidy tree. * [*tree*.size](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#tree_size) - set the layout size. * [*tree*.nodeSize](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#tree_nodeSize) - set the node size. * [*tree*.separation](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#tree_separation) - set the separation between nodes. * [d3.treemap](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#treemap) - create a new treemap layout. * [*treemap*](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#_treemap) - layout the specified hierarchy as a treemap. * [*treemap*.tile](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#treemap_tile) - set the tiling method. * [*treemap*.size](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#treemap_size) - set the layout size. * [*treemap*.round](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#treemap_round) - set whether the output coordinates are rounded. * [*treemap*.padding](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#treemap_padding) - set the padding. * [*treemap*.paddingInner](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#treemap_paddingInner) - set the padding between siblings. * [*treemap*.paddingOuter](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#treemap_paddingOuter) - set the padding between parent and children. * [*treemap*.paddingTop](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#treemap_paddingTop) - set the padding between the parent’s top edge and children. * [*treemap*.paddingRight](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#treemap_paddingRight) - set the padding between the parent’s right edge and children. * [*treemap*.paddingBottom](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#treemap_paddingBottom) - set the padding between the parent’s bottom edge and children. * [*treemap*.paddingLeft](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#treemap_paddingLeft) - set the padding between the parent’s left edge and children. * [d3.treemapBinary](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#treemapBinary) - tile using a balanced binary tree. * [d3.treemapDice](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#treemapDice) - tile into a horizontal row. * [d3.treemapSlice](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#treemapSlice) - tile into a vertical column. * [d3.treemapSliceDice](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#treemapSliceDice) - alternate between slicing and dicing. * [d3.treemapSquarify](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#treemapSquarify) - tile using squarified rows per Bruls *et. al.* * [d3.treemapResquarify](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#treemapResquarify) - like d3.treemapSquarify, but performs stable updates. * [*squarify*.ratio](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#squarify_ratio) - set the desired rectangle aspect ratio. * [d3.partition](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#partition) - create a new partition (icicle or sunburst) layout. * [*partition*](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#_partition) - layout the specified hierarchy as a partition diagram. * [*partition*.size](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#partition_size) - set the layout size. * [*partition*.round](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#partition_round) - set whether the output coordinates are rounded. * [*partition*.padding](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#partition_padding) - set the padding. * [d3.pack](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#pack) - create a new circle-packing layout. * [*pack*](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#_pack) - layout the specified hierarchy using circle-packing. * [*pack*.radius](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#pack_radius) - set the radius accessor. * [*pack*.size](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#pack_size) - set the layout size. * [*pack*.padding](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#pack_padding) - set the padding. * [d3.packSiblings](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#packSiblings) - pack the specified array of circles. * [d3.packEnclose](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#packEnclose) - enclose the specified array of circles. ## [Interpolators (d3-interpolate)](https://github.com/d3/d3-interpolate/tree/v2.0.1) Interpolate numbers, colors, strings, arrays, objects, whatever! * [d3.interpolate](https://github.com/d3/d3-interpolate/blob/v2.0.1/README.md#interpolate) - interpolate arbitrary values. * [d3.interpolateNumber](https://github.com/d3/d3-interpolate/blob/v2.0.1/README.md#interpolateNumber) - interpolate numbers. * [d3.interpolateRound](https://github.com/d3/d3-interpolate/blob/v2.0.1/README.md#interpolateRound) - interpolate integers. * [d3.interpolateString](https://github.com/d3/d3-interpolate/blob/v2.0.1/README.md#interpolateString) - interpolate strings with embedded numbers. * [d3.interpolateDate](https://github.com/d3/d3-interpolate/blob/v2.0.1/README.md#interpolateDate) - interpolate dates. * [d3.interpolateArray](https://github.com/d3/d3-interpolate/blob/v2.0.1/README.md#interpolateArray) - interpolate arrays of arbitrary values. * [d3.interpolateNumberArray](https://github.com/d3/d3-interpolate/blob/v2.0.1/README.md#interpolateNumberArray) - interpolate arrays of numbers. * [d3.interpolateObject](https://github.com/d3/d3-interpolate/blob/v2.0.1/README.md#interpolateObject) - interpolate arbitrary objects. * [d3.interpolateTransformCss](https://github.com/d3/d3-interpolate/blob/v2.0.1/README.md#interpolateTransformCss) - interpolate 2D CSS transforms. * [d3.interpolateTransformSvg](https://github.com/d3/d3-interpolate/blob/v2.0.1/README.md#interpolateTransformSvg) - interpolate 2D SVG transforms. * [d3.interpolateZoom](https://github.com/d3/d3-interpolate/blob/v2.0.1/README.md#interpolateZoom) - zoom and pan between two views. * [*interpolateZoom*.rho](https://github.com/d3/d3-interpolate/blob/v2.0.1/README.md#interpolate_rho) - set the curvature *rho* of the zoom interpolator. * [d3.interpolateDiscrete](https://github.com/d3/d3-interpolate/blob/v2.0.1/README.md#interpolateDiscrete) - generate a discrete interpolator from a set of values. * [d3.quantize](https://github.com/d3/d3-interpolate/blob/v2.0.1/README.md#quantize) - generate uniformly-spaced samples from an interpolator. * [d3.interpolateRgb](https://github.com/d3/d3-interpolate/blob/v2.0.1/README.md#interpolateRgb) - interpolate RGB colors. * [d3.interpolateRgbBasis](https://github.com/d3/d3-interpolate/blob/v2.0.1/README.md#interpolateRgbBasis) - generate a B-spline through a set of colors. * [d3.interpolateRgbBasisClosed](https://github.com/d3/d3-interpolate/blob/v2.0.1/README.md#interpolateRgbBasisClosed) - generate a closed B-spline through a set of colors. * [d3.interpolateHsl](https://github.com/d3/d3-interpolate/blob/v2.0.1/README.md#interpolateHsl) - interpolate HSL colors. * [d3.interpolateHslLong](https://github.com/d3/d3-interpolate/blob/v2.0.1/README.md#interpolateHslLong) - interpolate HSL colors, the long way. * [d3.interpolateLab](https://github.com/d3/d3-interpolate/blob/v2.0.1/README.md#interpolateLab) - interpolate Lab colors. * [d3.interpolateHcl](https://github.com/d3/d3-interpolate/blob/v2.0.1/README.md#interpolateHcl) - interpolate HCL colors. * [d3.interpolateHclLong](https://github.com/d3/d3-interpolate/blob/v2.0.1/README.md#interpolateHclLong) - interpolate HCL colors, the long way. * [d3.interpolateCubehelix](https://github.com/d3/d3-interpolate/blob/v2.0.1/README.md#interpolateCubehelix) - interpolate Cubehelix colors. * [d3.interpolateCubehelixLong](https://github.com/d3/d3-interpolate/blob/v2.0.1/README.md#interpolateCubehelixLong) - interpolate Cubehelix colors, the long way. * [*interpolate*.gamma](https://github.com/d3/d3-interpolate/blob/v2.0.1/README.md#interpolate_gamma) - apply gamma correction during interpolation. * [d3.interpolateHue](https://github.com/d3/d3-interpolate/blob/v2.0.1/README.md#interpolateHue) - interpolate a hue angle. * [d3.interpolateBasis](https://github.com/d3/d3-interpolate/blob/v2.0.1/README.md#interpolateBasis) - generate a B-spline through a set of values. * [d3.interpolateBasisClosed](https://github.com/d3/d3-interpolate/blob/v2.0.1/README.md#interpolateBasisClosed) - generate a closed B-spline through a set of values. * [d3.piecewise](https://github.com/d3/d3-interpolate/blob/v2.0.1/README.md#piecewise) - generate a piecewise linear interpolator from a set of values. ## [Paths (d3-path)](https://github.com/d3/d3-path/tree/v2.0.0) Serialize Canvas path commands to SVG. * [d3.path](https://github.com/d3/d3-path/blob/v2.0.0/README.md#path) - create a new path serializer. * [*path*.moveTo](https://github.com/d3/d3-path/blob/v2.0.0/README.md#path_moveTo) - move to the given point. * [*path*.closePath](https://github.com/d3/d3-path/blob/v2.0.0/README.md#path_closePath) - close the current subpath. * [*path*.lineTo](https://github.com/d3/d3-path/blob/v2.0.0/README.md#path_lineTo) - draw a straight line segment. * [*path*.quadraticCurveTo](https://github.com/d3/d3-path/blob/v2.0.0/README.md#path_quadraticCurveTo) - draw a quadratic Bézier segment. * [*path*.bezierCurveTo](https://github.com/d3/d3-path/blob/v2.0.0/README.md#path_bezierCurveTo) - draw a cubic Bézier segment. * [*path*.arcTo](https://github.com/d3/d3-path/blob/v2.0.0/README.md#path_arcTo) - draw a circular arc segment. * [*path*.arc](https://github.com/d3/d3-path/blob/v2.0.0/README.md#path_arc) - draw a circular arc segment. * [*path*.rect](https://github.com/d3/d3-path/blob/v2.0.0/README.md#path_rect) - draw a rectangle. * [*path*.toString](https://github.com/d3/d3-path/blob/v2.0.0/README.md#path_toString) - serialize to an SVG path data string. ## [Polygons (d3-polygon)](https://github.com/d3/d3-polygon/tree/v2.0.0) Geometric operations for two-dimensional polygons. * [d3.polygonArea](https://github.com/d3/d3-polygon/blob/v2.0.0/README.md#polygonArea) - compute the area of the given polygon. * [d3.polygonCentroid](https://github.com/d3/d3-polygon/blob/v2.0.0/README.md#polygonCentroid) - compute the centroid of the given polygon. * [d3.polygonHull](https://github.com/d3/d3-polygon/blob/v2.0.0/README.md#polygonHull) - compute the convex hull of the given points. * [d3.polygonContains](https://github.com/d3/d3-polygon/blob/v2.0.0/README.md#polygonContains) - test whether a point is inside a polygon. * [d3.polygonLength](https://github.com/d3/d3-polygon/blob/v2.0.0/README.md#polygonLength) - compute the length of the given polygon’s perimeter. ## [Quadtrees (d3-quadtree)](https://github.com/d3/d3-quadtree/tree/v2.0.0) Two-dimensional recursive spatial subdivision. * [d3.quadtree](https://github.com/d3/d3-quadtree/blob/v2.0.0/README.md#quadtree) - create a new, empty quadtree. * [*quadtree*.x](https://github.com/d3/d3-quadtree/blob/v2.0.0/README.md#quadtree_x) - set the *x* accessor. * [*quadtree*.y](https://github.com/d3/d3-quadtree/blob/v2.0.0/README.md#quadtree_y) - set the *y* accessor. * [*quadtree*.extent](https://github.com/d3/d3-quadtree/blob/v2.0.0/README.md#quadtree_extent) - extend the quadtree to cover an extent. * [*quadtree*.cover](https://github.com/d3/d3-quadtree/blob/v2.0.0/README.md#quadtree_cover) - extend the quadtree to cover a point. * [*quadtree*.add](https://github.com/d3/d3-quadtree/blob/v2.0.0/README.md#quadtree_add) - add a datum to a quadtree. * [*quadtree*.addAll](https://github.com/d3/d3-quadtree/blob/v2.0.0/README.md#quadtree_addAll) - add an array of data to a quadtree. * [*quadtree*.remove](https://github.com/d3/d3-quadtree/blob/v2.0.0/README.md#quadtree_remove) - remove a datum from a quadtree. * [*quadtree*.removeAll](https://github.com/d3/d3-quadtree/blob/v2.0.0/README.md#quadtree_removeAll) - remove an array of data from a quadtree. * [*quadtree*.copy](https://github.com/d3/d3-quadtree/blob/v2.0.0/README.md#quadtree_copy) - create a copy of a quadtree. * [*quadtree*.root](https://github.com/d3/d3-quadtree/blob/v2.0.0/README.md#quadtree_root) - get the quadtree’s root node. * [*quadtree*.data](https://github.com/d3/d3-quadtree/blob/v2.0.0/README.md#quadtree_data) - retrieve all data from the quadtree. * [*quadtree*.size](https://github.com/d3/d3-quadtree/blob/v2.0.0/README.md#quadtree_size) - count the number of data in the quadtree. * [*quadtree*.find](https://github.com/d3/d3-quadtree/blob/v2.0.0/README.md#quadtree_find) - quickly find the closest datum in a quadtree. * [*quadtree*.visit](https://github.com/d3/d3-quadtree/blob/v2.0.0/README.md#quadtree_visit) - selectively visit nodes in a quadtree. * [*quadtree*.visitAfter](https://github.com/d3/d3-quadtree/blob/v2.0.0/README.md#quadtree_visitAfter) - visit all nodes in a quadtree. ## [Random Numbers (d3-random)](https://github.com/d3/d3-random/tree/v2.2.2) Generate random numbers from various distributions. * [d3.randomUniform](https://github.com/d3/d3-random/blob/v2.2.2/README.md#randomUniform) - from a uniform distribution. * [d3.randomInt](https://github.com/d3/d3-random/blob/v2.2.2/README.md#randomInt) - from a uniform integer distribution. * [d3.randomNormal](https://github.com/d3/d3-random/blob/v2.2.2/README.md#randomNormal) - from a normal distribution. * [d3.randomLogNormal](https://github.com/d3/d3-random/blob/v2.2.2/README.md#randomLogNormal) - from a log-normal distribution. * [d3.randomBates](https://github.com/d3/d3-random/blob/v2.2.2/README.md#randomBates) - from a Bates distribution. * [d3.randomIrwinHall](https://github.com/d3/d3-random/blob/v2.2.2/README.md#randomIrwinHall) - from an Irwin–Hall distribution. * [d3.randomExponential](https://github.com/d3/d3-random/blob/v2.2.2/README.md#randomExponential) - from an exponential distribution. * [d3.randomPareto](https://github.com/d3/d3-random/blob/v2.2.2/README.md#randomPareto) - from a Pareto distribution. * [d3.randomBernoulli](https://github.com/d3/d3-random/blob/v2.2.2/README.md#randomBernoulli) - from a Bernoulli distribution. * [d3.randomGeometric](https://github.com/d3/d3-random/blob/v2.2.2/README.md#randomGeometric) - from a geometric distribution. * [d3.randomBinomial](https://github.com/d3/d3-random/blob/v2.2.2/README.md#randomBinomial) - from a binomial distribution. * [d3.randomGamma](https://github.com/d3/d3-random/blob/v2.2.2/README.md#randomGamma) - from a gamma distribution. * [d3.randomBeta](https://github.com/d3/d3-random/blob/v2.2.2/README.md#randomBeta) - from a beta distribution. * [d3.randomWeibull](https://github.com/d3/d3-random/blob/v2.2.2/README.md#randomWeibull) - from a Weibull, Gumbel or Fréchet distribution. * [d3.randomCauchy](https://github.com/d3/d3-random/blob/v2.2.2/README.md#randomCauchy) - from a Cauchy distribution. * [d3.randomLogistic](https://github.com/d3/d3-random/blob/v2.2.2/README.md#randomLogistic) - from a logistic distribution. * [d3.randomPoisson](https://github.com/d3/d3-random/blob/v2.2.2/README.md#randomPoisson) - from a Poisson distribution. * [*random*.source](https://github.com/d3/d3-random/blob/v2.2.2/README.md#random_source) - set the source of randomness. * [d3.randomLcg](https://github.com/d3/d3-random/blob/v2.2.2/README.md#randomLcg) - a seeded pseudorandom number generator. ## [Scales (d3-scale)](https://github.com/d3/d3-scale/tree/v3.3.0) Encodings that map abstract data to visual representation. ### [Continuous Scales](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#continuous-scales) Map a continuous, quantitative domain to a continuous range. * [*continuous*](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#_continuous) - compute the range value corresponding to a given domain value. * [*continuous*.invert](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#continuous_invert) - compute the domain value corresponding to a given range value. * [*continuous*.domain](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#continuous_domain) - set the input domain. * [*continuous*.range](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#continuous_range) - set the output range. * [*continuous*.rangeRound](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#continuous_rangeRound) - set the output range and enable rounding. * [*continuous*.clamp](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#continuous_clamp) - enable clamping to the domain or range. * [*continuous*.unknown](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#continuous_unknown) - set the output value for unknown inputs. * [*continuous*.interpolate](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#continuous_interpolate) - set the output interpolator. * [*continuous*.ticks](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#continuous_ticks) - compute representative values from the domain. * [*continuous*.tickFormat](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#continuous_tickFormat) - format ticks for human consumption. * [*continuous*.nice](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#continuous_nice) - extend the domain to nice round numbers. * [*continuous*.copy](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#continuous_copy) - create a copy of this scale. * [d3.tickFormat](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#tickFormat) - format ticks for human consumption. * [d3.scaleLinear](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#scaleLinear) - create a quantitative linear scale. * [d3.scalePow](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#scalePow) - create a quantitative power scale. * [*pow*](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#_pow) - compute the range value corresponding to a given domain value. * [*pow*.invert](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#pow_invert) - compute the domain value corresponding to a given range value. * [*pow*.exponent](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#pow_exponent) - set the power exponent. * [*pow*.domain](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#pow_domain) - set the input domain. * [*pow*.range](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#pow_range) - set the output range. * [*pow*.rangeRound](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#pow_rangeRound) - set the output range and enable rounding. * [*pow*.clamp](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#pow_clamp) - enable clamping to the domain or range. * [*pow*.interpolate](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#pow_interpolate) - set the output interpolator. * [*pow*.ticks](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#pow_ticks) - compute representative values from the domain. * [*pow*.tickFormat](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#pow_tickFormat) - format ticks for human consumption. * [*pow*.nice](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#pow_nice) - extend the domain to nice round numbers. * [*pow*.copy](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#pow_copy) - create a copy of this scale. * [d3.scaleSqrt](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#scaleSqrt) - create a quantitative power scale with exponent 0.5. * [d3.scaleLog](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#scaleLog) - create a quantitative logarithmic scale. * [*log*](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#_log) - compute the range value corresponding to a given domain value. * [*log*.invert](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#log_invert) - compute the domain value corresponding to a given range value. * [*log*.base](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#log_base) - set the logarithm base. * [*log*.domain](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#log_domain) - set the input domain. * [*log*.range](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#log_range) - set the output range. * [*log*.rangeRound](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#log_rangeRound) - set the output range and enable rounding. * [*log*.clamp](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#log_clamp) - enable clamping to the domain or range. * [*log*.interpolate](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#log_interpolate) - set the output interpolator. * [*log*.ticks](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#log_ticks) - compute representative values from the domain. * [*log*.tickFormat](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#log_tickFormat) - format ticks for human consumption. * [*log*.nice](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#log_nice) - extend the domain to nice round numbers. * [*log*.copy](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#log_copy) - create a copy of this scale. * [d3.scaleSymlog](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#scaleSymlog) - create a symmetric logarithmic scale. * [*symlog*.constant](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#symlog_constant) - set the constant of a symlog scale. * [d3.scaleIdentity](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#scaleIdentity) - creates an identity scale. * [d3.scaleRadial](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#scaleRadial) - creates a radial scale. * [d3.scaleTime](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#scaleTime) - create a linear scale for time. * [*time*](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#_time) - compute the range value corresponding to a given domain value. * [*time*.invert](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#time_invert) - compute the domain value corresponding to a given range value. * [*time*.domain](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#time_domain) - set the input domain. * [*time*.range](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#time_range) - set the output range. * [*time*.rangeRound](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#time_rangeRound) - set the output range and enable rounding. * [*time*.clamp](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#time_clamp) - enable clamping to the domain or range. * [*time*.interpolate](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#time_interpolate) - set the output interpolator. * [*time*.ticks](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#time_ticks) - compute representative values from the domain. * [*time*.tickFormat](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#time_tickFormat) - format ticks for human consumption. * [*time*.nice](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#time_nice) - extend the domain to nice round times. * [*time*.copy](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#time_copy) - create a copy of this scale. * [d3.scaleUtc](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#scaleUtc) - create a linear scale for UTC. ### [Sequential Scales](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#sequential-scales) Map a continuous, quantitative domain to a continuous, fixed interpolator. * [d3.scaleSequential](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#scaleSequential) - create a sequential scale. * [*sequential*](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#_sequential) - compute the range value corresponding to an input value. * [*sequential*.domain](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#sequential_domain) - set the input domain. * [*sequential*.clamp](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#sequential_clamp) - enable clamping to the domain. * [*sequential*.interpolator](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#sequential_interpolator) - set the scale’s output interpolator. * [*sequential*.range](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#sequential_range) - set the output range. * [*sequential*.rangeRound](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#sequential_rangeRound) - set the output range and enable rounding. * [*sequential*.copy](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#sequential_copy) - create a copy of this scale. * [d3.scaleSequentialLog](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#scaleSequentialLog) - create a logarithmic sequential scale. * [d3.scaleSequentialPow](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#scaleSequentialPow) - create a power sequential scale. * [d3.scaleSequentialSqrt](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#scaleSequentialSqrt) - create a power sequential scale with exponent 0.5. * [d3.scaleSequentialSymlog](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#scaleSequentialSymlog) - create a symmetric logarithmic sequential scale. * [d3.scaleSequentialQuantile](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#scaleSequentialQuantile) - create a sequential scale using a *p*-quantile transform. * [*sequentialQuantile*.quantiles](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#sequentialQuantile_quantiles) - return the scale’s quantiles. ### [Diverging Scales](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#diverging-scales) Map a continuous, quantitative domain to a continuous, fixed interpolator. * [d3.scaleDiverging](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#scaleDiverging) - create a diverging scale. * [*diverging*](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#_diverging) - compute the range value corresponding to an input value. * [*diverging*.domain](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#diverging_domain) - set the input domain. * [*diverging*.clamp](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#diverging_clamp) - enable clamping to the domain or range. * [*diverging*.interpolator](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#diverging_interpolator) - set the scale’s output interpolator. * [*diverging*.range](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#diverging_range) - set the output range. * [*diverging*.rangeRound](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#diverging_rangeRound) - set the output range and enable rounding. * [*diverging*.copy](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#diverging_copy) - create a copy of this scale. * [*diverging*.unknown](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#diverging_unknown) - set the output value for unknown inputs. * [d3.scaleDivergingLog](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#scaleDivergingLog) - create a diverging logarithmic scale. * [d3.scaleDivergingPow](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#scaleDivergingPow) - create a diverging power scale. * [d3.scaleDivergingSqrt](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#scaleDivergingSqrt) - create a diverging power scale with exponent 0.5. * [d3.scaleDivergingSymlog](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#scaleDivergingSymlog) - create a diverging symmetric logarithmic scale. ### [Quantize Scales](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#quantize-scales) Map a continuous, quantitative domain to a discrete range. * [d3.scaleQuantize](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#scaleQuantize) - create a uniform quantizing linear scale. * [*quantize*](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#_quantize) - compute the range value corresponding to a given domain value. * [*quantize*.invertExtent](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#quantize_invertExtent) - compute the domain values corresponding to a given range value. * [*quantize*.domain](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#quantize_domain) - set the input domain. * [*quantize*.range](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#quantize_range) - set the output range. * [*quantize*.ticks](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#quantize_ticks) - compute representative values from the domain. * [*quantize*.tickFormat](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#quantize_tickFormat) - format ticks for human consumption. * [*quantize*.nice](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#quantize_nice) - extend the domain to nice round numbers. * [*quantize*.thresholds](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#quantize_thresholds) - return the array of computed thresholds within the domain. * [*quantize*.copy](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#quantize_copy) - create a copy of this scale. * [d3.scaleQuantile](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#scaleQuantile) - create a quantile quantizing linear scale. * [*quantile*](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#_quantile) - compute the range value corresponding to a given domain value. * [*quantile*.invertExtent](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#quantile_invertExtent) - compute the domain values corresponding to a given range value. * [*quantile*.domain](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#quantile_domain) - set the input domain. * [*quantile*.range](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#quantile_range) - set the output range. * [*quantile*.quantiles](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#quantile_quantiles) - get the quantile thresholds. * [*quantile*.copy](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#quantile_copy) - create a copy of this scale. * [d3.scaleThreshold](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#scaleThreshold) - create an arbitrary quantizing linear scale. * [*threshold*](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#_threshold) - compute the range value corresponding to a given domain value. * [*threshold*.invertExtent](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#threshold_invertExtent) - compute the domain values corresponding to a given range value. * [*threshold*.domain](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#threshold_domain) - set the input domain. * [*threshold*.range](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#threshold_range) - set the output range. * [*threshold*.copy](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#threshold_copy) - create a copy of this scale. ### [Ordinal Scales](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#ordinal-scales) Map a discrete domain to a discrete range. * [d3.scaleOrdinal](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#scaleOrdinal) - create an ordinal scale. * [*ordinal*](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#_ordinal) - compute the range value corresponding to a given domain value. * [*ordinal*.domain](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#ordinal_domain) - set the input domain. * [*ordinal*.range](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#ordinal_range) - set the output range. * [*ordinal*.unknown](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#ordinal_unknown) - set the output value for unknown inputs. * [*ordinal*.copy](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#ordinal_copy) - create a copy of this scale. * [d3.scaleImplicit](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#scaleImplicit) - a special unknown value for implicit domains. * [d3.scaleBand](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#scaleBand) - create an ordinal band scale. * [*band*](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#_band) - compute the band start corresponding to a given domain value. * [*band*.domain](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#band_domain) - set the input domain. * [*band*.range](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#band_range) - set the output range. * [*band*.rangeRound](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#band_rangeRound) - set the output range and enable rounding. * [*band*.round](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#band_round) - enable rounding. * [*band*.paddingInner](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#band_paddingInner) - set padding between bands. * [*band*.paddingOuter](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#band_paddingOuter) - set padding outside the first and last bands. * [*band*.padding](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#band_padding) - set padding outside and between bands. * [*band*.align](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#band_align) - set band alignment, if there is extra space. * [*band*.bandwidth](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#band_bandwidth) - get the width of each band. * [*band*.step](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#band_step) - get the distance between the starts of adjacent bands. * [*band*.copy](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#band_copy) - create a copy of this scale. * [d3.scalePoint](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#scalePoint) - create an ordinal point scale. * [*point*](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#_point) - compute the point corresponding to a given domain value. * [*point*.domain](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#point_domain) - set the input domain. * [*point*.range](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#point_range) - set the output range. * [*point*.rangeRound](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#point_rangeRound) - set the output range and enable rounding. * [*point*.round](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#point_round) - enable rounding. * [*point*.padding](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#point_padding) - set padding outside the first and last point. * [*point*.align](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#point_align) - set point alignment, if there is extra space. * [*point*.bandwidth](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#point_bandwidth) - returns zero. * [*point*.step](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#point_step) - get the distance between the starts of adjacent points. * [*point*.copy](https://github.com/d3/d3-scale/blob/v3.3.0/README.md#point_copy) - create a copy of this scale. ## [Selections (d3-selection)](https://github.com/d3/d3-selection/tree/v2.0.0) Transform the DOM by selecting elements and joining to data. ### [Selecting Elements](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#selecting-elements) * [d3.selection](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#selection) - select the root document element. * [d3.select](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#select) - select an element from the document. * [d3.selectAll](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#selectAll) - select multiple elements from the document. * [*selection*.select](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#selection_select) - select a descendant element for each selected element. * [*selection*.selectAll](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#selection_selectAll) - select multiple descendants for each selected element. * [*selection*.filter](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#selection_filter) - filter elements based on data. * [*selection*.merge](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#selection_merge) - merge this selection with another. * [*selection*.selectChild](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#selection_selectChild) - select a child element for each selected element. * [*selection*.selectChildren](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#selection_selectChildren) - select the children elements for each selected element. * [*selection*.selection](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#selection_selection) - return the selection. * [d3.matcher](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#matcher) - test whether an element matches a selector. * [d3.selector](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#selector) - select an element. * [d3.selectorAll](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#selectorAll) - select elements. * [d3.window](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#window) - get a node’s owner window. * [d3.style](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#style) - get a node’s current style value. ### [Modifying Elements](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#modifying-elements) * [*selection*.attr](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#selection_attr) - get or set an attribute. * [*selection*.classed](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#selection_classed) - get, add or remove CSS classes. * [*selection*.style](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#selection_style) - get or set a style property. * [*selection*.property](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#selection_property) - get or set a (raw) property. * [*selection*.text](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#selection_text) - get or set the text content. * [*selection*.html](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#selection_html) - get or set the inner HTML. * [*selection*.append](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#selection_append) - create, append and select new elements. * [*selection*.insert](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#selection_insert) - create, insert and select new elements. * [*selection*.remove](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#selection_remove) - remove elements from the document. * [*selection*.clone](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#selection_clone) - insert clones of selected elements. * [*selection*.sort](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#selection_sort) - sort elements in the document based on data. * [*selection*.order](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#selection_order) - reorders elements in the document to match the selection. * [*selection*.raise](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#selection_raise) - reorders each element as the last child of its parent. * [*selection*.lower](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#selection_lower) - reorders each element as the first child of its parent. * [d3.create](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#create) - create and select a detached element. * [d3.creator](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#creator) - create an element by name. ### [Joining Data](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#joining-data) * [*selection*.data](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#selection_data) - bind elements to data. * [*selection*.join](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#selection_join) - enter, update or exit elements based on data. * [*selection*.enter](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#selection_enter) - get the enter selection (data missing elements). * [*selection*.exit](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#selection_exit) - get the exit selection (elements missing data). * [*selection*.datum](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#selection_datum) - get or set element data (without joining). ### [Handling Events](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#handling-events) * [*selection*.on](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#selection_on) - add or remove event listeners. * [*selection*.dispatch](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#selection_dispatch) - dispatch a custom event. * [d3.pointer](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#pointer) - get the pointer’s position of an event. * [d3.pointers](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#pointers) - get the pointers’ positions of an event. ### [Control Flow](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#control-flow) * [*selection*.each](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#selection_each) - call a function for each element. * [*selection*.call](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#selection_call) - call a function with this selection. * [*selection*.empty](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#selection_empty) - returns true if this selection is empty. * [*selection*.nodes](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#selection_nodes) - returns an array of all selected elements. * [*selection*.node](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#selection_node) - returns the first (non-null) element. * [*selection*.size](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#selection_size) - returns the count of elements. * [*selection*[Symbol.iterator]](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#selection_iterator) - iterate over the selection’s nodes. ### [Local Variables](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#local-variables) * [d3.local](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#local) - declares a new local variable. * [*local*.set](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#local_set) - set a local variable’s value. * [*local*.get](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#local_get) - get a local variable’s value. * [*local*.remove](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#local_remove) - delete a local variable. * [*local*.toString](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#local_toString) - get the property identifier of a local variable. ### [Namespaces](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#namespaces) * [d3.namespace](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#namespace) - qualify a prefixed XML name, such as “xlink:href”. * [d3.namespaces](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#namespaces) - the built-in XML namespaces. ## [Shapes (d3-shape)](https://github.com/d3/d3-shape/tree/v2.1.0) Graphical primitives for visualization. ### [Arcs](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#arcs) Circular or annular sectors, as in a pie or donut chart. * [d3.arc](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#arc) - create a new arc generator. * [*arc*](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#_arc) - generate an arc for the given datum. * [*arc*.centroid](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#arc_centroid) - compute an arc’s midpoint. * [*arc*.innerRadius](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#arc_innerRadius) - set the inner radius. * [*arc*.outerRadius](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#arc_outerRadius) - set the outer radius. * [*arc*.cornerRadius](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#arc_cornerRadius) - set the corner radius, for rounded corners. * [*arc*.startAngle](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#arc_startAngle) - set the start angle. * [*arc*.endAngle](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#arc_endAngle) - set the end angle. * [*arc*.padAngle](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#arc_padAngle) - set the angle between adjacent arcs, for padded arcs. * [*arc*.padRadius](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#arc_padRadius) - set the radius at which to linearize padding. * [*arc*.context](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#arc_context) - set the rendering context. ### [Pies](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#pies) Compute the necessary angles to represent a tabular dataset as a pie or donut chart. * [d3.pie](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#pie) - create a new pie generator. * [*pie*](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#_pie) - compute the arc angles for the given dataset. * [*pie*.value](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#pie_value) - set the value accessor. * [*pie*.sort](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#pie_sort) - set the sort order comparator. * [*pie*.sortValues](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#pie_sortValues) - set the sort order comparator. * [*pie*.startAngle](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#pie_startAngle) - set the overall start angle. * [*pie*.endAngle](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#pie_endAngle) - set the overall end angle. * [*pie*.padAngle](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#pie_padAngle) - set the pad angle between adjacent arcs. ### [Lines](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#lines) A spline or polyline, as in a line chart. * [d3.line](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#line) - create a new line generator. * [*line*](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#_line) - generate a line for the given dataset. * [*line*.x](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#line_x) - set the *x* accessor. * [*line*.y](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#line_y) - set the *y* accessor. * [*line*.defined](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#line_defined) - set the defined accessor. * [*line*.curve](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#line_curve) - set the curve interpolator. * [*line*.context](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#line_context) - set the rendering context. * [d3.lineRadial](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#lineRadial) - create a new radial line generator. * [*lineRadial*](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#_lineRadial) - generate a line for the given dataset. * [*lineRadial*.angle](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#lineRadial_angle) - set the angle accessor. * [*lineRadial*.radius](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#lineRadial_radius) - set the radius accessor. * [*lineRadial*.defined](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#lineRadial_defined) - set the defined accessor. * [*lineRadial*.curve](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#lineRadial_curve) - set the curve interpolator. * [*lineRadial*.context](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#lineRadial_context) - set the rendering context. ### [Areas](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#areas) An area, defined by a bounding topline and baseline, as in an area chart. * [d3.area](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#area) - create a new area generator. * [*area*](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#_area) - generate an area for the given dataset. * [*area*.x](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#area_x) - set the *x0* and *x1* accessors. * [*area*.x0](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#area_x0) - set the baseline *x* accessor. * [*area*.x1](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#area_x1) - set the topline *x* accessor. * [*area*.y](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#area_y) - set the *y0* and *y1* accessors. * [*area*.y0](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#area_y0) - set the baseline *y* accessor. * [*area*.y1](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#area_y1) - set the topline *y* accessor. * [*area*.defined](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#area_defined) - set the defined accessor. * [*area*.curve](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#area_curve) - set the curve interpolator. * [*area*.context](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#area_context) - set the rendering context. * [*area*.lineX0](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#area_lineX0) - derive a line for the left edge of an area. * [*area*.lineY0](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#area_lineY0) - derive a line for the top edge of an area. * [*area*.lineX1](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#area_lineX1) - derive a line for the right edge of an area. * [*area*.lineY1](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#area_lineY1) - derive a line for the bottom edge of an area. * [d3.areaRadial](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#areaRadial) - create a new radial area generator. * [*areaRadial*](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#_areaRadial) - generate an area for the given dataset. * [*areaRadial*.angle](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#areaRadial_angle) - set the start and end angle accessors. * [*areaRadial*.startAngle](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#areaRadial_startAngle) - set the start angle accessor. * [*areaRadial*.endAngle](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#areaRadial_endAngle) - set the end angle accessor. * [*areaRadial*.radius](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#areaRadial_radius) - set the inner and outer radius accessors. * [*areaRadial*.innerRadius](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#areaRadial_innerRadius) - set the inner radius accessor. * [*areaRadial*.outerRadius](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#areaRadial_outerRadius) - set the outer radius accessor. * [*areaRadial*.defined](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#areaRadial_defined) - set the defined accessor. * [*areaRadial*.curve](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#areaRadial_curve) - set the curve interpolator. * [*areaRadial*.context](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#areaRadial_context) - set the rendering context. * [*areaRadial*.lineStartAngle](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#areaRadial_lineStartAngle) - derive a line for the start edge of an area. * [*areaRadial*.lineInnerRadius](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#areaRadial_lineInnerRadius) - derive a line for the inner edge of an area. * [*areaRadial*.lineEndAngle](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#areaRadial_lineEndAngle) - derive a line for the end edge of an area. * [*areaRadial*.lineOuterRadius](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#areaRadial_lineOuterRadius) - derive a line for the outer edge of an area. ### [Curves](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#curves) Interpolate between points to produce a continuous shape. * [d3.curveBasis](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#curveBasis) - a cubic basis spline, repeating the end points. * [d3.curveBasisClosed](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#curveBasisClosed) - a closed cubic basis spline. * [d3.curveBasisOpen](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#curveBasisOpen) - a cubic basis spline. * [d3.curveBundle](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#curveBundle) - a straightened cubic basis spline. * [*bundle*.beta](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#curveBundle_beta) - set the bundle tension *beta*. * [d3.curveBumpX](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#curveBumpX) - a cubic Bézier spline with horizontal tangents. * [d3.curveBumpY](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#curveBumpY) - a cubic Bézier spline with vertical tangents. * [d3.curveCardinal](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#curveCardinal) - a cubic cardinal spline, with one-sided difference at each end. * [d3.curveCardinalClosed](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#curveCardinalClosed) - a closed cubic cardinal spline. * [d3.curveCardinalOpen](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#curveCardinalOpen) - a cubic cardinal spline. * [*cardinal*.tension](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#curveCardinal_tension) - set the cardinal spline tension. * [d3.curveCatmullRom](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#curveCatmullRom) - a cubic Catmull–Rom spline, with one-sided difference at each end. * [d3.curveCatmullRomClosed](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#curveCatmullRomClosed) - a closed cubic Catmull–Rom spline. * [d3.curveCatmullRomOpen](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#curveCatmullRomOpen) - a cubic Catmull–Rom spline. * [*catmullRom*.alpha](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#curveCatmullRom_alpha) - set the Catmull–Rom parameter *alpha*. * [d3.curveLinear](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#curveLinear) - a polyline. * [d3.curveLinearClosed](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#curveLinearClosed) - a closed polyline. * [d3.curveMonotoneX](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#curveMonotoneX) - a cubic spline that, given monotonicity in *x*, preserves it in *y*. * [d3.curveMonotoneY](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#curveMonotoneY) - a cubic spline that, given monotonicity in *y*, preserves it in *x*. * [d3.curveNatural](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#curveNatural) - a natural cubic spline. * [d3.curveStep](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#curveStep) - a piecewise constant function. * [d3.curveStepAfter](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#curveStepAfter) - a piecewise constant function. * [d3.curveStepBefore](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#curveStepBefore) - a piecewise constant function. * [*curve*.areaStart](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#curve_areaStart) - start a new area segment. * [*curve*.areaEnd](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#curve_areaEnd) - end the current area segment. * [*curve*.lineStart](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#curve_lineStart) - start a new line segment. * [*curve*.lineEnd](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#curve_lineEnd) - end the current line segment. * [*curve*.point](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#curve_point) - add a point to the current line segment. ### [Links](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#links) A smooth cubic Bézier curve from a source to a target. * [d3.linkVertical](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#linkVertical) - create a new vertical link generator. * [d3.linkHorizontal](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#linkHorizontal) - create a new horizontal link generator. * [*link*](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#_link) - generate a link. * [*link*.source](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#link_source) - set the source accessor. * [*link*.target](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#link_target) - set the target accessor. * [*link*.x](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#link_x) - set the point *x*-accessor. * [*link*.y](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#link_y) - set the point *y*-accessor. * [*link*.context](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#link_context) - set the rendering context. * [d3.linkRadial](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#linkRadial) - create a new radial link generator. * [*linkRadial*.angle](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#linkRadial_angle) - set the point *angle* accessor. * [*linkRadial*.radius](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#linkRadial_radius) - set the point *radius* accessor. ### [Symbols](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#symbols) A categorical shape encoding, as in a scatterplot. * [d3.symbol](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#symbol) - create a new symbol generator. * [*symbol*](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#_symbol) - generate a symbol for the given datum. * [*symbol*.type](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#symbol_type) - set the symbol type. * [*symbol*.size](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#symbol_size) - set the size of the symbol in square pixels. * [*symbol*.context](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#symbol_context) - set the rendering context. * [d3.symbols](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#symbols) - the array of built-in symbol types. * [d3.symbolCircle](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#symbolCircle) - a circle. * [d3.symbolCross](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#symbolCross) - a Greek cross with arms of equal length. * [d3.symbolDiamond](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#symbolDiamond) - a rhombus. * [d3.symbolSquare](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#symbolSquare) - a square. * [d3.symbolStar](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#symbolStar) - a pentagonal star (pentagram). * [d3.symbolTriangle](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#symbolTriangle) - an up-pointing triangle. * [d3.symbolWye](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#symbolWye) - a Y shape. * [d3.pointRadial](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#pointRadial) - relative coordinates of a point given an angle and radius. * [*symbolType*.draw](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#symbolType_draw) - draw this symbol to the given context. ### [Stacks](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#stacks) Stack shapes, placing one adjacent to another, as in a stacked bar chart. * [d3.stack](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#stack) - create a new stack generator. * [*stack*](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#_stack) - generate a stack for the given dataset. * [*stack*.keys](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#stack_keys) - set the keys accessor. * [*stack*.value](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#stack_value) - set the value accessor. * [*stack*.order](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#stack_order) - set the order accessor. * [*stack*.offset](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#stack_offset) - set the offset accessor. * [d3.stackOrderAppearance](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#stackOrderAppearance) - put the earliest series on bottom. * [d3.stackOrderAscending](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#stackOrderAscending) - put the smallest series on bottom. * [d3.stackOrderDescending](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#stackOrderDescending) - put the largest series on bottom. * [d3.stackOrderInsideOut](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#stackOrderInsideOut) - put earlier series in the middle. * [d3.stackOrderNone](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#stackOrderNone) - use the given series order. * [d3.stackOrderReverse](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#stackOrderReverse) - use the reverse of the given series order. * [d3.stackOffsetExpand](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#stackOffsetExpand) - normalize the baseline to zero and topline to one. * [d3.stackOffsetDiverging](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#stackOffsetDiverging) - positive above zero; negative below zero. * [d3.stackOffsetNone](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#stackOffsetNone) - apply a zero baseline. * [d3.stackOffsetSilhouette](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#stackOffsetSilhouette) - center the streamgraph around zero. * [d3.stackOffsetWiggle](https://github.com/d3/d3-shape/blob/v2.1.0/README.md#stackOffsetWiggle) - minimize streamgraph wiggling. ## [Time Formats (d3-time-format)](https://github.com/d3/d3-time-format/tree/v3.0.0) Parse and format times, inspired by strptime and strftime. * [d3.timeFormat](https://github.com/d3/d3-time-format/blob/v3.0.0/README.md#timeFormat) - alias for *locale*.format on the default locale. * [d3.timeParse](https://github.com/d3/d3-time-format/blob/v3.0.0/README.md#timeParse) - alias for *locale*.parse on the default locale. * [d3.utcFormat](https://github.com/d3/d3-time-format/blob/v3.0.0/README.md#utcFormat) - alias for *locale*.utcFormat on the default locale. * [d3.utcParse](https://github.com/d3/d3-time-format/blob/v3.0.0/README.md#utcParse) - alias for *locale*.utcParse on the default locale. * [d3.isoFormat](https://github.com/d3/d3-time-format/blob/v3.0.0/README.md#isoFormat) - an ISO 8601 UTC formatter. * [d3.isoParse](https://github.com/d3/d3-time-format/blob/v3.0.0/README.md#isoParse) - an ISO 8601 UTC parser. * [*locale*.format](https://github.com/d3/d3-time-format/blob/v3.0.0/README.md#locale_format) - create a time formatter. * [*locale*.parse](https://github.com/d3/d3-time-format/blob/v3.0.0/README.md#locale_parse) - create a time parser. * [*locale*.utcFormat](https://github.com/d3/d3-time-format/blob/v3.0.0/README.md#locale_utcFormat) - create a UTC formatter. * [*locale*.utcParse](https://github.com/d3/d3-time-format/blob/v3.0.0/README.md#locale_utcParse) - create a UTC parser. * [d3.timeFormatLocale](https://github.com/d3/d3-time-format/blob/v3.0.0/README.md#timeFormatLocale) - define a custom locale. * [d3.timeFormatDefaultLocale](https://github.com/d3/d3-time-format/blob/v3.0.0/README.md#timeFormatDefaultLocale) - define the default locale. ## [Time Intervals (d3-time)](https://github.com/d3/d3-time/tree/v2.1.0) A calculator for humanity’s peculiar conventions of time. * [d3.timeInterval](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeInterval) - implement a new custom time interval. * [*interval*](https://github.com/d3/d3-time/blob/v2.1.0/README.md#_interval) - alias for *interval*.floor. * [*interval*.floor](https://github.com/d3/d3-time/blob/v2.1.0/README.md#interval_floor) - round down to the nearest boundary. * [*interval*.round](https://github.com/d3/d3-time/blob/v2.1.0/README.md#interval_round) - round to the nearest boundary. * [*interval*.ceil](https://github.com/d3/d3-time/blob/v2.1.0/README.md#interval_ceil) - round up to the nearest boundary. * [*interval*.offset](https://github.com/d3/d3-time/blob/v2.1.0/README.md#interval_offset) - offset a date by some number of intervals. * [*interval*.range](https://github.com/d3/d3-time/blob/v2.1.0/README.md#interval_range) - generate a range of dates at interval boundaries. * [*interval*.filter](https://github.com/d3/d3-time/blob/v2.1.0/README.md#interval_filter) - create a filtered subset of this interval. * [*interval*.every](https://github.com/d3/d3-time/blob/v2.1.0/README.md#interval_every) - create a filtered subset of this interval. * [*interval*.count](https://github.com/d3/d3-time/blob/v2.1.0/README.md#interval_count) - count interval boundaries between two dates. * [d3.timeMillisecond](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeMillisecond), [d3.utcMillisecond](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeMillisecond) - the millisecond interval. * [d3.timeMilliseconds](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeMillisecond), [d3.utcMilliseconds](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeMillisecond) - aliases for millisecond.range. * [d3.timeSecond](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeSecond), [d3.utcSecond](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeSecond) - the second interval. * [d3.timeSeconds](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeSecond), [d3.utcSeconds](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeSecond) - aliases for second.range. * [d3.timeMinute](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeMinute), [d3.utcMinute](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeMinute) - the minute interval. * [d3.timeMinutes](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeMinute), [d3.utcMinutes](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeMinute) - aliases for minute.range. * [d3.timeHour](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeHour), [d3.utcHour](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeHour) - the hour interval. * [d3.timeHours](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeHour), [d3.utcHours](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeHour) - aliases for hour.range. * [d3.timeDay](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeDay), [d3.utcDay](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeDay) - the day interval. * [d3.timeDays](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeDay), [d3.utcDays](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeDay) - aliases for day.range. * [d3.timeWeek](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeWeek), [d3.utcWeek](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeWeek) - aliases for sunday. * [d3.timeWeeks](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeWeek), [d3.utcWeeks](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeWeek) - aliases for week.range. * [d3.timeSunday](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeSunday), [d3.utcSunday](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeSunday) - the week interval, starting on Sunday. * [d3.timeSundays](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeSunday), [d3.utcSundays](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeSunday) - aliases for sunday.range. * [d3.timeMonday](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeMonday), [d3.utcMonday](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeMonday) - the week interval, starting on Monday. * [d3.timeMondays](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeMonday), [d3.utcMondays](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeMonday) - aliases for monday.range. * [d3.timeTuesday](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeTuesday), [d3.utcTuesday](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeTuesday) - the week interval, starting on Tuesday. * [d3.timeTuesdays](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeTuesday), [d3.utcTuesdays](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeTuesday) - aliases for tuesday.range. * [d3.timeWednesday](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeWednesday), [d3.utcWednesday](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeWednesday) - the week interval, starting on Wednesday. * [d3.timeWednesdays](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeWednesday), [d3.utcWednesdays](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeWednesday) - aliases for wednesday.range. * [d3.timeThursday](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeThursday), [d3.utcThursday](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeThursday) - the week interval, starting on Thursday. * [d3.timeThursdays](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeThursday), [d3.utcThursdays](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeThursday) - aliases for thursday.range. * [d3.timeFriday](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeFriday), [d3.utcFriday](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeFriday) - the week interval, starting on Friday. * [d3.timeFridays](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeFriday), [d3.utcFridays](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeFriday) - aliases for friday.range. * [d3.timeSaturday](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeSaturday), [d3.utcSaturday](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeSaturday) - the week interval, starting on Saturday. * [d3.timeSaturdays](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeSaturday), [d3.utcSaturdays](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeSaturday) - aliases for saturday.range. * [d3.timeMonth](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeMonth), [d3.utcMonth](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeMonth) - the month interval. * [d3.timeMonths](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeMonth), [d3.utcMonths](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeMonth) - aliases for month.range. * [d3.timeYear](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeYear), [d3.utcYear](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeYear) - the year interval. * [d3.timeYears](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeYear), [d3.utcYears](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeYear) - aliases for year.range. * [d3.timeTicks](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeTicks), [d3.utcTicks](https://github.com/d3/d3-time/blob/v2.1.0/README.md#utcTicks) - * [d3.timeTickInterval](https://github.com/d3/d3-time/blob/v2.1.0/README.md#timeTickInterval), [d3.utcTickInterval](https://github.com/d3/d3-time/blob/v2.1.0/README.md#utcTickInterval) - ## [Timers (d3-timer)](https://github.com/d3/d3-timer/tree/v2.0.0) An efficient queue for managing thousands of concurrent animations. * [d3.now](https://github.com/d3/d3-timer/blob/v2.0.0/README.md#now) - get the current high-resolution time. * [d3.timer](https://github.com/d3/d3-timer/blob/v2.0.0/README.md#timer) - schedule a new timer. * [*timer*.restart](https://github.com/d3/d3-timer/blob/v2.0.0/README.md#timer_restart) - reset the timer’s start time and callback. * [*timer*.stop](https://github.com/d3/d3-timer/blob/v2.0.0/README.md#timer_stop) - stop the timer. * [d3.timerFlush](https://github.com/d3/d3-timer/blob/v2.0.0/README.md#timerFlush) - immediately execute any eligible timers. * [d3.timeout](https://github.com/d3/d3-timer/blob/v2.0.0/README.md#timeout) - schedule a timer that stops on its first callback. * [d3.interval](https://github.com/d3/d3-timer/blob/v2.0.0/README.md#interval) - schedule a timer that is called with a configurable period. ## [Transitions (d3-transition)](https://github.com/d3/d3-transition/tree/v2.0.0) Animated transitions for [selections](#selections). * [*selection*.transition](https://github.com/d3/d3-transition/blob/v2.0.0/README.md#selection_transition) - schedule a transition for the selected elements. * [*selection*.interrupt](https://github.com/d3/d3-transition/blob/v2.0.0/README.md#selection_interrupt) - interrupt and cancel transitions on the selected elements. * [d3.interrupt](https://github.com/d3/d3-transition/blob/v2.0.0/README.md#interrupt) - interrupt the active transition for a given node. * [d3.transition](https://github.com/d3/d3-transition/blob/v2.0.0/README.md#transition) - schedule a transition on the root document element. * [*transition*.select](https://github.com/d3/d3-transition/blob/v2.0.0/README.md#transition_select) - schedule a transition on the selected elements. * [*transition*.selectAll](https://github.com/d3/d3-transition/blob/v2.0.0/README.md#transition_selectAll) - schedule a transition on the selected elements. * [*transition*.filter](https://github.com/d3/d3-transition/blob/v2.0.0/README.md#transition_filter) - filter elements based on data. * [*transition*.merge](https://github.com/d3/d3-transition/blob/v2.0.0/README.md#transition_merge) - merge this transition with another. * [*transition*.transition](https://github.com/d3/d3-transition/blob/v2.0.0/README.md#transition_transition) - schedule a new transition following this one. * [*transition*.selection](https://github.com/d3/d3-transition/blob/v2.0.0/README.md#transition_selection) - returns a selection for this transition. * [d3.active](https://github.com/d3/d3-transition/blob/v2.0.0/README.md#active) - select the active transition for a given node. * [*transition*.attr](https://github.com/d3/d3-transition/blob/v2.0.0/README.md#transition_attr) - tween the given attribute using the default interpolator. * [*transition*.attrTween](https://github.com/d3/d3-transition/blob/v2.0.0/README.md#transition_attrTween) - tween the given attribute using a custom interpolator. * [*transition*.style](https://github.com/d3/d3-transition/blob/v2.0.0/README.md#transition_style) - tween the given style property using the default interpolator. * [*transition*.styleTween](https://github.com/d3/d3-transition/blob/v2.0.0/README.md#transition_styleTween) - tween the given style property using a custom interpolator. * [*transition*.text](https://github.com/d3/d3-transition/blob/v2.0.0/README.md#transition_text) - set the text content when the transition starts. * [*transition*.textTween](https://github.com/d3/d3-transition/blob/v2.0.0/README.md#transition_textTween) - tween the text using a custom interpolator. * [*transition*.remove](https://github.com/d3/d3-transition/blob/v2.0.0/README.md#transition_remove) - remove the selected elements when the transition ends. * [*transition*.tween](https://github.com/d3/d3-transition/blob/v2.0.0/README.md#transition_tween) - run custom code during the transition. * [*transition*.delay](https://github.com/d3/d3-transition/blob/v2.0.0/README.md#transition_delay) - specify per-element delay in milliseconds. * [*transition*.duration](https://github.com/d3/d3-transition/blob/v2.0.0/README.md#transition_duration) - specify per-element duration in milliseconds. * [*transition*.ease](https://github.com/d3/d3-transition/blob/v2.0.0/README.md#transition_ease) - specify the easing function. * [*transition*.easeVarying](https://github.com/d3/d3-transition/blob/v2.0.0/README.md#transition_easeVarying) - specify an easing function factory. * [*transition*.end](https://github.com/d3/d3-transition/blob/v2.0.0/README.md#transition_end) - a promise that resolves when a transition ends. * [*transition*.on](https://github.com/d3/d3-transition/blob/v2.0.0/README.md#transition_on) - await the end of a transition. * [*transition*.each](https://github.com/d3/d3-transition/blob/v2.0.0/README.md#transition_each) - call a function for each element. * [*transition*.call](https://github.com/d3/d3-transition/blob/v2.0.0/README.md#transition_call) - call a function with this transition. * [*transition*.empty](https://github.com/d3/d3-transition/blob/v2.0.0/README.md#transition_empty) - returns true if this transition is empty. * [*transition*.nodes](https://github.com/d3/d3-transition/blob/v2.0.0/README.md#transition_nodes) - returns an array of all selected elements. * [*transition*.node](https://github.com/d3/d3-transition/blob/v2.0.0/README.md#transition_node) - returns the first (non-null) element. * [*transition*.size](https://github.com/d3/d3-transition/blob/v2.0.0/README.md#transition_size) - returns the count of elements. ## [Zooming (d3-zoom)](https://github.com/d3/d3-zoom/tree/v2.0.0) Pan and zoom SVG, HTML or Canvas using mouse or touch input. * [d3.zoom](https://github.com/d3/d3-zoom/blob/v2.0.0/README.md#zoom) - create a zoom behavior. * [*zoom*](https://github.com/d3/d3-zoom/blob/v2.0.0/README.md#_zoom) - apply the zoom behavior to the selected elements. * [*zoom*.transform](https://github.com/d3/d3-zoom/blob/v2.0.0/README.md#zoom_transform) - change the transform for the selected elements. * [*zoom*.translateBy](https://github.com/d3/d3-zoom/blob/v2.0.0/README.md#zoom_translateBy) - translate the transform for the selected elements. * [*zoom*.translateTo](https://github.com/d3/d3-zoom/blob/v2.0.0/README.md#zoom_translateTo) - translate the transform for the selected elements. * [*zoom*.scaleBy](https://github.com/d3/d3-zoom/blob/v2.0.0/README.md#zoom_scaleBy) - scale the transform for the selected elements. * [*zoom*.scaleTo](https://github.com/d3/d3-zoom/blob/v2.0.0/README.md#zoom_scaleTo) - scale the transform for the selected elements. * [*zoom*.constrain](https://github.com/d3/d3-zoom/blob/v2.0.0/README.md#zoom_constrain) - override the transform constraint logic. * [*zoom*.filter](https://github.com/d3/d3-zoom/blob/v2.0.0/README.md#zoom_filter) - control which input events initiate zooming. * [*zoom*.touchable](https://github.com/d3/d3-zoom/blob/v2.0.0/README.md#zoom_touchable) - set the touch support detector. * [*zoom*.wheelDelta](https://github.com/d3/d3-zoom/blob/v2.0.0/README.md#zoom_wheelDelta) - override scaling for wheel events. * [*zoom*.extent](https://github.com/d3/d3-zoom/blob/v2.0.0/README.md#zoom_extent) - set the extent of the viewport. * [*zoom*.scaleExtent](https://github.com/d3/d3-zoom/blob/v2.0.0/README.md#zoom_scaleExtent) - set the allowed scale range. * [*zoom*.translateExtent](https://github.com/d3/d3-zoom/blob/v2.0.0/README.md#zoom_translateExtent) - set the extent of the zoomable world. * [*zoom*.clickDistance](https://github.com/d3/d3-zoom/blob/v2.0.0/README.md#zoom_clickDistance) - set the click distance threshold. * [*zoom*.tapDistance](https://github.com/d3/d3-zoom/blob/v2.0.0/README.md#zoom_tapDistance) - set the tap distance threshold. * [*zoom*.duration](https://github.com/d3/d3-zoom/blob/v2.0.0/README.md#zoom_duration) - set the duration of zoom transitions. * [*zoom*.interpolate](https://github.com/d3/d3-zoom/blob/v2.0.0/README.md#zoom_interpolate) - control the interpolation of zoom transitions. * [*zoom*.on](https://github.com/d3/d3-zoom/blob/v2.0.0/README.md#zoom_on) - listen for zoom events. * [d3.zoomTransform](https://github.com/d3/d3-zoom/blob/v2.0.0/README.md#zoomTransform) - get the zoom transform for a given element. * [*transform*.scale](https://github.com/d3/d3-zoom/blob/v2.0.0/README.md#transform_scale) - scale a transform by the specified amount. * [*transform*.translate](https://github.com/d3/d3-zoom/blob/v2.0.0/README.md#transform_translate) - translate a transform by the specified amount. * [*transform*.apply](https://github.com/d3/d3-zoom/blob/v2.0.0/README.md#transform_apply) - apply the transform to the given point. * [*transform*.applyX](https://github.com/d3/d3-zoom/blob/v2.0.0/README.md#transform_applyX) - apply the transform to the given *x*-coordinate. * [*transform*.applyY](https://github.com/d3/d3-zoom/blob/v2.0.0/README.md#transform_applyY) - apply the transform to the given *y*-coordinate. * [*transform*.invert](https://github.com/d3/d3-zoom/blob/v2.0.0/README.md#transform_invert) - unapply the transform to the given point. * [*transform*.invertX](https://github.com/d3/d3-zoom/blob/v2.0.0/README.md#transform_invertX) - unapply the transform to the given *x*-coordinate. * [*transform*.invertY](https://github.com/d3/d3-zoom/blob/v2.0.0/README.md#transform_invertY) - unapply the transform to the given *y*-coordinate. * [*transform*.rescaleX](https://github.com/d3/d3-zoom/blob/v2.0.0/README.md#transform_rescaleX) - apply the transform to an *x*-scale’s domain. * [*transform*.rescaleY](https://github.com/d3/d3-zoom/blob/v2.0.0/README.md#transform_rescaleY) - apply the transform to a *y*-scale’s domain. * [*transform*.toString](https://github.com/d3/d3-zoom/blob/v2.0.0/README.md#transform_toString) - format the transform as an SVG transform string. * [d3.zoomIdentity](https://github.com/d3/d3-zoom/blob/v2.0.0/README.md#zoomIdentity) - the identity transform. ================================================ FILE: inst/www/d3/v6/CHANGES.md ================================================ # Changes in D3 6.0 [Released August 26, 2020.](https://github.com/d3/d3/releases/tag/v6.0.0) *This document covers only major changes. For minor and patch changes, please see the [release notes](https://github.com/d3/d3/releases).* D3 now **uses native collections** (Map and Set) and **accepts iterables**. [d3.group and d3.rollup](https://observablehq.com/@d3/d3-group) are powerful new aggregation functions that replace d3.nest and work great [with d3-hierarchy](https://observablehq.com/d/9a453665f405eebf) and d3-selection. There are lots of new helpers in d3-array, too, such as [d3.greatest](https://observablehq.com/@d3/d3-least), [d3.quickselect](https://observablehq.com/@d3/d3-quickselect), and [d3.fsum](https://observablehq.com/@d3/d3-fsum). D3 now **passes events directly to listeners**, replacing the d3.event global and bringing D3 inline with vanilla JavaScript and most other frameworks. **d3-delaunay** (based on Vladimir Agafonkin’s excellent [Delaunator](https://github.com/mapbox/delaunator)) replaces d3-voronoi, offering dramatic improvements to performance, robustness, and [search](https://observablehq.com/@d3/delaunay-find). And there’s a new [d3-geo-voronoi](https://github.com/Fil/d3-geo-voronoi) for spherical (geographical) data! **d3-random** is [greatly expanded](https://github.com/d3/d3-random/blob/master/README.md) and includes a fast [linear congruential generator](https://observablehq.com/@d3/d3-randomlcg) for seeded randomness. **d3-chord** has new layouts for [directed](https://observablehq.com/@d3/directed-chord-diagram) and transposed chord diagrams. **d3-scale** adds a new [radial scale](https://observablehq.com/@d3/radial-stacked-bar-chart-ii) type. … and a variety of other small enhancements. [More than 450 examples](https://observablehq.com/@d3/gallery) have been updated to D3 6.0! ### d3-array * Accept iterables. * Add [d3.group](https://github.com/d3/d3-array/blob/master/README.md#group). * Add [d3.groups](https://github.com/d3/d3-array/blob/master/README.md#groups). * Add [d3.index](https://github.com/d3/d3-array/blob/master/README.md#index). * Add [d3.indexes](https://github.com/d3/d3-array/blob/master/README.md#indexes). * Add [d3.rollup](https://github.com/d3/d3-array/blob/master/README.md#rollup). * Add [d3.rollups](https://github.com/d3/d3-array/blob/master/README.md#rollups). * Add [d3.maxIndex](https://github.com/d3/d3-array/blob/master/README.md#maxIndex). * Add [d3.minIndex](https://github.com/d3/d3-array/blob/master/README.md#minIndex). * Add [d3.greatest](https://github.com/d3/d3-array/blob/master/README.md#greatest). * Add [d3.greatestIndex](https://github.com/d3/d3-array/blob/master/README.md#greatestIndex). * Add [d3.least](https://github.com/d3/d3-array/blob/master/README.md#least). * Add [d3.leastIndex](https://github.com/d3/d3-array/blob/master/README.md#leastIndex). * Add [d3.bin](https://github.com/d3/d3-array/blob/master/README.md#bin). * Add [d3.count](https://github.com/d3/d3-array/blob/master/README.md#count). * Add [d3.cumsum](https://github.com/d3/d3-array/blob/master/README.md#cumsum). * Add [d3.fsum](https://github.com/d3/d3-array/blob/master/README.md#fsum). * Add [d3.Adder](https://github.com/d3/d3-array/blob/master/README.md#Adder). * Add [d3.quantileSorted](https://github.com/d3/d3-array/blob/master/README.md#quantileSorted). * Add [d3.quickselect](https://github.com/d3/d3-array/blob/master/README.md#quickselect). * Add [*bisector*.center](https://github.com/d3/d3-array/blob/master/README.md#bisector_center). * Allow more than two iterables for [d3.cross](https://github.com/d3/d3-array/blob/master/README.md#cross). * Accept non-sorted input with [d3.quantile](https://github.com/d3/d3-array/blob/master/README.md#quantile). * Fix a *array*.sort bug in Safari. * Fix bin thresholds to ignore NaN input. * Fix [d3.ticks](https://github.com/d3/d3-array/blob/master/README.md#ticks) to not return ticks outside the domain. * Improve the performance of [d3.median](https://github.com/d3/d3-array/blob/master/README.md#median). See https://observablehq.com/@d3/d3-array-2-0 for details. ### d3-brush * Add [*event*.mode](https://github.com/d3/d3-brush/blob/master/README.md#brush-events). * Change [*brush*.on](https://github.com/d3/d3-brush/blob/master/README.md#brush_on) to pass the *event* directly to listeners. * Improve multitouch (two-touch) interaction. ### d3-chord * Add [d3.chordDirected](https://github.com/d3/d3-chord/blob/master/README.md#chordDirected). * Add [d3.chordTranspose](https://github.com/d3/d3-chord/blob/master/README.md#chordTranspose). * Add [d3.ribbonArrow](https://github.com/d3/d3-chord/blob/master/README.md#ribbonArrow). * Add [*ribbon*.padAngle](https://github.com/d3/d3-chord/blob/master/README.md#ribbon_padAngle). * Add [*ribbon*.sourceRadius](https://github.com/d3/d3-chord/blob/master/README.md#ribbon_sourceRadius). * Add [*ribbon*.targetRadius](https://github.com/d3/d3-chord/blob/master/README.md#ribbon_targetRadius). ### d3-delaunay * Add [d3.Delaunay](https://github.com/d3/d3-delaunay/blob/master/README.md). ### d3-drag * Change [*drag*.on](https://github.com/d3/d3-drag/blob/master/README.md#drag_on) to pass the *event* directly to listeners. ### d3-force * Add *iterations* argument to [*simulation*.tick](https://github.com/d3/d3-force/blob/master/README.md#simulation_tick). * Add [*forceCenter*.strength](https://github.com/d3/d3-force/blob/master/README.md#center_strength). * Add [*forceSimulation*.randomSource](https://github.com/d3/d3-force/blob/master/README.md#simulation_randomSource). * All built-in forces are now fully deterministic (including “jiggling” coincident nodes). * Improve the default phyllotaxis layout slightly by offsetting by one half-radius. * Improve the error message when a link references an unknown node. * [*force*.initialize](https://github.com/d3/d3-force/blob/master/README.md#force_initialize) is now passed a random source. * Fix bug when initializing nodes with fixed positions. ### d3-format * Change the default minus sign to the minus sign (−) instead of hyphen-minus (-). * Fix decimal `d` formatting of numbers greater than or equal to 1e21. ### d3-geo * Fix clipping of some degenerate polygons. ### d3-hierarchy * Accept iterables. * Add [*node*[Symbol.iterator]](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_iterator); hierarchies are now iterable. * Add [*node*.find](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_find). * Change [*node*.each](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_each) to pass the traversal index. * Change [*node*.eachAfter](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_eachAfter) to pass the traversal index. * Change [*node*.eachBefore](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_eachBefore) to pass the traversal index. * Fix [d3.packSiblings](https://github.com/d3/d3-hierarchy/blob/master/README.md#packSiblings) for huge circles. * Fix divide-by-zero bug in [d3.treemapBinary](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemapBinary). * Fix divide-by-zero bug in [d3.treemapResquarify](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemapResquarify). ### d3-interpolate * Add [*interpolateZoom*.rho](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateZoom_rho). (#25) * Allow [d3.piecewise](https://github.com/d3/d3-interpolate/blob/master/README.md#piecewise) to default to using d3.interpolate. #90 * Change [d3.interpolateTransformCss](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateTransformCss) to use DOMMatrix and require absolute units. #83 ### d3-quadtree * Fix an infinite loop when coordinates diverge to huge values. ### d3-random * Add [d3.randomLcg](https://github.com/d3/d3-random/blob/master/README.md#randomLcg). * Add [d3.randomGamma](https://github.com/d3/d3-random/blob/master/README.md#randomGamma). * Add [d3.randomBeta](https://github.com/d3/d3-random/blob/master/README.md#randomBeta). * Add [d3.randomWeibull](https://github.com/d3/d3-random/blob/master/README.md#randomWeibull). * Add [d3.randomCauchy](https://github.com/d3/d3-random/blob/master/README.md#randomCauchy). * Add [d3.randomLogistic](https://github.com/d3/d3-random/blob/master/README.md#randomLogistic). * Add [d3.randomPoisson](https://github.com/d3/d3-random/blob/master/README.md#randomPoisson). * Add [d3.randomInt](https://github.com/d3/d3-random/blob/master/README.md#randomInt). * Add [d3.randomBinomial](https://github.com/d3/d3-random/blob/master/README.md#randomBinomial). * Add [d3.randomGeometric](https://github.com/d3/d3-random/blob/master/README.md#randomGeometric). * Add [d3.randomPareto](https://github.com/d3/d3-random/blob/master/README.md#randomPareto). * Add [d3.randomBernoulli](https://github.com/d3/d3-random/blob/master/README.md#randomBernoulli). * Allow [d3.randomBates](https://github.com/d3/d3-random/blob/master/README.md#randomBates) to take fractional *n*. * Allow [d3.randomIrwinHall](https://github.com/d3/d3-random/blob/master/README.md#randomIrwinHall) to take fractional *n*. * Don’t wrap Math.random in the default source. Thanks to @Lange, @p-v-d-Veeken, @svanschooten, @Parcly-Taxel and @jrus for your contributions! ### d3-scale * Accept iterables. * Add [*diverging*.rangeRound](https://github.com/d3/d3-scale/blob/master/README.md#diverging_rangeRound). * Add [*sequential*.range](https://github.com/d3/d3-scale/blob/master/README.md#sequential_range) (for compatibility with d3-axis). * Add [*sequential*.rangeRound](https://github.com/d3/d3-scale/blob/master/README.md#sequential_rangeRound). * Add [*sequentialQuantile*.quantiles](https://github.com/d3/d3-scale/blob/master/README.md#sequentialQuantile_quantiles). * Add [d3.scaleRadial](https://github.com/d3/d3-scale/blob/master/README.md#radial-scales). * [*diverging*.range](https://github.com/d3/d3-scale/blob/master/README.md#diverging_range) can now be used to set the interpolator. * [*sequential*.range](https://github.com/d3/d3-scale/blob/master/README.md#sequential_range) can now be used to set the interpolator. * [d3.scaleDiverging](https://github.com/d3/d3-scale/blob/master/README.md#diverging-scales) can now accept a range array in place of an interpolator. * [d3.scaleSequential](https://github.com/d3/d3-scale/blob/master/README.md#sequential-scales) can now accept a range array in place of an interpolator. * Fix [*continuous*.nice](https://github.com/d3/d3-scale/blob/master/README.md#continuous_nice) to ensure that niced domains always span ticks. * Fix [*log*.ticks](https://github.com/d3/d3-scale/blob/master/README.md#log_ticks) for small domains. * Fix [*log*.ticks](https://github.com/d3/d3-scale/blob/master/README.md#log_ticks) for small domains. #44 * Fix [*scale*.clamp](https://github.com/d3/d3-scale/blob/master/README.md#continuous_clamp) for [sequential quantile scales](https://github.com/d3/d3-scale/blob/master/README.md#scaleSequentialQuantile). Thanks, @Fil! * Fix [*scale*.clamp](https://github.com/d3/d3-scale/blob/master/README.md#continuous_clamp) for continuous scales with more domain values than range values. * Fix [diverging scales](https://github.com/d3/d3-scale/blob/master/README.md#diverging-scales) with descending domains. * Remove deprecated *step* argument from [*time*.ticks](https://github.com/d3/d3-scale/blob/master/README.md#time_ticks) and [*time*.nice](https://github.com/d3/d3-scale/blob/master/README.md#time_nice). ### d3-selection * Add [*selection*.selectChild](https://github.com/d3/d3-selection/blob/master/README.md#selection_selectChild). * Add [*selection*.selectChildren](https://github.com/d3/d3-selection/blob/master/README.md#selection_selectChildren). * Add [d3.pointer](https://github.com/d3/d3-selection/blob/master/README.md#pointer). * Add [d3.pointers](https://github.com/d3/d3-selection/blob/master/README.md#pointers). * Add *selection*[Symbol.iterator]; selections are now iterable! * Accept iterables with [*selection*.data](https://github.com/d3/d3-selection/blob/master/README.md#selection_data). * Accept iterables with [d3.selectAll](https://github.com/d3/d3-selection/blob/master/README.md#selectAll). * Change [*selection*.on](https://github.com/d3/d3-selection/blob/master/README.md#selection_on) to pass the *event* directly to listeners. * Remove index and group from *selection*.on listeners! * Remove d3.event! * Remove d3.mouse. * Remove d3.touch. * Remove d3.touches. * Remove d3.customEvent. * Remove d3.clientPoint. * Remove d3.sourceEvent. * Fix *selection*.merge(*transition*) to error. For an overview of changes, see https://observablehq.com/@d3/d3-selection-2-0. ### d3-shape * Accept iterables. * Add [d3.line](https://github.com/d3/d3-shape/blob/master/README.md#line)(*x*, *y*) shorthand. * Add [d3.area](https://github.com/d3/d3-shape/blob/master/README.md#area)(*x*, *y0*, *y1*) shorthand. * Add [d3.symbol](https://github.com/d3/d3-shape/blob/master/README.md#symbol)(*type*, *size*) shorthand. ### d3-time-format * Add ISO 8601 “week year” (`%G` and `%g`). ### d3-timer * Fix [*interval*.restart](https://github.com/d3/d3-timer/blob/master/README.md#timer_restart) to restart as an interval. ### d3-transition * Add [*transition*.easeVarying](https://github.com/d3/d3-transition/blob/master/README.md#transition_easeVarying). * Add *transition*[Symbol.iterator]; transitions are now iterable. * Fix [*selection*.transition](https://github.com/d3/d3-transition/blob/master/README.md#selection_transition) to error if the named transition to inherit is not found.k * Fix [*transition*.end](https://github.com/d3/d3-transition/blob/master/README.md#transition_end) to resolve immediately if the selection is empty. ### d3-zoom * Add [*zoom*.tapDistance](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_tapDistance). * Change [*zoom*.on](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_on) to pass the *event* directly to listeners. * Change the default [*zoom*.filter](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_filter) to observe *wheel* events if the control key is pressed. * Change the default [*zoom*.wheelDelta](ttps://github.com/d3/d3-zoom/blob/master/README.md#zoom_wheelDelta) to go faster if the control key is pressed. * Don‘t set touch-action: none. * Upgrade to [d3-selection 2](https://observablehq.com/@d3/d3-selection-2-0). ### Breaking Changes D3 6.0 introduces several non-backwards-compatible changes. * Remove [d3.event](https://observablehq.com/d/f91cccf0cad5e9cb#events). * Change [*selection*.on](https://observablehq.com/d/f91cccf0cad5e9cb#events) to pass the *event* directly to listeners. * Change [*transition*.on](https://observablehq.com/d/f91cccf0cad5e9cb#events) to pass the *event* directly to listeners. * Change [*brush*.on](https://observablehq.com/d/f91cccf0cad5e9cb#event_brush) to pass the *event* directly to listeners. * Change [*drag*.on](https://observablehq.com/d/f91cccf0cad5e9cb#event_drag) to pass the *event* directly to listeners. * Change [*zoom*.on](https://observablehq.com/d/f91cccf0cad5e9cb#event_zoom) to pass the *event* directly to listeners. * Remove d3.mouse; use [d3.pointer](https://observablehq.com/d/f91cccf0cad5e9cb#pointer). * Remove d3.touch; use [d3.pointer](https://observablehq.com/d/f91cccf0cad5e9cb#pointer). * Remove d3.touches; use [d3.pointers](https://observablehq.com/d/f91cccf0cad5e9cb#pointer). * Remove d3.clientPoint; use [d3.pointer](https://observablehq.com/d/f91cccf0cad5e9cb#pointer). * Remove d3.voronoi; use [d3.Delaunay](https://observablehq.com/d/f91cccf0cad5e9cb#delaunay). * Remove d3.nest; use [d3.group](https://observablehq.com/d/f91cccf0cad5e9cb#group) and [d3.rollup](https://observablehq.com/d/f91cccf0cad5e9cb#group). * Remove d3.map; use [Map](https://observablehq.com/d/f91cccf0cad5e9cb#collection). * Remove d3.set; use [Set](https://observablehq.com/d/f91cccf0cad5e9cb#collection). * Remove d3.keys; use [Object.keys](https://observablehq.com/d/f91cccf0cad5e9cb#collection). * Remove d3.values; use [Object.values](https://observablehq.com/d/f91cccf0cad5e9cb#collection). * Remove d3.entries; use [Object.entries](https://observablehq.com/d/f91cccf0cad5e9cb#collection). * Rename d3.histogram to [d3.bin](https://observablehq.com/d/f91cccf0cad5e9cb#bin). * Rename d3.scan to [d3.leastIndex](https://observablehq.com/d/f91cccf0cad5e9cb#leastIndex). * Change [d3.interpolateTransformCss](https://observablehq.com/d/f91cccf0cad5e9cb#interpolateTransformCss) to require absolute units. * Change [d3.format](https://observablehq.com/d/f91cccf0cad5e9cb#minus) to default to the minus sign instead of hyphen-minus for negative values. D3 now requires a browser that supports [ES2015](http://www.ecma-international.org/ecma-262/6.0/). For older browsers, you must bring your own transpiler. Lastly, support for [Bower](https://bower.io) has been dropped; D3 is now exclusively published to npm and GitHub. See our [migration guide](https://observablehq.com/d/f91cccf0cad5e9cb) for help upgrading. # Changes in D3 5.0 [Released March 22, 2018.](https://github.com/d3/d3/releases/tag/v5.0.0) D3 5.0 introduces only a few non-backwards-compatible changes. D3 now uses [Promises](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Using_promises) instead of asynchronous callbacks to load data. Promises simplify the structure of asynchronous code, especially in modern browsers that support [async and await](https://javascript.info/async-await). (See this [introduction to promises](https://observablehq.com/@observablehq/introduction-to-promises) on [Observable](https://observablehq.com).) For example, to load a CSV file in v4, you might say: ```js d3.csv("file.csv", function(error, data) { if (error) throw error; console.log(data); }); ``` In v5, using promises: ```js d3.csv("file.csv").then(function(data) { console.log(data); }); ``` Note that you don’t need to rethrow the error—the promise will reject automatically, and you can *promise*.catch if desired. Using await, the code is even simpler: ```js const data = await d3.csv("file.csv"); console.log(data); ``` With the adoption of promises, D3 now uses the [Fetch API](https://fetch.spec.whatwg.org/) instead of [XMLHttpRequest](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest): the [d3-request](https://github.com/d3/d3-request) module has been replaced by [d3-fetch](https://github.com/d3/d3-fetch). Fetch supports many powerful new features, such as [streaming responses](https://observablehq.com/@mbostock/streaming-shapefiles). D3 5.0 also deprecates and removes the [d3-queue](https://github.com/d3/d3-queue) module. Use [Promise.all](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise/all) to run a batch of asynchronous tasks in parallel, or a helper library such as [p-queue](https://github.com/sindresorhus/p-queue) to [control concurrency](https://observablehq.com/@mbostock/hello-p-queue). D3 no longer provides the d3.schemeCategory20* categorical color schemes. These twenty-color schemes were flawed because their grouped design could falsely imply relationships in the data: a shared hue can imply that the encoded data are part of a group (a super-category), while relative lightness can imply order. Instead, D3 now includes [d3-scale-chromatic](https://github.com/d3/d3-scale-chromatic), which implements excellent schemes from ColorBrewer, including [categorical](https://github.com/d3/d3-scale-chromatic/blob/master/README.md#categorical), [diverging](https://github.com/d3/d3-scale-chromatic/blob/master/README.md#diverging), [sequential single-hue](https://github.com/d3/d3-scale-chromatic/blob/master/README.md#sequential-single-hue) and [sequential multi-hue](https://github.com/d3/d3-scale-chromatic/blob/master/README.md#sequential-multi-hue) schemes. These schemes are available in both discrete and continuous variants. D3 now provides implementations of [marching squares](https://observablehq.com/@d3/contours) and [density estimation](https://observablehq.com/@d3/density-contours) via [d3-contour](https://github.com/d3/d3-contour)! There are two new [d3-selection](https://github.com/d3/d3-selection) methods: [*selection*.clone](https://github.com/d3/d3-selection/blob/master/README.md#selection_clone) for inserting clones of the selected nodes, and [d3.create](https://github.com/d3/d3-selection/blob/master/README.md#create) for creating detached elements. [Geographic projections](https://github.com/d3/d3-geo) now support [*projection*.angle](https://github.com/d3/d3-geo/blob/master/README.md#projection_angle), which has enabled several fantastic new [polyhedral projections](https://github.com/d3/d3-geo-polygon) by Philippe Rivière. Lastly, D3’s [package.json](https://github.com/d3/d3/blob/master/package.json) no longer pins exact versions of the dependent D3 modules. This fixes an issue with [duplicate installs](https://github.com/d3/d3/issues/3256) of D3 modules. # Changes in D3 4.0 [Released June 28, 2016.](https://github.com/d3/d3/releases/tag/v4.0.0) D3 4.0 is modular. Instead of one library, D3 is now [many small libraries](#table-of-contents) that are designed to work together. You can pick and choose which parts to use as you see fit. Each library is maintained in its own repository, allowing decentralized ownership and independent release cycles. The default bundle combines about thirty of these microlibraries. ```html ``` As before, you can load optional plugins on top of the default bundle, such as [ColorBrewer scales](https://github.com/d3/d3-scale-chromatic): ```html ``` You are not required to use the default bundle! If you’re just using [d3-selection](https://github.com/d3/d3-selection), use it as a standalone library. Like the default bundle, you can load D3 microlibraries using vanilla script tags or RequireJS (great for HTTP/2!): ```html ``` You can also `cat` D3 microlibraries into a custom bundle, or use tools such as [Webpack](https://webpack.github.io/) and [Rollup](http://rollupjs.org/) to create [optimized bundles](https://bl.ocks.org/mbostock/bb09af4c39c79cffcde4). Custom bundles are great for applications that use a subset of D3’s features; for example, a React chart library might use D3 for scales and shapes, and React to manipulate the DOM. The D3 microlibraries are written as [ES6 modules](http://www.2ality.com/2014/09/es6-modules-final.html), and Rollup lets you pick at the symbol level to produce smaller bundles. Small files are nice, but modularity is also about making D3 more *fun*. Microlibraries are easier to understand, develop and test. They make it easier for new people to get involved and contribute. They reduce the distinction between a “core module” and a “plugin”, and increase the pace of development in D3 features. If you don’t care about modularity, you can mostly ignore this change and keep using the default bundle. However, there is one unavoidable consequence of adopting ES6 modules: every symbol in D3 4.0 now shares a flat namespace rather than the nested one of D3 3.x. For example, d3.scale.linear is now d3.scaleLinear, and d3.layout.treemap is now d3.treemap. The adoption of ES6 modules also means that D3 is now written exclusively in [strict mode](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode) and has better readability. And there have been many other significant improvements to D3’s features! (Nearly all of the code from D3 3.x has been rewritten.) These changes are covered below. ### Other Global Changes The default [UMD bundle](https://github.com/umdjs/umd) is now [anonymous](https://github.com/requirejs/requirejs/wiki/Updating-existing-libraries#register-as-an-anonymous-module-). No `d3` global is exported if AMD or CommonJS is detected. In a vanilla environment, the D3 microlibraries share the `d3` global, even if you load them independently; thus, code you write is the same whether or not you use the default bundle. (See [Let’s Make a (D3) Plugin](https://bost.ocks.org/mike/d3-plugin/) for more.) The generated bundle is no longer stored in the Git repository; Bower has been repointed to [d3-bower](https://github.com/mbostock-bower/d3-bower), and you can find the generated files on [npm](https://unpkg.com/d3) or attached to the [latest release](https://github.com/d3/d3/releases/latest). The non-minified default bundle is no longer mangled, making it more readable and preserving inline comments. To the consternation of some users, 3.x employed Unicode variable names such as λ, φ, τ and π for a concise representation of mathematical operations. A downside of this approach was that a SyntaxError would occur if you loaded the non-minified D3 using ISO-8859-1 instead of UTF-8. 3.x also used Unicode string literals, such as the SI-prefix µ for 1e-6. 4.0 uses only ASCII variable names and ASCII string literals (see [rollup-plugin-ascii](https://github.com/mbostock/rollup-plugin-ascii)), avoiding encoding problems. ### Table of Contents * [Arrays](#arrays-d3-array) * [Axes](#axes-d3-axis) * [Brushes](#brushes-d3-brush) * [Chords](#chords-d3-chord) * [Collections](#collections-d3-collection) * [Colors](#colors-d3-color) * [Dispatches](#dispatches-d3-dispatch) * [Dragging](#dragging-d3-drag) * [Delimiter-Separated Values](#delimiter-separated-values-d3-dsv) * [Easings](#easings-d3-ease) * [Forces](#forces-d3-force) * [Number Formats](#number-formats-d3-format) * [Geographies](#geographies-d3-geo) * [Hierarchies](#hierarchies-d3-hierarchy) * [Internals](#internals) * [Interpolators](#interpolators-d3-interpolate) * [Paths](#paths-d3-path) * [Polygons](#polygons-d3-polygon) * [Quadtrees](#quadtrees-d3-quadtree) * [Queues](#queues-d3-queue) * [Random Numbers](#random-numbers-d3-random) * [Requests](#requests-d3-request) * [Scales](#scales-d3-scale) * [Selections](#selections-d3-selection) * [Shapes](#shapes-d3-shape) * [Time Formats](#time-formats-d3-time-format) * [Time Intervals](#time-intervals-d3-time) * [Timers](#timers-d3-timer) * [Transitions](#transitions-d3-transition) * [Voronoi Diagrams](#voronoi-diagrams-d3-voronoi) * [Zooming](#zooming-d3-zoom) ## [Arrays (d3-array)](https://github.com/d3/d3-array/blob/master/README.md) The new [d3.scan](https://github.com/d3/d3-array/blob/master/README.md#scan) method performs a linear scan of an array, returning the index of the least element according to the specified comparator. This is similar to [d3.min](https://github.com/d3/d3-array/blob/master/README.md#min) and [d3.max](https://github.com/d3/d3-array/blob/master/README.md#max), except you can use it to find the position of an extreme element, rather than just calculate an extreme value. ```js var data = [ {name: "Alice", value: 2}, {name: "Bob", value: 3}, {name: "Carol", value: 1}, {name: "Dwayne", value: 5} ]; var i = d3.scan(data, function(a, b) { return a.value - b.value; }); // 2 data[i]; // {name: "Carol", value: 1} ``` The new [d3.ticks](https://github.com/d3/d3-array/blob/master/README.md#ticks) and [d3.tickStep](https://github.com/d3/d3-array/blob/master/README.md#tickStep) methods are useful for generating human-readable numeric ticks. These methods are a low-level alternative to [*continuous*.ticks](https://github.com/d3/d3-scale/blob/master/README.md#continuous_ticks) from [d3-scale](https://github.com/d3/d3-scale). The new implementation is also more accurate, returning the optimal number of ticks as measured by relative error. ```js var ticks = d3.ticks(0, 10, 5); // [0, 2, 4, 6, 8, 10] ``` The [d3.range](https://github.com/d3/d3-array/blob/master/README.md#range) method no longer makes an elaborate attempt to avoid floating-point error when *step* is not an integer. The returned values are strictly defined as *start* + *i* \* *step*, where *i* is an integer. (Learn more about [floating point math](http://0.30000000000000004.com/).) d3.range returns the empty array for infinite ranges, rather than throwing an error. The method signature for optional accessors has been changed to be more consistent with array methods such as [*array*.forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach): the accessor is passed the current element (*d*), the index (*i*), and the array (*data*), with *this* as undefined. This affects [d3.min](https://github.com/d3/d3-array/blob/master/README.md#min), [d3.max](https://github.com/d3/d3-array/blob/master/README.md#max), [d3.extent](https://github.com/d3/d3-array/blob/master/README.md#extent), [d3.sum](https://github.com/d3/d3-array/blob/master/README.md#sum), [d3.mean](https://github.com/d3/d3-array/blob/master/README.md#mean), [d3.median](https://github.com/d3/d3-array/blob/master/README.md#median), [d3.quantile](https://github.com/d3/d3-array/blob/master/README.md#quantile), [d3.variance](https://github.com/d3/d3-array/blob/master/README.md#variance) and [d3.deviation](https://github.com/d3/d3-array/blob/master/README.md#deviation). The [d3.quantile](https://github.com/d3/d3-array/blob/master/README.md#quantile) method previously did not take an accessor. Some methods with optional arguments now treat those arguments as missing if they are null or undefined, rather than strictly checking arguments.length. The new [d3.histogram](https://github.com/d3/d3-array/blob/master/README.md#histograms) API replaces d3.layout.histogram. Rather than exposing *bin*.x and *bin*.dx on each returned bin, the histogram exposes *bin*.x0 and *bin*.x1, guaranteeing that *bin*.x0 is exactly equal to *bin*.x1 on the preceding bin. The “frequency” and “probability” modes are no longer supported; each bin is simply an array of elements from the input data, so *bin*.length is equal to D3 3.x’s *bin*.y in frequency mode. To compute a probability distribution, divide the number of elements in each bin by the total number of elements. The *histogram*.range method has been renamed [*histogram*.domain](https://github.com/d3/d3-array/blob/master/README.md#histogram_domain) for consistency with scales. The *histogram*.bins method has been renamed [*histogram*.thresholds](https://github.com/d3/d3-array/blob/master/README.md#histogram_thresholds), and no longer accepts an upper value: *n* thresholds will produce *n* + 1 bins. If you specify a desired number of bins rather than thresholds, d3.histogram now uses [d3.ticks](https://github.com/d3/d3-array/blob/master/README.md#ticks) to compute nice bin thresholds. In addition to the default Sturges’ formula, D3 now implements the [Freedman-Diaconis rule](https://github.com/d3/d3-array/blob/master/README.md#thresholdFreedmanDiaconis) and [Scott’s normal reference rule](https://github.com/d3/d3-array/blob/master/README.md#thresholdScott). ## [Axes (d3-axis)](https://github.com/d3/d3-axis/blob/master/README.md) To render axes properly in D3 3.x, you needed to style them: ```html ``` If you didn’t, you saw this: D3 4.0 provides default styles and shorter syntax. In place of d3.svg.axis and *axis*.orient, D3 4.0 now provides four constructors for each orientation: [d3.axisTop](https://github.com/d3/d3-axis/blob/master/README.md#axisTop), [d3.axisRight](https://github.com/d3/d3-axis/blob/master/README.md#axisRight), [d3.axisBottom](https://github.com/d3/d3-axis/blob/master/README.md#axisBottom), [d3.axisLeft](https://github.com/d3/d3-axis/blob/master/README.md#axisLeft). These constructors accept a scale, so you can reduce all of the above to: ```html ``` And get this: As before, you can customize the axis appearance either by applying stylesheets or by modifying the axis elements. The default appearance has been changed slightly to offset the axis by a half-pixel; this fixes a crisp-edges rendering issue on Safari where the axis would be drawn two-pixels thick. There’s now an [*axis*.tickArguments](https://github.com/d3/d3-axis/blob/master/README.md#axis_tickArguments) method, as an alternative to [*axis*.ticks](https://github.com/d3/d3-axis/blob/master/README.md#axis_ticks) that also allows the axis tick arguments to be inspected. The [*axis*.tickSize](https://github.com/d3/d3-axis/blob/master/README.md#axis_tickSize) method has been changed to only allow a single argument when setting the tick size. The *axis*.innerTickSize and *axis*.outerTickSize methods have been renamed [*axis*.tickSizeInner](https://github.com/d3/d3-axis/blob/master/README.md#axis_tickSizeInner) and [*axis*.tickSizeOuter](https://github.com/d3/d3-axis/blob/master/README.md#axis_tickSizeOuter), respectively. ## [Brushes (d3-brush)](https://github.com/d3/d3-brush/blob/master/README.md) Replacing d3.svg.brush, there are now three classes of brush for brushing along the *x*-dimension, the *y*-dimension, or both: [d3.brushX](https://github.com/d3/d3-brush/blob/master/README.md#brushX), [d3.brushY](https://github.com/d3/d3-brush/blob/master/README.md#brushY), [d3.brush](https://github.com/d3/d3-brush/blob/master/README.md#brush). Brushes are no longer dependent on [scales](#scales-d3-scale); instead, each brush defines a selection in screen coordinates. This selection can be [inverted](https://github.com/d3/d3-scale/blob/master/README.md#continuous_invert) if you want to compute the corresponding data domain. And rather than rely on the scales’ ranges to determine the brushable area, there is now a [*brush*.extent](https://github.com/d3/d3-brush/blob/master/README.md#brush_extent) method for setting it. If you do not set the brush extent, it defaults to the full extent of the owner SVG element. The *brush*.clamp method has also been eliminated; brushing is always restricted to the brushable area defined by the brush extent. Brushes no longer store the active brush selection (*i.e.*, the highlighted region; the brush’s position) internally. The brush’s position is now stored on any elements to which the brush has been applied. The brush’s position is available as *event*.selection within a brush event or by calling [d3.brushSelection](https://github.com/d3/d3-brush/blob/master/README.md#brushSelection) on a given *element*. To move the brush programmatically, use [*brush*.move](https://github.com/d3/d3-brush/blob/master/README.md#brush_move) with a given [selection](#selections-d3-selection) or [transition](#transitions-d3-transition); see the [brush snapping example](https://bl.ocks.org/mbostock/6232537). The *brush*.event method has been removed. Brush interaction has been improved. By default, brushes now ignore right-clicks intended for the context menu; you can change this behavior using [*brush*.filter](https://github.com/d3/d3-brush/blob/master/README.md#brush_filter). Brushes also ignore emulated mouse events on iOS. Holding down SHIFT (⇧) while brushing locks the *x*- or *y*-position of the brush. Holding down META (⌘) while clicking and dragging starts a new selection, rather than translating the existing selection. The default appearance of the brush has also been improved and slightly simplified. Previously it was necessary to apply styles to the brush to give it a reasonable appearance, such as: ```css .brush .extent { stroke: #fff; fill-opacity: .125; shape-rendering: crispEdges; } ``` These styles are now applied by default as attributes; if you want to customize the brush appearance, you can still apply external styles or modify the brush elements. (D3 4.0 features a similar improvement to [axes](#axes-d3-axis).) A new [*brush*.handleSize](https://github.com/d3/d3-brush/blob/master/README.md#brush_handleSize) method lets you override the brush handle size; it defaults to six pixels. The brush now consumes handled events, making it easier to combine with other interactive behaviors such as [dragging](#dragging-d3-drag) and [zooming](#zooming-d3-zoom). The *brushstart* and *brushend* events have been renamed to *start* and *end*, respectively. The brush event no longer reports a *event*.mode to distinguish between resizing and dragging the brush. ## [Chords (d3-chord)](https://github.com/d3/d3-chord/blob/master/README.md) Pursuant to the great namespace flattening: * d3.layout.chord ↦ [d3.chord](https://github.com/d3/d3-chord/blob/master/README.md#chord) * d3.svg.chord ↦ [d3.ribbon](https://github.com/d3/d3-chord/blob/master/README.md#ribbon) For consistency with [*arc*.padAngle](https://github.com/d3/d3-shape/blob/master/README.md#arc_padAngle), *chord*.padding has also been renamed to [*ribbon*.padAngle](https://github.com/d3/d3-chord/blob/master/README.md#ribbon_padAngle). A new [*ribbon*.context](https://github.com/d3/d3-chord/blob/master/README.md#ribbon_context) method lets you render chord diagrams to Canvas! See also [d3-path](#paths-d3-path). ## [Collections (d3-collection)](https://github.com/d3/d3-collection/blob/master/README.md) The [d3.set](https://github.com/d3/d3-collection/blob/master/README.md#set) constructor now accepts an existing set for making a copy. If you pass an array to d3.set, you can also pass a value accessor. This accessor takes the standard arguments: the current element (*d*), the index (*i*), and the array (*data*), with *this* undefined. For example: ```js var yields = [ {yield: 22.13333, variety: "Manchuria", year: 1932, site: "Grand Rapids"}, {yield: 26.76667, variety: "Peatland", year: 1932, site: "Grand Rapids"}, {yield: 28.10000, variety: "No. 462", year: 1931, site: "Duluth"}, {yield: 38.50000, variety: "Svansota", year: 1932, site: "Waseca"}, {yield: 40.46667, variety: "Svansota", year: 1931, site: "Crookston"}, {yield: 36.03333, variety: "Peatland", year: 1932, site: "Waseca"}, {yield: 34.46667, variety: "Wisconsin No. 38", year: 1931, site: "Grand Rapids"} ]; var sites = d3.set(yields, function(d) { return d.site; }); // Grand Rapids, Duluth, Waseca, Crookston ``` The [d3.map](https://github.com/d3/d3-collection/blob/master/README.md#map) constructor also follows the standard array accessor argument pattern. The *map*.forEach and *set*.forEach methods have been renamed to [*map*.each](https://github.com/d3/d3-collection/blob/master/README.md#map_each) and [*set*.each](https://github.com/d3/d3-collection/blob/master/README.md#set_each) respectively. The order of arguments for *map*.each has also been changed to *value*, *key* and *map*, while the order of arguments for *set*.each is now *value*, *value* and *set*. This is closer to ES6 [*map*.forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/forEach) and [*set*.forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/forEach). Also like ES6 Map and Set, *map*.set and *set*.add now return the current collection (rather than the added value) to facilitate method chaining. New [*map*.clear](https://github.com/d3/d3-collection/blob/master/README.md#map_clear) and [*set*.clear](https://github.com/d3/d3-collection/blob/master/README.md#set_clear) methods can be used to empty collections. The [*nest*.map](https://github.com/d3/d3-collection/blob/master/README.md#nest_map) method now always returns a d3.map instance. For a plain object, use [*nest*.object](https://github.com/d3/d3-collection/blob/master/README.md#nest_object) instead. When used in conjunction with [*nest*.rollup](https://github.com/d3/d3-collection/blob/master/README.md#nest_rollup), [*nest*.entries](https://github.com/d3/d3-collection/blob/master/README.md#nest_entries) now returns {key, value} objects for the leaf entries, instead of {key, values}. This makes *nest*.rollup easier to use in conjunction with [hierarchies](#hierarchies-d3-hierarchy), as in this [Nest Treemap example](https://bl.ocks.org/mbostock/2838bf53e0e65f369f476afd653663a2). ## [Colors (d3-color)](https://github.com/d3/d3-color/blob/master/README.md) All colors now have opacity exposed as *color*.opacity, which is a number in [0, 1]. You can pass an optional opacity argument to the color space constructors [d3.rgb](https://github.com/d3/d3-color/blob/master/README.md#rgb), [d3.hsl](https://github.com/d3/d3-color/blob/master/README.md#hsl), [d3.lab](https://github.com/d3/d3-color/blob/master/README.md#lab), [d3.hcl](https://github.com/d3/d3-color/blob/master/README.md#hcl) or [d3.cubehelix](https://github.com/d3/d3-color/blob/master/README.md#cubehelix). You can now parse rgba(…) and hsla(…) CSS color specifiers or the string “transparent” using [d3.color](https://github.com/d3/d3-color/blob/master/README.md#color). The “transparent” color is defined as an RGB color with zero opacity and undefined red, green and blue channels; this differs slightly from CSS which defines it as transparent black, but is useful for simplifying color interpolation logic where either the starting or ending color has undefined channels. The [*color*.toString](https://github.com/d3/d3-color/blob/master/README.md#color_toString) method now likewise returns an rgb(…) or rgba(…) string with integer channel values, not the hexadecimal RGB format, consistent with CSS computed values. This improves performance by short-circuiting transitions when the element’s starting style matches its ending style. The new [d3.color](https://github.com/d3/d3-color/blob/master/README.md#color) method is the primary method for parsing colors: it returns a d3.color instance in the appropriate color space, or null if the CSS color specifier is invalid. For example: ```js var red = d3.color("hsl(0, 80%, 50%)"); // {h: 0, l: 0.5, s: 0.8, opacity: 1} ``` The parsing implementation is now more robust. For example, you can no longer mix integers and percentages in rgb(…), and it correctly handles whitespace, decimal points, number signs, and other edge cases. The color space constructors d3.rgb, d3.hsl, d3.lab, d3.hcl and d3.cubehelix now always return a copy of the input color, converted to the corresponding color space. While [*color*.rgb](https://github.com/d3/d3-color/blob/master/README.md#color_rgb) remains, *rgb*.hsl has been removed; use d3.hsl to convert a color to the RGB color space. The RGB color space no longer greedily quantizes and clamps channel values when creating colors, improving accuracy in color space conversion. Quantization and clamping now occurs in *color*.toString when formatting a color for display. You can use the new [*color*.displayable](https://github.com/d3/d3-color/blob/master/README.md#color_displayable) to test whether a color is [out-of-gamut](https://en.wikipedia.org/wiki/Gamut). The [*rgb*.brighter](https://github.com/d3/d3-color/blob/master/README.md#rgb_brighter) method no longer special-cases black. This is a multiplicative operator, defining a new color *r*′, *g*′, *b*′ where *r*′ = *r* × *pow*(0.7, *k*), *g*′ = *g* × *pow*(0.7, *k*) and *b*′ = *b* × *pow*(0.7, *k*); a brighter black is still black. There’s a new [d3.cubehelix](https://github.com/d3/d3-color/blob/master/README.md#cubehelix) color space, generalizing Dave Green’s color scheme! (See also [d3.interpolateCubehelixDefault](https://github.com/d3/d3-scale/blob/master/README.md#interpolateCubehelixDefault) from [d3-scale](#scales-d3-scale).) You can continue to define your own custom color spaces, too; see [d3-hsv](https://github.com/d3/d3-hsv) for an example. ## [Dispatches (d3-dispatch)](https://github.com/d3/d3-dispatch/blob/master/README.md) Rather than decorating the *dispatch* object with each event type, the dispatch object now exposes generic [*dispatch*.call](https://github.com/d3/d3-dispatch/blob/master/README.md#dispatch_call) and [*dispatch*.apply](https://github.com/d3/d3-dispatch/blob/master/README.md#dispatch_apply) methods which take the *type* string as the first argument. For example, in D3 3.x, you might say: ```js dispatcher.foo.call(that, "Hello, Foo!"); ``` To dispatch a *foo* event in D3 4.0, you’d say: ```js dispatcher.call("foo", that, "Hello, Foo!"); ``` The [*dispatch*.on](https://github.com/d3/d3-dispatch/blob/master/README.md#dispatch_on) method now accepts multiple typenames, allowing you to add or remove listeners for multiple events simultaneously. For example, to send both *foo* and *bar* events to the same listener: ```js dispatcher.on("foo bar", function(message) { console.log(message); }); ``` This matches the new behavior of [*selection*.on](https://github.com/d3/d3-selection/blob/master/README.md#selection_on) in [d3-selection](#selections-d3-selection). The *dispatch*.on method now validates that the specifier *listener* is a function, rather than throwing an error in the future. The new implementation d3.dispatch is faster, using fewer closures to improve performance. There’s also a new [*dispatch*.copy](https://github.com/d3/d3-dispatch/blob/master/README.md#dispatch_copy) method for making a copy of a dispatcher; this is used by [d3-transition](#transitions-d3-transition) to improve the performance of transitions in the common case where all elements in a transition have the same transition event listeners. ## [Dragging (d3-drag)](https://github.com/d3/d3-drag/blob/master/README.md) The drag behavior d3.behavior.drag has been renamed to d3.drag. The *drag*.origin method has been replaced by [*drag*.subject](https://github.com/d3/d3-drag/blob/master/README.md#drag_subject), which allows you to define the thing being dragged at the start of a drag gesture. This is particularly useful with Canvas, where draggable objects typically share a Canvas element (as opposed to SVG, where draggable objects typically have distinct DOM elements); see the [circle dragging example](https://bl.ocks.org/mbostock/444757cc9f0fde320a5f469cd36860f4). A new [*drag*.container](https://github.com/d3/d3-drag/blob/master/README.md#drag_container) method lets you override the parent element that defines the drag gesture coordinate system. This defaults to the parent node of the element to which the drag behavior was applied. For dragging on Canvas elements, you probably want to use the Canvas element as the container. [Drag events](https://github.com/d3/d3-drag/blob/master/README.md#drag-events) now expose an [*event*.on](https://github.com/d3/d3-drag/blob/master/README.md#event_on) method for registering temporary listeners for duration of the current drag gesture; these listeners can capture state for the current gesture, such as the thing being dragged. A new *event*.active property lets you detect whether multiple (multitouch) drag gestures are active concurrently. The *dragstart* and *dragend* events have been renamed to *start* and *end*. By default, drag behaviors now ignore right-clicks intended for the context menu; use [*drag*.filter](https://github.com/d3/d3-drag/blob/master/README.md#drag_filter) to control which events are ignored. The drag behavior also ignores emulated mouse events on iOS. The drag behavior now consumes handled events, making it easier to combine with other interactive behaviors such as [zooming](#zooming-d3-zoom). The new [d3.dragEnable](https://github.com/d3/d3-drag/blob/master/README.md#dragEnable) and [d3.dragDisable](https://github.com/d3/d3-drag/blob/master/README.md#dragDisable) methods provide a low-level API for implementing drag gestures across browsers and devices. These methods are also used by other D3 components, such as the [brush](#brushes-d3-brush). ## [Delimiter-Separated Values (d3-dsv)](https://github.com/d3/d3-dsv/blob/master/README.md) Pursuant to the great namespace flattening, various CSV and TSV methods have new names: * d3.csv.parse ↦ [d3.csvParse](https://github.com/d3/d3-dsv/blob/master/README.md#csvParse) * d3.csv.parseRows ↦ [d3.csvParseRows](https://github.com/d3/d3-dsv/blob/master/README.md#csvParseRows) * d3.csv.format ↦ [d3.csvFormat](https://github.com/d3/d3-dsv/blob/master/README.md#csvFormat) * d3.csv.formatRows ↦ [d3.csvFormatRows](https://github.com/d3/d3-dsv/blob/master/README.md#csvFormatRows) * d3.tsv.parse ↦ [d3.tsvParse](https://github.com/d3/d3-dsv/blob/master/README.md#tsvParse) * d3.tsv.parseRows ↦ [d3.tsvParseRows](https://github.com/d3/d3-dsv/blob/master/README.md#tsvParseRows) * d3.tsv.format ↦ [d3.tsvFormat](https://github.com/d3/d3-dsv/blob/master/README.md#tsvFormat) * d3.tsv.formatRows ↦ [d3.tsvFormatRows](https://github.com/d3/d3-dsv/blob/master/README.md#tsvFormatRows) The [d3.csv](https://github.com/d3/d3-request/blob/master/README.md#csv) and [d3.tsv](https://github.com/d3/d3-request/blob/master/README.md#tsv) methods for loading files of the corresponding formats have not been renamed, however! Those are defined in [d3-request](#requests-d3-request).There’s no longer a d3.dsv method, which served the triple purpose of defining a DSV formatter, a DSV parser and a DSV requestor; instead, there’s just [d3.dsvFormat](https://github.com/d3/d3-dsv/blob/master/README.md#dsvFormat) which you can use to define a DSV formatter and parser. You can use [*request*.response](https://github.com/d3/d3-request/blob/master/README.md#request_response) to make a request and then parse the response body, or just use [d3.text](https://github.com/d3/d3-request/blob/master/README.md#text). The [*dsv*.parse](https://github.com/d3/d3-dsv/blob/master/README.md#dsv_parse) method now exposes the column names and their input order as *data*.columns. For example: ```js d3.csv("cars.csv", function(error, data) { if (error) throw error; console.log(data.columns); // ["Year", "Make", "Model", "Length"] }); ``` You can likewise pass an optional array of column names to [*dsv*.format](https://github.com/d3/d3-dsv/blob/master/README.md#dsv_format) to format only a subset of columns, or to specify the column order explicitly: ```js var string = d3.csvFormat(data, ["Year", "Model", "Length"]); ``` The parser is a bit faster and the formatter is a bit more robust: inputs are coerced to strings before formatting, fixing an obscure crash, and deprecated support for falling back to [*dsv*.formatRows](https://github.com/d3/d3-dsv/blob/master/README.md#dsv_formatRows) when the input *data* is an array of arrays has been removed. ## [Easings (d3-ease)](https://github.com/d3/d3-ease/blob/master/README.md) D3 3.x used strings, such as “cubic-in-out”, to identify easing methods; these strings could be passed to d3.ease or *transition*.ease. D3 4.0 uses symbols instead, such as [d3.easeCubicInOut](https://github.com/d3/d3-ease/blob/master/README.md#easeCubicInOut). Symbols are simpler and cleaner. They work well with Rollup to produce smaller custom bundles. You can still define your own custom easing function, too, if desired. Here’s the full list of equivalents: * linear ↦ [d3.easeLinear](https://github.com/d3/d3-ease/blob/master/README.md#easeLinear)¹ * linear-in ↦ [d3.easeLinear](https://github.com/d3/d3-ease/blob/master/README.md#easeLinear)¹ * linear-out ↦ [d3.easeLinear](https://github.com/d3/d3-ease/blob/master/README.md#easeLinear)¹ * linear-in-out ↦ [d3.easeLinear](https://github.com/d3/d3-ease/blob/master/README.md#easeLinear)¹ * linear-out-in ↦ [d3.easeLinear](https://github.com/d3/d3-ease/blob/master/README.md#easeLinear)¹ * poly-in ↦ [d3.easePolyIn](https://github.com/d3/d3-ease/blob/master/README.md#easePolyIn) * poly-out ↦ [d3.easePolyOut](https://github.com/d3/d3-ease/blob/master/README.md#easePolyOut) * poly-in-out ↦ [d3.easePolyInOut](https://github.com/d3/d3-ease/blob/master/README.md#easePolyInOut) * poly-out-in ↦ REMOVED² * quad-in ↦ [d3.easeQuadIn](https://github.com/d3/d3-ease/blob/master/README.md#easeQuadIn) * quad-out ↦ [d3.easeQuadOut](https://github.com/d3/d3-ease/blob/master/README.md#easeQuadOut) * quad-in-out ↦ [d3.easeQuadInOut](https://github.com/d3/d3-ease/blob/master/README.md#easeQuadInOut) * quad-out-in ↦ REMOVED² * cubic-in ↦ [d3.easeCubicIn](https://github.com/d3/d3-ease/blob/master/README.md#easeCubicIn) * cubic-out ↦ [d3.easeCubicOut](https://github.com/d3/d3-ease/blob/master/README.md#easeCubicOut) * cubic-in-out ↦ [d3.easeCubicInOut](https://github.com/d3/d3-ease/blob/master/README.md#easeCubicInOut) * cubic-out-in ↦ REMOVED² * sin-in ↦ [d3.easeSinIn](https://github.com/d3/d3-ease/blob/master/README.md#easeSinIn) * sin-out ↦ [d3.easeSinOut](https://github.com/d3/d3-ease/blob/master/README.md#easeSinOut) * sin-in-out ↦ [d3.easeSinInOut](https://github.com/d3/d3-ease/blob/master/README.md#easeSinInOut) * sin-out-in ↦ REMOVED² * exp-in ↦ [d3.easeExpIn](https://github.com/d3/d3-ease/blob/master/README.md#easeExpIn) * exp-out ↦ [d3.easeExpOut](https://github.com/d3/d3-ease/blob/master/README.md#easeExpOut) * exp-in-out ↦ [d3.easeExpInOut](https://github.com/d3/d3-ease/blob/master/README.md#easeExpInOut) * exp-out-in ↦ REMOVED² * circle-in ↦ [d3.easeCircleIn](https://github.com/d3/d3-ease/blob/master/README.md#easeCircleIn) * circle-out ↦ [d3.easeCircleOut](https://github.com/d3/d3-ease/blob/master/README.md#easeCircleOut) * circle-in-out ↦ [d3.easeCircleInOut](https://github.com/d3/d3-ease/blob/master/README.md#easeCircleInOut) * circle-out-in ↦ REMOVED² * elastic-in ↦ [d3.easeElasticOut](https://github.com/d3/d3-ease/blob/master/README.md#easeElasticOut)² * elastic-out ↦ [d3.easeElasticIn](https://github.com/d3/d3-ease/blob/master/README.md#easeElasticIn)² * elastic-in-out ↦ REMOVED² * elastic-out-in ↦ [d3.easeElasticInOut](https://github.com/d3/d3-ease/blob/master/README.md#easeElasticInOut)² * back-in ↦ [d3.easeBackIn](https://github.com/d3/d3-ease/blob/master/README.md#easeBackIn) * back-out ↦ [d3.easeBackOut](https://github.com/d3/d3-ease/blob/master/README.md#easeBackOut) * back-in-out ↦ [d3.easeBackInOut](https://github.com/d3/d3-ease/blob/master/README.md#easeBackInOut) * back-out-in ↦ REMOVED² * bounce-in ↦ [d3.easeBounceOut](https://github.com/d3/d3-ease/blob/master/README.md#easeBounceOut)² * bounce-out ↦ [d3.easeBounceIn](https://github.com/d3/d3-ease/blob/master/README.md#easeBounceIn)² * bounce-in-out ↦ REMOVED² * bounce-out-in ↦ [d3.easeBounceInOut](https://github.com/d3/d3-ease/blob/master/README.md#easeBounceInOut)² ¹ The -in, -out and -in-out variants of linear easing are identical, so there’s just d3.easeLinear.
    ² Elastic and bounce easing were inadvertently reversed in 3.x, so 4.0 eliminates -out-in easing! For convenience, there are also default aliases for each easing method. For example, [d3.easeCubic](https://github.com/d3/d3-ease/blob/master/README.md#easeCubic) is an alias for [d3.easeCubicInOut](https://github.com/d3/d3-ease/blob/master/README.md#easeCubicInOut). Most default to -in-out; the exceptions are [d3.easeBounce](https://github.com/d3/d3-ease/blob/master/README.md#easeBounce) and [d3.easeElastic](https://github.com/d3/d3-ease/blob/master/README.md#easeElastic), which default to -out. Rather than pass optional arguments to d3.ease or *transition*.ease, parameterizable easing functions now have named parameters: [*poly*.exponent](https://github.com/d3/d3-ease/blob/master/README.md#poly_exponent), [*elastic*.amplitude](https://github.com/d3/d3-ease/blob/master/README.md#elastic_amplitude), [*elastic*.period](https://github.com/d3/d3-ease/blob/master/README.md#elastic_period) and [*back*.overshoot](https://github.com/d3/d3-ease/blob/master/README.md#back_overshoot). For example, in D3 3.x you might say: ```js var e = d3.ease("elastic-out-in", 1.2); ``` The equivalent in D3 4.0 is: ```js var e = d3.easeElastic.amplitude(1.2); ``` Many of the easing functions have been optimized for performance and accuracy. Several bugs have been fixed, as well, such as the interpretation of the overshoot parameter for back easing, and the period parameter for elastic easing. Also, [d3-transition](#transitions-d3-transition) now explicitly guarantees that the last tick of the transition happens at exactly *t* = 1, avoiding floating point errors in some easing functions. There’s now a nice [visual reference](https://github.com/d3/d3-ease/blob/master/README.md) and an [animated reference](https://bl.ocks.org/mbostock/248bac3b8e354a9103c4) to the new easing functions, too! ## [Forces (d3-force)](https://github.com/d3/d3-force/blob/master/README.md) The force layout d3.layout.force has been renamed to d3.forceSimulation. The force simulation now uses [velocity Verlet integration](https://en.wikipedia.org/wiki/Verlet_integration#Velocity_Verlet) rather than position Verlet, tracking the nodes’ positions (*node*.x, *node*.y) and velocities (*node*.vx, *node*.vy) rather than their previous positions (*node*.px, *node*.py). Rather than hard-coding a set of built-in forces, the force simulation is now extensible: you specify which forces you want! The approach affords greater flexibility through composition. The new forces are more flexible, too: force parameters can typically be configured per-node or per-link. There are separate positioning forces for [*x*](https://github.com/d3/d3-force/blob/master/README.md#forceX) and [*y*](https://github.com/d3/d3-force/blob/master/README.md#forceY) that replace *force*.gravity; [*x*.x](https://github.com/d3/d3-force/blob/master/README.md#x_x) and [*y*.y](https://github.com/d3/d3-force/blob/master/README.md#y_y) replace *force*.size. The new [link force](https://github.com/d3/d3-force/blob/master/README.md#forceLink) replaces *force*.linkStrength and employs better default heuristics to improve stability. The new [many-body force](https://github.com/d3/d3-force/blob/master/README.md#forceManyBody) replaces *force*.charge and supports a new [minimum-distance parameter](https://github.com/d3/d3-force/blob/master/README.md#manyBody_distanceMin) and performance improvements thanks to 4.0’s [new quadtrees](#quadtrees-d3-quadtree). There are also brand-new forces for [centering nodes](https://github.com/d3/d3-force/blob/master/README.md#forceCenter) and [collision resolution](https://github.com/d3/d3-force/blob/master/README.md#forceCollision). The new forces and simulation have been carefully crafted to avoid nondeterminism. Rather than initializing nodes randomly, if the nodes do not have preset positions, they are placed in a phyllotaxis pattern: Phyllotaxis Random jitter is still needed to resolve link, collision and many-body forces if there are coincident nodes, but at least in the common case, the force simulation (and the resulting force-directed graph layout) is now consistent across browsers and reloads. D3 no longer plays dice! The force simulation has several new methods for greater control over heating, such as [*simulation*.alphaMin](https://github.com/d3/d3-force/blob/master/README.md#simulation_alphaMin) and [*simulation*.alphaDecay](https://github.com/d3/d3-force/blob/master/README.md#simulation_alphaDecay), and the internal timer. Calling [*simulation*.alpha](https://github.com/d3/d3-force/blob/master/README.md#simulation_alpha) now has no effect on the internal timer, which is controlled independently via [*simulation*.stop](https://github.com/d3/d3-force/blob/master/README.md#simulation_stop) and [*simulation*.restart](https://github.com/d3/d3-force/blob/master/README.md#simulation_restart). The force layout’s internal timer now starts automatically on creation, removing *force*.start. As in 3.x, you can advance the simulation manually using [*simulation*.tick](https://github.com/d3/d3-force/blob/master/README.md#simulation_tick). The *force*.friction parameter is replaced by *simulation*.velocityDecay. A new [*simulation*.alphaTarget](https://github.com/d3/d3-force/blob/master/README.md#simulation_alphaTarget) method allows you to set the desired alpha (temperature) of the simulation, such that the simulation can be smoothly reheated during interaction, and then smoothly cooled again. This improves the stability of the graph during interaction. The force layout no longer depends on the [drag behavior](#dragging-d3-drag), though you can certainly create [draggable force-directed graphs](https://bl.ocks.org/mbostock/ad70335eeef6d167bc36fd3c04378048)! Set *node*.fx and *node*.fy to fix a node’s position. As an alternative to a [Voronoi](#voronoi-d3-voronoi) SVG overlay, you can now use [*simulation*.find](https://github.com/d3/d3-force/blob/master/README.md#simulation_find) to find the closest node to a pointer. ## [Number Formats (d3-format)](https://github.com/d3/d3-format/blob/master/README.md) If a precision is not specified, the formatting behavior has changed: there is now a default precision of 6 for all directives except *none*, which defaults to 12. In 3.x, if you did not specify a precision, the number was formatted using its shortest unique representation (per [*number*.toString](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString)); this could lead to unexpected digits due to [floating point math](http://0.30000000000000004.com/). The new default precision in 4.0 produces more consistent results: ```js var f = d3.format("e"); f(42); // "4.200000e+1" f(0.1 + 0.2); // "3.000000e-1" ``` To trim insignificant trailing zeroes, use the *none* directive, which is similar `g`. For example: ```js var f = d3.format(".3"); f(0.12345); // "0.123" f(0.10000); // "0.1" f(0.1 + 0.2); // "0.3" ``` Under the hood, number formatting has improved accuracy with very large and very small numbers by using [*number*.toExponential](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toExponential) rather than [Math.log](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/log) to extract the mantissa and exponent. Negative zero (-0, an IEEE 754 construct) and very small numbers that round to zero are now formatted as unsigned zero. The inherently unsafe d3.round method has been removed, along with d3.requote. The [d3.formatPrefix](https://github.com/d3/d3-format/blob/master/README.md#formatPrefix) method has been changed. Rather than returning an SI-prefix string, it returns an SI-prefix format function for a given *specifier* and reference *value*. For example, to format thousands: ```js var f = d3.formatPrefix(",.0", 1e3); f(1e3); // "1k" f(1e4); // "10k" f(1e5); // "100k" f(1e6); // "1,000k" ``` Unlike the `s` format directive, d3.formatPrefix always employs the same SI-prefix, producing consistent results: ```js var f = d3.format(".0s"); f(1e3); // "1k" f(1e4); // "10k" f(1e5); // "100k" f(1e6); // "1M" ``` The new `(` sign option uses parentheses for negative values. This is particularly useful in conjunction with `$`. For example: ```js d3.format("+.0f")(-42); // "-42" d3.format("(.0f")(-42); // "(42)" d3.format("+$.0f")(-42); // "-$42" d3.format("($.0f")(-42); // "($42)" ``` The new `=` align option places any sign and symbol to the left of any padding: ```js d3.format(">6d")(-42); // " -42" d3.format("=6d")(-42); // "- 42" d3.format(">(6d")(-42); // " (42)" d3.format("=(6d")(-42); // "( 42)" ``` The `b`, `o`, `d` and `x` directives now round to the nearest integer, rather than returning the empty string for non-integers: ```js d3.format("b")(41.9); // "101010" d3.format("o")(41.9); // "52" d3.format("d")(41.9); // "42" d3.format("x")(41.9); // "2a" ``` The `c` directive is now for character data (*i.e.*, literal strings), not for character codes. The is useful if you just want to apply padding and alignment and don’t care about formatting numbers. For example, the infamous [left-pad](http://blog.npmjs.org/post/141577284765/kik-left-pad-and-npm) (as well as center- and right-pad!) can be conveniently implemented as: ```js d3.format(">10c")("foo"); // " foo" d3.format("^10c")("foo"); // " foo " d3.format("<10c")("foo"); // "foo " ``` There are several new methods for computing suggested decimal precisions; these are used by [d3-scale](#scales-d3-scale) for tick formatting, and are helpful for implementing custom number formats: [d3.precisionFixed](https://github.com/d3/d3-format/blob/master/README.md#precisionFixed), [d3.precisionPrefix](https://github.com/d3/d3-format/blob/master/README.md#precisionPrefix) and [d3.precisionRound](https://github.com/d3/d3-format/blob/master/README.md#precisionRound). There’s also a new [d3.formatSpecifier](https://github.com/d3/d3-format/blob/master/README.md#formatSpecifier) method for parsing, validating and debugging format specifiers; it’s also good for deriving related format specifiers, such as when you want to substitute the precision automatically. You can now set the default locale using [d3.formatDefaultLocale](https://github.com/d3/d3-format/blob/master/README.md#formatDefaultLocale)! The locales are published as [JSON](https://github.com/d3/d3-request/blob/master/README.md#json) to [npm](https://unpkg.com/d3-format/locale/). ## [Geographies (d3-geo)](https://github.com/d3/d3-geo/blob/master/README.md) Pursuant to the great namespace flattening, various methods have new names: * d3.geo.graticule ↦ [d3.geoGraticule](https://github.com/d3/d3-geo/blob/master/README.md#geoGraticule) * d3.geo.circle ↦ [d3.geoCircle](https://github.com/d3/d3-geo/blob/master/README.md#geoCircle) * d3.geo.area ↦ [d3.geoArea](https://github.com/d3/d3-geo/blob/master/README.md#geoArea) * d3.geo.bounds ↦ [d3.geoBounds](https://github.com/d3/d3-geo/blob/master/README.md#geoBounds) * d3.geo.centroid ↦ [d3.geoCentroid](https://github.com/d3/d3-geo/blob/master/README.md#geoCentroid) * d3.geo.distance ↦ [d3.geoDistance](https://github.com/d3/d3-geo/blob/master/README.md#geoDistance) * d3.geo.interpolate ↦ [d3.geoInterpolate](https://github.com/d3/d3-geo/blob/master/README.md#geoInterpolate) * d3.geo.length ↦ [d3.geoLength](https://github.com/d3/d3-geo/blob/master/README.md#geoLength) * d3.geo.rotation ↦ [d3.geoRotation](https://github.com/d3/d3-geo/blob/master/README.md#geoRotation) * d3.geo.stream ↦ [d3.geoStream](https://github.com/d3/d3-geo/blob/master/README.md#geoStream) * d3.geo.path ↦ [d3.geoPath](https://github.com/d3/d3-geo/blob/master/README.md#geoPath) * d3.geo.projection ↦ [d3.geoProjection](https://github.com/d3/d3-geo/blob/master/README.md#geoProjection) * d3.geo.projectionMutator ↦ [d3.geoProjectionMutator](https://github.com/d3/d3-geo/blob/master/README.md#geoProjectionMutator) * d3.geo.albers ↦ [d3.geoAlbers](https://github.com/d3/d3-geo/blob/master/README.md#geoAlbers) * d3.geo.albersUsa ↦ [d3.geoAlbersUsa](https://github.com/d3/d3-geo/blob/master/README.md#geoAlbersUsa) * d3.geo.azimuthalEqualArea ↦ [d3.geoAzimuthalEqualArea](https://github.com/d3/d3-geo/blob/master/README.md#geoAzimuthalEqualArea) * d3.geo.azimuthalEquidistant ↦ [d3.geoAzimuthalEquidistant](https://github.com/d3/d3-geo/blob/master/README.md#geoAzimuthalEquidistant) * d3.geo.conicConformal ↦ [d3.geoConicConformal](https://github.com/d3/d3-geo/blob/master/README.md#geoConicConformal) * d3.geo.conicEqualArea ↦ [d3.geoConicEqualArea](https://github.com/d3/d3-geo/blob/master/README.md#geoConicEqualArea) * d3.geo.conicEquidistant ↦ [d3.geoConicEquidistant](https://github.com/d3/d3-geo/blob/master/README.md#geoConicEquidistant) * d3.geo.equirectangular ↦ [d3.geoEquirectangular](https://github.com/d3/d3-geo/blob/master/README.md#geoEquirectangular) * d3.geo.gnomonic ↦ [d3.geoGnomonic](https://github.com/d3/d3-geo/blob/master/README.md#geoGnomonic) * d3.geo.mercator ↦ [d3.geoMercator](https://github.com/d3/d3-geo/blob/master/README.md#geoMercator) * d3.geo.orthographic ↦ [d3.geoOrthographic](https://github.com/d3/d3-geo/blob/master/README.md#geoOrthographic) * d3.geo.stereographic ↦ [d3.geoStereographic](https://github.com/d3/d3-geo/blob/master/README.md#geoStereographic) * d3.geo.transverseMercator ↦ [d3.geoTransverseMercator](https://github.com/d3/d3-geo/blob/master/README.md#geoTransverseMercator) Also renamed for consistency: * *circle*.origin ↦ [*circle*.center](https://github.com/d3/d3-geo/blob/master/README.md#circle_center) * *circle*.angle ↦ [*circle*.radius](https://github.com/d3/d3-geo/blob/master/README.md#circle_radius) * *graticule*.majorExtent ↦ [*graticule*.extentMajor](https://github.com/d3/d3-geo/blob/master/README.md#graticule_extentMajor) * *graticule*.minorExtent ↦ [*graticule*.extentMinor](https://github.com/d3/d3-geo/blob/master/README.md#graticule_extentMinor) * *graticule*.majorStep ↦ [*graticule*.stepMajor](https://github.com/d3/d3-geo/blob/master/README.md#graticule_stepMajor) * *graticule*.minorStep ↦ [*graticule*.stepMinor](https://github.com/d3/d3-geo/blob/master/README.md#graticule_stepMinor) Projections now have more appropriate defaults. For example, [d3.geoOrthographic](https://github.com/d3/d3-geo/blob/master/README.md#geoOrthographic) has a 90° clip angle by default, showing only the front hemisphere, and [d3.geoGnomonic](https://github.com/d3/d3-geo/blob/master/README.md#geoGnomonic) has a default 60° clip angle. The default [projection](https://github.com/d3/d3-geo/blob/master/README.md#path_projection) for [d3.geoPath](https://github.com/d3/d3-geo/blob/master/README.md#geoPath) is now null rather than [d3.geoAlbersUsa](https://github.com/d3/d3-geo/blob/master/README.md#geoAlbersUsa); a null projection is used with [pre-projected geometry](https://bl.ocks.org/mbostock/5557726) and is typically faster to render. “Fallback projections”—when you pass a function rather than a projection to [*path*.projection](https://github.com/d3/d3-geo/blob/master/README.md#path_projection)—are no longer supported. For geographic projections, use [d3.geoProjection](https://github.com/d3/d3-geo/blob/master/README.md#geoProjection) or [d3.geoProjectionMutator](https://github.com/d3/d3-geo/blob/master/README.md#geoProjectionMutator) to define a custom projection. For arbitrary geometry transformations, implement the [stream interface](https://github.com/d3/d3-geo/blob/master/README.md#streams); see also [d3.geoTransform](https://github.com/d3/d3-geo/blob/master/README.md#geoTransform). The “raw” projections (e.g., d3.geo.equirectangular.raw) are no longer exported. ## [Hierarchies (d3-hierarchy)](https://github.com/d3/d3-hierarchy/blob/master/README.md) Pursuant to the great namespace flattening: * d3.layout.cluster ↦ [d3.cluster](https://github.com/d3/d3-hierarchy/blob/master/README.md#cluster) * d3.layout.hierarchy ↦ [d3.hierarchy](https://github.com/d3/d3-hierarchy/blob/master/README.md#hierarchy) * d3.layout.pack ↦ [d3.pack](https://github.com/d3/d3-hierarchy/blob/master/README.md#pack) * d3.layout.partition ↦ [d3.partition](https://github.com/d3/d3-hierarchy/blob/master/README.md#partition) * d3.layout.tree ↦ [d3.tree](https://github.com/d3/d3-hierarchy/blob/master/README.md#tree) * d3.layout.treemap ↦ [d3.treemap](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap) As an alternative to using JSON to represent hierarchical data (such as the “flare.json format” used by many D3 examples), the new [d3.stratify](https://github.com/d3/d3-hierarchy/blob/master/README.md#stratify) operator simplifies the conversion of tabular data to hierarchical data! This is convenient if you already have data in a tabular format, such as the result of a SQL query or a CSV file: ``` name,parent Eve, Cain,Eve Seth,Eve Enos,Seth Noam,Seth Abel,Eve Awan,Eve Enoch,Awan Azura,Eve ``` To convert this to a root [*node*](https://github.com/d3/d3-hierarchy/blob/master/README.md#hierarchy): ```js var root = d3.stratify() .id(function(d) { return d.name; }) .parentId(function(d) { return d.parent; }) (nodes); ``` The resulting *root* can be passed to [d3.tree](https://github.com/d3/d3-hierarchy/blob/master/README.md#tree) to produce a tree diagram like this: Root nodes can also be created from JSON data using [d3.hierarchy](https://github.com/d3/d3-hierarchy/blob/master/README.md#hierarchy). The hierarchy layouts now take these root nodes as input rather than operating directly on JSON data, which helps to provide a cleaner separation between the input data and the computed layout. (For example, use [*node*.copy](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_copy) to isolate layout changes.) It also simplifies the API: rather than each hierarchy layout needing to implement value and sorting accessors, there are now generic [*node*.sum](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_sum) and [*node*.sort](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_sort) methods that work with any hierarchy layout. The new d3.hierarchy API also provides a richer set of methods for manipulating hierarchical data. For example, to generate an array of all nodes in topological order, use [*node*.descendants](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_descendants); for just leaf nodes, use [*node*.leaves](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_leaves). To highlight the ancestors of a given *node* on mouseover, use [*node*.ancestors](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_ancestors). To generate an array of {source, target} links for a given hierarchy, use [*node*.links](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_links); this replaces *treemap*.links and similar methods on the other layouts. The new [*node*.path](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_path) method replaces d3.layout.bundle; see also [d3.curveBundle](https://github.com/d3/d3-shape/blob/master/README.md#curveBundle) for hierarchical edge bundling. The hierarchy layouts have been rewritten using new, non-recursive traversal methods ([*node*.each](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_each), [*node*.eachAfter](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_eachAfter) and [*node*.eachBefore](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_eachBefore)), improving performance on large datasets. The d3.tree layout no longer uses a *node*.\_ field to store temporary state during layout. Treemap tiling is now [extensible](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap-tiling) via [*treemap*.tile](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap_tile)! The default squarified tiling algorithm, [d3.treemapSquarify](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemapSquarify), has been completely rewritten, improving performance and fixing bugs in padding and rounding. The *treemap*.sticky method has been replaced with the [d3.treemapResquarify](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemapResquarify), which is identical to d3.treemapSquarify except it performs stable neighbor-preserving updates. The *treemap*.ratio method has been replaced with [*squarify*.ratio](https://github.com/d3/d3-hierarchy/blob/master/README.md#squarify_ratio). And there’s a new [d3.treemapBinary](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemapBinary) for binary treemaps! Treemap padding has also been improved. The treemap now distinguishes between [outer padding](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap_paddingOuter) that separates a parent from its children, and [inner padding](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap_paddingInner) that separates adjacent siblings. You can set the [top-](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap_paddingTop), [right-](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap_paddingRight), [bottom-](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap_paddingBottom) and [left-](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap_paddingLeft)outer padding separately. There are new examples for the traditional [nested treemap](https://bl.ocks.org/mbostock/911ad09bdead40ec0061) and for Lü and Fogarty’s [cascaded treemap](https://bl.ocks.org/mbostock/f85ffb3a5ac518598043). And there’s a new example demonstrating [d3.nest with d3.treemap](https://bl.ocks.org/mbostock/2838bf53e0e65f369f476afd653663a2). The space-filling layouts [d3.treemap](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap) and [d3.partition](https://github.com/d3/d3-hierarchy/blob/master/README.md#partition) now output *x0*, *x1*, *y0*, *y1* on each node instead of *x0*, *dx*, *y0*, *dy*. This improves accuracy by ensuring that the edges of adjacent cells are exactly equal, rather than sometimes being slightly off due to floating point math. The partition layout now supports [rounding](https://github.com/d3/d3-hierarchy/blob/master/README.md#partition_round) and [padding](https://github.com/d3/d3-hierarchy/blob/master/README.md#partition_padding). The circle-packing layout, [d3.pack](https://github.com/d3/d3-hierarchy/blob/master/README.md#pack), has been completely rewritten to better implement Wang et al.’s algorithm, fixing major bugs and improving results! Welzl’s algorithm is now used to compute the exact [smallest enclosing circle](https://bl.ocks.org/mbostock/29c534ff0b270054a01c) for each parent, rather than the approximate answer used by Wang et al. The 3.x output is shown on the left; 4.0 is shown on the right: Circle Packing in 3.x Circle Packing in 4.0 A non-hierarchical implementation is also available as [d3.packSiblings](https://github.com/d3/d3-hierarchy/blob/master/README.md#packSiblings), and the smallest enclosing circle implementation is available as [d3.packEnclose](https://github.com/d3/d3-hierarchy/blob/master/README.md#packEnclose). [Pack padding](https://github.com/d3/d3-hierarchy/blob/master/README.md#pack_padding) now applies between a parent and its children, as well as between adjacent siblings. In addition, you can now specify padding as a function that is computed dynamically for each parent. ## Internals The d3.rebind method has been removed. (See the [3.x source](https://github.com/d3/d3/blob/v3.5.17/src/core/rebind.js).) If you want to wrap a getter-setter method, the recommend pattern is to implement a wrapper method and check the return value. For example, given a *component* that uses an internal [*dispatch*](#dispatches-d3-dispatch), *component*.on can rebind *dispatch*.on as follows: ```js component.on = function() { var value = dispatch.on.apply(dispatch, arguments); return value === dispatch ? component : value; }; ``` The d3.functor method has been removed. (See the [3.x source](https://github.com/d3/d3/blob/v3.5.17/src/core/functor.js).) If you want to promote a constant value to a function, the recommended pattern is to implement a closure that returns the constant value. If desired, you can use a helper method as follows: ```js function constant(x) { return function() { return x; }; } ``` Given a value *x*, to promote *x* to a function if it is not already: ```js var fx = typeof x === "function" ? x : constant(x); ``` ## [Interpolators (d3-interpolate)](https://github.com/d3/d3-interpolate/blob/master/README.md) The [d3.interpolate](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolate) method no longer delegates to d3.interpolators, which has been removed; its behavior is now defined by the library. It is now slightly faster in the common case that *b* is a number. It only uses [d3.interpolateRgb](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateRgb) if *b* is a valid CSS color specifier (and not approximately one). And if the end value *b* is null, undefined, true or false, d3.interpolate now returns a constant function which always returns *b*. The behavior of [d3.interpolateObject](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateObject) and [d3.interpolateArray](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateArray) has changed slightly with respect to properties or elements in the start value *a* that do not exist in the end value *b*: these properties and elements are now ignored, such that the ending value of the interpolator at *t* = 1 is now precisely equal to *b*. So, in 3.x: ```js d3.interpolateObject({foo: 2, bar: 1}, {foo: 3})(0.5); // {bar: 1, foo: 2.5} in 3.x ``` Whereas in 4.0, *a*.bar is ignored: ```js d3.interpolateObject({foo: 2, bar: 1}, {foo: 3})(0.5); // {foo: 2.5} in 4.0 ``` If *a* or *b* are undefined or not an object, they are now implicitly converted to the empty object or empty array as appropriate, rather than throwing a TypeError. The d3.interpolateTransform interpolator has been renamed to [d3.interpolateTransformSvg](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateTransformSvg), and there is a new [d3.interpolateTransformCss](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateTransformCss) to interpolate CSS transforms! This allows [d3-transition](#transitions-d3-transition) to automatically interpolate both the SVG [transform attribute](https://www.w3.org/TR/SVG/coords.html#TransformAttribute) and the CSS [transform style property](https://www.w3.org/TR/css-transforms-1/#transform-property). (Note, however, that only 2D CSS transforms are supported.) The d3.transform method has been removed. Color space interpolators now interpolate opacity (see [d3-color](#colors-d3-color)) and return rgb(…) or rgba(…) CSS color specifier strings rather than using the RGB hexadecimal format. This is necessary to support opacity interpolation, but is also beneficial because it matches CSS computed values. When a channel in the start color *a* is undefined, color interpolators now use the corresponding channel value from the end color *b*, or *vice versa*. This logic previously applied to some channels (such as saturation in HSL), but now applies to all channels in all color spaces, and is especially useful when interpolating to or from transparent. There are now “long” versions of cylindrical color space interpolators: [d3.interpolateHslLong](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateHslLong), [d3.interpolateHclLong](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateHclLong) and [d3.interpolateCubehelixLong](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateCubehelixLong). These interpolators use linear interpolation of hue, rather than using the shortest path around the 360° hue circle. See [d3.interpolateRainbow](https://github.com/d3/d3-scale/blob/master/README.md#interpolateRainbow) for an example. The Cubehelix color space is now supported by [d3-color](#colors-d3-color), and so there are now [d3.interpolateCubehelix](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateCubehelix) and [d3.interpolateCubehelixLong](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateCubehelixLong) interpolators. [Gamma-corrected color interpolation](https://web.archive.org/web/20160112115812/http://www.4p8.com/eric.brasseur/gamma.html) is now supported for both RGB and Cubehelix color spaces as [*interpolate*.gamma](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolate_gamma). For example, to interpolate from purple to orange with a gamma of 2.2 in RGB space: ```js var interpolate = d3.interpolateRgb.gamma(2.2)("purple", "orange"); ``` There are new interpolators for uniform non-rational [B-splines](https://en.wikipedia.org/wiki/B-spline)! These are useful for smoothly interpolating between an arbitrary sequence of values from *t* = 0 to *t* = 1, such as to generate a smooth color gradient from a discrete set of colors. The [d3.interpolateBasis](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateBasis) and [d3.interpolateBasisClosed](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateBasisClosed) interpolators generate one-dimensional B-splines, while [d3.interpolateRgbBasis](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateRgbBasis) and [d3.interpolateRgbBasisClosed](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateRgbBasisClosed) generate three-dimensional B-splines through RGB color space. These are used by [d3-scale-chromatic](https://github.com/d3/d3-scale-chromatic) to generate continuous color scales from ColorBrewer’s discrete color schemes, such as [PiYG](https://bl.ocks.org/mbostock/048d21cf747371b11884f75ad896e5a5). There’s also now a [d3.quantize](https://github.com/d3/d3-interpolate/blob/master/README.md#quantize) method for generating uniformly-spaced discrete samples from a continuous interpolator. This is useful for taking one of the built-in color scales (such as [d3.interpolateViridis](https://github.com/d3/d3-scale/blob/master/README.md#interpolateViridis)) and quantizing it for use with [d3.scaleQuantize](https://github.com/d3/d3-scale/blob/master/README.md#scaleQuantize), [d3.scaleQuantile](https://github.com/d3/d3-scale/blob/master/README.md#scaleQuantile) or [d3.scaleThreshold](https://github.com/d3/d3-scale/blob/master/README.md#scaleThreshold). ## [Paths (d3-path)](https://github.com/d3/d3-path/blob/master/README.md) The [d3.path](https://github.com/d3/d3-path/blob/master/README.md#path) serializer implements the [CanvasPathMethods API](https://www.w3.org/TR/2dcontext/#canvaspathmethods), allowing you to write code that can render to either Canvas or SVG. For example, given some code that draws to a canvas: ```js function drawCircle(context, radius) { context.moveTo(radius, 0); context.arc(0, 0, radius, 0, 2 * Math.PI); } ``` You can render to SVG as follows: ```js var context = d3.path(); drawCircle(context, 40); pathElement.setAttribute("d", context.toString()); ``` The path serializer enables [d3-shape](#shapes-d3-shape) to support both Canvas and SVG; see [*line*.context](https://github.com/d3/d3-shape/blob/master/README.md#line_context) and [*area*.context](https://github.com/d3/d3-shape/blob/master/README.md#area_context), for example. ## [Polygons (d3-polygon)](https://github.com/d3/d3-polygon/blob/master/README.md) There’s no longer a d3.geom.polygon constructor; instead you just pass an array of vertices to the polygon methods. So instead of *polygon*.area and *polygon*.centroid, there’s [d3.polygonArea](https://github.com/d3/d3-polygon/blob/master/README.md#polygonArea) and [d3.polygonCentroid](https://github.com/d3/d3-polygon/blob/master/README.md#polygonCentroid). There are also new [d3.polygonContains](https://github.com/d3/d3-polygon/blob/master/README.md#polygonContains) and [d3.polygonLength](https://github.com/d3/d3-polygon/blob/master/README.md#polygonLength) methods. There’s no longer an equivalent to *polygon*.clip, but if [Sutherland–Hodgman clipping](https://en.wikipedia.org/wiki/Sutherland–Hodgman_algorithm) is needed, please [file a feature request](https://github.com/d3/d3-polygon/issues). The d3.geom.hull operator has been simplified: instead of an operator with *hull*.x and *hull*.y accessors, there’s just the [d3.polygonHull](https://github.com/d3/d3-polygon/blob/master/README.md#polygonHull) method which takes an array of points and returns the convex hull. ## [Quadtrees (d3-quadtree)](https://github.com/d3/d3-quadtree/blob/master/README.md) The d3.geom.quadtree method has been replaced by [d3.quadtree](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree). 4.0 removes the concept of quadtree “generators” (configurable functions that build a quadtree from an array of data); there are now just quadtrees, which you can create via d3.quadtree and add data to via [*quadtree*.add](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_add) and [*quadtree*.addAll](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_addAll). This code in 3.x: ```js var quadtree = d3.geom.quadtree() .extent([[0, 0], [width, height]]) (data); ``` Can be rewritten in 4.0 as: ```js var quadtree = d3.quadtree() .extent([[0, 0], [width, height]]) .addAll(data); ``` The new quadtree implementation is vastly improved! It is no longer recursive, avoiding stack overflows when there are large numbers of coincident points. The internal storage is now more efficient, and the implementation is also faster; constructing a quadtree of 1M normally-distributed points takes about one second in 4.0, as compared to three seconds in 3.x. The change in [internal *node* structure](https://github.com/d3/d3-quadtree/blob/master/README.md#nodes) affects [*quadtree*.visit](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_visit): use *node*.length to distinguish leaf nodes from internal nodes. For example, to iterate over all data in a quadtree: ```js quadtree.visit(function(node) { if (!node.length) { do { console.log(node.data); } while (node = node.next) } }); ``` There’s a new [*quadtree*.visitAfter](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_visitAfter) method for visiting nodes in post-order traversal. This feature is used in [d3-force](#forces-d3-force) to implement the [Barnes–Hut approximation](https://en.wikipedia.org/wiki/Barnes–Hut_simulation). You can now remove data from a quadtree using [*quadtree*.remove](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_remove) and [*quadtree*.removeAll](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_removeAll). When adding data to a quadtree, the quadtree will now expand its extent by repeated doubling if the new point is outside the existing extent of the quadtree. There are also [*quadtree*.extent](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_extent) and [*quadtree*.cover](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_cover) methods for explicitly expanding the extent of the quadtree after creation. Quadtrees support several new utility methods: [*quadtree*.copy](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_copy) returns a copy of the quadtree sharing the same data; [*quadtree*.data](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_data) generates an array of all data in the quadtree; [*quadtree*.size](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_size) returns the number of data points in the quadtree; and [*quadtree*.root](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_root) returns the root node, which is useful for manual traversal of the quadtree. The [*quadtree*.find](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_find) method now takes an optional search radius, which is useful for pointer-based selection in [force-directed graphs](https://bl.ocks.org/mbostock/ad70335eeef6d167bc36fd3c04378048). ## [Queues (d3-queue)](https://github.com/d3/d3-queue/blob/master/README.md) Formerly known as Queue.js and queue-async, [d3.queue](https://github.com/d3/d3-queue) is now included in the default bundle, making it easy to load data files in parallel. It has been rewritten with fewer closures to improve performance, and there are now stricter checks in place to guarantee well-defined behavior. You can now use instanceof d3.queue and inspect the queue’s internal private state. ## [Random Numbers (d3-random)](https://github.com/d3/d3-random/blob/master/README.md) Pursuant to the great namespace flattening, the random number generators have new names: * d3.random.normal ↦ [d3.randomNormal](https://github.com/d3/d3-random/blob/master/README.md#randomNormal) * d3.random.logNormal ↦ [d3.randomLogNormal](https://github.com/d3/d3-random/blob/master/README.md#randomLogNormal) * d3.random.bates ↦ [d3.randomBates](https://github.com/d3/d3-random/blob/master/README.md#randomBates) * d3.random.irwinHall ↦ [d3.randomIrwinHall](https://github.com/d3/d3-random/blob/master/README.md#randomIrwinHall) There are also new random number generators for [exponential](https://github.com/d3/d3-random/blob/master/README.md#randomExponential) and [uniform](https://github.com/d3/d3-random/blob/master/README.md#randomUniform) distributions. The [normal](https://github.com/d3/d3-random/blob/master/README.md#randomNormal) and [log-normal](https://github.com/d3/d3-random/blob/master/README.md#randomLogNormal) random generators have been optimized. ## [Requests (d3-request)](https://github.com/d3/d3-request/blob/master/README.md) The d3.xhr method has been renamed to [d3.request](https://github.com/d3/d3-request/blob/master/README.md#request). Basic authentication is now supported using [*request*.user](https://github.com/d3/d3-request/blob/master/README.md#request_user) and [*request*.password](https://github.com/d3/d3-request/blob/master/README.md#request_password). You can now configure a timeout using [*request*.timeout](https://github.com/d3/d3-request/blob/master/README.md#request_timeout). If an error occurs, the corresponding [ProgressEvent](https://xhr.spec.whatwg.org/#interface-progressevent) of type “error” is now passed to the error listener, rather than the [XMLHttpRequest](https://xhr.spec.whatwg.org/#interface-xmlhttprequest). Likewise, the ProgressEvent is passed to progress event listeners, rather than using [d3.event](https://github.com/d3/d3-selection/blob/master/README.md#event). If [d3.xml](https://github.com/d3/d3-request/blob/master/README.md#xml) encounters an error parsing XML, this error is now reported to error listeners rather than returning a null response. The [d3.request](https://github.com/d3/d3-request/blob/master/README.md#request), [d3.text](https://github.com/d3/d3-request/blob/master/README.md#text) and [d3.xml](https://github.com/d3/d3-request/blob/master/README.md#xml) methods no longer take an optional mime type as the second argument; use [*request*.mimeType](https://github.com/d3/d3-request/blob/master/README.md#request_mimeType) instead. For example: ```js d3.xml("file.svg").mimeType("image/svg+xml").get(function(error, svg) { … }); ``` With the exception of [d3.html](https://github.com/d3/d3-request/blob/master/README.md#html) and [d3.xml](https://github.com/d3/d3-request/blob/master/README.md#xml), Node is now supported via [node-XMLHttpRequest](https://github.com/driverdan/node-XMLHttpRequest). ## [Scales (d3-scale)](https://github.com/d3/d3-scale/blob/master/README.md) Pursuant to the great namespace flattening: * d3.scale.linear ↦ [d3.scaleLinear](https://github.com/d3/d3-scale/blob/master/README.md#scaleLinear) * d3.scale.sqrt ↦ [d3.scaleSqrt](https://github.com/d3/d3-scale/blob/master/README.md#scaleSqrt) * d3.scale.pow ↦ [d3.scalePow](https://github.com/d3/d3-scale/blob/master/README.md#scalePow) * d3.scale.log ↦ [d3.scaleLog](https://github.com/d3/d3-scale/blob/master/README.md#scaleLog) * d3.scale.quantize ↦ [d3.scaleQuantize](https://github.com/d3/d3-scale/blob/master/README.md#scaleQuantize) * d3.scale.threshold ↦ [d3.scaleThreshold](https://github.com/d3/d3-scale/blob/master/README.md#scaleThreshold) * d3.scale.quantile ↦ [d3.scaleQuantile](https://github.com/d3/d3-scale/blob/master/README.md#scaleQuantile) * d3.scale.identity ↦ [d3.scaleIdentity](https://github.com/d3/d3-scale/blob/master/README.md#scaleIdentity) * d3.scale.ordinal ↦ [d3.scaleOrdinal](https://github.com/d3/d3-scale/blob/master/README.md#scaleOrdinal) * d3.time.scale ↦ [d3.scaleTime](https://github.com/d3/d3-scale/blob/master/README.md#scaleTime) * d3.time.scale.utc ↦ [d3.scaleUtc](https://github.com/d3/d3-scale/blob/master/README.md#scaleUtc) Scales now generate ticks in the same order as the domain: if you have a descending domain, you now get descending ticks. This change affects the order of tick elements generated by [axes](#axes-d3-axis). For example: ```js d3.scaleLinear().domain([10, 0]).ticks(5); // [10, 8, 6, 4, 2, 0] ``` [Log tick formatting](https://github.com/d3/d3-scale/blob/master/README.md#log_tickFormat) now assumes a default *count* of ten, not Infinity, if not specified. Log scales with domains that span many powers (such as from 1e+3 to 1e+29) now return only one [tick](https://github.com/d3/d3-scale/blob/master/README.md#log_ticks) per power rather than returning *base* ticks per power. Non-linear quantitative scales are slightly more accurate. You can now control whether an ordinal scale’s domain is implicitly extended when the scale is passed a value that is not already in its domain. By default, [*ordinal*.unknown](https://github.com/d3/d3-scale/blob/master/README.md#ordinal_unknown) is [d3.scaleImplicit](https://github.com/d3/d3-scale/blob/master/README.md#scaleImplicit), causing unknown values to be added to the domain: ```js var x = d3.scaleOrdinal() .domain([0, 1]) .range(["red", "green", "blue"]); x.domain(); // [0, 1] x(2); // "blue" x.domain(); // [0, 1, 2] ``` By setting *ordinal*.unknown, you instead define the output value for unknown inputs. This is particularly useful for choropleth maps where you want to assign a color to missing data. ```js var x = d3.scaleOrdinal() .domain([0, 1]) .range(["red", "green", "blue"]) .unknown(undefined); x.domain(); // [0, 1] x(2); // undefined x.domain(); // [0, 1] ``` The *ordinal*.rangeBands and *ordinal*.rangeRoundBands methods have been replaced with a new subclass of ordinal scale: [band scales](https://github.com/d3/d3-scale/blob/master/README.md#band-scales). The following code in 3.x: ```js var x = d3.scale.ordinal() .domain(["a", "b", "c"]) .rangeBands([0, width]); ``` Is equivalent to this in 4.0: ```js var x = d3.scaleBand() .domain(["a", "b", "c"]) .range([0, width]); ``` The new [*band*.padding](https://github.com/d3/d3-scale/blob/master/README.md#band_padding), [*band*.paddingInner](https://github.com/d3/d3-scale/blob/master/README.md#band_paddingInner) and [*band*.paddingOuter](https://github.com/d3/d3-scale/blob/master/README.md#band_paddingOuter) methods replace the optional arguments to *ordinal*.rangeBands. The new [*band*.bandwidth](https://github.com/d3/d3-scale/blob/master/README.md#band_bandwidth) and [*band*.step](https://github.com/d3/d3-scale/blob/master/README.md#band_step) methods replace *ordinal*.rangeBand. There’s also a new [*band*.align](https://github.com/d3/d3-scale/blob/master/README.md#band_align) method which you can use to control how the extra space outside the bands is distributed, say to shift columns closer to the *y*-axis. Similarly, the *ordinal*.rangePoints and *ordinal*.rangeRoundPoints methods have been replaced with a new subclass of ordinal scale: [point scales](https://github.com/d3/d3-scale/blob/master/README.md#point-scales). The following code in 3.x: ```js var x = d3.scale.ordinal() .domain(["a", "b", "c"]) .rangePoints([0, width]); ``` Is equivalent to this in 4.0: ```js var x = d3.scalePoint() .domain(["a", "b", "c"]) .range([0, width]); ``` The new [*point*.padding](https://github.com/d3/d3-scale/blob/master/README.md#point_padding) method replaces the optional *padding* argument to *ordinal*.rangePoints. Like *ordinal*.rangeBand with *ordinal*.rangePoints, the [*point*.bandwidth](https://github.com/d3/d3-scale/blob/master/README.md#point_bandwidth) method always returns zero; a new [*point*.step](https://github.com/d3/d3-scale/blob/master/README.md#point_step) method returns the interval between adjacent points. The [ordinal scale constructor](https://github.com/d3/d3-scale/blob/master/README.md#ordinal-scales) now takes an optional *range* for a shorter alternative to [*ordinal*.range](https://github.com/d3/d3-scale/blob/master/README.md#ordinal_range). This is especially useful now that the categorical color scales have been changed to simple arrays of colors rather than specialized ordinal scale constructors: * d3.scale.category10 ↦ [d3.schemeCategory10](https://github.com/d3/d3-scale/blob/master/README.md#schemeCategory10) * d3.scale.category20 ↦ [d3.schemeCategory20](https://github.com/d3/d3-scale/blob/master/README.md#schemeCategory20) * d3.scale.category20b ↦ [d3.schemeCategory20b](https://github.com/d3/d3-scale/blob/master/README.md#schemeCategory20b) * d3.scale.category20c ↦ [d3.schemeCategory20c](https://github.com/d3/d3-scale/blob/master/README.md#schemeCategory20c) The following code in 3.x: ```js var color = d3.scale.category10(); ``` Is equivalent to this in 4.0: ```js var color = d3.scaleOrdinal(d3.schemeCategory10); ``` [Sequential scales](https://github.com/d3/d3-scale/blob/master/README.md#scaleSequential), are a new class of scales with a fixed output [interpolator](https://github.com/d3/d3-scale/blob/master/README.md#sequential_interpolator) instead of a [range](https://github.com/d3/d3-scale/blob/master/README.md#continuous_range). Typically these scales are used to implement continuous sequential or diverging color schemes. Inspired by Matplotlib’s new [perceptually-motived colormaps](https://bids.github.io/colormap/), 4.0 now features [viridis](https://github.com/d3/d3-scale/blob/master/README.md#interpolateViridis), [inferno](https://github.com/d3/d3-scale/blob/master/README.md#interpolateInferno), [magma](https://github.com/d3/d3-scale/blob/master/README.md#interpolateMagma), [plasma](https://github.com/d3/d3-scale/blob/master/README.md#interpolatePlasma) interpolators for use with sequential scales. Using [d3.quantize](https://github.com/d3/d3-interpolate/blob/master/README.md#quantize), these interpolators can also be applied to [quantile](https://github.com/d3/d3-scale/blob/master/README.md#quantile-scales), [quantize](https://github.com/d3/d3-scale/blob/master/README.md#quantize-scales) and [threshold](https://github.com/d3/d3-scale/blob/master/README.md#threshold-scales) scales. [viridis](https://github.com/d3/d3-scale/blob/master/README.md#interpolateViridis) [inferno](https://github.com/d3/d3-scale/blob/master/README.md#interpolateInferno) [magma](https://github.com/d3/d3-scale/blob/master/README.md#interpolateMagma) [plasma](https://github.com/d3/d3-scale/blob/master/README.md#interpolatePlasma) 4.0 also ships new Cubehelix schemes, including [Dave Green’s default](https://github.com/d3/d3-scale/blob/master/README.md#interpolateCubehelixDefault) and a [cyclical rainbow](https://github.com/d3/d3-scale/blob/master/README.md#interpolateRainbow) inspired by [Matteo Niccoli](https://mycarta.wordpress.com/2013/02/21/perceptual-rainbow-palette-the-method/): [cubehelix](https://github.com/d3/d3-scale/blob/master/README.md#interpolateCubehelixDefault) [rainbow](https://github.com/d3/d3-scale/blob/master/README.md#interpolateRainbow) [warm](https://github.com/d3/d3-scale/blob/master/README.md#interpolateWarm) [cool](https://github.com/d3/d3-scale/blob/master/README.md#interpolateCool) For even more sequential and categorical color schemes, see [d3-scale-chromatic](https://github.com/d3/d3-scale-chromatic). For an introduction to scales, see [Introducing d3-scale](https://medium.com/@mbostock/introducing-d3-scale-61980c51545f). ## [Selections (d3-selection)](https://github.com/d3/d3-selection/blob/master/README.md) Selections no longer subclass Array using [prototype chain injection](http://perfectionkills.com/how-ecmascript-5-still-does-not-allow-to-subclass-an-array/#wrappers_prototype_chain_injection); they are now plain objects, improving performance. The internal fields (*selection*.\_groups, *selection*.\_parents) are private; please use the documented public API to manipulate selections. The new [*selection*.nodes](https://github.com/d3/d3-selection/blob/master/README.md#selection_nodes) method generates an array of all nodes in a selection. Selections are now immutable: the elements and parents in a selection never change. (The elements’ attributes and content will of course still be modified!) The [*selection*.sort](https://github.com/d3/d3-selection/blob/master/README.md#selection_sort) and [*selection*.data](https://github.com/d3/d3-selection/blob/master/README.md#selection_data) methods now return new selections rather than modifying the selection in-place. In addition, [*selection*.append](https://github.com/d3/d3-selection/blob/master/README.md#selection_append) no longer merges entering nodes into the update selection; use [*selection*.merge](https://github.com/d3/d3-selection/blob/master/README.md#selection_merge) to combine enter and update after a data join. For example, the following [general update pattern](https://bl.ocks.org/mbostock/a8a5baa4c4a470cda598) in 3.x: ```js var circle = svg.selectAll("circle").data(data) // UPDATE .style("fill", "blue"); circle.exit().remove(); // EXIT circle.enter().append("circle") // ENTER; modifies UPDATE! 🌶 .style("fill", "green"); circle // ENTER + UPDATE .style("stroke", "black"); ``` Would be rewritten in 4.0 as: ```js var circle = svg.selectAll("circle").data(data) // UPDATE .style("fill", "blue"); circle.exit().remove(); // EXIT circle.enter().append("circle") // ENTER .style("fill", "green") .merge(circle) // ENTER + UPDATE .style("stroke", "black"); ``` This change is discussed further in [What Makes Software Good](https://medium.com/@mbostock/what-makes-software-good-943557f8a488). In 3.x, the [*selection*.enter](https://github.com/d3/d3-selection/blob/master/README.md#selection_enter) and [*selection*.exit](https://github.com/d3/d3-selection/blob/master/README.md#selection_exit) methods were undefined until you called *selection*.data, resulting in a TypeError if you attempted to access them. In 4.0, now they simply return the empty selection if the selection has not been joined to data. In 3.x, [*selection*.append](https://github.com/d3/d3-selection/blob/master/README.md#selection_append) would always append the new element as the last child of its parent. A little-known trick was to use [*selection*.insert](https://github.com/d3/d3-selection/blob/master/README.md#selection_insert) without specifying a *before* selector when entering nodes, causing the entering nodes to be inserted before the following element in the update selection. In 4.0, this is now the default behavior of *selection*.append; if you do not specify a *before* selector to *selection*.insert, the inserted element is appended as the last child. This change makes the general update pattern preserve the relative order of elements and data. For example, given the following DOM: ```html
    a
    b
    f
    ``` And the following code: ```js var div = d3.select("body").selectAll("div") .data(["a", "b", "c", "d", "e", "f"], function(d) { return d || this.textContent; }); div.enter().append("div") .text(function(d) { return d; }); ``` The resulting DOM will be: ```html
    a
    b
    c
    d
    e
    f
    ``` Thus, the entering *c*, *d* and *e* are inserted before *f*, since *f* is the following element in the update selection. Although this behavior is sufficient to preserve order if the new data’s order is stable, if the data changes order, you must still use [*selection*.order](https://github.com/d3/d3-selection/blob/master/README.md#selection_order) to reorder elements. There is now only one class of selection. 3.x implemented enter selections using a special class with different behavior for *enter*.append and *enter*.select; a consequence of this design was that enter selections in 3.x lacked [certain methods](https://github.com/d3/d3/issues/2043). In 4.0, enter selections are simply normal selections; they have the same methods and the same behavior. Placeholder [enter nodes](https://github.com/d3/d3-selection/blob/master/src/selection/enter.js) now implement [*node*.appendChild](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild), [*node*.insertBefore](https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore), [*node*.querySelector](https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector), and [*node*.querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll). The [*selection*.data](https://github.com/d3/d3-selection/blob/master/README.md#selection_data) method has been changed slightly with respect to duplicate keys. In 3.x, if multiple data had the same key, the duplicate data would be ignored and not included in enter, update or exit; in 4.0 the duplicate data is always put in the enter selection. In both 3.x and 4.0, if multiple elements have the same key, the duplicate elements are put in the exit selection. Thus, 4.0’s behavior is now symmetric for enter and exit, and the general update pattern will now produce a DOM that matches the data even if there are duplicate keys. Selections have several new methods! Use [*selection*.raise](https://github.com/d3/d3-selection/blob/master/README.md#selection_raise) to move the selected elements to the front of their siblings, so that they are drawn on top; use [*selection*.lower](https://github.com/d3/d3-selection/blob/master/README.md#selection_lower) to move them to the back. Use [*selection*.dispatch](https://github.com/d3/d3-selection/blob/master/README.md#selection_dispatch) to dispatch a [custom event](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) to event listeners. When called in getter mode, [*selection*.data](https://github.com/d3/d3-selection/blob/master/README.md#selection_data) now returns the data for all elements in the selection, rather than just the data for the first group of elements. The [*selection*.call](https://github.com/d3/d3-selection/blob/master/README.md#selection_call) method no longer sets the `this` context when invoking the specified function; the *selection* is passed as the first argument to the function, so use that. The [*selection*.on](https://github.com/d3/d3-selection/blob/master/README.md#selection_on) method now accepts multiple whitespace-separated typenames, so you can add or remove multiple listeners simultaneously. For example: ```js selection.on("mousedown touchstart", function() { console.log(d3.event.type); }); ``` The arguments passed to callback functions has changed slightly in 4.0 to be more consistent. The standard arguments are the element’s datum (*d*), the element’s index (*i*), and the element’s group (*nodes*), with *this* as the element. The slight exception to this convention is *selection*.data, which is evaluated for each group rather than each element; it is passed the group’s parent datum (*d*), the group index (*i*), and the selection’s parents (*parents*), with *this* as the group’s parent. The new [d3.local](https://github.com/d3/d3-selection/blob/master/README.md#local-variables) provides a mechanism for defining [local variables](https://bl.ocks.org/mbostock/e1192fe405703d8321a5187350910e08): state that is bound to DOM elements, and available to any descendant element. This can be a convenient alternative to using [*selection*.each](https://github.com/d3/d3-selection/blob/master/README.md#selection_each) or storing local state in data. The d3.ns.prefix namespace prefix map has been renamed to [d3.namespaces](https://github.com/d3/d3-selection/blob/master/README.md#namespaces), and the d3.ns.qualify method has been renamed to [d3.namespace](https://github.com/d3/d3-selection/blob/master/README.md#namespace). Several new low-level methods are now available, as well. [d3.matcher](https://github.com/d3/d3-selection/blob/master/README.md#matcher) is used internally by [*selection*.filter](https://github.com/d3/d3-selection/blob/master/README.md#selection_filter); [d3.selector](https://github.com/d3/d3-selection/blob/master/README.md#selector) is used by [*selection*.select](https://github.com/d3/d3-selection/blob/master/README.md#selection_select); [d3.selectorAll](https://github.com/d3/d3-selection/blob/master/README.md#selectorAll) is used by [*selection*.selectAll](https://github.com/d3/d3-selection/blob/master/README.md#selection_selectAll); [d3.creator](https://github.com/d3/d3-selection/blob/master/README.md#creator) is used by [*selection*.append](https://github.com/d3/d3-selection/blob/master/README.md#selection_append) and [*selection*.insert](https://github.com/d3/d3-selection/blob/master/README.md#selection_insert). The new [d3.window](https://github.com/d3/d3-selection/blob/master/README.md#window) returns the owner window for a given element, window or document. The new [d3.customEvent](https://github.com/d3/d3-selection/blob/master/README.md#customEvent) temporarily sets [d3.event](https://github.com/d3/d3-selection/blob/master/README.md#event) while invoking a function, allowing you to implement controls which dispatch custom events; this is used by [d3-drag](https://github.com/d3/d3-drag), [d3-zoom](https://github.com/d3/d3-zoom) and [d3-brush](https://github.com/d3/d3-brush). For the sake of parsimony, the multi-value methods—where you pass an object to set multiple attributes, styles or properties simultaneously—have been extracted to [d3-selection-multi](https://github.com/d3/d3-selection-multi) and are no longer part of the default bundle. The multi-value map methods have also been renamed to plural form to reduce overload: [*selection*.attrs](https://github.com/d3/d3-selection-multi/blob/master/README.md#selection_attrs), [*selection*.styles](https://github.com/d3/d3-selection-multi/blob/master/README.md#selection_styles) and [*selection*.properties](https://github.com/d3/d3-selection-multi/blob/master/README.md#selection_properties). ## [Shapes (d3-shape)](https://github.com/d3/d3-shape/blob/master/README.md) Pursuant to the great namespace flattening: * d3.svg.line ↦ [d3.line](https://github.com/d3/d3-shape/blob/master/README.md#lines) * d3.svg.line.radial ↦ [d3.radialLine](https://github.com/d3/d3-shape/blob/master/README.md#radialLine) * d3.svg.area ↦ [d3.area](https://github.com/d3/d3-shape/blob/master/README.md#areas) * d3.svg.area.radial ↦ [d3.radialArea](https://github.com/d3/d3-shape/blob/master/README.md#radialArea) * d3.svg.arc ↦ [d3.arc](https://github.com/d3/d3-shape/blob/master/README.md#arcs) * d3.svg.symbol ↦ [d3.symbol](https://github.com/d3/d3-shape/blob/master/README.md#symbols) * d3.svg.symbolTypes ↦ [d3.symbolTypes](https://github.com/d3/d3-shape/blob/master/README.md#symbolTypes) * d3.layout.pie ↦ [d3.pie](https://github.com/d3/d3-shape/blob/master/README.md#pies) * d3.layout.stack ↦ [d3.stack](https://github.com/d3/d3-shape/blob/master/README.md#stacks) * d3.svg.diagonal ↦ REMOVED (see [d3/d3-shape#27](https://github.com/d3/d3-shape/issues/27)) * d3.svg.diagonal.radial ↦ REMOVED Shapes are no longer limited to SVG; they can now render to Canvas! Shape generators now support an optional *context*: given a [CanvasRenderingContext2D](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D), you can render a shape as a canvas path to be filled or stroked. For example, a [canvas pie chart](https://bl.ocks.org/mbostock/8878e7fd82034f1d63cf) might use an arc generator: ```js var arc = d3.arc() .outerRadius(radius - 10) .innerRadius(0) .context(context); ``` To render an arc for a given datum *d*: ```js context.beginPath(); arc(d); context.fill(); ``` See [*line*.context](https://github.com/d3/d3-shape/blob/master/README.md#line_context), [*area*.context](https://github.com/d3/d3-shape/blob/master/README.md#area_context) and [*arc*.context](https://github.com/d3/d3-shape/blob/master/README.md#arc_context) for more. Under the hood, shapes use [d3-path](#paths-d3-path) to serialize canvas path methods to SVG path data when the context is null; thus, shapes are optimized for rendering to canvas. You can also now derive lines from areas. The line shares most of the same accessors, such as [*line*.defined](https://github.com/d3/d3-shape/blob/master/README.md#line_defined) and [*line*.curve](https://github.com/d3/d3-shape/blob/master/README.md#line_curve), with the area from which it is derived. For example, to render the topline of an area, use [*area*.lineY1](https://github.com/d3/d3-shape/blob/master/README.md#area_lineY1); for the baseline, use [*area*.lineY0](https://github.com/d3/d3-shape/blob/master/README.md#area_lineY0). 4.0 introduces a new curve API for specifying how line and area shapes interpolate between data points. The *line*.interpolate and *area*.interpolate methods have been replaced with [*line*.curve](https://github.com/d3/d3-shape/blob/master/README.md#line_curve) and [*area*.curve](https://github.com/d3/d3-shape/blob/master/README.md#area_curve). Curves are implemented using the [curve interface](https://github.com/d3/d3-shape/blob/master/README.md#custom-curves) rather than as a function that returns an SVG path data string; this allows curves to render to either SVG or Canvas. In addition, *line*.curve and *area*.curve now take a function which instantiates a curve for a given *context*, rather than a string. The full list of equivalents: * linear ↦ [d3.curveLinear](https://github.com/d3/d3-shape/blob/master/README.md#curveLinear) * linear-closed ↦ [d3.curveLinearClosed](https://github.com/d3/d3-shape/blob/master/README.md#curveLinearClosed) * step ↦ [d3.curveStep](https://github.com/d3/d3-shape/blob/master/README.md#curveStep) * step-before ↦ [d3.curveStepBefore](https://github.com/d3/d3-shape/blob/master/README.md#curveStepBefore) * step-after ↦ [d3.curveStepAfter](https://github.com/d3/d3-shape/blob/master/README.md#curveStepAfter) * basis ↦ [d3.curveBasis](https://github.com/d3/d3-shape/blob/master/README.md#curveBasis) * basis-open ↦ [d3.curveBasisOpen](https://github.com/d3/d3-shape/blob/master/README.md#curveBasisOpen) * basis-closed ↦ [d3.curveBasisClosed](https://github.com/d3/d3-shape/blob/master/README.md#curveBasisClosed) * bundle ↦ [d3.curveBundle](https://github.com/d3/d3-shape/blob/master/README.md#curveBundle) * cardinal ↦ [d3.curveCardinal](https://github.com/d3/d3-shape/blob/master/README.md#curveCardinal) * cardinal-open ↦ [d3.curveCardinalOpen](https://github.com/d3/d3-shape/blob/master/README.md#curveCardinalOpen) * cardinal-closed ↦ [d3.curveCardinalClosed](https://github.com/d3/d3-shape/blob/master/README.md#curveCardinalClosed) * monotone ↦ [d3.curveMonotoneX](https://github.com/d3/d3-shape/blob/master/README.md#curveMonotoneX) But that’s not all! 4.0 now provides parameterized Catmull–Rom splines as proposed by [Yuksel *et al.*](http://www.cemyuksel.com/research/catmullrom_param/). These are available as [d3.curveCatmullRom](https://github.com/d3/d3-shape/blob/master/README.md#curveCatmullRom), [d3.curveCatmullRomClosed](https://github.com/d3/d3-shape/blob/master/README.md#curveCatmullRomClosed) and [d3.curveCatmullRomOpen](https://github.com/d3/d3-shape/blob/master/README.md#curveCatmullRomOpen). catmullRom catmullRomOpen catmullRomClosed Each curve type can define its own named parameters, replacing *line*.tension and *area*.tension. For example, Catmull–Rom splines are parameterized using [*catmullRom*.alpha](https://github.com/d3/d3-shape/blob/master/README.md#curveCatmullRom_alpha) and defaults to 0.5, which corresponds to a centripetal spline that avoids self-intersections and overshoot. For a uniform Catmull–Rom spline instead: ```js var line = d3.line() .curve(d3.curveCatmullRom.alpha(0)); ``` 4.0 fixes the interpretation of the cardinal spline *tension* parameter, which is now specified as [*cardinal*.tension](https://github.com/d3/d3-shape/blob/master/README.md#curveCardinal_tension) and defaults to zero for a uniform Catmull–Rom spline; a tension of one produces a linear curve. The first and last segments of basis and cardinal curves have also been fixed! The undocumented *interpolate*.reverse field has been removed. Curves can define different behavior for toplines and baselines by counting the sequence of [*curve*.lineStart](https://github.com/d3/d3-shape/blob/master/README.md#curve_lineStart) within [*curve*.areaStart](https://github.com/d3/d3-shape/blob/master/README.md#curve_areaStart). See the [d3.curveStep implementation](https://github.com/d3/d3-shape/blob/master/src/curve/step.js) for an example. 4.0 fixes numerous bugs in the monotone curve implementation, and introduces [d3.curveMonotoneY](https://github.com/d3/d3-shape/blob/master/README.md#curveMonotoneY); this is like d3.curveMonotoneX, except it requires that the input points are monotone in *y* rather than *x*, such as for a vertically-oriented line chart. The new [d3.curveNatural](https://github.com/d3/d3-shape/blob/master/README.md#curveNatural) produces a [natural cubic spline](http://mathworld.wolfram.com/CubicSpline.html). The default [β](https://github.com/d3/d3-shape/blob/master/README.md#bundle_beta) for [d3.curveBundle](https://github.com/d3/d3-shape/blob/master/README.md#curveBundle) is now 0.85, rather than 0.7, matching the values used by [Holten](https://www.win.tue.nl/vis1/home/dholten/papers/bundles_infovis.pdf). 4.0 also has a more robust implementation of arc padding; see [*arc*.padAngle](https://github.com/d3/d3-shape/blob/master/README.md#arc_padAngle) and [*arc*.padRadius](https://github.com/d3/d3-shape/blob/master/README.md#arc_padRadius). 4.0 introduces a new symbol type API. Symbol types are passed to [*symbol*.type](https://github.com/d3/d3-shape/blob/master/README.md#symbol_type) in place of strings. The equivalents are: * circle ↦ [d3.symbolCircle](https://github.com/d3/d3-shape/blob/master/README.md#symbolCircle) * cross ↦ [d3.symbolCross](https://github.com/d3/d3-shape/blob/master/README.md#symbolCross) * diamond ↦ [d3.symbolDiamond](https://github.com/d3/d3-shape/blob/master/README.md#symbolDiamond) * square ↦ [d3.symbolSquare](https://github.com/d3/d3-shape/blob/master/README.md#symbolSquare) * triangle-down ↦ REMOVED * triangle-up ↦ [d3.symbolTriangle](https://github.com/d3/d3-shape/blob/master/README.md#symbolTriangle) * ADDED ↦ [d3.symbolStar](https://github.com/d3/d3-shape/blob/master/README.md#symbolStar) * ADDED ↦ [d3.symbolWye](https://github.com/d3/d3-shape/blob/master/README.md#symbolWye) The full set of symbol types is now: Lastly, 4.0 overhauls the stack layout API, replacing d3.layout.stack with [d3.stack](https://github.com/d3/d3-shape/blob/master/README.md#stacks). The stack generator no longer needs an *x*-accessor. In addition, the API has been simplified: the *stack* generator now accepts tabular input, such as this array of objects: ```js var data = [ {month: new Date(2015, 0, 1), apples: 3840, bananas: 1920, cherries: 960, dates: 400}, {month: new Date(2015, 1, 1), apples: 1600, bananas: 1440, cherries: 960, dates: 400}, {month: new Date(2015, 2, 1), apples: 640, bananas: 960, cherries: 640, dates: 400}, {month: new Date(2015, 3, 1), apples: 320, bananas: 480, cherries: 640, dates: 400} ]; ``` To generate the stack layout, first define a stack generator, and then apply it to the data: ```js var stack = d3.stack() .keys(["apples", "bananas", "cherries", "dates"]) .order(d3.stackOrderNone) .offset(d3.stackOffsetNone); var series = stack(data); ``` The resulting array has one element per *series*. Each series has one point per month, and each point has a lower and upper value defining the baseline and topline: ```js [ [[ 0, 3840], [ 0, 1600], [ 0, 640], [ 0, 320]], // apples [[3840, 5760], [1600, 3040], [ 640, 1600], [ 320, 800]], // bananas [[5760, 6720], [3040, 4000], [1600, 2240], [ 800, 1440]], // cherries [[6720, 7120], [4000, 4400], [2240, 2640], [1440, 1840]], // dates ] ``` Each series in then typically passed to an [area generator](https://github.com/d3/d3-shape/blob/master/README.md#areas) to render an area chart, or used to construct rectangles for a bar chart. Stack generators no longer modify the input data, so *stack*.out has been removed. For an introduction to shapes, see [Introducing d3-shape](https://medium.com/@mbostock/introducing-d3-shape-73f8367e6d12). ## [Time Formats (d3-time-format)](https://github.com/d3/d3-time-format/blob/master/README.md) Pursuant to the great namespace flattening, the format constructors have new names: * d3.time.format ↦ [d3.timeFormat](https://github.com/d3/d3-time-format/blob/master/README.md#timeFormat) * d3.time.format.utc ↦ [d3.utcFormat](https://github.com/d3/d3-time-format/blob/master/README.md#utcFormat) * d3.time.format.iso ↦ [d3.isoFormat](https://github.com/d3/d3-time-format/blob/master/README.md#isoFormat) The *format*.parse method has also been removed in favor of separate [d3.timeParse](https://github.com/d3/d3-time-format/blob/master/README.md#timeParse), [d3.utcParse](https://github.com/d3/d3-time-format/blob/master/README.md#utcParse) and [d3.isoParse](https://github.com/d3/d3-time-format/blob/master/README.md#isoParse) parser constructors. Thus, this code in 3.x: ```js var parseTime = d3.time.format("%c").parse; ``` Can be rewritten in 4.0 as: ```js var parseTime = d3.timeParse("%c"); ``` The multi-scale time format d3.time.format.multi has been replaced by [d3.scaleTime](https://github.com/d3/d3-scale/blob/master/README.md#scaleTime)’s [tick format](https://github.com/d3/d3-scale/blob/master/README.md#time_tickFormat). Time formats now coerce inputs to dates, and time parsers coerce inputs to strings. The `%Z` directive now allows more flexible parsing of time zone offsets, such as `-0700`, `-07:00`, `-07`, and `Z`. The `%p` directive is now parsed correctly when the locale’s period name is longer than two characters (*e.g.*, “a.m.”). The default U.S. English locale now uses 12-hour time and a more concise representation of the date. This aligns with local convention and is consistent with [*date*.toLocaleString](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString) in Chrome, Firefox and Node: ```js var now = new Date; d3.timeFormat("%c")(new Date); // "6/23/2016, 2:01:33 PM" d3.timeFormat("%x")(new Date); // "6/23/2016" d3.timeFormat("%X")(new Date); // "2:01:38 PM" ``` You can now set the default locale using [d3.timeFormatDefaultLocale](https://github.com/d3/d3-time-format/blob/master/README.md#timeFormatDefaultLocale)! The locales are published as [JSON](https://github.com/d3/d3-request/blob/master/README.md#json) to [npm](https://unpkg.com/d3-time-format/locale/). The performance of time formatting and parsing has been improved, and the UTC formatter and parser have a cleaner implementation (that avoids temporarily overriding the Date global). ## [Time Intervals (d3-time)](https://github.com/d3/d3-time/blob/master/README.md) Pursuant to the great namespace flattening, the local time intervals have been renamed: * ADDED ↦ [d3.timeMillisecond](https://github.com/d3/d3-time/blob/master/README.md#timeMillisecond) * d3.time.second ↦ [d3.timeSecond](https://github.com/d3/d3-time/blob/master/README.md#timeSecond) * d3.time.minute ↦ [d3.timeMinute](https://github.com/d3/d3-time/blob/master/README.md#timeMinute) * d3.time.hour ↦ [d3.timeHour](https://github.com/d3/d3-time/blob/master/README.md#timeHour) * d3.time.day ↦ [d3.timeDay](https://github.com/d3/d3-time/blob/master/README.md#timeDay) * d3.time.sunday ↦ [d3.timeSunday](https://github.com/d3/d3-time/blob/master/README.md#timeSunday) * d3.time.monday ↦ [d3.timeMonday](https://github.com/d3/d3-time/blob/master/README.md#timeMonday) * d3.time.tuesday ↦ [d3.timeTuesday](https://github.com/d3/d3-time/blob/master/README.md#timeTuesday) * d3.time.wednesday ↦ [d3.timeWednesday](https://github.com/d3/d3-time/blob/master/README.md#timeWednesday) * d3.time.thursday ↦ [d3.timeThursday](https://github.com/d3/d3-time/blob/master/README.md#timeThursday) * d3.time.friday ↦ [d3.timeFriday](https://github.com/d3/d3-time/blob/master/README.md#timeFriday) * d3.time.saturday ↦ [d3.timeSaturday](https://github.com/d3/d3-time/blob/master/README.md#timeSaturday) * d3.time.week ↦ [d3.timeWeek](https://github.com/d3/d3-time/blob/master/README.md#timeWeek) * d3.time.month ↦ [d3.timeMonth](https://github.com/d3/d3-time/blob/master/README.md#timeMonth) * d3.time.year ↦ [d3.timeYear](https://github.com/d3/d3-time/blob/master/README.md#timeYear) The UTC time intervals have likewise been renamed: * ADDED ↦ [d3.utcMillisecond](https://github.com/d3/d3-time/blob/master/README.md#utcMillisecond) * d3.time.second.utc ↦ [d3.utcSecond](https://github.com/d3/d3-time/blob/master/README.md#utcSecond) * d3.time.minute.utc ↦ [d3.utcMinute](https://github.com/d3/d3-time/blob/master/README.md#utcMinute) * d3.time.hour.utc ↦ [d3.utcHour](https://github.com/d3/d3-time/blob/master/README.md#utcHour) * d3.time.day.utc ↦ [d3.utcDay](https://github.com/d3/d3-time/blob/master/README.md#utcDay) * d3.time.sunday.utc ↦ [d3.utcSunday](https://github.com/d3/d3-time/blob/master/README.md#utcSunday) * d3.time.monday.utc ↦ [d3.utcMonday](https://github.com/d3/d3-time/blob/master/README.md#utcMonday) * d3.time.tuesday.utc ↦ [d3.utcTuesday](https://github.com/d3/d3-time/blob/master/README.md#utcTuesday) * d3.time.wednesday.utc ↦ [d3.utcWednesday](https://github.com/d3/d3-time/blob/master/README.md#utcWednesday) * d3.time.thursday.utc ↦ [d3.utcThursday](https://github.com/d3/d3-time/blob/master/README.md#utcThursday) * d3.time.friday.utc ↦ [d3.utcFriday](https://github.com/d3/d3-time/blob/master/README.md#utcFriday) * d3.time.saturday.utc ↦ [d3.utcSaturday](https://github.com/d3/d3-time/blob/master/README.md#utcSaturday) * d3.time.week.utc ↦ [d3.utcWeek](https://github.com/d3/d3-time/blob/master/README.md#utcWeek) * d3.time.month.utc ↦ [d3.utcMonth](https://github.com/d3/d3-time/blob/master/README.md#utcMonth) * d3.time.year.utc ↦ [d3.utcYear](https://github.com/d3/d3-time/blob/master/README.md#utcYear) The local time range aliases have been renamed: * d3.time.seconds ↦ [d3.timeSeconds](https://github.com/d3/d3-time/blob/master/README.md#timeSeconds) * d3.time.minutes ↦ [d3.timeMinutes](https://github.com/d3/d3-time/blob/master/README.md#timeMinutes) * d3.time.hours ↦ [d3.timeHours](https://github.com/d3/d3-time/blob/master/README.md#timeHours) * d3.time.days ↦ [d3.timeDays](https://github.com/d3/d3-time/blob/master/README.md#timeDays) * d3.time.sundays ↦ [d3.timeSundays](https://github.com/d3/d3-time/blob/master/README.md#timeSundays) * d3.time.mondays ↦ [d3.timeMondays](https://github.com/d3/d3-time/blob/master/README.md#timeMondays) * d3.time.tuesdays ↦ [d3.timeTuesdays](https://github.com/d3/d3-time/blob/master/README.md#timeTuesdays) * d3.time.wednesdays ↦ [d3.timeWednesdays](https://github.com/d3/d3-time/blob/master/README.md#timeWednesdays) * d3.time.thursdays ↦ [d3.timeThursdays](https://github.com/d3/d3-time/blob/master/README.md#timeThursdays) * d3.time.fridays ↦ [d3.timeFridays](https://github.com/d3/d3-time/blob/master/README.md#timeFridays) * d3.time.saturdays ↦ [d3.timeSaturdays](https://github.com/d3/d3-time/blob/master/README.md#timeSaturdays) * d3.time.weeks ↦ [d3.timeWeeks](https://github.com/d3/d3-time/blob/master/README.md#timeWeeks) * d3.time.months ↦ [d3.timeMonths](https://github.com/d3/d3-time/blob/master/README.md#timeMonths) * d3.time.years ↦ [d3.timeYears](https://github.com/d3/d3-time/blob/master/README.md#timeYears) The UTC time range aliases have been renamed: * d3.time.seconds.utc ↦ [d3.utcSeconds](https://github.com/d3/d3-time/blob/master/README.md#utcSeconds) * d3.time.minutes.utc ↦ [d3.utcMinutes](https://github.com/d3/d3-time/blob/master/README.md#utcMinutes) * d3.time.hours.utc ↦ [d3.utcHours](https://github.com/d3/d3-time/blob/master/README.md#utcHours) * d3.time.days.utc ↦ [d3.utcDays](https://github.com/d3/d3-time/blob/master/README.md#utcDays) * d3.time.sundays.utc ↦ [d3.utcSundays](https://github.com/d3/d3-time/blob/master/README.md#utcSundays) * d3.time.mondays.utc ↦ [d3.utcMondays](https://github.com/d3/d3-time/blob/master/README.md#utcMondays) * d3.time.tuesdays.utc ↦ [d3.utcTuesdays](https://github.com/d3/d3-time/blob/master/README.md#utcTuesdays) * d3.time.wednesdays.utc ↦ [d3.utcWednesdays](https://github.com/d3/d3-time/blob/master/README.md#utcWednesdays) * d3.time.thursdays.utc ↦ [d3.utcThursdays](https://github.com/d3/d3-time/blob/master/README.md#utcThursdays) * d3.time.fridays.utc ↦ [d3.utcFridays](https://github.com/d3/d3-time/blob/master/README.md#utcFridays) * d3.time.saturdays.utc ↦ [d3.utcSaturdays](https://github.com/d3/d3-time/blob/master/README.md#utcSaturdays) * d3.time.weeks.utc ↦ [d3.utcWeeks](https://github.com/d3/d3-time/blob/master/README.md#utcWeeks) * d3.time.months.utc ↦ [d3.utcMonths](https://github.com/d3/d3-time/blob/master/README.md#utcMonths) * d3.time.years.utc ↦ [d3.utcYears](https://github.com/d3/d3-time/blob/master/README.md#utcYears) The behavior of [*interval*.range](https://github.com/d3/d3-time/blob/master/README.md#interval_range) (and the convenience aliases such as [d3.timeDays](https://github.com/d3/d3-time/blob/master/README.md#timeDays)) has been changed when *step* is greater than one. Rather than filtering the returned dates using the field number, *interval*.range now behaves like [d3.range](https://github.com/d3/d3-array/blob/master/README.md#range): it simply skips, returning every *step*th date. For example, the following code in 3.x returns only odd days of the month: ```js d3.time.days(new Date(2016, 4, 28), new Date(2016, 5, 5), 2); // [Sun May 29 2016 00:00:00 GMT-0700 (PDT), // Tue May 31 2016 00:00:00 GMT-0700 (PDT), // Wed Jun 01 2016 00:00:00 GMT-0700 (PDT), // Fri Jun 03 2016 00:00:00 GMT-0700 (PDT)] ``` Note the returned array of dates does not start on the *start* date because May 28 is even. Also note that May 31 and June 1 are one day apart, not two! The behavior of d3.timeDays in 4.0 is probably closer to what you expect: ```js d3.timeDays(new Date(2016, 4, 28), new Date(2016, 5, 5), 2); // [Sat May 28 2016 00:00:00 GMT-0700 (PDT), // Mon May 30 2016 00:00:00 GMT-0700 (PDT), // Wed Jun 01 2016 00:00:00 GMT-0700 (PDT), // Fri Jun 03 2016 00:00:00 GMT-0700 (PDT)] ``` If you want a filtered view of a time interval (say to guarantee that two overlapping ranges are consistent, such as when generating [time scale ticks](https://github.com/d3/d3-scale/blob/master/README.md#time_ticks)), you can use the new [*interval*.every](https://github.com/d3/d3-time/blob/master/README.md#interval_every) method or its more general cousin [*interval*.filter](https://github.com/d3/d3-time/blob/master/README.md#interval_filter): ```js d3.timeDay.every(2).range(new Date(2016, 4, 28), new Date(2016, 5, 5)); // [Sun May 29 2016 00:00:00 GMT-0700 (PDT), // Tue May 31 2016 00:00:00 GMT-0700 (PDT), // Wed Jun 01 2016 00:00:00 GMT-0700 (PDT), // Fri Jun 03 2016 00:00:00 GMT-0700 (PDT)] ``` Time intervals now expose an [*interval*.count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) method for counting the number of interval boundaries after a *start* date and before or equal to an *end* date. This replaces d3.time.dayOfYear and related methods in 3.x. For example, this code in 3.x: ```js var now = new Date; d3.time.dayOfYear(now); // 165 ``` Can be rewritten in 4.0 as: ```js var now = new Date; d3.timeDay.count(d3.timeYear(now), now); // 165 ``` Likewise, in place of 3.x’s d3.time.weekOfYear, in 4.0 you would say: ```js d3.timeWeek.count(d3.timeYear(now), now); // 24 ``` The new *interval*.count is of course more general. For example, you can use it to compute hour-of-week for a heatmap: ```js d3.timeHour.count(d3.timeWeek(now), now); // 64 ``` Here are all the equivalences from 3.x to 4.0: * d3.time.dayOfYear ↦ [d3.timeDay](https://github.com/d3/d3-time/blob/master/README.md#timeDay).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.sundayOfYear ↦ [d3.timeSunday](https://github.com/d3/d3-time/blob/master/README.md#timeSunday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.mondayOfYear ↦ [d3.timeMonday](https://github.com/d3/d3-time/blob/master/README.md#timeMonday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.tuesdayOfYear ↦ [d3.timeTuesday](https://github.com/d3/d3-time/blob/master/README.md#timeTuesday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.wednesdayOfYear ↦ [d3.timeWednesday](https://github.com/d3/d3-time/blob/master/README.md#timeWednesday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.thursdayOfYear ↦ [d3.timeThursday](https://github.com/d3/d3-time/blob/master/README.md#timeThursday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.fridayOfYear ↦ [d3.timeFriday](https://github.com/d3/d3-time/blob/master/README.md#timeFriday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.saturdayOfYear ↦ [d3.timeSaturday](https://github.com/d3/d3-time/blob/master/README.md#timeSaturday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.weekOfYear ↦ [d3.timeWeek](https://github.com/d3/d3-time/blob/master/README.md#timeWeek).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.dayOfYear.utc ↦ [d3.utcDay](https://github.com/d3/d3-time/blob/master/README.md#utcDay).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.sundayOfYear.utc ↦ [d3.utcSunday](https://github.com/d3/d3-time/blob/master/README.md#utcSunday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.mondayOfYear.utc ↦ [d3.utcMonday](https://github.com/d3/d3-time/blob/master/README.md#utcMonday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.tuesdayOfYear.utc ↦ [d3.utcTuesday](https://github.com/d3/d3-time/blob/master/README.md#utcTuesday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.wednesdayOfYear.utc ↦ [d3.utcWednesday](https://github.com/d3/d3-time/blob/master/README.md#utcWednesday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.thursdayOfYear.utc ↦ [d3.utcThursday](https://github.com/d3/d3-time/blob/master/README.md#utcThursday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.fridayOfYear.utc ↦ [d3.utcFriday](https://github.com/d3/d3-time/blob/master/README.md#utcFriday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.saturdayOfYear.utc ↦ [d3.utcSaturday](https://github.com/d3/d3-time/blob/master/README.md#utcSaturday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.weekOfYear.utc ↦ [d3.utcWeek](https://github.com/d3/d3-time/blob/master/README.md#utcWeek).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) D3 4.0 now also lets you define custom time intervals using [d3.timeInterval](https://github.com/d3/d3-time/blob/master/README.md#timeInterval). The [d3.timeYear](https://github.com/d3/d3-time/blob/master/README.md#timeYear), [d3.utcYear](https://github.com/d3/d3-time/blob/master/README.md#utcYear), [d3.timeMillisecond](https://github.com/d3/d3-time/blob/master/README.md#timeMillisecond) and [d3.utcMillisecond](https://github.com/d3/d3-time/blob/master/README.md#utcMillisecond) intervals have optimized implementations of [*interval*.every](https://github.com/d3/d3-time/blob/master/README.md#interval_every), which is necessary to generate time ticks for very large or very small domains efficiently. More generally, the performance of time intervals has been improved, and time intervals now do a better job with respect to daylight savings in various locales. ## [Timers (d3-timer)](https://github.com/d3/d3-timer/blob/master/README.md) In D3 3.x, the only way to stop a timer was for its callback to return true. For example, this timer stops after one second: ```js d3.timer(function(elapsed) { console.log(elapsed); return elapsed >= 1000; }); ``` In 4.0, use [*timer*.stop](https://github.com/d3/d3-timer/blob/master/README.md#timer_stop) instead: ```js var t = d3.timer(function(elapsed) { console.log(elapsed); if (elapsed >= 1000) { t.stop(); } }); ``` The primary benefit of *timer*.stop is that timers are not required to self-terminate: they can be stopped externally, allowing for the immediate and synchronous disposal of associated resources, and the separation of concerns. The above is equivalent to: ```js var t = d3.timer(function(elapsed) { console.log(elapsed); }); d3.timeout(function() { t.stop(); }, 1000); ``` This improvement extends to [d3-transition](#transitions-d3-transition): now when a transition is interrupted, its resources are immediately freed rather than having to wait for transition to start. 4.0 also introduces a new [*timer*.restart](https://github.com/d3/d3-timer/blob/master/README.md#timer_restart) method for restarting timers, for replacing the callback of a running timer, or for changing its delay or reference time. Unlike *timer*.stop followed by [d3.timer](https://github.com/d3/d3-timer/blob/master/README.md#timer), *timer*.restart maintains the invocation priority of an existing timer: it guarantees that the order of invocation of active timers remains the same. The d3.timer.flush method has been renamed to [d3.timerFlush](https://github.com/d3/d3-timer/blob/master/README.md#timerFlush). Some usage patterns in D3 3.x could cause the browser to hang when a background page returned to the foreground. For example, the following code schedules a transition every second: ```js setInterval(function() { d3.selectAll("div").transition().call(someAnimation); // BAD }, 1000); ``` If such code runs in the background for hours, thousands of queued transitions will try to run simultaneously when the page is foregrounded. D3 4.0 avoids this hang by freezing time in the background: when a page is in the background, time does not advance, and so no queue of timers accumulates to run when the page returns to the foreground. Use d3.timer instead of transitions to schedule a long-running animation, or use [d3.timeout](https://github.com/d3/d3-timer/blob/master/README.md#timeout) and [d3.interval](https://github.com/d3/d3-timer/blob/master/README.md#interval) in place of setTimeout and setInterval to prevent transitions from being queued in the background: ```js d3.interval(function() { d3.selectAll("div").transition().call(someAnimation); // GOOD }, 1000); ``` By freezing time in the background, timers are effectively “unaware” of being backgrounded. It’s like nothing happened! 4.0 also now uses high-precision time ([performance.now](https://developer.mozilla.org/en-US/docs/Web/API/Performance/now)) where available; the current time is available as [d3.now](https://github.com/d3/d3-timer/blob/master/README.md#now). ## [Transitions (d3-transition)](https://github.com/d3/d3-transition/blob/master/README.md) The [*selection*.transition](https://github.com/d3/d3-transition/blob/master/README.md#selection_transition) method now takes an optional *transition* instance which can be used to synchronize a new transition with an existing transition. (This change is discussed further in [What Makes Software Good?](https://medium.com/@mbostock/what-makes-software-good-943557f8a488)) For example: ```js var t = d3.transition() .duration(750) .ease(d3.easeLinear); d3.selectAll(".apple").transition(t) .style("fill", "red"); d3.selectAll(".orange").transition(t) .style("fill", "orange"); ``` Transitions created this way inherit timing from the closest ancestor element, and thus are synchronized even when the referenced *transition* has variable timing such as a staggered delay. This method replaces the deeply magical behavior of *transition*.each in 3.x; in 4.0, [*transition*.each](https://github.com/d3/d3-transition/blob/master/README.md#transition_each) is identical to [*selection*.each](https://github.com/d3/d3-selection/blob/master/README.md#selection_each). Use the new [*transition*.on](https://github.com/d3/d3-transition/blob/master/README.md#transition_on) method to listen to transition events. The meaning of [*transition*.delay](https://github.com/d3/d3-transition/blob/master/README.md#transition_delay) has changed for chained transitions created by [*transition*.transition](https://github.com/d3/d3-transition/blob/master/README.md#transition_transition). The specified delay is now relative to the *previous* transition in the chain, rather than the *first* transition in the chain; this makes it easier to insert interstitial pauses. For example: ```js d3.selectAll(".apple") .transition() // First fade to green. .style("fill", "green") .transition() // Then red. .style("fill", "red") .transition() // Wait one second. Then brown, and remove. .delay(1000) .style("fill", "brown") .remove(); ``` Time is now frozen in the background; see [d3-timer](#timers-d3-timer) for more information. While it was previously the case that transitions did not run in the background, now they pick up where they left off when the page returns to the foreground. This avoids page hangs by not scheduling an unbounded number of transitions in the background. If you want to schedule an infinitely-repeating transition, use transition events, or use [d3.timeout](https://github.com/d3/d3-timer/blob/master/README.md#timeout) and [d3.interval](https://github.com/d3/d3-timer/blob/master/README.md#interval) in place of [setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout) and [setInterval](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval). The [*selection*.interrupt](https://github.com/d3/d3-transition/blob/master/README.md#selection_interrupt) method now cancels all scheduled transitions on the selected elements, in addition to interrupting any active transition. When transitions are interrupted, any resources associated with the transition are now released immediately, rather than waiting until the transition starts, improving performance. (See also [*timer*.stop](https://github.com/d3/d3-timer/blob/master/README.md#timer_stop).) The new [d3.interrupt](https://github.com/d3/d3-transition/blob/master/README.md#interrupt) method is an alternative to [*selection*.interrupt](https://github.com/d3/d3-transition/blob/master/README.md#selection_interrupt) for quickly interrupting a single node. The new [d3.active](https://github.com/d3/d3-transition/blob/master/README.md#active) method allows you to select the currently-active transition on a given *node*, if any. This is useful for modifying in-progress transitions and for scheduling infinitely-repeating transitions. For example, this transition continuously oscillates between red and blue: ```js d3.select("circle") .transition() .on("start", function repeat() { d3.active(this) .style("fill", "red") .transition() .style("fill", "blue") .transition() .on("start", repeat); }); ``` The [life cycle of a transition](https://github.com/d3/d3-transition/blob/master/README.md#the-life-of-a-transition) is now more formally defined and enforced. For example, attempting to change the duration of a running transition now throws an error rather than silently failing. The [*transition*.remove](https://github.com/d3/d3-transition/blob/master/README.md#transition_remove) method has been fixed if multiple transition names are in use: the element is only removed if it has no scheduled transitions, regardless of name. The [*transition*.ease](https://github.com/d3/d3-transition/blob/master/README.md#transition_ease) method now always takes an [easing function](#easings-d3-ease), not a string. When a transition ends, the tweens are invoked one last time with *t* equal to exactly 1, regardless of the associated easing function. As with [selections](#selections-d3-selection) in 4.0, all transition callback functions now receive the standard arguments: the element’s datum (*d*), the element’s index (*i*), and the element’s group (*nodes*), with *this* as the element. This notably affects [*transition*.attrTween](https://github.com/d3/d3-transition/blob/master/README.md#transition_attrTween) and [*transition*.styleTween](https://github.com/d3/d3-transition/blob/master/README.md#transition_styleTween), which no longer pass the *tween* function the current attribute or style value as the third argument. The *transition*.attrTween and *transition*.styleTween methods can now be called in getter modes for debugging or to share tween definitions between transitions. Homogenous transitions are now optimized! If all elements in a transition share the same tween, interpolator, or event listeners, this state is now shared across the transition rather than separately allocated for each element. 4.0 also uses an optimized default interpolator in place of [d3.interpolate](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolate) for [*transition*.attr](https://github.com/d3/d3-transition/blob/master/README.md#transition_attr) and [*transition*.style](https://github.com/d3/d3-transition/blob/master/README.md#transition_style). And transitions can now interpolate both [CSS](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateTransformCss) and [SVG](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateTransformSvg) transforms. For reusable components that support transitions, such as [axes](#axes-d3-axis), a new [*transition*.selection](https://github.com/d3/d3-transition/blob/master/README.md#transition_selection) method returns the [selection](#selections-d3-selection) that corresponds to a given transition. There is also a new [*transition*.merge](https://github.com/d3/d3-transition/blob/master/README.md#transition_merge) method that is equivalent to [*selection*.merge](https://github.com/d3/d3-selection/blob/master/README.md#selection_merge). For the sake of parsimony, the multi-value map methods have been extracted to [d3-selection-multi](https://github.com/d3/d3-selection-multi) and are no longer part of the default bundle. The multi-value map methods have also been renamed to plural form to reduce overload: [*transition*.attrs](https://github.com/d3/d3-selection-multi/blob/master/README.md#transition_attrs) and [*transition*.styles](https://github.com/d3/d3-selection-multi/blob/master/README.md#transition_styles). ## [Voronoi Diagrams (d3-voronoi)](https://github.com/d3/d3-voronoi/blob/master/README.md) The d3.geom.voronoi method has been renamed to [d3.voronoi](https://github.com/d3/d3-voronoi/blob/master/README.md#voronoi), and the *voronoi*.clipExtent method has been renamed to [*voronoi*.extent](https://github.com/d3/d3-voronoi/blob/master/README.md#voronoi_extent). The undocumented *polygon*.point property in 3.x, which is the element in the input *data* corresponding to the polygon, has been renamed to *polygon*.data. Calling [*voronoi*](https://github.com/d3/d3-voronoi/blob/master/README.md#_voronoi) now returns the full [Voronoi diagram](https://github.com/d3/d3-voronoi/blob/master/README.md#voronoi-diagrams), which includes topological information: each Voronoi edge exposes *edge*.left and *edge*.right specifying the sites on either side of the edge, and each Voronoi cell is defined as an array of these edges and a corresponding site. The Voronoi diagram can be used to efficiently compute both the Voronoi and Delaunay tessellations for a set of points: [*diagram*.polygons](https://github.com/d3/d3-voronoi/blob/master/README.md#diagram_polygons), [*diagram*.links](https://github.com/d3/d3-voronoi/blob/master/README.md#diagram_links), and [*diagram*.triangles](https://github.com/d3/d3-voronoi/blob/master/README.md#diagram_triangles). The new topology is also useful in conjunction with TopoJSON; see the [Voronoi topology example](https://bl.ocks.org/mbostock/cd52a201d7694eb9d890). The [*voronoi*.polygons](https://github.com/d3/d3-voronoi/blob/master/README.md#voronoi_polygons) and [*diagram*.polygons](https://github.com/d3/d3-voronoi/blob/master/README.md#diagram_polygons) now require an [extent](https://github.com/d3/d3-voronoi/blob/master/README.md#voronoi_extent); there is no longer an implicit extent of ±1e6. The [*voronoi*.links](https://github.com/d3/d3-voronoi/blob/master/README.md#voronoi_links), [*voronoi*.triangles](https://github.com/d3/d3-voronoi/blob/master/README.md#voronoi_triangles), [*diagram*.links](https://github.com/d3/d3-voronoi/blob/master/README.md#diagram_links) and [*diagram*.triangles](https://github.com/d3/d3-voronoi/blob/master/README.md#diagram_triangles) are now affected by the clip extent: as the Delaunay is computed as the dual of the Voronoi, two sites are only linked if the clipped cells are touching. To compute the Delaunay triangulation without respect to clipping, set the extent to null. The Voronoi generator finally has well-defined behavior for coincident vertices: the first of a set of coincident points has a defined cell, while the subsequent duplicate points have null cells. The returned array of polygons is sparse, so by using *array*.forEach or *array*.map, you can easily skip undefined cells. The Voronoi generator also now correctly handles the case where no cell edges intersect the extent. ## [Zooming (d3-zoom)](https://github.com/d3/d3-zoom/blob/master/README.md) The zoom behavior d3.behavior.zoom has been renamed to d3.zoom. Zoom behaviors no longer store the active zoom transform (*i.e.*, the visible region; the scale and translate) internally. The zoom transform is now stored on any elements to which the zoom behavior has been applied. The zoom transform is available as *event*.transform within a zoom event or by calling [d3.zoomTransform](https://github.com/d3/d3-zoom/blob/master/README.md#zoomTransform) on a given *element*. To zoom programmatically, use [*zoom*.transform](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_transform) with a given [selection](#selections-d3-selection) or [transition](#transitions-d3-transition); see the [zoom transitions example](https://bl.ocks.org/mbostock/b783fbb2e673561d214e09c7fb5cedee). The *zoom*.event method has been removed. To make programmatic zooming easier, there are several new convenience methods on top of *zoom*.transform: [*zoom*.translateBy](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_translateBy), [*zoom*.scaleBy](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_scaleBy) and [*zoom*.scaleTo](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_scaleTo). There is also a new API for describing [zoom transforms](https://github.com/d3/d3-zoom/blob/master/README.md#zoom-transforms). Zoom behaviors are no longer dependent on [scales](#scales-d3-scale), but you can use [*transform*.rescaleX](https://github.com/d3/d3-zoom/blob/master/README.md#transform_rescaleX), [*transform*.rescaleY](https://github.com/d3/d3-zoom/blob/master/README.md#transform_rescaleY), [*transform*.invertX](https://github.com/d3/d3-zoom/blob/master/README.md#transform_invertX) or [*transform*.invertY](https://github.com/d3/d3-zoom/blob/master/README.md#transform_invertY) to transform a scale’s domain. 3.x’s *event*.scale is replaced with *event*.transform.k, and *event*.translate is replaced with *event*.transform.x and *event*.transform.y. The *zoom*.center method has been removed in favor of programmatic zooming. The zoom behavior finally supports simple constraints on panning! The new [*zoom*.translateExtent](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_translateExtent) lets you define the viewable extent of the world: the currently-visible extent (the extent of the viewport, as defined by [*zoom*.extent](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_extent)) is always contained within the translate extent. The *zoom*.size method has been replaced by *zoom*.extent, and the default behavior is now smarter: it defaults to the extent of the zoom behavior’s owner element, rather than being hardcoded to 960×500. (This also improves the default path chosen during smooth zoom transitions!) The zoom behavior’s interaction has also improved. It now correctly handles concurrent wheeling and dragging, as well as concurrent touching and mousing. The zoom behavior now ignores wheel events at the limits of its scale extent, allowing you to scroll past a zoomable area. The *zoomstart* and *zoomend* events have been renamed *start* and *end*. By default, zoom behaviors now ignore right-clicks intended for the context menu; use [*zoom*.filter](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_filter) to control which events are ignored. The zoom behavior also ignores emulated mouse events on iOS. The zoom behavior now consumes handled events, making it easier to combine with other interactive behaviors such as [dragging](#dragging-d3-drag). ================================================ FILE: inst/www/d3/v6/LICENSE ================================================ Copyright 2010-2020 Mike Bostock All rights reserved. Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: * Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. * Neither the name of the author nor the names of contributors may be used to endorse or promote products derived from this software without specific prior written permission. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. ================================================ FILE: inst/www/d3/v6/README.md ================================================ # D3: Data-Driven Documents **D3** (or **D3.js**) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, Canvas and HTML. D3 combines powerful visualization and interaction techniques with a data-driven approach to DOM manipulation, giving you the full capabilities of modern browsers and the freedom to design the right visual interface for your data. ## Resources * [Introduction](https://observablehq.com/@d3/learn-d3) * [API Reference](https://github.com/d3/d3/blob/master/API.md) * [Releases](https://github.com/d3/d3/releases) * [Examples](https://observablehq.com/@d3/gallery) * [Wiki](https://github.com/d3/d3/wiki) ## Installing If you use npm, `npm install d3`. Otherwise, download the [latest release](https://github.com/d3/d3/releases/latest). The released bundle supports anonymous AMD, CommonJS, and vanilla environments. You can load directly from [d3js.org](https://d3js.org), [CDNJS](https://cdnjs.com/libraries/d3), or [unpkg](https://unpkg.com/d3/). For example: ```html ``` For the minified version: ```html ``` You can also use the standalone D3 microlibraries. For example, [d3-selection](https://github.com/d3/d3-selection): ```html ``` D3 is written using [ES2015 modules](http://www.2ality.com/2014/09/es6-modules-final.html). Create a [custom bundle using Rollup](https://bl.ocks.org/mbostock/bb09af4c39c79cffcde4), Webpack, or your preferred bundler. To import D3 into an ES2015 application, either import specific symbols from specific D3 modules: ```js import {scaleLinear} from "d3-scale"; ``` Or import everything into a namespace (here, `d3`): ```js import * as d3 from "d3"; ``` In Node: ```js const d3 = require("d3"); ``` You can also require individual modules and combine them into a `d3` object using [Object.assign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign): ```js const d3 = Object.assign({}, require("d3-format"), require("d3-geo"), require("d3-geo-projection")); ``` ================================================ FILE: inst/www/d3/v7/API.md ================================================ # D3 API Reference D3 is a [collection of modules](https://github.com/d3) that are designed to work together; you can use the modules independently, or you can use them together as part of the default build. The source and documentation for each module is available in its repository. Follow the links below to learn more. For changes between major versions, see [CHANGES](https://github.com/d3/d3/blob/master/CHANGES.md); see also the [release notes](https://github.com/d3/d3/releases) and the [3.x reference](https://github.com/d3/d3-3.x-api-reference/blob/master/API-Reference.md). * [Arrays](#arrays-d3-array) ([Statistics](#statistics), [Search](#search), [Iterables](#iterables), [Sets](#sets), [Transformations](#transformations), [Histograms](#histograms), [Interning](#interning)) * [Axes](#axes-d3-axis) * [Brushes](#brushes-d3-brush) * [Chords](#chords-d3-chord) * [Colors](#colors-d3-color) * [Color Schemes](#color-schemes-d3-scale-chromatic) * [Contours](#contours-d3-contour) * [Voronoi Diagrams](#voronoi-diagrams-d3-delaunay) * [Dispatches](#dispatches-d3-dispatch) * [Dragging](#dragging-d3-drag) * [Delimiter-Separated Values](#delimiter-separated-values-d3-dsv) * [Easings](#easings-d3-ease) * [Fetches](#fetches-d3-fetch) * [Forces](#forces-d3-force) * [Number Formats](#number-formats-d3-format) * [Geographies](#geographies-d3-geo) ([Paths](#paths), [Projections](#projections), [Spherical Math](#spherical-math), [Spherical Shapes](#spherical-shapes), [Streams](#streams), [Transforms](#transforms)) * [Hierarchies](#hierarchies-d3-hierarchy) * [Interpolators](#interpolators-d3-interpolate) * [Paths](#paths-d3-path) * [Polygons](#polygons-d3-polygon) * [Quadtrees](#quadtrees-d3-quadtree) * [Random Numbers](#random-numbers-d3-random) * [Scales](#scales-d3-scale) ([Continuous](#continuous-scales), [Sequential](#sequential-scales), [Diverging](#diverging-scales), [Quantize](#quantize-scales), [Ordinal](#ordinal-scales)) * [Selections](#selections-d3-selection) ([Selecting](#selecting-elements), [Modifying](#modifying-elements), [Data](#joining-data), [Events](#handling-events), [Control](#control-flow), [Local Variables](#local-variables), [Namespaces](#namespaces)) * [Shapes](#shapes-d3-shape) ([Arcs](#arcs), [Pies](#pies), [Lines](#lines), [Areas](#areas), [Curves](#curves), [Links](#links), [Symbols](#symbols), [Stacks](#stacks)) * [Time Formats](#time-formats-d3-time-format) * [Time Intervals](#time-intervals-d3-time) * [Timers](#timers-d3-timer) * [Transitions](#transitions-d3-transition) * [Zooming](#zooming-d3-zoom) D3 uses [semantic versioning](http://semver.org/). The current version is exposed as d3.version. ## [Arrays (d3-array)](https://github.com/d3/d3-array/tree/v3.2.4) Array manipulation, ordering, searching, summarizing, etc. ### [Statistics](https://github.com/d3/d3-array/blob/v3.2.4/README.md#statistics) Methods for computing basic summary statistics. * [d3.min](https://github.com/d3/d3-array/blob/v3.2.4/README.md#min) - compute the minimum value in an iterable. * [d3.minIndex](https://github.com/d3/d3-array/blob/v3.2.4/README.md#minIndex) - compute the index of the minimum value in an iterable. * [d3.max](https://github.com/d3/d3-array/blob/v3.2.4/README.md#max) - compute the maximum value in an iterable. * [d3.maxIndex](https://github.com/d3/d3-array/blob/v3.2.4/README.md#maxIndex) - compute the index of the maximum value in an iterable. * [d3.extent](https://github.com/d3/d3-array/blob/v3.2.4/README.md#extent) - compute the minimum and maximum value in an iterable. * [d3.sum](https://github.com/d3/d3-array/blob/v3.2.4/README.md#sum) - compute the sum of an iterable of numbers. * [d3.mean](https://github.com/d3/d3-array/blob/v3.2.4/README.md#mean) - compute the arithmetic mean of an iterable of numbers. * [d3.median](https://github.com/d3/d3-array/blob/v3.2.4/README.md#median) - compute the median of an iterable of numbers (the 0.5-quantile). * [d3.medianIndex](https://github.com/d3/d3-array/blob/v3.2.4/README.md#median) - compute the median index of an iterable of numbers (the 0.5-quantile). * [d3.mode](https://github.com/d3/d3-array/blob/v3.2.4/README.md#mode) - compute the mode (the most common value) of an iterable of numbers. * [d3.cumsum](https://github.com/d3/d3-array/blob/v3.2.4/README.md#cumsum) - compute the cumulative sum of an iterable. * [d3.rank](https://github.com/d3/d3-array/blob/v3.2.4/README.md#rank) - compute the rank order of an iterable. * [d3.quantile](https://github.com/d3/d3-array/blob/v3.2.4/README.md#quantile) - compute a quantile for an iterable of numbers. * [d3.quantileIndex](https://github.com/d3/d3-array/blob/v3.2.4/README.md#quantileIndex) - compute a quantile index for an iterable of numbers. * [d3.quantileSorted](https://github.com/d3/d3-array/blob/v3.2.4/README.md#quantileSorted) - compute a quantile for a sorted array of numbers. * [d3.variance](https://github.com/d3/d3-array/blob/v3.2.4/README.md#variance) - compute the variance of an iterable of numbers. * [d3.deviation](https://github.com/d3/d3-array/blob/v3.2.4/README.md#deviation) - compute the standard deviation of an iterable of numbers. * [d3.fcumsum](https://github.com/d3/d3-array/blob/v3.2.4/README.md#fcumsum) - compute a full precision cumulative summation of numbers. * [d3.fsum](https://github.com/d3/d3-array/blob/v3.2.4/README.md#fsum) - compute a full precision summation of an iterable of numbers. * [new d3.Adder](https://github.com/d3/d3-array/blob/v3.2.4/README.md#adder) - creates a full precision adder. * [*adder*.add](https://github.com/d3/d3-array/blob/v3.2.4/README.md#adder_add) - add a value to an adder. * [*adder*.valueOf](https://github.com/d3/d3-array/blob/v3.2.4/README.md#adder_valueOf) - returns a double precision representation of an adder’s value. * [d3.blur](https://github.com/d3/d3-array/blob/v3.2.4/README.md#blur) - blur an array of numbers in place. * [d3.blur2](https://github.com/d3/d3-array/blob/v3.2.4/README.md#blur2) - blur a two-dimensional array of numbers in place. * [d3.blurImage](https://github.com/d3/d3-array/blob/v3.2.4/README.md#blurImage) - blur an RGBA ImageData in place. ### [Search](https://github.com/d3/d3-array/blob/v3.2.4/README.md#search) Methods for searching arrays for a specific element. * [d3.least](https://github.com/d3/d3-array/blob/v3.2.4/README.md#least) - returns the least element of an iterable. * [d3.leastIndex](https://github.com/d3/d3-array/blob/v3.2.4/README.md#leastIndex) - returns the index of the least element of an iterable. * [d3.greatest](https://github.com/d3/d3-array/blob/v3.2.4/README.md#greatest) - returns the greatest element of an iterable. * [d3.greatestIndex](https://github.com/d3/d3-array/blob/v3.2.4/README.md#greatestIndex) - returns the index of the greatest element of an iterable. * [d3.bisectCenter](https://github.com/d3/d3-array/blob/v3.2.4/README.md#bisectCenter) - binary search for a value in a sorted array. * [d3.bisectLeft](https://github.com/d3/d3-array/blob/v3.2.4/README.md#bisectLeft) - binary search for a value in a sorted array. * [d3.bisect](https://github.com/d3/d3-array/blob/v3.2.4/README.md#bisect) - binary search for a value in a sorted array. * [d3.bisectRight](https://github.com/d3/d3-array/blob/v3.2.4/README.md#bisectRight) - binary search for a value in a sorted array. * [d3.bisector](https://github.com/d3/d3-array/blob/v3.2.4/README.md#bisector) - bisect using an accessor or comparator. * [*bisector*.center](https://github.com/d3/d3-array/blob/v3.2.4/README.md#bisector_center) - binary search for a value in a sorted array. * [*bisector*.left](https://github.com/d3/d3-array/blob/v3.2.4/README.md#bisector_left) - bisectLeft, with the given comparator. * [*bisector*.right](https://github.com/d3/d3-array/blob/v3.2.4/README.md#bisector_right) - bisectRight, with the given comparator. * [d3.quickselect](https://github.com/d3/d3-array/blob/v3.2.4/README.md#quickselect) - reorder an array of numbers. * [d3.ascending](https://github.com/d3/d3-array/blob/v3.2.4/README.md#ascending) - compute the natural order of two values. * [d3.descending](https://github.com/d3/d3-array/blob/v3.2.4/README.md#descending) - compute the natural order of two values. ### [Transformations](https://github.com/d3/d3-array/blob/v3.2.4/README.md#transformations) Methods for transforming arrays and for generating new arrays. * [d3.flatGroup](https://github.com/d3/d3-array/blob/v3.2.4/README.md#flatGroup) - group an iterable into a flat array. * [d3.flatRollup](https://github.com/d3/d3-array/blob/v3.2.4/README.md#flatRollup) - reduce an iterable into a flat array. * [d3.group](https://github.com/d3/d3-array/blob/v3.2.4/README.md#group) - group an iterable into a nested Map. * [d3.groups](https://github.com/d3/d3-array/blob/v3.2.4/README.md#groups) - group an iterable into a nested array. * [d3.groupSort](https://github.com/d3/d3-array/blob/v3.2.4/README.md#groupSort) - sort keys according to grouped values. * [d3.index](https://github.com/d3/d3-array/blob/v3.2.4/README.md#index) - index an iterable into a nested Map. * [d3.indexes](https://github.com/d3/d3-array/blob/v3.2.4/README.md#indexes) - index an iterable into a nested array. * [d3.rollup](https://github.com/d3/d3-array/blob/v3.2.4/README.md#rollup) - reduce an iterable into a nested Map. * [d3.rollups](https://github.com/d3/d3-array/blob/v3.2.4/README.md#rollups) - reduce an iterable into a nested array. * [d3.count](https://github.com/d3/d3-array/blob/v3.2.4/README.md#count) - count valid number values in an iterable. * [d3.cross](https://github.com/d3/d3-array/blob/v3.2.4/README.md#cross) - compute the Cartesian product of two iterables. * [d3.merge](https://github.com/d3/d3-array/blob/v3.2.4/README.md#merge) - merge multiple iterables into one array. * [d3.pairs](https://github.com/d3/d3-array/blob/v3.2.4/README.md#pairs) - create an array of adjacent pairs of elements. * [d3.permute](https://github.com/d3/d3-array/blob/v3.2.4/README.md#permute) - reorder an iterable of elements according to an iterable of indexes. * [d3.shuffle](https://github.com/d3/d3-array/blob/v3.2.4/README.md#shuffle) - randomize the order of an iterable. * [d3.shuffler](https://github.com/d3/d3-array/blob/v3.2.4/README.md#shuffler) - randomize the order of an iterable. * [d3.ticks](https://github.com/d3/d3-array/blob/v3.2.4/README.md#ticks) - generate representative values from a numeric interval. * [d3.tickIncrement](https://github.com/d3/d3-array/blob/v3.2.4/README.md#tickIncrement) - generate representative values from a numeric interval. * [d3.tickStep](https://github.com/d3/d3-array/blob/v3.2.4/README.md#tickStep) - generate representative values from a numeric interval. * [d3.nice](https://github.com/d3/d3-array/blob/v3.2.4/README.md#nice) - extend an interval to align with ticks. * [d3.range](https://github.com/d3/d3-array/blob/v3.2.4/README.md#range) - generate a range of numeric values. * [d3.transpose](https://github.com/d3/d3-array/blob/v3.2.4/README.md#transpose) - transpose an array of arrays. * [d3.zip](https://github.com/d3/d3-array/blob/v3.2.4/README.md#zip) - transpose a variable number of arrays. ### [Iterables](https://github.com/d3/d3-array/blob/v3.2.4/README.md#iterables) * [d3.every](https://github.com/d3/d3-array/blob/v3.2.4/README.md#every) - test if all values satisfy a condition. * [d3.some](https://github.com/d3/d3-array/blob/v3.2.4/README.md#some) - test if any value satisfies a condition. * [d3.filter](https://github.com/d3/d3-array/blob/v3.2.4/README.md#filter) - filter values. * [d3.map](https://github.com/d3/d3-array/blob/v3.2.4/README.md#map) - map values. * [d3.reduce](https://github.com/d3/d3-array/blob/v3.2.4/README.md#reduce) - reduce values. * [d3.reverse](https://github.com/d3/d3-array/blob/v3.2.4/README.md#reverse) - reverse the order of values. * [d3.sort](https://github.com/d3/d3-array/blob/v3.2.4/README.md#sort) - sort values. ### [Sets](https://github.com/d3/d3-array/blob/v3.2.4/README.md#sets) * [d3.difference](https://github.com/d3/d3-array/blob/v3.2.4/README.md#difference) - compute a set difference. * [d3.disjoint](https://github.com/d3/d3-array/blob/v3.2.4/README.md#disjoint) - test whether two sets are disjoint. * [d3.intersection](https://github.com/d3/d3-array/blob/v3.2.4/README.md#intersection) - compute a set intersection. * [d3.superset](https://github.com/d3/d3-array/blob/v3.2.4/README.md#superset) - test whether a set is a superset of another. * [d3.subset](https://github.com/d3/d3-array/blob/v3.2.4/README.md#subset) - test whether a set is a subset of another. * [d3.union](https://github.com/d3/d3-array/blob/v3.2.4/README.md#union) - compute a set union. ### [Histograms](https://github.com/d3/d3-array/blob/v3.2.4/README.md#bins) Bin discrete samples into continuous, non-overlapping intervals. * [d3.bin](https://github.com/d3/d3-array/blob/v3.2.4/README.md#bin) - create a new bin generator. * [*bin*](https://github.com/d3/d3-array/blob/v3.2.4/README.md#_bin) - bins a given array of samples. * [*bin*.value](https://github.com/d3/d3-array/blob/v3.2.4/README.md#bin_value) - specify a value accessor for each sample. * [*bin*.domain](https://github.com/d3/d3-array/blob/v3.2.4/README.md#bin_domain) - specify the interval of observable values. * [*bin*.thresholds](https://github.com/d3/d3-array/blob/v3.2.4/README.md#bin_thresholds) - specify how values are divided into bins. * [d3.thresholdFreedmanDiaconis](https://github.com/d3/d3-array/blob/v3.2.4/README.md#thresholdFreedmanDiaconis) - the Freedman–Diaconis binning rule. * [d3.thresholdScott](https://github.com/d3/d3-array/blob/v3.2.4/README.md#thresholdScott) - Scott’s normal reference binning rule. * [d3.thresholdSturges](https://github.com/d3/d3-array/blob/v3.2.4/README.md#thresholdSturges) - Sturges’ binning formula. ### [Interning](https://github.com/d3/d3-array/blob/v3.2.4/README.md#interning) * [d3.InternMap](https://github.com/d3/d3-array/blob/v3.2.4/README.md#InternMap) - a key-interning Map. * [d3.InternSet](https://github.com/d3/d3-array/blob/v3.2.4/README.md#InternSet) - a value-interning Set. ## [Axes (d3-axis)](https://github.com/d3/d3-axis/tree/v3.0.0) Human-readable reference marks for scales. * [d3.axisTop](https://github.com/d3/d3-axis/blob/v3.0.0/README.md#axisTop) - create a new top-oriented axis generator. * [d3.axisRight](https://github.com/d3/d3-axis/blob/v3.0.0/README.md#axisRight) - create a new right-oriented axis generator. * [d3.axisBottom](https://github.com/d3/d3-axis/blob/v3.0.0/README.md#axisBottom) - create a new bottom-oriented axis generator. * [d3.axisLeft](https://github.com/d3/d3-axis/blob/v3.0.0/README.md#axisLeft) - create a new left-oriented axis generator. * [*axis*](https://github.com/d3/d3-axis/blob/v3.0.0/README.md#_axis) - generate an axis for the given selection. * [*axis*.scale](https://github.com/d3/d3-axis/blob/v3.0.0/README.md#axis_scale) - set the scale. * [*axis*.ticks](https://github.com/d3/d3-axis/blob/v3.0.0/README.md#axis_ticks) - customize how ticks are generated and formatted. * [*axis*.tickArguments](https://github.com/d3/d3-axis/blob/v3.0.0/README.md#axis_tickArguments) - customize how ticks are generated and formatted. * [*axis*.tickValues](https://github.com/d3/d3-axis/blob/v3.0.0/README.md#axis_tickValues) - set the tick values explicitly. * [*axis*.tickFormat](https://github.com/d3/d3-axis/blob/v3.0.0/README.md#axis_tickFormat) - set the tick format explicitly. * [*axis*.tickSize](https://github.com/d3/d3-axis/blob/v3.0.0/README.md#axis_tickSize) - set the size of the ticks. * [*axis*.tickSizeInner](https://github.com/d3/d3-axis/blob/v3.0.0/README.md#axis_tickSizeInner) - set the size of inner ticks. * [*axis*.tickSizeOuter](https://github.com/d3/d3-axis/blob/v3.0.0/README.md#axis_tickSizeOuter) - set the size of outer (extent) ticks. * [*axis*.tickPadding](https://github.com/d3/d3-axis/blob/v3.0.0/README.md#axis_tickPadding) - set the padding between ticks and labels. * [*axis*.offset](https://github.com/d3/d3-axis/blob/v3.0.0/README.md#axis_offset) - set the pixel offset for crisp edges. ## [Brushes (d3-brush)](https://github.com/d3/d3-brush/tree/v3.0.0) Select a one- or two-dimensional region using the mouse or touch. * [d3.brush](https://github.com/d3/d3-brush/blob/v3.0.0/README.md#brush) - create a new two-dimensional brush. * [d3.brushX](https://github.com/d3/d3-brush/blob/v3.0.0/README.md#brushX) - create a brush along the *x*-dimension. * [d3.brushY](https://github.com/d3/d3-brush/blob/v3.0.0/README.md#brushY) - create a brush along the *y*-dimension. * [*brush*](https://github.com/d3/d3-brush/blob/v3.0.0/README.md#_brush) - apply the brush to a selection. * [*brush*.move](https://github.com/d3/d3-brush/blob/v3.0.0/README.md#brush_move) - move the brush selection. * [*brush*.clear](https://github.com/d3/d3-brush/blob/v3.0.0/README.md#brush_clear) - clear the brush selection. * [*brush*.extent](https://github.com/d3/d3-brush/blob/v3.0.0/README.md#brush_extent) - define the brushable region. * [*brush*.filter](https://github.com/d3/d3-brush/blob/v3.0.0/README.md#brush_filter) - control which input events initiate brushing. * [*brush*.touchable](https://github.com/d3/d3-brush/blob/v3.0.0/README.md#brush_touchable) - set the touch support detector. * [*brush*.keyModifiers](https://github.com/d3/d3-brush/blob/v3.0.0/README.md#brush_keyModifiers) - enable or disable key interaction. * [*brush*.handleSize](https://github.com/d3/d3-brush/blob/v3.0.0/README.md#brush_handleSize) - set the size of the brush handles. * [*brush*.on](https://github.com/d3/d3-brush/blob/v3.0.0/README.md#brush_on) - listen for brush events. * [d3.brushSelection](https://github.com/d3/d3-brush/blob/v3.0.0/README.md#brushSelection) - get the brush selection for a given node. ## [Chords (d3-chord)](https://github.com/d3/d3-chord/tree/v3.0.1) * [d3.chord](https://github.com/d3/d3-chord/blob/v3.0.1/README.md#chord) - create a new chord layout. * [*chord*](https://github.com/d3/d3-chord/blob/v3.0.1/README.md#_chord) - compute the layout for the given matrix. * [*chord*.padAngle](https://github.com/d3/d3-chord/blob/v3.0.1/README.md#chord_padAngle) - set the padding between adjacent groups. * [*chord*.sortGroups](https://github.com/d3/d3-chord/blob/v3.0.1/README.md#chord_sortGroups) - define the group order. * [*chord*.sortSubgroups](https://github.com/d3/d3-chord/blob/v3.0.1/README.md#chord_sortSubgroups) - define the source and target order within groups. * [*chord*.sortChords](https://github.com/d3/d3-chord/blob/v3.0.1/README.md#chord_sortChords) - define the chord order across groups. * [d3.chordDirected](https://github.com/d3/d3-chord/blob/v3.0.1/README.md#chordDirected) - create a directed chord generator. * [d3.chordTranspose](https://github.com/d3/d3-chord/blob/v3.0.1/README.md#chordTranspose) - create a transposed chord generator. * [d3.ribbon](https://github.com/d3/d3-chord/blob/v3.0.1/README.md#ribbon) - create a ribbon shape generator. * [*ribbon*](https://github.com/d3/d3-chord/blob/v3.0.1/README.md#_ribbon) - generate a ribbon shape. * [*ribbon*.source](https://github.com/d3/d3-chord/blob/v3.0.1/README.md#ribbon_source) - set the source accessor. * [*ribbon*.target](https://github.com/d3/d3-chord/blob/v3.0.1/README.md#ribbon_target) - set the target accessor. * [*ribbon*.radius](https://github.com/d3/d3-chord/blob/v3.0.1/README.md#ribbon_radius) - set the ribbon source and target radius. * [*ribbon*.sourceRadius](https://github.com/d3/d3-chord/blob/v3.0.1/README.md#ribbon_sourceRadius) - set the ribbon source radius. * [*ribbon*.targetRadius](https://github.com/d3/d3-chord/blob/v3.0.1/README.md#ribbon_targetRadius) - set the ribbon target radius. * [*ribbon*.startAngle](https://github.com/d3/d3-chord/blob/v3.0.1/README.md#ribbon_startAngle) - set the ribbon source or target start angle. * [*ribbon*.endAngle](https://github.com/d3/d3-chord/blob/v3.0.1/README.md#ribbon_endAngle) - set the ribbon source or target end angle. * [*ribbon*.padAngle](https://github.com/d3/d3-chord/blob/v3.0.1/README.md#ribbon_padAngle) - set the pad angle accessor. * [*ribbon*.context](https://github.com/d3/d3-chord/blob/v3.0.1/README.md#ribbon_context) - set the render context. * [d3.ribbonArrow](https://github.com/d3/d3-chord/blob/v3.0.1/README.md#ribbonArrow) - create an arrow ribbon generator. * [*ribbonArrow*.headRadius](https://github.com/d3/d3-chord/blob/v3.0.1/README.md#ribbonArrow_headRadius) - set the arrowhead radius accessor. ## [Colors (d3-color)](https://github.com/d3/d3-color/tree/v3.1.0) Color manipulation and color space conversion. * [d3.color](https://github.com/d3/d3-color/blob/v3.1.0/README.md#color) - parse the given CSS color specifier. * [*color*.opacity](https://github.com/d3/d3-color/blob/v3.1.0/README.md#color_opacity) - the color’s opacity. * [*color*.rgb](https://github.com/d3/d3-color/blob/v3.1.0/README.md#color_rgb) - compute the RGB equivalent of this color. * [*color*.copy](https://github.com/d3/d3-color/blob/v3.1.0/README.md#color_copy) - return a copy of this color. * [*color*.brighter](https://github.com/d3/d3-color/blob/v3.1.0/README.md#color_brighter) - create a brighter copy of this color. * [*color*.darker](https://github.com/d3/d3-color/blob/v3.1.0/README.md#color_darker) - create a darker copy of this color. * [*color*.displayable](https://github.com/d3/d3-color/blob/v3.1.0/README.md#color_displayable) - returns true if the color is displayable on standard hardware. * [*color*.formatHex](https://github.com/d3/d3-color/blob/v3.1.0/README.md#color_formatHex) - returns the hexadecimal RRGGBB string representation of this color. * [*color*.formatHex8](https://github.com/d3/d3-color/blob/v3.1.0/README.md#color_formatHex8) - returns the hexadecimal RRGGBBAA string representation of this color. * [*color*.formatHsl](https://github.com/d3/d3-color/blob/v3.1.0/README.md#color_formatHsl) - returns the RGB string representation of this color. * [*color*.formatRgb](https://github.com/d3/d3-color/blob/v3.1.0/README.md#color_formatRgb) - returns the HSL string representation of this color. * [*color*.toString](https://github.com/d3/d3-color/blob/v3.1.0/README.md#color_toString) - returns the RGB string representation of this color. * [d3.rgb](https://github.com/d3/d3-color/blob/v3.1.0/README.md#rgb) - create a new RGB color. * [*rgb*.clamp](https://github.com/d3/d3-color/blob/v3.1.0/README.md#rgb_clamp) - returns copy of this color clamped to the RGB color space. * [d3.hsl](https://github.com/d3/d3-color/blob/v3.1.0/README.md#hsl) - create a new HSL color. * [*hsl*.clamp](https://github.com/d3/d3-color/blob/v3.1.0/README.md#hsl_clamp) - returns copy of this color clamped to the HSL color space. * [d3.lab](https://github.com/d3/d3-color/blob/v3.1.0/README.md#lab) - create a new Lab color. * [d3.gray](https://github.com/d3/d3-color/blob/v3.1.0/README.md#gray) - create a new Lab gray. * [d3.hcl](https://github.com/d3/d3-color/blob/v3.1.0/README.md#hcl) - create a new HCL color. * [d3.lch](https://github.com/d3/d3-color/blob/v3.1.0/README.md#lch) - create a new HCL color. * [d3.cubehelix](https://github.com/d3/d3-color/blob/v3.1.0/README.md#cubehelix) - create a new Cubehelix color. ## [Color Schemes (d3-scale-chromatic)](https://github.com/d3/d3-scale-chromatic/tree/v3.0.0) Color ramps and palettes for quantitative, ordinal and categorical scales. ### Categorical * [d3.schemeCategory10](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#schemeCategory10) - an array of ten categorical colors. * [d3.schemeAccent](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#schemeAccent) - an array of eight categorical colors. * [d3.schemeDark2](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#schemeDark2) - an array of eight categorical colors. * [d3.schemePaired](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#schemePaired) - an array of twelve categorical colors. * [d3.schemePastel1](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#schemePastel1) - an array of nine categorical colors. * [d3.schemePastel2](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#schemePastel2) - an array of eight categorical colors. * [d3.schemeSet1](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#schemeSet1) - an array of nine categorical colors. * [d3.schemeSet2](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#schemeSet2) - an array of eight categorical colors. * [d3.schemeSet3](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#schemeSet3) - an array of twelve categorical colors. * [d3.schemeTableau10](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#schemeTableau10) - an array of ten categorical colors. ### Diverging * [d3.interpolateBrBG](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#interpolateBrBG) - ColorBrewer BrBG interpolator. * [d3.interpolatePiYG](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#interpolatePiYG) - ColorBrewer PiYG interpolator. * [d3.interpolatePRGn](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#interpolatePRGn) - ColorBrewer PRGn interpolator. * [d3.interpolatePuOr](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#interpolatePuOr) - ColorBrewer PuOr interpolator. * [d3.interpolateRdBu](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#interpolateRdBu) - ColorBrewer RdBu interpolator. * [d3.interpolateRdGy](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#interpolateRdGy) - ColorBrewer RdGy interpolator. * [d3.interpolateRdYlBu](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#interpolateRdYlBu) - ColorBrewer RdYlBu interpolator. * [d3.interpolateRdYlGn](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#interpolateRdYlGn) - ColorBrewer RdYlGn interpolator. * [d3.interpolateSpectral](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#interpolateSpectral) - ColorBrewer spectral interpolator. * [d3.schemeBrBG](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#schemeBrBG) - ColorBrewer BrBG scheme. * [d3.schemePiYG](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#schemePiYG) - ColorBrewer PiYG scheme. * [d3.schemePRGn](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#schemePRGn) - ColorBrewer PRGn scheme. * [d3.schemePuOr](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#schemePuOr) - ColorBrewer PuOr scheme. * [d3.schemeRdBu](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#schemeRdBu) - ColorBrewer RdBu scheme. * [d3.schemeRdGy](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#schemeRdGy) - ColorBrewer RdGy scheme. * [d3.schemeRdYlBu](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#schemeRdYlBu) - ColorBrewer RdYlBu scheme. * [d3.schemeRdYlGn](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#schemeRdYlGn) - ColorBrewer RdYlGn scheme. * [d3.schemeSpectral](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#schemeSpectral) - ColorBrewer spectral scheme. ### Sequential (Single Hue) * [d3.interpolateBlues](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#interpolateBlues) - * [d3.interpolateGreens](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#interpolateGreens) - * [d3.interpolateGreys](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#interpolateGreys) - * [d3.interpolateOranges](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#interpolateOranges) - * [d3.interpolatePurples](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#interpolatePurples) - * [d3.interpolateReds](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#interpolateReds) - * [d3.schemeBlues](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#schemeBlues) - * [d3.schemeGreens](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#schemeGreens) - * [d3.schemeGreys](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#schemeGreys) - * [d3.schemeOranges](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#schemeOranges) - * [d3.schemePurples](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#schemePurples) - * [d3.schemeReds](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#schemeReds) - ### Sequential (Multi-Hue) * [d3.interpolateBuGn](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#interpolateBuGn) - ColorBrewer BuGn interpolator. * [d3.interpolateBuPu](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#interpolateBuPu) - ColorBrewer BuPu interpolator. * [d3.interpolateCividis](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#interpolateCividis) - cividis interpolator. * [d3.interpolateCool](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#interpolateCool) - cool interpolator. * [d3.interpolateCubehelixDefault](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#interpolateCubehelixDefault) - cubehelix interpolator. * [d3.interpolateGnBu](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#interpolateGnBu) - ColorBrewer GnBu interpolator. * [d3.interpolateInferno](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#interpolateInferno) - inferno interpolator. * [d3.interpolateMagma](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#interpolateMagma) - magma interpolator. * [d3.interpolateOrRd](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#interpolateOrRd) - ColorBrewer OrRd interpolator. * [d3.interpolatePlasma](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#interpolatePlasma) - plasma interpolator. * [d3.interpolatePuBu](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#interpolatePuBu) - ColorBrewer PuBu interpolator. * [d3.interpolatePuBuGn](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#interpolatePuBuGn) - ColorBrewer PuBuGn interpolator. * [d3.interpolatePuRd](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#interpolatePuRd) - ColorBrewer PuRd interpolator. * [d3.interpolateRdPu](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#interpolateRdPu) - ColorBrewer RdPu interpolator. * [d3.interpolateTurbo](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#interpolateTurbo) - turbo interpolator. * [d3.interpolateViridis](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#interpolateViridis) - viridis interpolator. * [d3.interpolateWarm](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#interpolateWarm) - warm interpolator. * [d3.interpolateYlGn](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#interpolateYlGn) - ColorBrewer YlGn interpolator. * [d3.interpolateYlGnBu](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#interpolateYlGnBu) - ColorBrewer YlGnBu interpolator. * [d3.interpolateYlOrBr](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#interpolateYlOrBr) - ColorBrewer YlOrBr interpolator. * [d3.interpolateYlOrRd](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#interpolateYlOrRd) - ColorBrewer YlOrRd interpolator. * [d3.schemeBuGn](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#schemeBuGn) - ColorBrewer BuGn scheme. * [d3.schemeBuPu](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#schemeBuPu) - ColorBrewer BuPu scheme. * [d3.schemeGnBu](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#schemeGnBu) - ColorBrewer GnBu scheme. * [d3.schemeOrRd](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#schemeOrRd) - ColorBrewer OrRd scheme. * [d3.schemePuBu](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#schemePuBu) - ColorBrewer PuBu scheme. * [d3.schemePuBuGn](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#schemePuBuGn) - ColorBrewer PuBuGn scheme. * [d3.schemePuRd](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#schemePuRd) - ColorBrewer PuRd scheme. * [d3.schemeRdPu](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#schemeRdPu) - ColorBrewer RdPu scheme. * [d3.schemeYlGn](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#schemeYlGn) - ColorBrewer YlGn scheme. * [d3.schemeYlGnBu](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#schemeYlGnBu) - ColorBrewer YlGnBu scheme. * [d3.schemeYlOrBr](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#schemeYlOrBr) - ColorBrewer YlOrBr scheme. * [d3.schemeYlOrRd](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#schemeYlOrRd) - ColorBrewer YlOrRd scheme. ### Cyclical * [d3.interpolateRainbow](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#interpolateRainbow) - the “less-angry” rainbow * [d3.interpolateSinebow](https://github.com/d3/d3-scale-chromatic/blob/v3.0.0/README.md#interpolateSinebow) - the “sinebow” smooth rainbow ## [Contours (d3-contour)](https://github.com/d3/d3-contour/tree/v4.0.2) Compute contour polygons using marching squares. * [d3.contours](https://github.com/d3/d3-contour/blob/v4.0.2/README.md#contours) - create a new contour generator. * [*contours*](https://github.com/d3/d3-contour/blob/v4.0.2/README.md#_contours) - compute the contours for a given grid of values. * [*contours*.contour](https://github.com/d3/d3-contour/blob/v4.0.2/README.md#contours_contour) - compute a contour for a given value. * [*contours*.size](https://github.com/d3/d3-contour/blob/v4.0.2/README.md#contours_size) - set the size of a contour generator. * [*contours*.smooth](https://github.com/d3/d3-contour/blob/v4.0.2/README.md#contours_smooth) - set whether or not the generated contours are smoothed. * [*contours*.thresholds](https://github.com/d3/d3-contour/blob/v4.0.2/README.md#contours_thresholds) - set the thresholds of a contour generator. * [d3.contourDensity](https://github.com/d3/d3-contour/blob/v4.0.2/README.md#contourDensity) - create a new density estimator. * [*density*](https://github.com/d3/d3-contour/blob/v4.0.2/README.md#_density) - estimate the density of a given array of samples. * [*density*.x](https://github.com/d3/d3-contour/blob/v4.0.2/README.md#density_x) - set the *x* accessor of the density estimator. * [*density*.y](https://github.com/d3/d3-contour/blob/v4.0.2/README.md#density_y) - set the *y* accessor of the density estimator. * [*density*.weight](https://github.com/d3/d3-contour/blob/v4.0.2/README.md#density_weight) - set the *weight* accessor of the density estimator. * [*density*.size](https://github.com/d3/d3-contour/blob/v4.0.2/README.md#density_size) - set the size of the density estimator. * [*density*.cellSize](https://github.com/d3/d3-contour/blob/v4.0.2/README.md#density_cellSize) - set the cell size of the density estimator. * [*density*.thresholds](https://github.com/d3/d3-contour/blob/v4.0.2/README.md#density_thresholds) - set the thresholds of the density estimator. * [*density*.bandwidth](https://github.com/d3/d3-contour/blob/v4.0.2/README.md#density_bandwidth) - set the bandwidth of the density estimator. * [*density*.contours](https://github.com/d3/d3-contour/blob/v4.0.2/README.md#density_contours) - compute density contours. ## [Voronoi Diagrams (d3-delaunay)](https://github.com/d3/d3-delaunay/tree/v6.0.4) Compute the Voronoi diagram of a set of two-dimensional points. * [new Delaunay](https://github.com/d3/d3-delaunay/blob/v6.0.4/README.md#new_Delaunay) - create a delaunay triangulation for an array of point coordinates. * [Delaunay.from](https://github.com/d3/d3-delaunay/blob/v6.0.4/README.md#delaunay_from) - create a delaunay triangulation for an iterable of points. * [*delaunay*.points](https://github.com/d3/d3-delaunay/blob/v6.0.4/README.md#delaunay_points) - the coordinates of the points. * [*delaunay*.halfedges](https://github.com/d3/d3-delaunay/blob/v6.0.4/README.md#delaunay_halfedges) - the delaunay halfedges. * [*delaunay*.hull](https://github.com/d3/d3-delaunay/blob/v6.0.4/README.md#delaunay_hull) - the convex hull as point indices. * [*delaunay*.triangles](https://github.com/d3/d3-delaunay/blob/v6.0.4/README.md#delaunay_triangles) - the delaunay triangles. * [*delaunay*.inedges](https://github.com/d3/d3-delaunay/blob/v6.0.4/README.md#delaunay_inedges) - the delaunay inedges * [*delaunay*.find](https://github.com/d3/d3-delaunay/blob/v6.0.4/README.md#delaunay_find) - find the closest point in the delaunay triangulation. * [*delaunay*.neighbors](https://github.com/d3/d3-delaunay/blob/v6.0.4/README.md#delaunay_neighbors) - the neighbors of a point in the delaunay triangulation. * [*delaunay*.render](https://github.com/d3/d3-delaunay/blob/v6.0.4/README.md#delaunay_render) - render the edges of the delaunay triangulation. * [*delaunay*.renderHull](https://github.com/d3/d3-delaunay/blob/v6.0.4/README.md#delaunay_renderHull) - render the convex hull. * [*delaunay*.renderTriangle](https://github.com/d3/d3-delaunay/blob/v6.0.4/README.md#delaunay_renderTriangle) - render a triangle. * [*delaunay*.renderPoints](https://github.com/d3/d3-delaunay/blob/v6.0.4/README.md#delaunay_renderPoints) - render the points. * [*delaunay*.hullPolygon](https://github.com/d3/d3-delaunay/blob/v6.0.4/README.md#delaunay_hullPolygon) - the closed convex hull as point coordinates. * [*delaunay*.trianglePolygons](https://github.com/d3/d3-delaunay/blob/v6.0.4/README.md#delaunay_trianglePolygons) - iterate over all the triangles as polygons. * [*delaunay*.trianglePolygon](https://github.com/d3/d3-delaunay/blob/v6.0.4/README.md#delaunay_trianglePolygon) - return a triangle as a polygon. * [*delaunay*.update](https://github.com/d3/d3-delaunay/blob/v6.0.4/README.md#delaunay_update) - update a delaunay triangulation in place. * [*delaunay*.voronoi](https://github.com/d3/d3-delaunay/blob/v6.0.4/README.md#delaunay_voronoi) - compute the voronoi diagram associated with a delaunay triangulation. * [*voronoi*.delaunay](https://github.com/d3/d3-delaunay/blob/v6.0.4/README.md#voronoi_delaunay) - the voronoi diagram’s source delaunay triangulation. * [*voronoi*.circumcenters](https://github.com/d3/d3-delaunay/blob/v6.0.4/README.md#voronoi_circumcenters) - the triangles’ circumcenters. * [*voronoi*.vectors](https://github.com/d3/d3-delaunay/blob/v6.0.4/README.md#voronoi_vectors) - directions for the outer (infinite) cells of the voronoi diagram. * [*voronoi*.xmin](https://github.com/d3/d3-delaunay/blob/v6.0.4/README.md#voronoi_xmin) - set the *xmin* bound of the extent. * [*voronoi*.ymin](https://github.com/d3/d3-delaunay/blob/v6.0.4/README.md#voronoi_ymin) - set the *ymin* bound of the extent. * [*voronoi*.xmax](https://github.com/d3/d3-delaunay/blob/v6.0.4/README.md#voronoi_xmax) - set the *xmax* bound of the extent. * [*voronoi*.ymax](https://github.com/d3/d3-delaunay/blob/v6.0.4/README.md#voronoi_ymax) - set the *ymax* bound of the extent. * [*voronoi*.contains](https://github.com/d3/d3-delaunay/blob/v6.0.4/README.md#voronoi_contains) - test whether a point is inside a voronoi cell. * [*voronoi*.neighbors](https://github.com/d3/d3-delaunay/blob/v6.0.4/README.md#voronoi_neighbors) - the neighbors of a point in the voronoi diagram. * [*voronoi*.render](https://github.com/d3/d3-delaunay/blob/v6.0.4/README.md#voronoi_render) - render the mesh of voronoi cells. * [*voronoi*.renderBounds](https://github.com/d3/d3-delaunay/blob/v6.0.4/README.md#voronoi_renderBounds) - render the extent. * [*voronoi*.renderCell](https://github.com/d3/d3-delaunay/blob/v6.0.4/README.md#voronoi_renderCell) - render a voronoi cell. * [*voronoi*.cellPolygons](https://github.com/d3/d3-delaunay/blob/v6.0.4/README.md#voronoi_cellPolygons) - iterate over all the cells as polygons. * [*voronoi*.cellPolygon](https://github.com/d3/d3-delaunay/blob/v6.0.4/README.md#voronoi_cellPolygon) - return a cell as a polygon. * [*voronoi*.update](https://github.com/d3/d3-delaunay/blob/v6.0.4/README.md#voronoi_update) - update a voronoi diagram in place. ## [Dispatches (d3-dispatch)](https://github.com/d3/d3-dispatch/tree/v3.0.1) Separate concerns using named callbacks. * [d3.dispatch](https://github.com/d3/d3-dispatch/blob/v3.0.1/README.md#dispatch) - create a custom event dispatcher. * [*dispatch*.on](https://github.com/d3/d3-dispatch/blob/v3.0.1/README.md#dispatch_on) - register or unregister an event listener. * [*dispatch*.copy](https://github.com/d3/d3-dispatch/blob/v3.0.1/README.md#dispatch_copy) - create a copy of a dispatcher. * [*dispatch*.call](https://github.com/d3/d3-dispatch/blob/v3.0.1/README.md#dispatch_call) - dispatch an event to registered listeners. * [*dispatch*.apply](https://github.com/d3/d3-dispatch/blob/v3.0.1/README.md#dispatch_apply) - dispatch an event to registered listeners. ## [Dragging (d3-drag)](https://github.com/d3/d3-drag/tree/v3.0.0) Drag and drop SVG, HTML or Canvas using mouse or touch input. * [d3.drag](https://github.com/d3/d3-drag/blob/v3.0.0/README.md#drag) - create a drag behavior. * [*drag*](https://github.com/d3/d3-drag/blob/v3.0.0/README.md#_drag) - apply the drag behavior to a selection. * [*drag*.container](https://github.com/d3/d3-drag/blob/v3.0.0/README.md#drag_container) - set the coordinate system. * [*drag*.filter](https://github.com/d3/d3-drag/blob/v3.0.0/README.md#drag_filter) - ignore some initiating input events. * [*drag*.touchable](https://github.com/d3/d3-drag/blob/v3.0.0/README.md#drag_touchable) - set the touch support detector. * [*drag*.subject](https://github.com/d3/d3-drag/blob/v3.0.0/README.md#drag_subject) - set the thing being dragged. * [*drag*.clickDistance](https://github.com/d3/d3-drag/blob/v3.0.0/README.md#drag_clickDistance) - set the click distance threshold. * [*drag*.on](https://github.com/d3/d3-drag/blob/v3.0.0/README.md#drag_on) - listen for drag events. * [d3.dragDisable](https://github.com/d3/d3-drag/blob/v3.0.0/README.md#dragDisable) - prevent native drag-and-drop and text selection. * [d3.dragEnable](https://github.com/d3/d3-drag/blob/v3.0.0/README.md#dragEnable) - enable native drag-and-drop and text selection. * [*event*.on](https://github.com/d3/d3-drag/blob/v3.0.0/README.md#event_on) - listen for drag events on the current gesture. ## [Delimiter-Separated Values (d3-dsv)](https://github.com/d3/d3-dsv/tree/v3.0.1) Parse and format delimiter-separated values, most commonly CSV and TSV. * [d3.csvParse](https://github.com/d3/d3-dsv/blob/v3.0.1/README.md#csvParse) - parse the given CSV string, returning an array of objects. * [d3.csvParseRows](https://github.com/d3/d3-dsv/blob/v3.0.1/README.md#csvParseRows) - parse the given CSV string, returning an array of rows. * [d3.csvFormat](https://github.com/d3/d3-dsv/blob/v3.0.1/README.md#csvFormat) - format the given array of objects as CSV. * [d3.csvFormatBody](https://github.com/d3/d3-dsv/blob/v3.0.1/README.md#csvFormatBody) - format the given array of objects as CSV. * [d3.csvFormatRows](https://github.com/d3/d3-dsv/blob/v3.0.1/README.md#csvFormatRows) - format the given array of rows as CSV. * [d3.csvFormatRow](https://github.com/d3/d3-dsv/blob/v3.0.1/README.md#csvFormatRow) - format the given row as CSV. * [d3.csvFormatValue](https://github.com/d3/d3-dsv/blob/v3.0.1/README.md#csvFormatValue) - format the given value as CSV. * [d3.tsvParse](https://github.com/d3/d3-dsv/blob/v3.0.1/README.md#tsvParse) - parse the given TSV string, returning an array of objects. * [d3.tsvParseRows](https://github.com/d3/d3-dsv/blob/v3.0.1/README.md#tsvParseRows) - parse the given TSV string, returning an array of rows. * [d3.tsvFormat](https://github.com/d3/d3-dsv/blob/v3.0.1/README.md#tsvFormat) - format the given array of objects as TSV. * [d3.tsvFormatBody](https://github.com/d3/d3-dsv/blob/v3.0.1/README.md#tsvFormatBody) - format the given array of objects as TSV. * [d3.tsvFormatRows](https://github.com/d3/d3-dsv/blob/v3.0.1/README.md#tsvFormatRows) - format the given array of rows as TSV. * [d3.tsvFormatRow](https://github.com/d3/d3-dsv/blob/v3.0.1/README.md#tsvFormatRow) - format the given row as TSV. * [d3.tsvFormatValue](https://github.com/d3/d3-dsv/blob/v3.0.1/README.md#tsvFormatValue) - format the given value as TSV. * [d3.dsvFormat](https://github.com/d3/d3-dsv/blob/v3.0.1/README.md#dsvFormat) - create a new parser and formatter for the given delimiter. * [*dsv*.parse](https://github.com/d3/d3-dsv/blob/v3.0.1/README.md#dsv_parse) - parse the given string, returning an array of objects. * [*dsv*.parseRows](https://github.com/d3/d3-dsv/blob/v3.0.1/README.md#dsv_parseRows) - parse the given string, returning an array of rows. * [*dsv*.format](https://github.com/d3/d3-dsv/blob/v3.0.1/README.md#dsv_format) - format the given array of objects. * [*dsv*.formatBody](https://github.com/d3/d3-dsv/blob/v3.0.1/README.md#dsv_formatBody) - format the given array of objects. * [*dsv*.formatRows](https://github.com/d3/d3-dsv/blob/v3.0.1/README.md#dsv_formatRows) - format the given array of rows. * [*dsv*.formatRow](https://github.com/d3/d3-dsv/blob/v3.0.1/README.md#dsv_formatRow) - format the given row. * [*dsv*.formatValue](https://github.com/d3/d3-dsv/blob/v3.0.1/README.md#dsv_formatValue) - format the given value. * [d3.autoType](https://github.com/d3/d3-dsv/blob/v3.0.1/README.md#autoType) - automatically infer value types for the given object. ## [Easings (d3-ease)](https://github.com/d3/d3-ease/tree/v3.0.1) Easing functions for smooth animation. * [*ease*](https://github.com/d3/d3-ease/blob/v3.0.1/README.md#_ease) - ease the given normalized time. * [d3.easeLinear](https://github.com/d3/d3-ease/blob/v3.0.1/README.md#easeLinear) - linear easing; the identity function. * [d3.easePolyIn](https://github.com/d3/d3-ease/blob/v3.0.1/README.md#easePolyIn) - polynomial easing; raises time to the given power. * [d3.easePolyOut](https://github.com/d3/d3-ease/blob/v3.0.1/README.md#easePolyOut) - reverse polynomial easing. * [d3.easePoly](https://github.com/d3/d3-ease/blob/v3.0.1/README.md#easePoly) - an alias for easePolyInOut. * [d3.easePolyInOut](https://github.com/d3/d3-ease/blob/v3.0.1/README.md#easePolyInOut) - symmetric polynomial easing. * [*poly*.exponent](https://github.com/d3/d3-ease/blob/v3.0.1/README.md#poly_exponent) - specify the polynomial exponent. * [d3.easeQuadIn](https://github.com/d3/d3-ease/blob/v3.0.1/README.md#easeQuadIn) - quadratic easing; squares time. * [d3.easeQuadOut](https://github.com/d3/d3-ease/blob/v3.0.1/README.md#easeQuadOut) - reverse quadratic easing. * [d3.easeQuad](https://github.com/d3/d3-ease/blob/v3.0.1/README.md#easeQuad) - an alias for easeQuadInOut. * [d3.easeQuadInOut](https://github.com/d3/d3-ease/blob/v3.0.1/README.md#easeQuadInOut) - symmetric quadratic easing. * [d3.easeCubicIn](https://github.com/d3/d3-ease/blob/v3.0.1/README.md#easeCubicIn) - cubic easing; cubes time. * [d3.easeCubicOut](https://github.com/d3/d3-ease/blob/v3.0.1/README.md#easeCubicOut) - reverse cubic easing. * [d3.easeCubic](https://github.com/d3/d3-ease/blob/v3.0.1/README.md#easeCubic) - an alias for easeCubicInOut. * [d3.easeCubicInOut](https://github.com/d3/d3-ease/blob/v3.0.1/README.md#easeCubicInOut) - symmetric cubic easing. * [d3.easeSinIn](https://github.com/d3/d3-ease/blob/v3.0.1/README.md#easeSinIn) - sinusoidal easing. * [d3.easeSinOut](https://github.com/d3/d3-ease/blob/v3.0.1/README.md#easeSinOut) - reverse sinusoidal easing. * [d3.easeSin](https://github.com/d3/d3-ease/blob/v3.0.1/README.md#easeSin) - an alias for easeSinInOut. * [d3.easeSinInOut](https://github.com/d3/d3-ease/blob/v3.0.1/README.md#easeSinInOut) - symmetric sinusoidal easing. * [d3.easeExpIn](https://github.com/d3/d3-ease/blob/v3.0.1/README.md#easeExpIn) - exponential easing. * [d3.easeExpOut](https://github.com/d3/d3-ease/blob/v3.0.1/README.md#easeExpOut) - reverse exponential easing. * [d3.easeExp](https://github.com/d3/d3-ease/blob/v3.0.1/README.md#easeExp) - an alias for easeExpInOut. * [d3.easeExpInOut](https://github.com/d3/d3-ease/blob/v3.0.1/README.md#easeExpInOut) - symmetric exponential easing. * [d3.easeCircleIn](https://github.com/d3/d3-ease/blob/v3.0.1/README.md#easeCircleIn) - circular easing. * [d3.easeCircleOut](https://github.com/d3/d3-ease/blob/v3.0.1/README.md#easeCircleOut) - reverse circular easing. * [d3.easeCircle](https://github.com/d3/d3-ease/blob/v3.0.1/README.md#easeCircle) - an alias for easeCircleInOut. * [d3.easeCircleInOut](https://github.com/d3/d3-ease/blob/v3.0.1/README.md#easeCircleInOut) - symmetric circular easing. * [d3.easeElasticIn](https://github.com/d3/d3-ease/blob/v3.0.1/README.md#easeElasticIn) - elastic easing, like a rubber band. * [d3.easeElastic](https://github.com/d3/d3-ease/blob/v3.0.1/README.md#easeElastic) - an alias for easeElasticOut. * [d3.easeElasticOut](https://github.com/d3/d3-ease/blob/v3.0.1/README.md#easeElasticOut) - reverse elastic easing. * [d3.easeElasticInOut](https://github.com/d3/d3-ease/blob/v3.0.1/README.md#easeElasticInOut) - symmetric elastic easing. * [*elastic*.amplitude](https://github.com/d3/d3-ease/blob/v3.0.1/README.md#elastic_amplitude) - specify the elastic amplitude. * [*elastic*.period](https://github.com/d3/d3-ease/blob/v3.0.1/README.md#elastic_period) - specify the elastic period. * [d3.easeBackIn](https://github.com/d3/d3-ease/blob/v3.0.1/README.md#easeBackIn) - anticipatory easing, like a dancer bending his knees before jumping. * [d3.easeBackOut](https://github.com/d3/d3-ease/blob/v3.0.1/README.md#easeBackOut) - reverse anticipatory easing. * [d3.easeBack](https://github.com/d3/d3-ease/blob/v3.0.1/README.md#easeBack) - an alias for easeBackInOut. * [d3.easeBackInOut](https://github.com/d3/d3-ease/blob/v3.0.1/README.md#easeBackInOut) - symmetric anticipatory easing. * [*back*.overshoot](https://github.com/d3/d3-ease/blob/v3.0.1/README.md#back_overshoot) - specify the amount of overshoot. * [d3.easeBounceIn](https://github.com/d3/d3-ease/blob/v3.0.1/README.md#easeBounceIn) - bounce easing, like a rubber ball. * [d3.easeBounce](https://github.com/d3/d3-ease/blob/v3.0.1/README.md#easeBounce) - an alias for easeBounceOut. * [d3.easeBounceOut](https://github.com/d3/d3-ease/blob/v3.0.1/README.md#easeBounceOut) - reverse bounce easing. * [d3.easeBounceInOut](https://github.com/d3/d3-ease/blob/v3.0.1/README.md#easeBounceInOut) - symmetric bounce easing. ## [Fetches (d3-fetch)](https://github.com/d3/d3-fetch/tree/v3.0.1) Convenience methods on top of the Fetch API. * [d3.blob](https://github.com/d3/d3-fetch/blob/v3.0.1/README.md#blob) - get a file as a blob. * [d3.buffer](https://github.com/d3/d3-fetch/blob/v3.0.1/README.md#buffer) - get a file as an array buffer. * [d3.csv](https://github.com/d3/d3-fetch/blob/v3.0.1/README.md#csv) - get a comma-separated values (CSV) file. * [d3.dsv](https://github.com/d3/d3-fetch/blob/v3.0.1/README.md#dsv) - get a delimiter-separated values (CSV) file. * [d3.html](https://github.com/d3/d3-fetch/blob/v3.0.1/README.md#html) - get an HTML file. * [d3.image](https://github.com/d3/d3-fetch/blob/v3.0.1/README.md#image) - get an image. * [d3.json](https://github.com/d3/d3-fetch/blob/v3.0.1/README.md#json) - get a JSON file. * [d3.svg](https://github.com/d3/d3-fetch/blob/v3.0.1/README.md#svg) - get an SVG file. * [d3.text](https://github.com/d3/d3-fetch/blob/v3.0.1/README.md#text) - get a plain text file. * [d3.tsv](https://github.com/d3/d3-fetch/blob/v3.0.1/README.md#tsv) - get a tab-separated values (TSV) file. * [d3.xml](https://github.com/d3/d3-fetch/blob/v3.0.1/README.md#xml) - get an XML file. ## [Forces (d3-force)](https://github.com/d3/d3-force/tree/v3.0.0) Force-directed graph layout using velocity Verlet integration. * [d3.forceSimulation](https://github.com/d3/d3-force/blob/v3.0.0/README.md#forceSimulation) - create a new force simulation. * [*simulation*.restart](https://github.com/d3/d3-force/blob/v3.0.0/README.md#simulation_restart) - reheat and restart the simulation’s timer. * [*simulation*.stop](https://github.com/d3/d3-force/blob/v3.0.0/README.md#simulation_stop) - stop the simulation’s timer. * [*simulation*.tick](https://github.com/d3/d3-force/blob/v3.0.0/README.md#simulation_tick) - advance the simulation one step. * [*simulation*.nodes](https://github.com/d3/d3-force/blob/v3.0.0/README.md#simulation_nodes) - set the simulation’s nodes. * [*simulation*.alpha](https://github.com/d3/d3-force/blob/v3.0.0/README.md#simulation_alpha) - set the current alpha. * [*simulation*.alphaMin](https://github.com/d3/d3-force/blob/v3.0.0/README.md#simulation_alphaMin) - set the minimum alpha threshold. * [*simulation*.alphaDecay](https://github.com/d3/d3-force/blob/v3.0.0/README.md#simulation_alphaDecay) - set the alpha exponential decay rate. * [*simulation*.alphaTarget](https://github.com/d3/d3-force/blob/v3.0.0/README.md#simulation_alphaTarget) - set the target alpha. * [*simulation*.velocityDecay](https://github.com/d3/d3-force/blob/v3.0.0/README.md#simulation_velocityDecay) - set the velocity decay rate. * [*simulation*.force](https://github.com/d3/d3-force/blob/v3.0.0/README.md#simulation_force) - add or remove a force. * [*simulation*.find](https://github.com/d3/d3-force/blob/v3.0.0/README.md#simulation_find) - find the closest node to the given position. * [*simulation*.randomSource](https://github.com/d3/d3-force/blob/v3.0.0/README.md#simulation_randomSource) - set the simulation’s random source. * [*simulation*.on](https://github.com/d3/d3-force/blob/v3.0.0/README.md#simulation_on) - add or remove an event listener. * [*force*](https://github.com/d3/d3-force/blob/v3.0.0/README.md#_force) - apply the force. * [*force*.initialize](https://github.com/d3/d3-force/blob/v3.0.0/README.md#force_initialize) - initialize the force with the given nodes. * [d3.forceCenter](https://github.com/d3/d3-force/blob/v3.0.0/README.md#forceCenter) - create a centering force. * [*center*.x](https://github.com/d3/d3-force/blob/v3.0.0/README.md#center_x) - set the center *x*-coordinate. * [*center*.y](https://github.com/d3/d3-force/blob/v3.0.0/README.md#center_y) - set the center *y*-coordinate. * [*center*.strength](https://github.com/d3/d3-force/blob/v3.0.0/README.md#center_strength) - set the strength of the centering force. * [d3.forceCollide](https://github.com/d3/d3-force/blob/v3.0.0/README.md#forceCollide) - create a circle collision force. * [*collide*.radius](https://github.com/d3/d3-force/blob/v3.0.0/README.md#collide_radius) - set the circle radius. * [*collide*.strength](https://github.com/d3/d3-force/blob/v3.0.0/README.md#collide_strength) - set the collision resolution strength. * [*collide*.iterations](https://github.com/d3/d3-force/blob/v3.0.0/README.md#collide_iterations) - set the number of iterations. * [d3.forceLink](https://github.com/d3/d3-force/blob/v3.0.0/README.md#forceLink) - create a link force. * [*link*.links](https://github.com/d3/d3-force/blob/v3.0.0/README.md#link_links) - set the array of links. * [*link*.id](https://github.com/d3/d3-force/blob/v3.0.0/README.md#link_id) - link nodes by numeric index or string identifier. * [*link*.distance](https://github.com/d3/d3-force/blob/v3.0.0/README.md#link_distance) - set the link distance. * [*link*.strength](https://github.com/d3/d3-force/blob/v3.0.0/README.md#link_strength) - set the link strength. * [*link*.iterations](https://github.com/d3/d3-force/blob/v3.0.0/README.md#link_iterations) - set the number of iterations. * [d3.forceManyBody](https://github.com/d3/d3-force/blob/v3.0.0/README.md#forceManyBody) - create a many-body force. * [*manyBody*.strength](https://github.com/d3/d3-force/blob/v3.0.0/README.md#manyBody_strength) - set the force strength. * [*manyBody*.theta](https://github.com/d3/d3-force/blob/v3.0.0/README.md#manyBody_theta) - set the Barnes–Hut approximation accuracy. * [*manyBody*.distanceMin](https://github.com/d3/d3-force/blob/v3.0.0/README.md#manyBody_distanceMin) - limit the force when nodes are close. * [*manyBody*.distanceMax](https://github.com/d3/d3-force/blob/v3.0.0/README.md#manyBody_distanceMax) - limit the force when nodes are far. * [d3.forceX](https://github.com/d3/d3-force/blob/v3.0.0/README.md#forceX) - create an *x*-positioning force. * [*x*.strength](https://github.com/d3/d3-force/blob/v3.0.0/README.md#x_strength) - set the force strength. * [*x*.x](https://github.com/d3/d3-force/blob/v3.0.0/README.md#x_x) - set the target *x*-coordinate. * [d3.forceY](https://github.com/d3/d3-force/blob/v3.0.0/README.md#forceY) - create an *y*-positioning force. * [*y*.strength](https://github.com/d3/d3-force/blob/v3.0.0/README.md#y_strength) - set the force strength. * [*y*.y](https://github.com/d3/d3-force/blob/v3.0.0/README.md#y_y) - set the target *y*-coordinate. * [d3.forceRadial](https://github.com/d3/d3-force/blob/v3.0.0/README.md#forceRadial) - create a radial positioning force. * [*radial*.strength](https://github.com/d3/d3-force/blob/v3.0.0/README.md#radial_strength) - set the force strength. * [*radial*.radius](https://github.com/d3/d3-force/blob/v3.0.0/README.md#radial_radius) - set the target radius. * [*radial*.x](https://github.com/d3/d3-force/blob/v3.0.0/README.md#radial_x) - set the target center *x*-coordinate. * [*radial*.y](https://github.com/d3/d3-force/blob/v3.0.0/README.md#radial_y) - set the target center *y*-coordinate. ## [Number Formats (d3-format)](https://github.com/d3/d3-format/tree/v3.1.0) Format numbers for human consumption. * [d3.format](https://github.com/d3/d3-format/blob/v3.1.0/README.md#format) - alias for *locale*.format on the default locale. * [d3.formatPrefix](https://github.com/d3/d3-format/blob/v3.1.0/README.md#formatPrefix) - alias for *locale*.formatPrefix on the default locale. * [*locale*.format](https://github.com/d3/d3-format/blob/v3.1.0/README.md#locale_format) - create a number format. * [*locale*.formatPrefix](https://github.com/d3/d3-format/blob/v3.1.0/README.md#locale_formatPrefix) - create a SI-prefix number format. * [d3.formatSpecifier](https://github.com/d3/d3-format/blob/v3.1.0/README.md#formatSpecifier) - parse a number format specifier. * [new d3.FormatSpecifier](https://github.com/d3/d3-format/blob/v3.1.0/README.md#FormatSpecifier) - augments a number format specifier object. * [d3.precisionFixed](https://github.com/d3/d3-format/blob/v3.1.0/README.md#precisionFixed) - compute decimal precision for fixed-point notation. * [d3.precisionPrefix](https://github.com/d3/d3-format/blob/v3.1.0/README.md#precisionPrefix) - compute decimal precision for SI-prefix notation. * [d3.precisionRound](https://github.com/d3/d3-format/blob/v3.1.0/README.md#precisionRound) - compute significant digits for rounded notation. * [d3.formatLocale](https://github.com/d3/d3-format/blob/v3.1.0/README.md#formatLocale) - define a custom locale. * [d3.formatDefaultLocale](https://github.com/d3/d3-format/blob/v3.1.0/README.md#formatDefaultLocale) - define the default locale. ## [Geographies (d3-geo)](https://github.com/d3/d3-geo/tree/v3.1.0) Geographic projections, shapes and math. ### [Paths](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#paths) * [d3.geoPath](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#geoPath) - create a new geographic path generator. * [*path*](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#_path) - project and render the specified feature. * [*path*.area](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#path_area) - compute the projected planar area of a given feature. * [*path*.bounds](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#path_bounds) - compute the projected planar bounding box of a given feature. * [*path*.centroid](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#path_centroid) - compute the projected planar centroid of a given feature. * [*path*.measure](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#path_measure) - compute the projected planar length of a given feature. * [*path*.projection](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#path_projection) - set the geographic projection. * [*path*.context](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#path_context) - set the render context. * [*path*.digits](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#path_digits) - set the output precision. * [*path*.pointRadius](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#path_pointRadius) - set the radius to display point features. ### [Projections](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#projections) * [*projection*](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#_projection) - project the specified point from the sphere to the plane. * [*projection*.invert](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#projection_invert) - unproject the specified point from the plane to the sphere. * [*projection*.stream](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#projection_stream) - wrap the specified stream to project geometry. * [*projection*.preclip](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#projection_preclip) - set the projection’s spherical clipping function. * [*projection*.postclip](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#projection_postclip) - set the projection’s cartesian clipping function. * [*projection*.clipAngle](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#projection_clipAngle) - set the radius of the clip circle. * [*projection*.clipExtent](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#projection_clipExtent) - set the viewport clip extent, in pixels. * [*projection*.scale](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#projection_scale) - set the scale factor. * [*projection*.translate](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#projection_translate) - set the translation offset. * [*projection*.center](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#projection_center) - set the center point. * [*projection*.angle](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#projection_angle) - set the post-projection rotation. * [*projection*.reflectX](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#projection_reflectX) - reflect the *x*-dimension. * [*projection*.reflectY](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#projection_reflectY) - reflect the *y*-dimension. * [*projection*.rotate](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#projection_rotate) - set the three-axis spherical rotation angles. * [*projection*.precision](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#projection_precision) - set the precision threshold for adaptive sampling. * [*projection*.fitExtent](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#projection_fitExtent) - set the scale and translate to fit a GeoJSON object. * [*projection*.fitSize](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#projection_fitSize) - set the scale and translate to fit a GeoJSON object. * [*projection*.fitWidth](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#projection_fitWidth) - set the scale and translate to fit a GeoJSON object. * [*projection*.fitHeight](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#projection_fitHeight) - set the scale and translate to fit a GeoJSON object. * [d3.geoAzimuthalEqualArea](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#geoAzimuthalEqualArea) - the azimuthal equal-area projection. * [d3.geoAzimuthalEqualAreaRaw](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#geoAzimuthalEqualAreaRaw) - the raw azimuthal equal-area projection. * [d3.geoAzimuthalEquidistant](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#geoAzimuthalEquidistant) - the azimuthal equidistant projection. * [d3.geoAzimuthalEquidistantRaw](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#geoAzimuthalEquidistantRaw) - the raw azimuthal equidistant projection. * [d3.geoGnomonic](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#geoGnomonic) - the gnomonic projection. * [d3.geoGnomonicRaw](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#geoGnomonicRaw) - the raw gnomonic projection. * [d3.geoOrthographic](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#geoOrthographic) - the azimuthal orthographic projection. * [d3.geoOrthographicRaw](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#geoOrthographicRaw) - the raw azimuthal orthographic projection. * [d3.geoStereographic](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#geoStereographic) - the azimuthal stereographic projection. * [d3.geoStereographicRaw](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#geoStereographicRaw) - the raw azimuthal stereographic projection. * [d3.geoEqualEarth](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#geoEqualEarth) - the Equal Earth projection. * [d3.geoEqualEarthRaw](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#geoEqualEarthRaw) - the raw Equal Earth projection. * [d3.geoAlbersUsa](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#geoAlbersUsa) - a composite Albers projection for the United States. * [*conic*.parallels](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#conic_parallels) - set the two standard parallels. * [d3.geoAlbers](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#geoAlbers) - the Albers equal-area conic projection. * [d3.geoConicConformal](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#geoConicConformal) - the conic conformal projection. * [d3.geoConicConformalRaw](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#geoConicConformalRaw) - the raw conic conformal projection. * [d3.geoConicEqualArea](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#geoConicEqualArea) - the conic equal-area (Albers) projection. * [d3.geoConicEqualAreaRaw](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#geoConicEqualAreaRaw) - the raw conic equal-area (Albers) projection. * [d3.geoConicEquidistant](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#geoConicEquidistant) - the conic equidistant projection. * [d3.geoConicEquidistantRaw](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#geoConicEquidistantRaw) - the raw conic equidistant projection. * [d3.geoEquirectangular](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#geoEquirectangular) - the equirectangular (plate carreé) projection. * [d3.geoEquirectangularRaw](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#geoEquirectangularRaw) - the raw equirectangular (plate carreé) projection. * [d3.geoMercator](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#geoMercator) - the spherical Mercator projection. * [d3.geoMercatorRaw](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#geoMercatorRaw) - the raw Mercator projection. * [d3.geoTransverseMercator](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#geoTransverseMercator) - the transverse spherical Mercator projection. * [d3.geoTransverseMercatorRaw](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#geoTransverseMercatorRaw) - the raw transverse spherical Mercator projection. * [d3.geoNaturalEarth1](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#geoNaturalEarth1) - the Equal Earth projection, version 1. * [d3.geoNaturalEarth1Raw](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#geoNaturalEarth1Raw) - the raw Equal Earth projection, version 1 ### [Raw projections](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#raw-projections) * [*project*](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#_project) - project the specified point from the sphere to the plane. * [*project*.invert](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#project_invert) - unproject the specified point from the plane to the sphere. * [d3.geoProjection](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#geoProjection) - create a custom projection. * [d3.geoProjectionMutator](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#geoProjectionMutator) - create a custom configurable projection. ### [Spherical Math](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#spherical-math) * [d3.geoArea](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#geoArea) - compute the spherical area of a given feature. * [d3.geoBounds](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#geoBounds) - compute the latitude-longitude bounding box for a given feature. * [d3.geoCentroid](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#geoCentroid) - compute the spherical centroid of a given feature. * [d3.geoDistance](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#geoDistance) - compute the great-arc distance between two points. * [d3.geoLength](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#geoLength) - compute the length of a line string or the perimeter of a polygon. * [d3.geoInterpolate](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#geoInterpolate) - interpolate between two points along a great arc. * [d3.geoContains](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#geoContains) - test whether a point is inside a given feature. * [d3.geoRotation](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#geoRotation) - create a rotation function for the specified angles. * [*rotation*](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#_rotation) - rotate the given point around the sphere. * [*rotation*.invert](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#rotation_invert) - unrotate the given point around the sphere. ### [Spherical Shapes](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#spherical-shapes) * [d3.geoCircle](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#geoCircle) - create a circle generator. * [*circle*](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#_circle) - generate a piecewise circle as a Polygon. * [*circle*.center](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#circle_center) - specify the circle center in latitude and longitude. * [*circle*.radius](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#circle_radius) - specify the angular radius in degrees. * [*circle*.precision](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#circle_precision) - specify the precision of the piecewise circle. * [d3.geoGraticule](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#geoGraticule) - create a graticule generator. * [*graticule*](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#_graticule) - generate a MultiLineString of meridians and parallels. * [*graticule*.lines](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#graticule_lines) - generate an array of LineStrings of meridians and parallels. * [*graticule*.outline](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#graticule_outline) - generate a Polygon of the graticule’s extent. * [*graticule*.extent](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#graticule_extent) - get or set the major & minor extents. * [*graticule*.extentMajor](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#graticule_extentMajor) - get or set the major extent. * [*graticule*.extentMinor](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#graticule_extentMinor) - get or set the minor extent. * [*graticule*.step](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#graticule_step) - get or set the major & minor step intervals. * [*graticule*.stepMajor](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#graticule_stepMajor) - get or set the major step intervals. * [*graticule*.stepMinor](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#graticule_stepMinor) - get or set the minor step intervals. * [*graticule*.precision](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#graticule_precision) - get or set the latitudinal precision. * [d3.geoGraticule10](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#geoGraticule10) - generate the default 10° global graticule. ### [Streams](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#streams) * [d3.geoStream](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#geoStream) - convert a GeoJSON object to a geometry stream. * [*stream*.point](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#stream_point) - indicates a point with the specified coordinates. * [*stream*.lineStart](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#stream_lineStart) - indicates the start of a line or ring. * [*stream*.lineEnd](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#stream_lineEnd) - indicates the end of a line or ring. * [*stream*.polygonStart](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#stream_polygonStart) - indicates the start of a polygon. * [*stream*.polygonEnd](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#stream_polygonEnd) - indicates the end of a polygon. * [*stream*.sphere](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#stream_sphere) - indicates the sphere. ### [Transforms](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#transforms) * [d3.geoTransform](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#geoTransform) - define a custom geometry transform. * [d3.geoIdentity](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#geoIdentity) - scale, translate or clip planar geometry. ### [Clipping](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#clipping) * [*preclip*](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#preclip) - pre-clipping in geographic coordinates. * [*postclip*](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#postclip) - post-clipping in planar coordinates. * [d3.geoClipAntimeridian](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#geoClipAntimeridian) - cuts spherical geometries that cross the antimeridian. * [d3.geoClipCircle](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#geoClipCircle) - clips spherical geometries to a small circle. * [d3.geoClipRectangle](https://github.com/d3/d3-geo/blob/v3.1.0/README.md#geoClipRectangle) - clips planar geometries to a rectangular viewport. ## [Hierarchies (d3-hierarchy)](https://github.com/d3/d3-hierarchy/tree/v3.1.2) Layout algorithms for visualizing hierarchical data. * [d3.hierarchy](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#hierarchy) - constructs a root node from hierarchical data. * [*node*.ancestors](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#node_ancestors) - generate an array of ancestors. * [*node*.descendants](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#node_descendants) - generate an array of descendants. * [*node*.leaves](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#node_leaves) - generate an array of leaves. * [*node*.find](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#node_find) - find a node in the hierarchy. * [*node*.path](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#node_path) - generate the shortest path to another node. * [*node*.links](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#node_links) - generate an array of links. * [*node*.sum](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#node_sum) - evaluate and aggregate quantitative values. * [*node*.count](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#node_count) - count the number of leaves. * [*node*.sort](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#node_sort) - sort all descendant siblings. * [*node*[Symbol.iterator]](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#node_iterator) - iterate on a hierarchy. * [*node*.each](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#node_each) - breadth-first traversal. * [*node*.eachAfter](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#node_eachAfter) - post-order traversal. * [*node*.eachBefore](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#node_eachBefore) - pre-order traversal. * [*node*.copy](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#node_copy) - copy a hierarchy. * [d3.stratify](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#stratify) - create a new stratify operator. * [*stratify*](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#_stratify) - construct a root node from tabular data. * [*stratify*.id](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#stratify_id) - set the node id accessor. * [*stratify*.parentId](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#stratify_parentId) - set the parent node id accessor. * [*stratify*.path](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#stratify_path) - set the path accessor. * [d3.cluster](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#cluster) - create a new cluster (dendrogram) layout. * [*cluster*](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#_cluster) - layout the specified hierarchy in a dendrogram. * [*cluster*.size](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#cluster_size) - set the layout size. * [*cluster*.nodeSize](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#cluster_nodeSize) - set the node size. * [*cluster*.separation](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#cluster_separation) - set the separation between leaves. * [d3.tree](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#tree) - create a new tidy tree layout. * [*tree*](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#_tree) - layout the specified hierarchy in a tidy tree. * [*tree*.size](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#tree_size) - set the layout size. * [*tree*.nodeSize](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#tree_nodeSize) - set the node size. * [*tree*.separation](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#tree_separation) - set the separation between nodes. * [d3.treemap](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#treemap) - create a new treemap layout. * [*treemap*](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#_treemap) - layout the specified hierarchy as a treemap. * [*treemap*.tile](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#treemap_tile) - set the tiling method. * [*treemap*.size](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#treemap_size) - set the layout size. * [*treemap*.round](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#treemap_round) - set whether the output coordinates are rounded. * [*treemap*.padding](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#treemap_padding) - set the padding. * [*treemap*.paddingInner](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#treemap_paddingInner) - set the padding between siblings. * [*treemap*.paddingOuter](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#treemap_paddingOuter) - set the padding between parent and children. * [*treemap*.paddingTop](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#treemap_paddingTop) - set the padding between the parent’s top edge and children. * [*treemap*.paddingRight](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#treemap_paddingRight) - set the padding between the parent’s right edge and children. * [*treemap*.paddingBottom](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#treemap_paddingBottom) - set the padding between the parent’s bottom edge and children. * [*treemap*.paddingLeft](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#treemap_paddingLeft) - set the padding between the parent’s left edge and children. * [d3.treemapBinary](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#treemapBinary) - tile using a balanced binary tree. * [d3.treemapDice](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#treemapDice) - tile into a horizontal row. * [d3.treemapSlice](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#treemapSlice) - tile into a vertical column. * [d3.treemapSliceDice](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#treemapSliceDice) - alternate between slicing and dicing. * [d3.treemapSquarify](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#treemapSquarify) - tile using squarified rows per Bruls *et. al.* * [d3.treemapResquarify](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#treemapResquarify) - like d3.treemapSquarify, but performs stable updates. * [*squarify*.ratio](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#squarify_ratio) - set the desired rectangle aspect ratio. * [d3.partition](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#partition) - create a new partition (icicle or sunburst) layout. * [*partition*](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#_partition) - layout the specified hierarchy as a partition diagram. * [*partition*.size](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#partition_size) - set the layout size. * [*partition*.round](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#partition_round) - set whether the output coordinates are rounded. * [*partition*.padding](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#partition_padding) - set the padding. * [d3.pack](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#pack) - create a new circle-packing layout. * [*pack*](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#_pack) - layout the specified hierarchy using circle-packing. * [*pack*.radius](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#pack_radius) - set the radius accessor. * [*pack*.size](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#pack_size) - set the layout size. * [*pack*.padding](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#pack_padding) - set the padding. * [d3.packSiblings](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#packSiblings) - pack the specified array of circles. * [d3.packEnclose](https://github.com/d3/d3-hierarchy/blob/v3.1.2/README.md#packEnclose) - enclose the specified array of circles. ## [Interpolators (d3-interpolate)](https://github.com/d3/d3-interpolate/tree/v3.0.1) Interpolate numbers, colors, strings, arrays, objects, whatever! * [d3.interpolate](https://github.com/d3/d3-interpolate/blob/v3.0.1/README.md#interpolate) - interpolate arbitrary values. * [d3.interpolateNumber](https://github.com/d3/d3-interpolate/blob/v3.0.1/README.md#interpolateNumber) - interpolate numbers. * [d3.interpolateRound](https://github.com/d3/d3-interpolate/blob/v3.0.1/README.md#interpolateRound) - interpolate integers. * [d3.interpolateString](https://github.com/d3/d3-interpolate/blob/v3.0.1/README.md#interpolateString) - interpolate strings with embedded numbers. * [d3.interpolateDate](https://github.com/d3/d3-interpolate/blob/v3.0.1/README.md#interpolateDate) - interpolate dates. * [d3.interpolateArray](https://github.com/d3/d3-interpolate/blob/v3.0.1/README.md#interpolateArray) - interpolate arrays of arbitrary values. * [d3.interpolateNumberArray](https://github.com/d3/d3-interpolate/blob/v3.0.1/README.md#interpolateNumberArray) - interpolate arrays of numbers. * [d3.interpolateObject](https://github.com/d3/d3-interpolate/blob/v3.0.1/README.md#interpolateObject) - interpolate arbitrary objects. * [d3.interpolateTransformCss](https://github.com/d3/d3-interpolate/blob/v3.0.1/README.md#interpolateTransformCss) - interpolate 2D CSS transforms. * [d3.interpolateTransformSvg](https://github.com/d3/d3-interpolate/blob/v3.0.1/README.md#interpolateTransformSvg) - interpolate 2D SVG transforms. * [d3.interpolateZoom](https://github.com/d3/d3-interpolate/blob/v3.0.1/README.md#interpolateZoom) - zoom and pan between two views. * [*interpolateZoom*.rho](https://github.com/d3/d3-interpolate/blob/v3.0.1/README.md#interpolate_rho) - set the curvature *rho* of the zoom interpolator. * [d3.interpolateDiscrete](https://github.com/d3/d3-interpolate/blob/v3.0.1/README.md#interpolateDiscrete) - generate a discrete interpolator from a set of values. * [d3.quantize](https://github.com/d3/d3-interpolate/blob/v3.0.1/README.md#quantize) - generate uniformly-spaced samples from an interpolator. * [d3.interpolateRgb](https://github.com/d3/d3-interpolate/blob/v3.0.1/README.md#interpolateRgb) - interpolate RGB colors. * [d3.interpolateRgbBasis](https://github.com/d3/d3-interpolate/blob/v3.0.1/README.md#interpolateRgbBasis) - generate a B-spline through a set of colors. * [d3.interpolateRgbBasisClosed](https://github.com/d3/d3-interpolate/blob/v3.0.1/README.md#interpolateRgbBasisClosed) - generate a closed B-spline through a set of colors. * [d3.interpolateHsl](https://github.com/d3/d3-interpolate/blob/v3.0.1/README.md#interpolateHsl) - interpolate HSL colors. * [d3.interpolateHslLong](https://github.com/d3/d3-interpolate/blob/v3.0.1/README.md#interpolateHslLong) - interpolate HSL colors, the long way. * [d3.interpolateLab](https://github.com/d3/d3-interpolate/blob/v3.0.1/README.md#interpolateLab) - interpolate Lab colors. * [d3.interpolateHcl](https://github.com/d3/d3-interpolate/blob/v3.0.1/README.md#interpolateHcl) - interpolate HCL colors. * [d3.interpolateHclLong](https://github.com/d3/d3-interpolate/blob/v3.0.1/README.md#interpolateHclLong) - interpolate HCL colors, the long way. * [d3.interpolateCubehelix](https://github.com/d3/d3-interpolate/blob/v3.0.1/README.md#interpolateCubehelix) - interpolate Cubehelix colors. * [d3.interpolateCubehelixLong](https://github.com/d3/d3-interpolate/blob/v3.0.1/README.md#interpolateCubehelixLong) - interpolate Cubehelix colors, the long way. * [*interpolate*.gamma](https://github.com/d3/d3-interpolate/blob/v3.0.1/README.md#interpolate_gamma) - apply gamma correction during interpolation. * [d3.interpolateHue](https://github.com/d3/d3-interpolate/blob/v3.0.1/README.md#interpolateHue) - interpolate a hue angle. * [d3.interpolateBasis](https://github.com/d3/d3-interpolate/blob/v3.0.1/README.md#interpolateBasis) - generate a B-spline through a set of values. * [d3.interpolateBasisClosed](https://github.com/d3/d3-interpolate/blob/v3.0.1/README.md#interpolateBasisClosed) - generate a closed B-spline through a set of values. * [d3.piecewise](https://github.com/d3/d3-interpolate/blob/v3.0.1/README.md#piecewise) - generate a piecewise linear interpolator from a set of values. ## [Paths (d3-path)](https://github.com/d3/d3-path/tree/v3.1.0) Serialize Canvas path commands to SVG. * [d3.path](https://github.com/d3/d3-path/blob/v3.1.0/README.md#path) - create a new path serializer. * [*path*.moveTo](https://github.com/d3/d3-path/blob/v3.1.0/README.md#path_moveTo) - move to the given point. * [*path*.closePath](https://github.com/d3/d3-path/blob/v3.1.0/README.md#path_closePath) - close the current subpath. * [*path*.lineTo](https://github.com/d3/d3-path/blob/v3.1.0/README.md#path_lineTo) - draw a straight line segment. * [*path*.quadraticCurveTo](https://github.com/d3/d3-path/blob/v3.1.0/README.md#path_quadraticCurveTo) - draw a quadratic Bézier segment. * [*path*.bezierCurveTo](https://github.com/d3/d3-path/blob/v3.1.0/README.md#path_bezierCurveTo) - draw a cubic Bézier segment. * [*path*.arcTo](https://github.com/d3/d3-path/blob/v3.1.0/README.md#path_arcTo) - draw a circular arc segment. * [*path*.arc](https://github.com/d3/d3-path/blob/v3.1.0/README.md#path_arc) - draw a circular arc segment. * [*path*.rect](https://github.com/d3/d3-path/blob/v3.1.0/README.md#path_rect) - draw a rectangle. * [*path*.digits](https://github.com/d3/d3-path/blob/v3.1.0/README.md#path_digits) - set the output precision. * [*path*.toString](https://github.com/d3/d3-path/blob/v3.1.0/README.md#path_toString) - serialize to an SVG path data string. ## [Polygons (d3-polygon)](https://github.com/d3/d3-polygon/tree/v3.0.1) Geometric operations for two-dimensional polygons. * [d3.polygonArea](https://github.com/d3/d3-polygon/blob/v3.0.1/README.md#polygonArea) - compute the area of the given polygon. * [d3.polygonCentroid](https://github.com/d3/d3-polygon/blob/v3.0.1/README.md#polygonCentroid) - compute the centroid of the given polygon. * [d3.polygonHull](https://github.com/d3/d3-polygon/blob/v3.0.1/README.md#polygonHull) - compute the convex hull of the given points. * [d3.polygonContains](https://github.com/d3/d3-polygon/blob/v3.0.1/README.md#polygonContains) - test whether a point is inside a polygon. * [d3.polygonLength](https://github.com/d3/d3-polygon/blob/v3.0.1/README.md#polygonLength) - compute the length of the given polygon’s perimeter. ## [Quadtrees (d3-quadtree)](https://github.com/d3/d3-quadtree/tree/v3.0.1) Two-dimensional recursive spatial subdivision. * [d3.quadtree](https://github.com/d3/d3-quadtree/blob/v3.0.1/README.md#quadtree) - create a new, empty quadtree. * [*quadtree*.x](https://github.com/d3/d3-quadtree/blob/v3.0.1/README.md#quadtree_x) - set the *x* accessor. * [*quadtree*.y](https://github.com/d3/d3-quadtree/blob/v3.0.1/README.md#quadtree_y) - set the *y* accessor. * [*quadtree*.extent](https://github.com/d3/d3-quadtree/blob/v3.0.1/README.md#quadtree_extent) - extend the quadtree to cover an extent. * [*quadtree*.cover](https://github.com/d3/d3-quadtree/blob/v3.0.1/README.md#quadtree_cover) - extend the quadtree to cover a point. * [*quadtree*.add](https://github.com/d3/d3-quadtree/blob/v3.0.1/README.md#quadtree_add) - add a datum to a quadtree. * [*quadtree*.addAll](https://github.com/d3/d3-quadtree/blob/v3.0.1/README.md#quadtree_addAll) - add an array of data to a quadtree. * [*quadtree*.remove](https://github.com/d3/d3-quadtree/blob/v3.0.1/README.md#quadtree_remove) - remove a datum from a quadtree. * [*quadtree*.removeAll](https://github.com/d3/d3-quadtree/blob/v3.0.1/README.md#quadtree_removeAll) - remove an array of data from a quadtree. * [*quadtree*.copy](https://github.com/d3/d3-quadtree/blob/v3.0.1/README.md#quadtree_copy) - create a copy of a quadtree. * [*quadtree*.root](https://github.com/d3/d3-quadtree/blob/v3.0.1/README.md#quadtree_root) - get the quadtree’s root node. * [*quadtree*.data](https://github.com/d3/d3-quadtree/blob/v3.0.1/README.md#quadtree_data) - retrieve all data from the quadtree. * [*quadtree*.size](https://github.com/d3/d3-quadtree/blob/v3.0.1/README.md#quadtree_size) - count the number of data in the quadtree. * [*quadtree*.find](https://github.com/d3/d3-quadtree/blob/v3.0.1/README.md#quadtree_find) - quickly find the closest datum in a quadtree. * [*quadtree*.visit](https://github.com/d3/d3-quadtree/blob/v3.0.1/README.md#quadtree_visit) - selectively visit nodes in a quadtree. * [*quadtree*.visitAfter](https://github.com/d3/d3-quadtree/blob/v3.0.1/README.md#quadtree_visitAfter) - visit all nodes in a quadtree. ## [Random Numbers (d3-random)](https://github.com/d3/d3-random/tree/v3.0.1) Generate random numbers from various distributions. * [d3.randomUniform](https://github.com/d3/d3-random/blob/v3.0.1/README.md#randomUniform) - from a uniform distribution. * [d3.randomInt](https://github.com/d3/d3-random/blob/v3.0.1/README.md#randomInt) - from a uniform integer distribution. * [d3.randomNormal](https://github.com/d3/d3-random/blob/v3.0.1/README.md#randomNormal) - from a normal distribution. * [d3.randomLogNormal](https://github.com/d3/d3-random/blob/v3.0.1/README.md#randomLogNormal) - from a log-normal distribution. * [d3.randomBates](https://github.com/d3/d3-random/blob/v3.0.1/README.md#randomBates) - from a Bates distribution. * [d3.randomIrwinHall](https://github.com/d3/d3-random/blob/v3.0.1/README.md#randomIrwinHall) - from an Irwin–Hall distribution. * [d3.randomExponential](https://github.com/d3/d3-random/blob/v3.0.1/README.md#randomExponential) - from an exponential distribution. * [d3.randomPareto](https://github.com/d3/d3-random/blob/v3.0.1/README.md#randomPareto) - from a Pareto distribution. * [d3.randomBernoulli](https://github.com/d3/d3-random/blob/v3.0.1/README.md#randomBernoulli) - from a Bernoulli distribution. * [d3.randomGeometric](https://github.com/d3/d3-random/blob/v3.0.1/README.md#randomGeometric) - from a geometric distribution. * [d3.randomBinomial](https://github.com/d3/d3-random/blob/v3.0.1/README.md#randomBinomial) - from a binomial distribution. * [d3.randomGamma](https://github.com/d3/d3-random/blob/v3.0.1/README.md#randomGamma) - from a gamma distribution. * [d3.randomBeta](https://github.com/d3/d3-random/blob/v3.0.1/README.md#randomBeta) - from a beta distribution. * [d3.randomWeibull](https://github.com/d3/d3-random/blob/v3.0.1/README.md#randomWeibull) - from a Weibull, Gumbel or Fréchet distribution. * [d3.randomCauchy](https://github.com/d3/d3-random/blob/v3.0.1/README.md#randomCauchy) - from a Cauchy distribution. * [d3.randomLogistic](https://github.com/d3/d3-random/blob/v3.0.1/README.md#randomLogistic) - from a logistic distribution. * [d3.randomPoisson](https://github.com/d3/d3-random/blob/v3.0.1/README.md#randomPoisson) - from a Poisson distribution. * [*random*.source](https://github.com/d3/d3-random/blob/v3.0.1/README.md#random_source) - set the source of randomness. * [d3.randomLcg](https://github.com/d3/d3-random/blob/v3.0.1/README.md#randomLcg) - a seeded pseudorandom number generator. ## [Scales (d3-scale)](https://github.com/d3/d3-scale/tree/v4.0.2) Encodings that map abstract data to visual representation. ### [Continuous Scales](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#continuous-scales) Map a continuous, quantitative domain to a continuous range. * [*continuous*](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#_continuous) - compute the range value corresponding to a given domain value. * [*continuous*.invert](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#continuous_invert) - compute the domain value corresponding to a given range value. * [*continuous*.domain](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#continuous_domain) - set the input domain. * [*continuous*.range](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#continuous_range) - set the output range. * [*continuous*.rangeRound](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#continuous_rangeRound) - set the output range and enable rounding. * [*continuous*.clamp](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#continuous_clamp) - enable clamping to the domain or range. * [*continuous*.unknown](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#continuous_unknown) - set the output value for unknown inputs. * [*continuous*.interpolate](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#continuous_interpolate) - set the output interpolator. * [*continuous*.ticks](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#continuous_ticks) - compute representative values from the domain. * [*continuous*.tickFormat](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#continuous_tickFormat) - format ticks for human consumption. * [*continuous*.nice](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#continuous_nice) - extend the domain to nice round numbers. * [*continuous*.copy](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#continuous_copy) - create a copy of this scale. * [d3.tickFormat](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#tickFormat) - format ticks for human consumption. * [d3.scaleLinear](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#scaleLinear) - create a quantitative linear scale. * [d3.scalePow](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#scalePow) - create a quantitative power scale. * [*pow*](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#_pow) - compute the range value corresponding to a given domain value. * [*pow*.invert](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#pow_invert) - compute the domain value corresponding to a given range value. * [*pow*.exponent](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#pow_exponent) - set the power exponent. * [*pow*.domain](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#pow_domain) - set the input domain. * [*pow*.range](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#pow_range) - set the output range. * [*pow*.rangeRound](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#pow_rangeRound) - set the output range and enable rounding. * [*pow*.clamp](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#pow_clamp) - enable clamping to the domain or range. * [*pow*.interpolate](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#pow_interpolate) - set the output interpolator. * [*pow*.ticks](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#pow_ticks) - compute representative values from the domain. * [*pow*.tickFormat](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#pow_tickFormat) - format ticks for human consumption. * [*pow*.nice](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#pow_nice) - extend the domain to nice round numbers. * [*pow*.copy](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#pow_copy) - create a copy of this scale. * [d3.scaleSqrt](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#scaleSqrt) - create a quantitative power scale with exponent 0.5. * [d3.scaleLog](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#scaleLog) - create a quantitative logarithmic scale. * [*log*](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#_log) - compute the range value corresponding to a given domain value. * [*log*.invert](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#log_invert) - compute the domain value corresponding to a given range value. * [*log*.base](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#log_base) - set the logarithm base. * [*log*.domain](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#log_domain) - set the input domain. * [*log*.range](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#log_range) - set the output range. * [*log*.rangeRound](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#log_rangeRound) - set the output range and enable rounding. * [*log*.clamp](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#log_clamp) - enable clamping to the domain or range. * [*log*.interpolate](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#log_interpolate) - set the output interpolator. * [*log*.ticks](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#log_ticks) - compute representative values from the domain. * [*log*.tickFormat](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#log_tickFormat) - format ticks for human consumption. * [*log*.nice](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#log_nice) - extend the domain to nice round numbers. * [*log*.copy](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#log_copy) - create a copy of this scale. * [d3.scaleSymlog](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#scaleSymlog) - create a symmetric logarithmic scale. * [*symlog*.constant](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#symlog_constant) - set the constant of a symlog scale. * [d3.scaleIdentity](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#scaleIdentity) - creates an identity scale. * [d3.scaleRadial](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#scaleRadial) - creates a radial scale. * [d3.scaleTime](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#scaleTime) - create a linear scale for time. * [*time*](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#_time) - compute the range value corresponding to a given domain value. * [*time*.invert](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#time_invert) - compute the domain value corresponding to a given range value. * [*time*.domain](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#time_domain) - set the input domain. * [*time*.range](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#time_range) - set the output range. * [*time*.rangeRound](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#time_rangeRound) - set the output range and enable rounding. * [*time*.clamp](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#time_clamp) - enable clamping to the domain or range. * [*time*.interpolate](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#time_interpolate) - set the output interpolator. * [*time*.ticks](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#time_ticks) - compute representative values from the domain. * [*time*.tickFormat](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#time_tickFormat) - format ticks for human consumption. * [*time*.nice](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#time_nice) - extend the domain to nice round times. * [*time*.copy](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#time_copy) - create a copy of this scale. * [d3.scaleUtc](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#scaleUtc) - create a linear scale for UTC. ### [Sequential Scales](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#sequential-scales) Map a continuous, quantitative domain to a continuous, fixed interpolator. * [d3.scaleSequential](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#scaleSequential) - create a sequential scale. * [*sequential*](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#_sequential) - compute the range value corresponding to an input value. * [*sequential*.domain](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#sequential_domain) - set the input domain. * [*sequential*.clamp](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#sequential_clamp) - enable clamping to the domain. * [*sequential*.interpolator](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#sequential_interpolator) - set the scale’s output interpolator. * [*sequential*.range](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#sequential_range) - set the output range. * [*sequential*.rangeRound](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#sequential_rangeRound) - set the output range and enable rounding. * [*sequential*.copy](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#sequential_copy) - create a copy of this scale. * [d3.scaleSequentialLog](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#scaleSequentialLog) - create a logarithmic sequential scale. * [d3.scaleSequentialPow](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#scaleSequentialPow) - create a power sequential scale. * [d3.scaleSequentialSqrt](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#scaleSequentialSqrt) - create a power sequential scale with exponent 0.5. * [d3.scaleSequentialSymlog](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#scaleSequentialSymlog) - create a symmetric logarithmic sequential scale. * [d3.scaleSequentialQuantile](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#scaleSequentialQuantile) - create a sequential scale using a *p*-quantile transform. * [*sequentialQuantile*.quantiles](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#sequentialQuantile_quantiles) - return the scale’s quantiles. ### [Diverging Scales](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#diverging-scales) Map a continuous, quantitative domain to a continuous, fixed interpolator. * [d3.scaleDiverging](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#scaleDiverging) - create a diverging scale. * [*diverging*](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#_diverging) - compute the range value corresponding to an input value. * [*diverging*.domain](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#diverging_domain) - set the input domain. * [*diverging*.clamp](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#diverging_clamp) - enable clamping to the domain or range. * [*diverging*.interpolator](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#diverging_interpolator) - set the scale’s output interpolator. * [*diverging*.range](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#diverging_range) - set the output range. * [*diverging*.rangeRound](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#diverging_rangeRound) - set the output range and enable rounding. * [*diverging*.copy](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#diverging_copy) - create a copy of this scale. * [*diverging*.unknown](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#diverging_unknown) - set the output value for unknown inputs. * [d3.scaleDivergingLog](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#scaleDivergingLog) - create a diverging logarithmic scale. * [d3.scaleDivergingPow](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#scaleDivergingPow) - create a diverging power scale. * [d3.scaleDivergingSqrt](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#scaleDivergingSqrt) - create a diverging power scale with exponent 0.5. * [d3.scaleDivergingSymlog](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#scaleDivergingSymlog) - create a diverging symmetric logarithmic scale. ### [Quantize Scales](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#quantize-scales) Map a continuous, quantitative domain to a discrete range. * [d3.scaleQuantize](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#scaleQuantize) - create a uniform quantizing linear scale. * [*quantize*](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#_quantize) - compute the range value corresponding to a given domain value. * [*quantize*.invertExtent](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#quantize_invertExtent) - compute the domain values corresponding to a given range value. * [*quantize*.domain](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#quantize_domain) - set the input domain. * [*quantize*.range](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#quantize_range) - set the output range. * [*quantize*.ticks](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#quantize_ticks) - compute representative values from the domain. * [*quantize*.tickFormat](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#quantize_tickFormat) - format ticks for human consumption. * [*quantize*.nice](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#quantize_nice) - extend the domain to nice round numbers. * [*quantize*.thresholds](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#quantize_thresholds) - return the array of computed thresholds within the domain. * [*quantize*.copy](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#quantize_copy) - create a copy of this scale. * [d3.scaleQuantile](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#scaleQuantile) - create a quantile quantizing linear scale. * [*quantile*](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#_quantile) - compute the range value corresponding to a given domain value. * [*quantile*.invertExtent](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#quantile_invertExtent) - compute the domain values corresponding to a given range value. * [*quantile*.domain](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#quantile_domain) - set the input domain. * [*quantile*.range](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#quantile_range) - set the output range. * [*quantile*.quantiles](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#quantile_quantiles) - get the quantile thresholds. * [*quantile*.copy](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#quantile_copy) - create a copy of this scale. * [d3.scaleThreshold](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#scaleThreshold) - create an arbitrary quantizing linear scale. * [*threshold*](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#_threshold) - compute the range value corresponding to a given domain value. * [*threshold*.invertExtent](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#threshold_invertExtent) - compute the domain values corresponding to a given range value. * [*threshold*.domain](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#threshold_domain) - set the input domain. * [*threshold*.range](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#threshold_range) - set the output range. * [*threshold*.copy](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#threshold_copy) - create a copy of this scale. ### [Ordinal Scales](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#ordinal-scales) Map a discrete domain to a discrete range. * [d3.scaleOrdinal](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#scaleOrdinal) - create an ordinal scale. * [*ordinal*](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#_ordinal) - compute the range value corresponding to a given domain value. * [*ordinal*.domain](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#ordinal_domain) - set the input domain. * [*ordinal*.range](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#ordinal_range) - set the output range. * [*ordinal*.unknown](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#ordinal_unknown) - set the output value for unknown inputs. * [*ordinal*.copy](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#ordinal_copy) - create a copy of this scale. * [d3.scaleImplicit](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#scaleImplicit) - a special unknown value for implicit domains. * [d3.scaleBand](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#scaleBand) - create an ordinal band scale. * [*band*](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#_band) - compute the band start corresponding to a given domain value. * [*band*.domain](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#band_domain) - set the input domain. * [*band*.range](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#band_range) - set the output range. * [*band*.rangeRound](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#band_rangeRound) - set the output range and enable rounding. * [*band*.round](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#band_round) - enable rounding. * [*band*.paddingInner](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#band_paddingInner) - set padding between bands. * [*band*.paddingOuter](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#band_paddingOuter) - set padding outside the first and last bands. * [*band*.padding](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#band_padding) - set padding outside and between bands. * [*band*.align](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#band_align) - set band alignment, if there is extra space. * [*band*.bandwidth](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#band_bandwidth) - get the width of each band. * [*band*.step](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#band_step) - get the distance between the starts of adjacent bands. * [*band*.copy](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#band_copy) - create a copy of this scale. * [d3.scalePoint](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#scalePoint) - create an ordinal point scale. * [*point*](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#_point) - compute the point corresponding to a given domain value. * [*point*.domain](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#point_domain) - set the input domain. * [*point*.range](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#point_range) - set the output range. * [*point*.rangeRound](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#point_rangeRound) - set the output range and enable rounding. * [*point*.round](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#point_round) - enable rounding. * [*point*.padding](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#point_padding) - set padding outside the first and last point. * [*point*.align](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#point_align) - set point alignment, if there is extra space. * [*point*.bandwidth](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#point_bandwidth) - returns zero. * [*point*.step](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#point_step) - get the distance between the starts of adjacent points. * [*point*.copy](https://github.com/d3/d3-scale/blob/v4.0.2/README.md#point_copy) - create a copy of this scale. ## [Selections (d3-selection)](https://github.com/d3/d3-selection/tree/v3.0.0) Transform the DOM by selecting elements and joining to data. ### [Selecting Elements](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#selecting-elements) * [d3.selection](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#selection) - select the root document element. * [d3.select](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#select) - select an element from the document. * [d3.selectAll](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#selectAll) - select multiple elements from the document. * [*selection*.select](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#selection_select) - select a descendant element for each selected element. * [*selection*.selectAll](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#selection_selectAll) - select multiple descendants for each selected element. * [*selection*.filter](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#selection_filter) - filter elements based on data. * [*selection*.merge](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#selection_merge) - merge this selection with another. * [*selection*.selectChild](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#selection_selectChild) - select a child element for each selected element. * [*selection*.selectChildren](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#selection_selectChildren) - select the children elements for each selected element. * [*selection*.selection](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#selection_selection) - return the selection. * [d3.matcher](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#matcher) - test whether an element matches a selector. * [d3.selector](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#selector) - select an element. * [d3.selectorAll](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#selectorAll) - select elements. * [d3.window](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#window) - get a node’s owner window. * [d3.style](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#style) - get a node’s current style value. ### [Modifying Elements](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#modifying-elements) * [*selection*.attr](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#selection_attr) - get or set an attribute. * [*selection*.classed](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#selection_classed) - get, add or remove CSS classes. * [*selection*.style](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#selection_style) - get or set a style property. * [*selection*.property](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#selection_property) - get or set a (raw) property. * [*selection*.text](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#selection_text) - get or set the text content. * [*selection*.html](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#selection_html) - get or set the inner HTML. * [*selection*.append](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#selection_append) - create, append and select new elements. * [*selection*.insert](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#selection_insert) - create, insert and select new elements. * [*selection*.remove](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#selection_remove) - remove elements from the document. * [*selection*.clone](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#selection_clone) - insert clones of selected elements. * [*selection*.sort](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#selection_sort) - sort elements in the document based on data. * [*selection*.order](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#selection_order) - reorders elements in the document to match the selection. * [*selection*.raise](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#selection_raise) - reorders each element as the last child of its parent. * [*selection*.lower](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#selection_lower) - reorders each element as the first child of its parent. * [d3.create](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#create) - create and select a detached element. * [d3.creator](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#creator) - create an element by name. ### [Joining Data](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#joining-data) * [*selection*.data](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#selection_data) - bind elements to data. * [*selection*.join](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#selection_join) - enter, update or exit elements based on data. * [*selection*.enter](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#selection_enter) - get the enter selection (data missing elements). * [*selection*.exit](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#selection_exit) - get the exit selection (elements missing data). * [*selection*.datum](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#selection_datum) - get or set element data (without joining). ### [Handling Events](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#handling-events) * [*selection*.on](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#selection_on) - add or remove event listeners. * [*selection*.dispatch](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#selection_dispatch) - dispatch a custom event. * [d3.pointer](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#pointer) - get the pointer’s position of an event. * [d3.pointers](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#pointers) - get the pointers’ positions of an event. ### [Control Flow](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#control-flow) * [*selection*.each](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#selection_each) - call a function for each element. * [*selection*.call](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#selection_call) - call a function with this selection. * [*selection*.empty](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#selection_empty) - returns true if this selection is empty. * [*selection*.nodes](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#selection_nodes) - returns an array of all selected elements. * [*selection*.node](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#selection_node) - returns the first (non-null) element. * [*selection*.size](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#selection_size) - returns the count of elements. * [*selection*[Symbol.iterator]](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#selection_iterator) - iterate over the selection’s nodes. ### [Local Variables](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#local-variables) * [d3.local](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#local) - declares a new local variable. * [*local*.set](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#local_set) - set a local variable’s value. * [*local*.get](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#local_get) - get a local variable’s value. * [*local*.remove](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#local_remove) - delete a local variable. * [*local*.toString](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#local_toString) - get the property identifier of a local variable. ### [Namespaces](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#namespaces) * [d3.namespace](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#namespace) - qualify a prefixed XML name, such as “xlink:href”. * [d3.namespaces](https://github.com/d3/d3-selection/blob/v3.0.0/README.md#namespaces) - the built-in XML namespaces. ## [Shapes (d3-shape)](https://github.com/d3/d3-shape/tree/v3.2.0) Graphical primitives for visualization. ### [Arcs](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#arcs) Circular or annular sectors, as in a pie or donut chart. * [d3.arc](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#arc) - create a new arc generator. * [*arc*](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#_arc) - generate an arc for the given datum. * [*arc*.centroid](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#arc_centroid) - compute an arc’s midpoint. * [*arc*.innerRadius](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#arc_innerRadius) - set the inner radius. * [*arc*.outerRadius](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#arc_outerRadius) - set the outer radius. * [*arc*.cornerRadius](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#arc_cornerRadius) - set the corner radius, for rounded corners. * [*arc*.startAngle](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#arc_startAngle) - set the start angle. * [*arc*.endAngle](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#arc_endAngle) - set the end angle. * [*arc*.padAngle](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#arc_padAngle) - set the angle between adjacent arcs, for padded arcs. * [*arc*.padRadius](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#arc_padRadius) - set the radius at which to linearize padding. * [*arc*.context](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#arc_context) - set the rendering context. * [*arc*.digits](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#arc_digits) - set the output precision. ### [Pies](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#pies) Compute the necessary angles to represent a tabular dataset as a pie or donut chart. * [d3.pie](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#pie) - create a new pie generator. * [*pie*](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#_pie) - compute the arc angles for the given dataset. * [*pie*.value](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#pie_value) - set the value accessor. * [*pie*.sort](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#pie_sort) - set the sort order comparator. * [*pie*.sortValues](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#pie_sortValues) - set the sort order comparator. * [*pie*.startAngle](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#pie_startAngle) - set the overall start angle. * [*pie*.endAngle](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#pie_endAngle) - set the overall end angle. * [*pie*.padAngle](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#pie_padAngle) - set the pad angle between adjacent arcs. ### [Lines](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#lines) A spline or polyline, as in a line chart. * [d3.line](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#line) - create a new line generator. * [*line*](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#_line) - generate a line for the given dataset. * [*line*.x](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#line_x) - set the *x* accessor. * [*line*.y](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#line_y) - set the *y* accessor. * [*line*.defined](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#line_defined) - set the defined accessor. * [*line*.curve](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#line_curve) - set the curve interpolator. * [*line*.context](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#line_context) - set the rendering context. * [*line*.digits](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#line_digits) - set the output precision. * [d3.lineRadial](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#lineRadial) - create a new radial line generator. * [*lineRadial*](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#_lineRadial) - generate a line for the given dataset. * [*lineRadial*.angle](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#lineRadial_angle) - set the angle accessor. * [*lineRadial*.radius](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#lineRadial_radius) - set the radius accessor. * [*lineRadial*.defined](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#lineRadial_defined) - set the defined accessor. * [*lineRadial*.curve](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#lineRadial_curve) - set the curve interpolator. * [*lineRadial*.context](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#lineRadial_context) - set the rendering context. * [*lineRadial*.digits](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#lineRadial_digits) - set the output precision. ### [Areas](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#areas) An area, defined by a bounding topline and baseline, as in an area chart. * [d3.area](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#area) - create a new area generator. * [*area*](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#_area) - generate an area for the given dataset. * [*area*.x](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#area_x) - set the *x0* and *x1* accessors. * [*area*.x0](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#area_x0) - set the baseline *x* accessor. * [*area*.x1](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#area_x1) - set the topline *x* accessor. * [*area*.y](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#area_y) - set the *y0* and *y1* accessors. * [*area*.y0](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#area_y0) - set the baseline *y* accessor. * [*area*.y1](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#area_y1) - set the topline *y* accessor. * [*area*.defined](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#area_defined) - set the defined accessor. * [*area*.curve](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#area_curve) - set the curve interpolator. * [*area*.context](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#area_context) - set the rendering context. * [*area*.digits](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#area_digits) - set the output precision. * [*area*.lineX0](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#area_lineX0) - derive a line for the left edge of an area. * [*area*.lineY0](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#area_lineY0) - derive a line for the top edge of an area. * [*area*.lineX1](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#area_lineX1) - derive a line for the right edge of an area. * [*area*.lineY1](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#area_lineY1) - derive a line for the bottom edge of an area. * [d3.areaRadial](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#areaRadial) - create a new radial area generator. * [*areaRadial*](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#_areaRadial) - generate an area for the given dataset. * [*areaRadial*.angle](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#areaRadial_angle) - set the start and end angle accessors. * [*areaRadial*.startAngle](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#areaRadial_startAngle) - set the start angle accessor. * [*areaRadial*.endAngle](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#areaRadial_endAngle) - set the end angle accessor. * [*areaRadial*.radius](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#areaRadial_radius) - set the inner and outer radius accessors. * [*areaRadial*.innerRadius](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#areaRadial_innerRadius) - set the inner radius accessor. * [*areaRadial*.outerRadius](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#areaRadial_outerRadius) - set the outer radius accessor. * [*areaRadial*.defined](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#areaRadial_defined) - set the defined accessor. * [*areaRadial*.curve](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#areaRadial_curve) - set the curve interpolator. * [*areaRadial*.context](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#areaRadial_context) - set the rendering context. * [*areaRadial*.digits](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#areaRadial_digits) - set the output precision. * [*areaRadial*.lineStartAngle](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#areaRadial_lineStartAngle) - derive a line for the start edge of an area. * [*areaRadial*.lineInnerRadius](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#areaRadial_lineInnerRadius) - derive a line for the inner edge of an area. * [*areaRadial*.lineEndAngle](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#areaRadial_lineEndAngle) - derive a line for the end edge of an area. * [*areaRadial*.lineOuterRadius](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#areaRadial_lineOuterRadius) - derive a line for the outer edge of an area. ### [Curves](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#curves) Interpolate between points to produce a continuous shape. * [d3.curveBasis](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#curveBasis) - a cubic basis spline, repeating the end points. * [d3.curveBasisClosed](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#curveBasisClosed) - a closed cubic basis spline. * [d3.curveBasisOpen](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#curveBasisOpen) - a cubic basis spline. * [d3.curveBundle](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#curveBundle) - a straightened cubic basis spline. * [*bundle*.beta](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#curveBundle_beta) - set the bundle tension *beta*. * [d3.curveBumpX](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#curveBumpX) - a cubic Bézier spline with horizontal tangents. * [d3.curveBumpY](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#curveBumpY) - a cubic Bézier spline with vertical tangents. * [d3.curveCardinal](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#curveCardinal) - a cubic cardinal spline, with one-sided difference at each end. * [d3.curveCardinalClosed](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#curveCardinalClosed) - a closed cubic cardinal spline. * [d3.curveCardinalOpen](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#curveCardinalOpen) - a cubic cardinal spline. * [*cardinal*.tension](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#curveCardinal_tension) - set the cardinal spline tension. * [d3.curveCatmullRom](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#curveCatmullRom) - a cubic Catmull–Rom spline, with one-sided difference at each end. * [d3.curveCatmullRomClosed](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#curveCatmullRomClosed) - a closed cubic Catmull–Rom spline. * [d3.curveCatmullRomOpen](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#curveCatmullRomOpen) - a cubic Catmull–Rom spline. * [*catmullRom*.alpha](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#curveCatmullRom_alpha) - set the Catmull–Rom parameter *alpha*. * [d3.curveLinear](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#curveLinear) - a polyline. * [d3.curveLinearClosed](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#curveLinearClosed) - a closed polyline. * [d3.curveMonotoneX](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#curveMonotoneX) - a cubic spline that, given monotonicity in *x*, preserves it in *y*. * [d3.curveMonotoneY](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#curveMonotoneY) - a cubic spline that, given monotonicity in *y*, preserves it in *x*. * [d3.curveNatural](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#curveNatural) - a natural cubic spline. * [d3.curveStep](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#curveStep) - a piecewise constant function. * [d3.curveStepAfter](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#curveStepAfter) - a piecewise constant function. * [d3.curveStepBefore](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#curveStepBefore) - a piecewise constant function. * [*curve*.areaStart](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#curve_areaStart) - start a new area segment. * [*curve*.areaEnd](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#curve_areaEnd) - end the current area segment. * [*curve*.lineStart](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#curve_lineStart) - start a new line segment. * [*curve*.lineEnd](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#curve_lineEnd) - end the current line segment. * [*curve*.point](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#curve_point) - add a point to the current line segment. ### [Links](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#links) A smooth cubic Bézier curve from a source to a target. * [d3.link](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#link) - create a new link generator. * [d3.linkVertical](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#linkVertical) - create a new vertical link generator. * [d3.linkHorizontal](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#linkHorizontal) - create a new horizontal link generator. * [*link*](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#_link) - generate a link. * [*link*.source](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#link_source) - set the source accessor. * [*link*.target](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#link_target) - set the target accessor. * [*link*.x](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#link_x) - set the point *x*-accessor. * [*link*.y](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#link_y) - set the point *y*-accessor. * [*link*.context](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#link_context) - set the rendering context. * [*link*.digits](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#link_digits) - set the output precision. * [d3.linkRadial](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#linkRadial) - create a new radial link generator. * [*linkRadial*.angle](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#linkRadial_angle) - set the point *angle* accessor. * [*linkRadial*.radius](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#linkRadial_radius) - set the point *radius* accessor. ### [Symbols](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#symbols) A categorical shape encoding, as in a scatterplot. * [d3.symbol](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#symbol) - create a new symbol generator. * [*symbol*](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#_symbol) - generate a symbol for the given datum. * [*symbol*.type](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#symbol_type) - set the symbol type. * [*symbol*.size](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#symbol_size) - set the size of the symbol in square pixels. * [*symbol*.context](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#symbol_context) - set the rendering context. * [*symbol*.digits](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#symbol_digits) - set the output precision. * [d3.symbolsFill](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#symbolsFill) - an array of built-in symbol types for filling. * [d3.symbolsStroke](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#symbolsStroke) - an array of built-in symbol types for stroking. * [d3.symbolAsterisk](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#symbolAsterisk) - an asterisk; for stroke. * [d3.symbolCircle](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#symbolCircle) - a circle; for fill or stroke. * [d3.symbolCross](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#symbolCross) - a Greek cross with arms of equal length; for fill. * [d3.symbolDiamond](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#symbolDiamond) - a rhombus; for fill. * [d3.symbolDiamond2](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#symbolDiamond2) - a rotated square; for stroke. * [d3.symbolPlus](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#symbolPlus) - a plus sign; for stroke. * [d3.symbolSquare](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#symbolSquare) - a square; for fill. * [d3.symbolSquare2](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#symbolSquare2) - a square; for stroke. * [d3.symbolStar](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#symbolStar) - a pentagonal star (pentagram); for fill. * [d3.symbolTriangle](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#symbolTriangle) - an up-pointing triangle; for fill. * [d3.symbolTriangle2](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#symbolTriangle2) - an up-pointing triangle; for stroke. * [d3.symbolWye](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#symbolWye) - a Y shape; for fill. * [d3.symbolX](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#symbolX) - an X shape; for stroke. * [d3.pointRadial](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#pointRadial) - relative coordinates of a point given an angle and radius. * [*symbolType*.draw](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#symbolType_draw) - draw this symbol to the given context. ### [Stacks](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#stacks) Stack shapes, placing one adjacent to another, as in a stacked bar chart. * [d3.stack](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#stack) - create a new stack generator. * [*stack*](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#_stack) - generate a stack for the given dataset. * [*stack*.keys](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#stack_keys) - set the keys accessor. * [*stack*.value](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#stack_value) - set the value accessor. * [*stack*.order](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#stack_order) - set the order accessor. * [*stack*.offset](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#stack_offset) - set the offset accessor. * [d3.stackOrderAppearance](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#stackOrderAppearance) - put the earliest series on bottom. * [d3.stackOrderAscending](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#stackOrderAscending) - put the smallest series on bottom. * [d3.stackOrderDescending](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#stackOrderDescending) - put the largest series on bottom. * [d3.stackOrderInsideOut](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#stackOrderInsideOut) - put earlier series in the middle. * [d3.stackOrderNone](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#stackOrderNone) - use the given series order. * [d3.stackOrderReverse](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#stackOrderReverse) - use the reverse of the given series order. * [d3.stackOffsetExpand](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#stackOffsetExpand) - normalize the baseline to zero and topline to one. * [d3.stackOffsetDiverging](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#stackOffsetDiverging) - positive above zero; negative below zero. * [d3.stackOffsetNone](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#stackOffsetNone) - apply a zero baseline. * [d3.stackOffsetSilhouette](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#stackOffsetSilhouette) - center the streamgraph around zero. * [d3.stackOffsetWiggle](https://github.com/d3/d3-shape/blob/v3.2.0/README.md#stackOffsetWiggle) - minimize streamgraph wiggling. ## [Time Formats (d3-time-format)](https://github.com/d3/d3-time-format/tree/v4.0.0) Parse and format times, inspired by strptime and strftime. * [d3.timeFormat](https://github.com/d3/d3-time-format/blob/v4.1.0/README.md#timeFormat) - alias for *locale*.format on the default locale. * [d3.timeParse](https://github.com/d3/d3-time-format/blob/v4.1.0/README.md#timeParse) - alias for *locale*.parse on the default locale. * [d3.utcFormat](https://github.com/d3/d3-time-format/blob/v4.1.0/README.md#utcFormat) - alias for *locale*.utcFormat on the default locale. * [d3.utcParse](https://github.com/d3/d3-time-format/blob/v4.1.0/README.md#utcParse) - alias for *locale*.utcParse on the default locale. * [d3.isoFormat](https://github.com/d3/d3-time-format/blob/v4.1.0/README.md#isoFormat) - an ISO 8601 UTC formatter. * [d3.isoParse](https://github.com/d3/d3-time-format/blob/v4.1.0/README.md#isoParse) - an ISO 8601 UTC parser. * [*locale*.format](https://github.com/d3/d3-time-format/blob/v4.1.0/README.md#locale_format) - create a time formatter. * [*locale*.parse](https://github.com/d3/d3-time-format/blob/v4.1.0/README.md#locale_parse) - create a time parser. * [*locale*.utcFormat](https://github.com/d3/d3-time-format/blob/v4.1.0/README.md#locale_utcFormat) - create a UTC formatter. * [*locale*.utcParse](https://github.com/d3/d3-time-format/blob/v4.1.0/README.md#locale_utcParse) - create a UTC parser. * [d3.timeFormatLocale](https://github.com/d3/d3-time-format/blob/v4.1.0/README.md#timeFormatLocale) - define a custom locale. * [d3.timeFormatDefaultLocale](https://github.com/d3/d3-time-format/blob/v4.1.0/README.md#timeFormatDefaultLocale) - define the default locale. ## [Time Intervals (d3-time)](https://github.com/d3/d3-time/tree/v3.1.0) A calculator for humanity’s peculiar conventions of time. * [d3.timeInterval](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeInterval) - implement a new custom time interval. * [*interval*](https://github.com/d3/d3-time/blob/v3.1.0/README.md#_interval) - alias for *interval*.floor. * [*interval*.floor](https://github.com/d3/d3-time/blob/v3.1.0/README.md#interval_floor) - round down to the nearest boundary. * [*interval*.round](https://github.com/d3/d3-time/blob/v3.1.0/README.md#interval_round) - round to the nearest boundary. * [*interval*.ceil](https://github.com/d3/d3-time/blob/v3.1.0/README.md#interval_ceil) - round up to the nearest boundary. * [*interval*.offset](https://github.com/d3/d3-time/blob/v3.1.0/README.md#interval_offset) - offset a date by some number of intervals. * [*interval*.range](https://github.com/d3/d3-time/blob/v3.1.0/README.md#interval_range) - generate a range of dates at interval boundaries. * [*interval*.filter](https://github.com/d3/d3-time/blob/v3.1.0/README.md#interval_filter) - create a filtered subset of this interval. * [*interval*.every](https://github.com/d3/d3-time/blob/v3.1.0/README.md#interval_every) - create a filtered subset of this interval. * [*interval*.count](https://github.com/d3/d3-time/blob/v3.1.0/README.md#interval_count) - count interval boundaries between two dates. * [d3.timeMillisecond](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeMillisecond), [d3.utcMillisecond](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeMillisecond) - the millisecond interval. * [d3.timeMilliseconds](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeMillisecond), [d3.utcMilliseconds](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeMillisecond) - aliases for millisecond.range. * [d3.timeSecond](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeSecond), [d3.utcSecond](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeSecond) - the second interval. * [d3.timeSeconds](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeSecond), [d3.utcSeconds](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeSecond) - aliases for second.range. * [d3.timeMinute](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeMinute), [d3.utcMinute](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeMinute) - the minute interval. * [d3.timeMinutes](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeMinute), [d3.utcMinutes](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeMinute) - aliases for minute.range. * [d3.timeHour](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeHour), [d3.utcHour](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeHour) - the hour interval. * [d3.timeHours](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeHour), [d3.utcHours](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeHour) - aliases for hour.range. * [d3.timeDay](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeDay), [d3.utcDay](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeDay), [d3.unixDay](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeDay) - the day interval. * [d3.timeDays](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeDay), [d3.utcDays](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeDay), [d3.unixDays](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeDay) - aliases for day.range. * [d3.timeWeek](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeWeek), [d3.utcWeek](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeWeek) - aliases for sunday. * [d3.timeWeeks](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeWeek), [d3.utcWeeks](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeWeek) - aliases for week.range. * [d3.timeSunday](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeSunday), [d3.utcSunday](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeSunday) - the week interval, starting on Sunday. * [d3.timeSundays](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeSunday), [d3.utcSundays](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeSunday) - aliases for sunday.range. * [d3.timeMonday](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeMonday), [d3.utcMonday](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeMonday) - the week interval, starting on Monday. * [d3.timeMondays](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeMonday), [d3.utcMondays](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeMonday) - aliases for monday.range. * [d3.timeTuesday](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeTuesday), [d3.utcTuesday](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeTuesday) - the week interval, starting on Tuesday. * [d3.timeTuesdays](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeTuesday), [d3.utcTuesdays](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeTuesday) - aliases for tuesday.range. * [d3.timeWednesday](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeWednesday), [d3.utcWednesday](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeWednesday) - the week interval, starting on Wednesday. * [d3.timeWednesdays](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeWednesday), [d3.utcWednesdays](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeWednesday) - aliases for wednesday.range. * [d3.timeThursday](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeThursday), [d3.utcThursday](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeThursday) - the week interval, starting on Thursday. * [d3.timeThursdays](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeThursday), [d3.utcThursdays](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeThursday) - aliases for thursday.range. * [d3.timeFriday](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeFriday), [d3.utcFriday](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeFriday) - the week interval, starting on Friday. * [d3.timeFridays](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeFriday), [d3.utcFridays](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeFriday) - aliases for friday.range. * [d3.timeSaturday](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeSaturday), [d3.utcSaturday](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeSaturday) - the week interval, starting on Saturday. * [d3.timeSaturdays](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeSaturday), [d3.utcSaturdays](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeSaturday) - aliases for saturday.range. * [d3.timeMonth](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeMonth), [d3.utcMonth](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeMonth) - the month interval. * [d3.timeMonths](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeMonth), [d3.utcMonths](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeMonth) - aliases for month.range. * [d3.timeYear](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeYear), [d3.utcYear](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeYear) - the year interval. * [d3.timeYears](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeYear), [d3.utcYears](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeYear) - aliases for year.range. * [d3.timeTicks](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeTicks), [d3.utcTicks](https://github.com/d3/d3-time/blob/v3.1.0/README.md#utcTicks) - * [d3.timeTickInterval](https://github.com/d3/d3-time/blob/v3.1.0/README.md#timeTickInterval), [d3.utcTickInterval](https://github.com/d3/d3-time/blob/v3.1.0/README.md#utcTickInterval) - ## [Timers (d3-timer)](https://github.com/d3/d3-timer/tree/v3.0.1) An efficient queue for managing thousands of concurrent animations. * [d3.now](https://github.com/d3/d3-timer/blob/v3.0.1/README.md#now) - get the current high-resolution time. * [d3.timer](https://github.com/d3/d3-timer/blob/v3.0.1/README.md#timer) - schedule a new timer. * [*timer*.restart](https://github.com/d3/d3-timer/blob/v3.0.1/README.md#timer_restart) - reset the timer’s start time and callback. * [*timer*.stop](https://github.com/d3/d3-timer/blob/v3.0.1/README.md#timer_stop) - stop the timer. * [d3.timerFlush](https://github.com/d3/d3-timer/blob/v3.0.1/README.md#timerFlush) - immediately execute any eligible timers. * [d3.timeout](https://github.com/d3/d3-timer/blob/v3.0.1/README.md#timeout) - schedule a timer that stops on its first callback. * [d3.interval](https://github.com/d3/d3-timer/blob/v3.0.1/README.md#interval) - schedule a timer that is called with a configurable period. ## [Transitions (d3-transition)](https://github.com/d3/d3-transition/tree/v3.0.1) Animated transitions for [selections](#selections). * [*selection*.transition](https://github.com/d3/d3-transition/blob/v3.0.0/README.md#selection_transition) - schedule a transition for the selected elements. * [*selection*.interrupt](https://github.com/d3/d3-transition/blob/v3.0.0/README.md#selection_interrupt) - interrupt and cancel transitions on the selected elements. * [d3.interrupt](https://github.com/d3/d3-transition/blob/v3.0.0/README.md#interrupt) - interrupt the active transition for a given node. * [d3.transition](https://github.com/d3/d3-transition/blob/v3.0.0/README.md#transition) - schedule a transition on the root document element. * [*transition*.select](https://github.com/d3/d3-transition/blob/v3.0.0/README.md#transition_select) - schedule a transition on the selected elements. * [*transition*.selectAll](https://github.com/d3/d3-transition/blob/v3.0.0/README.md#transition_selectAll) - schedule a transition on the selected elements. * [*transition*.selectChild](https://github.com/d3/d3-transition/blob/v3.0.0/README.md#transition_selectChild) - select a child element for each selected element. * [*transition*.selectChildren](https://github.com/d3/d3-transition/blob/v3.0.0/README.md#transition_selectChildren) - select the children elements for each selected element. * [*transition*.selection](https://github.com/d3/d3-transition/blob/v3.0.0/README.md#transition_selection) - returns a selection for this transition. * [*transition*.filter](https://github.com/d3/d3-transition/blob/v3.0.0/README.md#transition_filter) - filter elements based on data. * [*transition*.merge](https://github.com/d3/d3-transition/blob/v3.0.0/README.md#transition_merge) - merge this transition with another. * [*transition*.transition](https://github.com/d3/d3-transition/blob/v3.0.0/README.md#transition_transition) - schedule a new transition following this one. * [d3.active](https://github.com/d3/d3-transition/blob/v3.0.0/README.md#active) - select the active transition for a given node. * [*transition*.attr](https://github.com/d3/d3-transition/blob/v3.0.0/README.md#transition_attr) - tween the given attribute using the default interpolator. * [*transition*.attrTween](https://github.com/d3/d3-transition/blob/v3.0.0/README.md#transition_attrTween) - tween the given attribute using a custom interpolator. * [*transition*.style](https://github.com/d3/d3-transition/blob/v3.0.0/README.md#transition_style) - tween the given style property using the default interpolator. * [*transition*.styleTween](https://github.com/d3/d3-transition/blob/v3.0.0/README.md#transition_styleTween) - tween the given style property using a custom interpolator. * [*transition*.text](https://github.com/d3/d3-transition/blob/v3.0.0/README.md#transition_text) - set the text content when the transition starts. * [*transition*.textTween](https://github.com/d3/d3-transition/blob/v3.0.0/README.md#transition_textTween) - tween the text using a custom interpolator. * [*transition*.remove](https://github.com/d3/d3-transition/blob/v3.0.0/README.md#transition_remove) - remove the selected elements when the transition ends. * [*transition*.tween](https://github.com/d3/d3-transition/blob/v3.0.0/README.md#transition_tween) - run custom code during the transition. * [*transition*.delay](https://github.com/d3/d3-transition/blob/v3.0.0/README.md#transition_delay) - specify per-element delay in milliseconds. * [*transition*.duration](https://github.com/d3/d3-transition/blob/v3.0.0/README.md#transition_duration) - specify per-element duration in milliseconds. * [*transition*.ease](https://github.com/d3/d3-transition/blob/v3.0.0/README.md#transition_ease) - specify the easing function. * [*transition*.easeVarying](https://github.com/d3/d3-transition/blob/v3.0.0/README.md#transition_easeVarying) - specify an easing function factory. * [*transition*.end](https://github.com/d3/d3-transition/blob/v3.0.0/README.md#transition_end) - a promise that resolves when a transition ends. * [*transition*.on](https://github.com/d3/d3-transition/blob/v3.0.0/README.md#transition_on) - await the end of a transition. * [*transition*.each](https://github.com/d3/d3-transition/blob/v3.0.0/README.md#transition_each) - call a function for each element. * [*transition*.call](https://github.com/d3/d3-transition/blob/v3.0.0/README.md#transition_call) - call a function with this transition. * [*transition*.empty](https://github.com/d3/d3-transition/blob/v3.0.0/README.md#transition_empty) - returns true if this transition is empty. * [*transition*.nodes](https://github.com/d3/d3-transition/blob/v3.0.0/README.md#transition_nodes) - returns an array of all selected elements. * [*transition*.node](https://github.com/d3/d3-transition/blob/v3.0.0/README.md#transition_node) - returns the first (non-null) element. * [*transition*.size](https://github.com/d3/d3-transition/blob/v3.0.0/README.md#transition_size) - returns the count of elements. ## [Zooming (d3-zoom)](https://github.com/d3/d3-zoom/tree/v3.0.0) Pan and zoom SVG, HTML or Canvas using mouse or touch input. * [d3.zoom](https://github.com/d3/d3-zoom/blob/v3.0.0/README.md#zoom) - create a zoom behavior. * [*zoom*](https://github.com/d3/d3-zoom/blob/v3.0.0/README.md#_zoom) - apply the zoom behavior to the selected elements. * [*zoom*.transform](https://github.com/d3/d3-zoom/blob/v3.0.0/README.md#zoom_transform) - change the transform for the selected elements. * [*zoom*.translateBy](https://github.com/d3/d3-zoom/blob/v3.0.0/README.md#zoom_translateBy) - translate the transform for the selected elements. * [*zoom*.translateTo](https://github.com/d3/d3-zoom/blob/v3.0.0/README.md#zoom_translateTo) - translate the transform for the selected elements. * [*zoom*.scaleBy](https://github.com/d3/d3-zoom/blob/v3.0.0/README.md#zoom_scaleBy) - scale the transform for the selected elements. * [*zoom*.scaleTo](https://github.com/d3/d3-zoom/blob/v3.0.0/README.md#zoom_scaleTo) - scale the transform for the selected elements. * [*zoom*.constrain](https://github.com/d3/d3-zoom/blob/v3.0.0/README.md#zoom_constrain) - override the transform constraint logic. * [*zoom*.filter](https://github.com/d3/d3-zoom/blob/v3.0.0/README.md#zoom_filter) - control which input events initiate zooming. * [*zoom*.touchable](https://github.com/d3/d3-zoom/blob/v3.0.0/README.md#zoom_touchable) - set the touch support detector. * [*zoom*.wheelDelta](https://github.com/d3/d3-zoom/blob/v3.0.0/README.md#zoom_wheelDelta) - override scaling for wheel events. * [*zoom*.extent](https://github.com/d3/d3-zoom/blob/v3.0.0/README.md#zoom_extent) - set the extent of the viewport. * [*zoom*.scaleExtent](https://github.com/d3/d3-zoom/blob/v3.0.0/README.md#zoom_scaleExtent) - set the allowed scale range. * [*zoom*.translateExtent](https://github.com/d3/d3-zoom/blob/v3.0.0/README.md#zoom_translateExtent) - set the extent of the zoomable world. * [*zoom*.clickDistance](https://github.com/d3/d3-zoom/blob/v3.0.0/README.md#zoom_clickDistance) - set the click distance threshold. * [*zoom*.tapDistance](https://github.com/d3/d3-zoom/blob/v3.0.0/README.md#zoom_tapDistance) - set the tap distance threshold. * [*zoom*.duration](https://github.com/d3/d3-zoom/blob/v3.0.0/README.md#zoom_duration) - set the duration of zoom transitions. * [*zoom*.interpolate](https://github.com/d3/d3-zoom/blob/v3.0.0/README.md#zoom_interpolate) - control the interpolation of zoom transitions. * [*zoom*.on](https://github.com/d3/d3-zoom/blob/v3.0.0/README.md#zoom_on) - listen for zoom events. * [d3.zoomTransform](https://github.com/d3/d3-zoom/blob/v3.0.0/README.md#zoomTransform) - get the zoom transform for a given element. * [*transform*.scale](https://github.com/d3/d3-zoom/blob/v3.0.0/README.md#transform_scale) - scale a transform by the specified amount. * [*transform*.translate](https://github.com/d3/d3-zoom/blob/v3.0.0/README.md#transform_translate) - translate a transform by the specified amount. * [*transform*.apply](https://github.com/d3/d3-zoom/blob/v3.0.0/README.md#transform_apply) - apply the transform to the given point. * [*transform*.applyX](https://github.com/d3/d3-zoom/blob/v3.0.0/README.md#transform_applyX) - apply the transform to the given *x*-coordinate. * [*transform*.applyY](https://github.com/d3/d3-zoom/blob/v3.0.0/README.md#transform_applyY) - apply the transform to the given *y*-coordinate. * [*transform*.invert](https://github.com/d3/d3-zoom/blob/v3.0.0/README.md#transform_invert) - unapply the transform to the given point. * [*transform*.invertX](https://github.com/d3/d3-zoom/blob/v3.0.0/README.md#transform_invertX) - unapply the transform to the given *x*-coordinate. * [*transform*.invertY](https://github.com/d3/d3-zoom/blob/v3.0.0/README.md#transform_invertY) - unapply the transform to the given *y*-coordinate. * [*transform*.rescaleX](https://github.com/d3/d3-zoom/blob/v3.0.0/README.md#transform_rescaleX) - apply the transform to an *x*-scale’s domain. * [*transform*.rescaleY](https://github.com/d3/d3-zoom/blob/v3.0.0/README.md#transform_rescaleY) - apply the transform to a *y*-scale’s domain. * [*transform*.toString](https://github.com/d3/d3-zoom/blob/v3.0.0/README.md#transform_toString) - format the transform as an SVG transform string. * [d3.zoomIdentity](https://github.com/d3/d3-zoom/blob/v3.0.0/README.md#zoomIdentity) - the identity transform. ================================================ FILE: inst/www/d3/v7/CHANGES.md ================================================ # Changes in D3 7.0 [Released June 11, 2021.](https://github.com/d3/d3/releases/tag/v7.0.0) *This document covers only major changes. For minor and patch changes, please see the [release notes](https://github.com/d3/d3/releases).* D3 now ships as pure ES modules and requires Node.js 12 or higher. For more, please read [Sindre Sorhus’s FAQ](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c). [d3.bin](https://github.com/d3/d3-array/blob/main/README.md#bin) now ignores nulls. [d3.ascending](https://github.com/d3/d3-array/blob/main/README.md#ascending) and [d3.descending](https://github.com/d3/d3-array/blob/main/README.md#descending) no longer consider null comparable. [Ordinal scales](https://github.com/d3/d3-scale/blob/main/README.md#ordinal-scales) now use [InternMap](https://github.com/mbostock/internmap) for domains; domain values are now uniqued by coercing to a primitive value via *object*.valueOf instead of coercing to a string via *object*.toString. Array-likes (*e.g.*, a live NodeList such as *element*.childNodes) are converted to arrays in [d3.selectAll](https://github.com/d3/d3-selection/blob/main/README.md#selectAll) and [*selection*.selectAll](https://github.com/d3/d3-selection/blob/main/README.md#selection_selectAll). # Changes in D3 6.0 [Released August 26, 2020.](https://github.com/d3/d3/releases/tag/v6.0.0) D3 now **uses native collections** (Map and Set) and **accepts iterables**. [d3.group and d3.rollup](https://observablehq.com/@d3/d3-group) are powerful new aggregation functions that replace d3.nest and work great [with d3-hierarchy](https://observablehq.com/d/9a453665f405eebf) and d3-selection. There are lots of new helpers in d3-array, too, such as [d3.greatest](https://observablehq.com/@d3/d3-least), [d3.quickselect](https://observablehq.com/@d3/d3-quickselect), and [d3.fsum](https://observablehq.com/@d3/d3-fsum). D3 now **passes events directly to listeners**, replacing the d3.event global and bringing D3 inline with vanilla JavaScript and most other frameworks. **d3-delaunay** (based on Vladimir Agafonkin’s excellent [Delaunator](https://github.com/mapbox/delaunator)) replaces d3-voronoi, offering dramatic improvements to performance, robustness, and [search](https://observablehq.com/@d3/delaunay-find). And there’s a new [d3-geo-voronoi](https://github.com/Fil/d3-geo-voronoi) for spherical (geographical) data! **d3-random** is [greatly expanded](https://github.com/d3/d3-random/blob/master/README.md) and includes a fast [linear congruential generator](https://observablehq.com/@d3/d3-randomlcg) for seeded randomness. **d3-chord** has new layouts for [directed](https://observablehq.com/@d3/directed-chord-diagram) and transposed chord diagrams. **d3-scale** adds a new [radial scale](https://observablehq.com/@d3/radial-stacked-bar-chart-ii) type. … and a variety of other small enhancements. [More than 450 examples](https://observablehq.com/@d3/gallery) have been updated to D3 6.0! ### d3-array * Accept iterables. * Add [d3.group](https://github.com/d3/d3-array/blob/master/README.md#group). * Add [d3.groups](https://github.com/d3/d3-array/blob/master/README.md#groups). * Add [d3.index](https://github.com/d3/d3-array/blob/master/README.md#index). * Add [d3.indexes](https://github.com/d3/d3-array/blob/master/README.md#indexes). * Add [d3.rollup](https://github.com/d3/d3-array/blob/master/README.md#rollup). * Add [d3.rollups](https://github.com/d3/d3-array/blob/master/README.md#rollups). * Add [d3.maxIndex](https://github.com/d3/d3-array/blob/master/README.md#maxIndex). * Add [d3.minIndex](https://github.com/d3/d3-array/blob/master/README.md#minIndex). * Add [d3.greatest](https://github.com/d3/d3-array/blob/master/README.md#greatest). * Add [d3.greatestIndex](https://github.com/d3/d3-array/blob/master/README.md#greatestIndex). * Add [d3.least](https://github.com/d3/d3-array/blob/master/README.md#least). * Add [d3.leastIndex](https://github.com/d3/d3-array/blob/master/README.md#leastIndex). * Add [d3.bin](https://github.com/d3/d3-array/blob/master/README.md#bin). * Add [d3.count](https://github.com/d3/d3-array/blob/master/README.md#count). * Add [d3.cumsum](https://github.com/d3/d3-array/blob/master/README.md#cumsum). * Add [d3.fsum](https://github.com/d3/d3-array/blob/master/README.md#fsum). * Add [d3.Adder](https://github.com/d3/d3-array/blob/master/README.md#Adder). * Add [d3.quantileSorted](https://github.com/d3/d3-array/blob/master/README.md#quantileSorted). * Add [d3.quickselect](https://github.com/d3/d3-array/blob/master/README.md#quickselect). * Add [*bisector*.center](https://github.com/d3/d3-array/blob/master/README.md#bisector_center). * Allow more than two iterables for [d3.cross](https://github.com/d3/d3-array/blob/master/README.md#cross). * Accept non-sorted input with [d3.quantile](https://github.com/d3/d3-array/blob/master/README.md#quantile). * Fix a *array*.sort bug in Safari. * Fix bin thresholds to ignore NaN input. * Fix [d3.ticks](https://github.com/d3/d3-array/blob/master/README.md#ticks) to not return ticks outside the domain. * Improve the performance of [d3.median](https://github.com/d3/d3-array/blob/master/README.md#median). See https://observablehq.com/@d3/d3-array-2-0 for details. ### d3-brush * Add [*event*.mode](https://github.com/d3/d3-brush/blob/master/README.md#brush-events). * Change [*brush*.on](https://github.com/d3/d3-brush/blob/master/README.md#brush_on) to pass the *event* directly to listeners. * Improve multitouch (two-touch) interaction. ### d3-chord * Add [d3.chordDirected](https://github.com/d3/d3-chord/blob/master/README.md#chordDirected). * Add [d3.chordTranspose](https://github.com/d3/d3-chord/blob/master/README.md#chordTranspose). * Add [d3.ribbonArrow](https://github.com/d3/d3-chord/blob/master/README.md#ribbonArrow). * Add [*ribbon*.padAngle](https://github.com/d3/d3-chord/blob/master/README.md#ribbon_padAngle). * Add [*ribbon*.sourceRadius](https://github.com/d3/d3-chord/blob/master/README.md#ribbon_sourceRadius). * Add [*ribbon*.targetRadius](https://github.com/d3/d3-chord/blob/master/README.md#ribbon_targetRadius). ### d3-delaunay * Add [d3.Delaunay](https://github.com/d3/d3-delaunay/blob/master/README.md). ### d3-drag * Change [*drag*.on](https://github.com/d3/d3-drag/blob/master/README.md#drag_on) to pass the *event* directly to listeners. ### d3-force * Add *iterations* argument to [*simulation*.tick](https://github.com/d3/d3-force/blob/master/README.md#simulation_tick). * Add [*forceCenter*.strength](https://github.com/d3/d3-force/blob/master/README.md#center_strength). * Add [*forceSimulation*.randomSource](https://github.com/d3/d3-force/blob/master/README.md#simulation_randomSource). * All built-in forces are now fully deterministic (including “jiggling” coincident nodes). * Improve the default phyllotaxis layout slightly by offsetting by one half-radius. * Improve the error message when a link references an unknown node. * [*force*.initialize](https://github.com/d3/d3-force/blob/master/README.md#force_initialize) is now passed a random source. * Fix bug when initializing nodes with fixed positions. ### d3-format * Change the default minus sign to the minus sign (−) instead of hyphen-minus (-). * Fix decimal `d` formatting of numbers greater than or equal to 1e21. ### d3-geo * Fix clipping of some degenerate polygons. ### d3-hierarchy * Accept iterables. * Add [*node*[Symbol.iterator]](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_iterator); hierarchies are now iterable. * Add [*node*.find](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_find). * Change [*node*.each](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_each) to pass the traversal index. * Change [*node*.eachAfter](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_eachAfter) to pass the traversal index. * Change [*node*.eachBefore](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_eachBefore) to pass the traversal index. * Fix [d3.packSiblings](https://github.com/d3/d3-hierarchy/blob/master/README.md#packSiblings) for huge circles. * Fix divide-by-zero bug in [d3.treemapBinary](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemapBinary). * Fix divide-by-zero bug in [d3.treemapResquarify](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemapResquarify). ### d3-interpolate * Add [*interpolateZoom*.rho](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateZoom_rho). (#25) * Allow [d3.piecewise](https://github.com/d3/d3-interpolate/blob/master/README.md#piecewise) to default to using d3.interpolate. #90 * Change [d3.interpolateTransformCss](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateTransformCss) to use DOMMatrix and require absolute units. #83 ### d3-quadtree * Fix an infinite loop when coordinates diverge to huge values. ### d3-random * Add [d3.randomLcg](https://github.com/d3/d3-random/blob/master/README.md#randomLcg). * Add [d3.randomGamma](https://github.com/d3/d3-random/blob/master/README.md#randomGamma). * Add [d3.randomBeta](https://github.com/d3/d3-random/blob/master/README.md#randomBeta). * Add [d3.randomWeibull](https://github.com/d3/d3-random/blob/master/README.md#randomWeibull). * Add [d3.randomCauchy](https://github.com/d3/d3-random/blob/master/README.md#randomCauchy). * Add [d3.randomLogistic](https://github.com/d3/d3-random/blob/master/README.md#randomLogistic). * Add [d3.randomPoisson](https://github.com/d3/d3-random/blob/master/README.md#randomPoisson). * Add [d3.randomInt](https://github.com/d3/d3-random/blob/master/README.md#randomInt). * Add [d3.randomBinomial](https://github.com/d3/d3-random/blob/master/README.md#randomBinomial). * Add [d3.randomGeometric](https://github.com/d3/d3-random/blob/master/README.md#randomGeometric). * Add [d3.randomPareto](https://github.com/d3/d3-random/blob/master/README.md#randomPareto). * Add [d3.randomBernoulli](https://github.com/d3/d3-random/blob/master/README.md#randomBernoulli). * Allow [d3.randomBates](https://github.com/d3/d3-random/blob/master/README.md#randomBates) to take fractional *n*. * Allow [d3.randomIrwinHall](https://github.com/d3/d3-random/blob/master/README.md#randomIrwinHall) to take fractional *n*. * Don’t wrap Math.random in the default source. Thanks to @Lange, @p-v-d-Veeken, @svanschooten, @Parcly-Taxel and @jrus for your contributions! ### d3-scale * Accept iterables. * Add [*diverging*.rangeRound](https://github.com/d3/d3-scale/blob/master/README.md#diverging_rangeRound). * Add [*sequential*.range](https://github.com/d3/d3-scale/blob/master/README.md#sequential_range) (for compatibility with d3-axis). * Add [*sequential*.rangeRound](https://github.com/d3/d3-scale/blob/master/README.md#sequential_rangeRound). * Add [*sequentialQuantile*.quantiles](https://github.com/d3/d3-scale/blob/master/README.md#sequentialQuantile_quantiles). * Add [d3.scaleRadial](https://github.com/d3/d3-scale/blob/master/README.md#radial-scales). * [*diverging*.range](https://github.com/d3/d3-scale/blob/master/README.md#diverging_range) can now be used to set the interpolator. * [*sequential*.range](https://github.com/d3/d3-scale/blob/master/README.md#sequential_range) can now be used to set the interpolator. * [d3.scaleDiverging](https://github.com/d3/d3-scale/blob/master/README.md#diverging-scales) can now accept a range array in place of an interpolator. * [d3.scaleSequential](https://github.com/d3/d3-scale/blob/master/README.md#sequential-scales) can now accept a range array in place of an interpolator. * Fix [*continuous*.nice](https://github.com/d3/d3-scale/blob/master/README.md#continuous_nice) to ensure that niced domains always span ticks. * Fix [*log*.ticks](https://github.com/d3/d3-scale/blob/master/README.md#log_ticks) for small domains. * Fix [*log*.ticks](https://github.com/d3/d3-scale/blob/master/README.md#log_ticks) for small domains. #44 * Fix [*scale*.clamp](https://github.com/d3/d3-scale/blob/master/README.md#continuous_clamp) for [sequential quantile scales](https://github.com/d3/d3-scale/blob/master/README.md#scaleSequentialQuantile). Thanks, @Fil! * Fix [*scale*.clamp](https://github.com/d3/d3-scale/blob/master/README.md#continuous_clamp) for continuous scales with more domain values than range values. * Fix [diverging scales](https://github.com/d3/d3-scale/blob/master/README.md#diverging-scales) with descending domains. * Remove deprecated *step* argument from [*time*.ticks](https://github.com/d3/d3-scale/blob/master/README.md#time_ticks) and [*time*.nice](https://github.com/d3/d3-scale/blob/master/README.md#time_nice). ### d3-selection * Add [*selection*.selectChild](https://github.com/d3/d3-selection/blob/master/README.md#selection_selectChild). * Add [*selection*.selectChildren](https://github.com/d3/d3-selection/blob/master/README.md#selection_selectChildren). * Add [d3.pointer](https://github.com/d3/d3-selection/blob/master/README.md#pointer). * Add [d3.pointers](https://github.com/d3/d3-selection/blob/master/README.md#pointers). * Add *selection*[Symbol.iterator]; selections are now iterable! * Accept iterables with [*selection*.data](https://github.com/d3/d3-selection/blob/master/README.md#selection_data). * Accept iterables with [d3.selectAll](https://github.com/d3/d3-selection/blob/master/README.md#selectAll). * Change [*selection*.on](https://github.com/d3/d3-selection/blob/master/README.md#selection_on) to pass the *event* directly to listeners. * Remove index and group from *selection*.on listeners! * Remove d3.event! * Remove d3.mouse. * Remove d3.touch. * Remove d3.touches. * Remove d3.customEvent. * Remove d3.clientPoint. * Remove d3.sourceEvent. * Fix *selection*.merge(*transition*) to error. For an overview of changes, see https://observablehq.com/@d3/d3-selection-2-0. ### d3-shape * Accept iterables. * Add [d3.line](https://github.com/d3/d3-shape/blob/master/README.md#line)(*x*, *y*) shorthand. * Add [d3.area](https://github.com/d3/d3-shape/blob/master/README.md#area)(*x*, *y0*, *y1*) shorthand. * Add [d3.symbol](https://github.com/d3/d3-shape/blob/master/README.md#symbol)(*type*, *size*) shorthand. ### d3-time-format * Add ISO 8601 “week year” (`%G` and `%g`). ### d3-timer * Fix [*interval*.restart](https://github.com/d3/d3-timer/blob/master/README.md#timer_restart) to restart as an interval. ### d3-transition * Add [*transition*.easeVarying](https://github.com/d3/d3-transition/blob/master/README.md#transition_easeVarying). * Add *transition*[Symbol.iterator]; transitions are now iterable. * Fix [*selection*.transition](https://github.com/d3/d3-transition/blob/master/README.md#selection_transition) to error if the named transition to inherit is not found.k * Fix [*transition*.end](https://github.com/d3/d3-transition/blob/master/README.md#transition_end) to resolve immediately if the selection is empty. ### d3-zoom * Add [*zoom*.tapDistance](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_tapDistance). * Change [*zoom*.on](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_on) to pass the *event* directly to listeners. * Change the default [*zoom*.filter](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_filter) to observe *wheel* events if the control key is pressed. * Change the default [*zoom*.wheelDelta](ttps://github.com/d3/d3-zoom/blob/master/README.md#zoom_wheelDelta) to go faster if the control key is pressed. * Don‘t set touch-action: none. * Upgrade to [d3-selection 2](https://observablehq.com/@d3/d3-selection-2-0). ### Breaking Changes D3 6.0 introduces several non-backwards-compatible changes. * Remove [d3.event](https://observablehq.com/d/f91cccf0cad5e9cb#events). * Change [*selection*.on](https://observablehq.com/d/f91cccf0cad5e9cb#events) to pass the *event* directly to listeners. * Change [*transition*.on](https://observablehq.com/d/f91cccf0cad5e9cb#events) to pass the *event* directly to listeners. * Change [*brush*.on](https://observablehq.com/d/f91cccf0cad5e9cb#event_brush) to pass the *event* directly to listeners. * Change [*drag*.on](https://observablehq.com/d/f91cccf0cad5e9cb#event_drag) to pass the *event* directly to listeners. * Change [*zoom*.on](https://observablehq.com/d/f91cccf0cad5e9cb#event_zoom) to pass the *event* directly to listeners. * Remove d3.mouse; use [d3.pointer](https://observablehq.com/d/f91cccf0cad5e9cb#pointer). * Remove d3.touch; use [d3.pointer](https://observablehq.com/d/f91cccf0cad5e9cb#pointer). * Remove d3.touches; use [d3.pointers](https://observablehq.com/d/f91cccf0cad5e9cb#pointer). * Remove d3.clientPoint; use [d3.pointer](https://observablehq.com/d/f91cccf0cad5e9cb#pointer). * Remove d3.voronoi; use [d3.Delaunay](https://observablehq.com/d/f91cccf0cad5e9cb#delaunay). * Remove d3.nest; use [d3.group](https://observablehq.com/d/f91cccf0cad5e9cb#group) and [d3.rollup](https://observablehq.com/d/f91cccf0cad5e9cb#group). * Remove d3.map; use [Map](https://observablehq.com/d/f91cccf0cad5e9cb#collection). * Remove d3.set; use [Set](https://observablehq.com/d/f91cccf0cad5e9cb#collection). * Remove d3.keys; use [Object.keys](https://observablehq.com/d/f91cccf0cad5e9cb#collection). * Remove d3.values; use [Object.values](https://observablehq.com/d/f91cccf0cad5e9cb#collection). * Remove d3.entries; use [Object.entries](https://observablehq.com/d/f91cccf0cad5e9cb#collection). * Rename d3.histogram to [d3.bin](https://observablehq.com/d/f91cccf0cad5e9cb#bin). * Rename d3.scan to [d3.leastIndex](https://observablehq.com/d/f91cccf0cad5e9cb#leastIndex). * Change [d3.interpolateTransformCss](https://observablehq.com/d/f91cccf0cad5e9cb#interpolateTransformCss) to require absolute units. * Change [d3.format](https://observablehq.com/d/f91cccf0cad5e9cb#minus) to default to the minus sign instead of hyphen-minus for negative values. D3 now requires a browser that supports [ES2015](http://www.ecma-international.org/ecma-262/6.0/). For older browsers, you must bring your own transpiler. Lastly, support for [Bower](https://bower.io) has been dropped; D3 is now exclusively published to npm and GitHub. See our [migration guide](https://observablehq.com/d/f91cccf0cad5e9cb) for help upgrading. # Changes in D3 5.0 [Released March 22, 2018.](https://github.com/d3/d3/releases/tag/v5.0.0) D3 5.0 introduces only a few non-backwards-compatible changes. D3 now uses [Promises](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Using_promises) instead of asynchronous callbacks to load data. Promises simplify the structure of asynchronous code, especially in modern browsers that support [async and await](https://javascript.info/async-await). (See this [introduction to promises](https://observablehq.com/@observablehq/introduction-to-promises) on [Observable](https://observablehq.com).) For example, to load a CSV file in v4, you might say: ```js d3.csv("file.csv", function(error, data) { if (error) throw error; console.log(data); }); ``` In v5, using promises: ```js d3.csv("file.csv").then(function(data) { console.log(data); }); ``` Note that you don’t need to rethrow the error—the promise will reject automatically, and you can *promise*.catch if desired. Using await, the code is even simpler: ```js const data = await d3.csv("file.csv"); console.log(data); ``` With the adoption of promises, D3 now uses the [Fetch API](https://fetch.spec.whatwg.org/) instead of [XMLHttpRequest](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest): the [d3-request](https://github.com/d3/d3-request) module has been replaced by [d3-fetch](https://github.com/d3/d3-fetch). Fetch supports many powerful new features, such as [streaming responses](https://observablehq.com/@mbostock/streaming-shapefiles). D3 5.0 also deprecates and removes the [d3-queue](https://github.com/d3/d3-queue) module. Use [Promise.all](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise/all) to run a batch of asynchronous tasks in parallel, or a helper library such as [p-queue](https://github.com/sindresorhus/p-queue) to [control concurrency](https://observablehq.com/@mbostock/hello-p-queue). D3 no longer provides the d3.schemeCategory20* categorical color schemes. These twenty-color schemes were flawed because their grouped design could falsely imply relationships in the data: a shared hue can imply that the encoded data are part of a group (a super-category), while relative lightness can imply order. Instead, D3 now includes [d3-scale-chromatic](https://github.com/d3/d3-scale-chromatic), which implements excellent schemes from ColorBrewer, including [categorical](https://github.com/d3/d3-scale-chromatic/blob/master/README.md#categorical), [diverging](https://github.com/d3/d3-scale-chromatic/blob/master/README.md#diverging), [sequential single-hue](https://github.com/d3/d3-scale-chromatic/blob/master/README.md#sequential-single-hue) and [sequential multi-hue](https://github.com/d3/d3-scale-chromatic/blob/master/README.md#sequential-multi-hue) schemes. These schemes are available in both discrete and continuous variants. D3 now provides implementations of [marching squares](https://observablehq.com/@d3/contours) and [density estimation](https://observablehq.com/@d3/density-contours) via [d3-contour](https://github.com/d3/d3-contour)! There are two new [d3-selection](https://github.com/d3/d3-selection) methods: [*selection*.clone](https://github.com/d3/d3-selection/blob/master/README.md#selection_clone) for inserting clones of the selected nodes, and [d3.create](https://github.com/d3/d3-selection/blob/master/README.md#create) for creating detached elements. [Geographic projections](https://github.com/d3/d3-geo) now support [*projection*.angle](https://github.com/d3/d3-geo/blob/master/README.md#projection_angle), which has enabled several fantastic new [polyhedral projections](https://github.com/d3/d3-geo-polygon) by Philippe Rivière. Lastly, D3’s [package.json](https://github.com/d3/d3/blob/master/package.json) no longer pins exact versions of the dependent D3 modules. This fixes an issue with [duplicate installs](https://github.com/d3/d3/issues/3256) of D3 modules. # Changes in D3 4.0 [Released June 28, 2016.](https://github.com/d3/d3/releases/tag/v4.0.0) D3 4.0 is modular. Instead of one library, D3 is now [many small libraries](#table-of-contents) that are designed to work together. You can pick and choose which parts to use as you see fit. Each library is maintained in its own repository, allowing decentralized ownership and independent release cycles. The default bundle combines about thirty of these microlibraries. ```html ``` As before, you can load optional plugins on top of the default bundle, such as [ColorBrewer scales](https://github.com/d3/d3-scale-chromatic): ```html ``` You are not required to use the default bundle! If you’re just using [d3-selection](https://github.com/d3/d3-selection), use it as a standalone library. Like the default bundle, you can load D3 microlibraries using vanilla script tags or RequireJS (great for HTTP/2!): ```html ``` You can also `cat` D3 microlibraries into a custom bundle, or use tools such as [Webpack](https://webpack.github.io/) and [Rollup](http://rollupjs.org/) to create [optimized bundles](https://bl.ocks.org/mbostock/bb09af4c39c79cffcde4). Custom bundles are great for applications that use a subset of D3’s features; for example, a React chart library might use D3 for scales and shapes, and React to manipulate the DOM. The D3 microlibraries are written as [ES6 modules](http://www.2ality.com/2014/09/es6-modules-final.html), and Rollup lets you pick at the symbol level to produce smaller bundles. Small files are nice, but modularity is also about making D3 more *fun*. Microlibraries are easier to understand, develop and test. They make it easier for new people to get involved and contribute. They reduce the distinction between a “core module” and a “plugin”, and increase the pace of development in D3 features. If you don’t care about modularity, you can mostly ignore this change and keep using the default bundle. However, there is one unavoidable consequence of adopting ES6 modules: every symbol in D3 4.0 now shares a flat namespace rather than the nested one of D3 3.x. For example, d3.scale.linear is now d3.scaleLinear, and d3.layout.treemap is now d3.treemap. The adoption of ES6 modules also means that D3 is now written exclusively in [strict mode](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode) and has better readability. And there have been many other significant improvements to D3’s features! (Nearly all of the code from D3 3.x has been rewritten.) These changes are covered below. ### Other Global Changes The default [UMD bundle](https://github.com/umdjs/umd) is now [anonymous](https://github.com/requirejs/requirejs/wiki/Updating-existing-libraries#register-as-an-anonymous-module-). No `d3` global is exported if AMD or CommonJS is detected. In a vanilla environment, the D3 microlibraries share the `d3` global, even if you load them independently; thus, code you write is the same whether or not you use the default bundle. (See [Let’s Make a (D3) Plugin](https://bost.ocks.org/mike/d3-plugin/) for more.) The generated bundle is no longer stored in the Git repository; Bower has been repointed to [d3-bower](https://github.com/mbostock-bower/d3-bower), and you can find the generated files on [npm](https://unpkg.com/d3) or attached to the [latest release](https://github.com/d3/d3/releases/latest). The non-minified default bundle is no longer mangled, making it more readable and preserving inline comments. To the consternation of some users, 3.x employed Unicode variable names such as λ, φ, τ and π for a concise representation of mathematical operations. A downside of this approach was that a SyntaxError would occur if you loaded the non-minified D3 using ISO-8859-1 instead of UTF-8. 3.x also used Unicode string literals, such as the SI-prefix µ for 1e-6. 4.0 uses only ASCII variable names and ASCII string literals (see [rollup-plugin-ascii](https://github.com/mbostock/rollup-plugin-ascii)), avoiding encoding problems. ### Table of Contents * [Arrays](#arrays-d3-array) * [Axes](#axes-d3-axis) * [Brushes](#brushes-d3-brush) * [Chords](#chords-d3-chord) * [Collections](#collections-d3-collection) * [Colors](#colors-d3-color) * [Dispatches](#dispatches-d3-dispatch) * [Dragging](#dragging-d3-drag) * [Delimiter-Separated Values](#delimiter-separated-values-d3-dsv) * [Easings](#easings-d3-ease) * [Forces](#forces-d3-force) * [Number Formats](#number-formats-d3-format) * [Geographies](#geographies-d3-geo) * [Hierarchies](#hierarchies-d3-hierarchy) * [Internals](#internals) * [Interpolators](#interpolators-d3-interpolate) * [Paths](#paths-d3-path) * [Polygons](#polygons-d3-polygon) * [Quadtrees](#quadtrees-d3-quadtree) * [Queues](#queues-d3-queue) * [Random Numbers](#random-numbers-d3-random) * [Requests](#requests-d3-request) * [Scales](#scales-d3-scale) * [Selections](#selections-d3-selection) * [Shapes](#shapes-d3-shape) * [Time Formats](#time-formats-d3-time-format) * [Time Intervals](#time-intervals-d3-time) * [Timers](#timers-d3-timer) * [Transitions](#transitions-d3-transition) * [Voronoi Diagrams](#voronoi-diagrams-d3-voronoi) * [Zooming](#zooming-d3-zoom) ## [Arrays (d3-array)](https://github.com/d3/d3-array/blob/master/README.md) The new [d3.scan](https://github.com/d3/d3-array/blob/master/README.md#scan) method performs a linear scan of an array, returning the index of the least element according to the specified comparator. This is similar to [d3.min](https://github.com/d3/d3-array/blob/master/README.md#min) and [d3.max](https://github.com/d3/d3-array/blob/master/README.md#max), except you can use it to find the position of an extreme element, rather than just calculate an extreme value. ```js var data = [ {name: "Alice", value: 2}, {name: "Bob", value: 3}, {name: "Carol", value: 1}, {name: "Dwayne", value: 5} ]; var i = d3.scan(data, function(a, b) { return a.value - b.value; }); // 2 data[i]; // {name: "Carol", value: 1} ``` The new [d3.ticks](https://github.com/d3/d3-array/blob/master/README.md#ticks) and [d3.tickStep](https://github.com/d3/d3-array/blob/master/README.md#tickStep) methods are useful for generating human-readable numeric ticks. These methods are a low-level alternative to [*continuous*.ticks](https://github.com/d3/d3-scale/blob/master/README.md#continuous_ticks) from [d3-scale](https://github.com/d3/d3-scale). The new implementation is also more accurate, returning the optimal number of ticks as measured by relative error. ```js var ticks = d3.ticks(0, 10, 5); // [0, 2, 4, 6, 8, 10] ``` The [d3.range](https://github.com/d3/d3-array/blob/master/README.md#range) method no longer makes an elaborate attempt to avoid floating-point error when *step* is not an integer. The returned values are strictly defined as *start* + *i* \* *step*, where *i* is an integer. (Learn more about [floating point math](http://0.30000000000000004.com/).) d3.range returns the empty array for infinite ranges, rather than throwing an error. The method signature for optional accessors has been changed to be more consistent with array methods such as [*array*.forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach): the accessor is passed the current element (*d*), the index (*i*), and the array (*data*), with *this* as undefined. This affects [d3.min](https://github.com/d3/d3-array/blob/master/README.md#min), [d3.max](https://github.com/d3/d3-array/blob/master/README.md#max), [d3.extent](https://github.com/d3/d3-array/blob/master/README.md#extent), [d3.sum](https://github.com/d3/d3-array/blob/master/README.md#sum), [d3.mean](https://github.com/d3/d3-array/blob/master/README.md#mean), [d3.median](https://github.com/d3/d3-array/blob/master/README.md#median), [d3.quantile](https://github.com/d3/d3-array/blob/master/README.md#quantile), [d3.variance](https://github.com/d3/d3-array/blob/master/README.md#variance) and [d3.deviation](https://github.com/d3/d3-array/blob/master/README.md#deviation). The [d3.quantile](https://github.com/d3/d3-array/blob/master/README.md#quantile) method previously did not take an accessor. Some methods with optional arguments now treat those arguments as missing if they are null or undefined, rather than strictly checking arguments.length. The new [d3.histogram](https://github.com/d3/d3-array/blob/master/README.md#histograms) API replaces d3.layout.histogram. Rather than exposing *bin*.x and *bin*.dx on each returned bin, the histogram exposes *bin*.x0 and *bin*.x1, guaranteeing that *bin*.x0 is exactly equal to *bin*.x1 on the preceding bin. The “frequency” and “probability” modes are no longer supported; each bin is simply an array of elements from the input data, so *bin*.length is equal to D3 3.x’s *bin*.y in frequency mode. To compute a probability distribution, divide the number of elements in each bin by the total number of elements. The *histogram*.range method has been renamed [*histogram*.domain](https://github.com/d3/d3-array/blob/master/README.md#histogram_domain) for consistency with scales. The *histogram*.bins method has been renamed [*histogram*.thresholds](https://github.com/d3/d3-array/blob/master/README.md#histogram_thresholds), and no longer accepts an upper value: *n* thresholds will produce *n* + 1 bins. If you specify a desired number of bins rather than thresholds, d3.histogram now uses [d3.ticks](https://github.com/d3/d3-array/blob/master/README.md#ticks) to compute nice bin thresholds. In addition to the default Sturges’ formula, D3 now implements the [Freedman-Diaconis rule](https://github.com/d3/d3-array/blob/master/README.md#thresholdFreedmanDiaconis) and [Scott’s normal reference rule](https://github.com/d3/d3-array/blob/master/README.md#thresholdScott). ## [Axes (d3-axis)](https://github.com/d3/d3-axis/blob/master/README.md) To render axes properly in D3 3.x, you needed to style them: ```html ``` If you didn’t, you saw this: D3 4.0 provides default styles and shorter syntax. In place of d3.svg.axis and *axis*.orient, D3 4.0 now provides four constructors for each orientation: [d3.axisTop](https://github.com/d3/d3-axis/blob/master/README.md#axisTop), [d3.axisRight](https://github.com/d3/d3-axis/blob/master/README.md#axisRight), [d3.axisBottom](https://github.com/d3/d3-axis/blob/master/README.md#axisBottom), [d3.axisLeft](https://github.com/d3/d3-axis/blob/master/README.md#axisLeft). These constructors accept a scale, so you can reduce all of the above to: ```html ``` And get this: As before, you can customize the axis appearance either by applying stylesheets or by modifying the axis elements. The default appearance has been changed slightly to offset the axis by a half-pixel; this fixes a crisp-edges rendering issue on Safari where the axis would be drawn two-pixels thick. There’s now an [*axis*.tickArguments](https://github.com/d3/d3-axis/blob/master/README.md#axis_tickArguments) method, as an alternative to [*axis*.ticks](https://github.com/d3/d3-axis/blob/master/README.md#axis_ticks) that also allows the axis tick arguments to be inspected. The [*axis*.tickSize](https://github.com/d3/d3-axis/blob/master/README.md#axis_tickSize) method has been changed to only allow a single argument when setting the tick size. The *axis*.innerTickSize and *axis*.outerTickSize methods have been renamed [*axis*.tickSizeInner](https://github.com/d3/d3-axis/blob/master/README.md#axis_tickSizeInner) and [*axis*.tickSizeOuter](https://github.com/d3/d3-axis/blob/master/README.md#axis_tickSizeOuter), respectively. ## [Brushes (d3-brush)](https://github.com/d3/d3-brush/blob/master/README.md) Replacing d3.svg.brush, there are now three classes of brush for brushing along the *x*-dimension, the *y*-dimension, or both: [d3.brushX](https://github.com/d3/d3-brush/blob/master/README.md#brushX), [d3.brushY](https://github.com/d3/d3-brush/blob/master/README.md#brushY), [d3.brush](https://github.com/d3/d3-brush/blob/master/README.md#brush). Brushes are no longer dependent on [scales](#scales-d3-scale); instead, each brush defines a selection in screen coordinates. This selection can be [inverted](https://github.com/d3/d3-scale/blob/master/README.md#continuous_invert) if you want to compute the corresponding data domain. And rather than rely on the scales’ ranges to determine the brushable area, there is now a [*brush*.extent](https://github.com/d3/d3-brush/blob/master/README.md#brush_extent) method for setting it. If you do not set the brush extent, it defaults to the full extent of the owner SVG element. The *brush*.clamp method has also been eliminated; brushing is always restricted to the brushable area defined by the brush extent. Brushes no longer store the active brush selection (*i.e.*, the highlighted region; the brush’s position) internally. The brush’s position is now stored on any elements to which the brush has been applied. The brush’s position is available as *event*.selection within a brush event or by calling [d3.brushSelection](https://github.com/d3/d3-brush/blob/master/README.md#brushSelection) on a given *element*. To move the brush programmatically, use [*brush*.move](https://github.com/d3/d3-brush/blob/master/README.md#brush_move) with a given [selection](#selections-d3-selection) or [transition](#transitions-d3-transition); see the [brush snapping example](https://bl.ocks.org/mbostock/6232537). The *brush*.event method has been removed. Brush interaction has been improved. By default, brushes now ignore right-clicks intended for the context menu; you can change this behavior using [*brush*.filter](https://github.com/d3/d3-brush/blob/master/README.md#brush_filter). Brushes also ignore emulated mouse events on iOS. Holding down SHIFT (⇧) while brushing locks the *x*- or *y*-position of the brush. Holding down META (⌘) while clicking and dragging starts a new selection, rather than translating the existing selection. The default appearance of the brush has also been improved and slightly simplified. Previously it was necessary to apply styles to the brush to give it a reasonable appearance, such as: ```css .brush .extent { stroke: #fff; fill-opacity: .125; shape-rendering: crispEdges; } ``` These styles are now applied by default as attributes; if you want to customize the brush appearance, you can still apply external styles or modify the brush elements. (D3 4.0 features a similar improvement to [axes](#axes-d3-axis).) A new [*brush*.handleSize](https://github.com/d3/d3-brush/blob/master/README.md#brush_handleSize) method lets you override the brush handle size; it defaults to six pixels. The brush now consumes handled events, making it easier to combine with other interactive behaviors such as [dragging](#dragging-d3-drag) and [zooming](#zooming-d3-zoom). The *brushstart* and *brushend* events have been renamed to *start* and *end*, respectively. The brush event no longer reports a *event*.mode to distinguish between resizing and dragging the brush. ## [Chords (d3-chord)](https://github.com/d3/d3-chord/blob/master/README.md) Pursuant to the great namespace flattening: * d3.layout.chord ↦ [d3.chord](https://github.com/d3/d3-chord/blob/master/README.md#chord) * d3.svg.chord ↦ [d3.ribbon](https://github.com/d3/d3-chord/blob/master/README.md#ribbon) For consistency with [*arc*.padAngle](https://github.com/d3/d3-shape/blob/master/README.md#arc_padAngle), *chord*.padding has also been renamed to [*ribbon*.padAngle](https://github.com/d3/d3-chord/blob/master/README.md#ribbon_padAngle). A new [*ribbon*.context](https://github.com/d3/d3-chord/blob/master/README.md#ribbon_context) method lets you render chord diagrams to Canvas! See also [d3-path](#paths-d3-path). ## [Collections (d3-collection)](https://github.com/d3/d3-collection/blob/master/README.md) The [d3.set](https://github.com/d3/d3-collection/blob/master/README.md#set) constructor now accepts an existing set for making a copy. If you pass an array to d3.set, you can also pass a value accessor. This accessor takes the standard arguments: the current element (*d*), the index (*i*), and the array (*data*), with *this* undefined. For example: ```js var yields = [ {yield: 22.13333, variety: "Manchuria", year: 1932, site: "Grand Rapids"}, {yield: 26.76667, variety: "Peatland", year: 1932, site: "Grand Rapids"}, {yield: 28.10000, variety: "No. 462", year: 1931, site: "Duluth"}, {yield: 38.50000, variety: "Svansota", year: 1932, site: "Waseca"}, {yield: 40.46667, variety: "Svansota", year: 1931, site: "Crookston"}, {yield: 36.03333, variety: "Peatland", year: 1932, site: "Waseca"}, {yield: 34.46667, variety: "Wisconsin No. 38", year: 1931, site: "Grand Rapids"} ]; var sites = d3.set(yields, function(d) { return d.site; }); // Grand Rapids, Duluth, Waseca, Crookston ``` The [d3.map](https://github.com/d3/d3-collection/blob/master/README.md#map) constructor also follows the standard array accessor argument pattern. The *map*.forEach and *set*.forEach methods have been renamed to [*map*.each](https://github.com/d3/d3-collection/blob/master/README.md#map_each) and [*set*.each](https://github.com/d3/d3-collection/blob/master/README.md#set_each) respectively. The order of arguments for *map*.each has also been changed to *value*, *key* and *map*, while the order of arguments for *set*.each is now *value*, *value* and *set*. This is closer to ES6 [*map*.forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/forEach) and [*set*.forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/forEach). Also like ES6 Map and Set, *map*.set and *set*.add now return the current collection (rather than the added value) to facilitate method chaining. New [*map*.clear](https://github.com/d3/d3-collection/blob/master/README.md#map_clear) and [*set*.clear](https://github.com/d3/d3-collection/blob/master/README.md#set_clear) methods can be used to empty collections. The [*nest*.map](https://github.com/d3/d3-collection/blob/master/README.md#nest_map) method now always returns a d3.map instance. For a plain object, use [*nest*.object](https://github.com/d3/d3-collection/blob/master/README.md#nest_object) instead. When used in conjunction with [*nest*.rollup](https://github.com/d3/d3-collection/blob/master/README.md#nest_rollup), [*nest*.entries](https://github.com/d3/d3-collection/blob/master/README.md#nest_entries) now returns {key, value} objects for the leaf entries, instead of {key, values}. This makes *nest*.rollup easier to use in conjunction with [hierarchies](#hierarchies-d3-hierarchy), as in this [Nest Treemap example](https://bl.ocks.org/mbostock/2838bf53e0e65f369f476afd653663a2). ## [Colors (d3-color)](https://github.com/d3/d3-color/blob/master/README.md) All colors now have opacity exposed as *color*.opacity, which is a number in [0, 1]. You can pass an optional opacity argument to the color space constructors [d3.rgb](https://github.com/d3/d3-color/blob/master/README.md#rgb), [d3.hsl](https://github.com/d3/d3-color/blob/master/README.md#hsl), [d3.lab](https://github.com/d3/d3-color/blob/master/README.md#lab), [d3.hcl](https://github.com/d3/d3-color/blob/master/README.md#hcl) or [d3.cubehelix](https://github.com/d3/d3-color/blob/master/README.md#cubehelix). You can now parse rgba(…) and hsla(…) CSS color specifiers or the string “transparent” using [d3.color](https://github.com/d3/d3-color/blob/master/README.md#color). The “transparent” color is defined as an RGB color with zero opacity and undefined red, green and blue channels; this differs slightly from CSS which defines it as transparent black, but is useful for simplifying color interpolation logic where either the starting or ending color has undefined channels. The [*color*.toString](https://github.com/d3/d3-color/blob/master/README.md#color_toString) method now likewise returns an rgb(…) or rgba(…) string with integer channel values, not the hexadecimal RGB format, consistent with CSS computed values. This improves performance by short-circuiting transitions when the element’s starting style matches its ending style. The new [d3.color](https://github.com/d3/d3-color/blob/master/README.md#color) method is the primary method for parsing colors: it returns a d3.color instance in the appropriate color space, or null if the CSS color specifier is invalid. For example: ```js var red = d3.color("hsl(0, 80%, 50%)"); // {h: 0, l: 0.5, s: 0.8, opacity: 1} ``` The parsing implementation is now more robust. For example, you can no longer mix integers and percentages in rgb(…), and it correctly handles whitespace, decimal points, number signs, and other edge cases. The color space constructors d3.rgb, d3.hsl, d3.lab, d3.hcl and d3.cubehelix now always return a copy of the input color, converted to the corresponding color space. While [*color*.rgb](https://github.com/d3/d3-color/blob/master/README.md#color_rgb) remains, *rgb*.hsl has been removed; use d3.hsl to convert a color to the RGB color space. The RGB color space no longer greedily quantizes and clamps channel values when creating colors, improving accuracy in color space conversion. Quantization and clamping now occurs in *color*.toString when formatting a color for display. You can use the new [*color*.displayable](https://github.com/d3/d3-color/blob/master/README.md#color_displayable) to test whether a color is [out-of-gamut](https://en.wikipedia.org/wiki/Gamut). The [*rgb*.brighter](https://github.com/d3/d3-color/blob/master/README.md#rgb_brighter) method no longer special-cases black. This is a multiplicative operator, defining a new color *r*′, *g*′, *b*′ where *r*′ = *r* × *pow*(0.7, *k*), *g*′ = *g* × *pow*(0.7, *k*) and *b*′ = *b* × *pow*(0.7, *k*); a brighter black is still black. There’s a new [d3.cubehelix](https://github.com/d3/d3-color/blob/master/README.md#cubehelix) color space, generalizing Dave Green’s color scheme! (See also [d3.interpolateCubehelixDefault](https://github.com/d3/d3-scale/blob/master/README.md#interpolateCubehelixDefault) from [d3-scale](#scales-d3-scale).) You can continue to define your own custom color spaces, too; see [d3-hsv](https://github.com/d3/d3-hsv) for an example. ## [Dispatches (d3-dispatch)](https://github.com/d3/d3-dispatch/blob/master/README.md) Rather than decorating the *dispatch* object with each event type, the dispatch object now exposes generic [*dispatch*.call](https://github.com/d3/d3-dispatch/blob/master/README.md#dispatch_call) and [*dispatch*.apply](https://github.com/d3/d3-dispatch/blob/master/README.md#dispatch_apply) methods which take the *type* string as the first argument. For example, in D3 3.x, you might say: ```js dispatcher.foo.call(that, "Hello, Foo!"); ``` To dispatch a *foo* event in D3 4.0, you’d say: ```js dispatcher.call("foo", that, "Hello, Foo!"); ``` The [*dispatch*.on](https://github.com/d3/d3-dispatch/blob/master/README.md#dispatch_on) method now accepts multiple typenames, allowing you to add or remove listeners for multiple events simultaneously. For example, to send both *foo* and *bar* events to the same listener: ```js dispatcher.on("foo bar", function(message) { console.log(message); }); ``` This matches the new behavior of [*selection*.on](https://github.com/d3/d3-selection/blob/master/README.md#selection_on) in [d3-selection](#selections-d3-selection). The *dispatch*.on method now validates that the specifier *listener* is a function, rather than throwing an error in the future. The new implementation d3.dispatch is faster, using fewer closures to improve performance. There’s also a new [*dispatch*.copy](https://github.com/d3/d3-dispatch/blob/master/README.md#dispatch_copy) method for making a copy of a dispatcher; this is used by [d3-transition](#transitions-d3-transition) to improve the performance of transitions in the common case where all elements in a transition have the same transition event listeners. ## [Dragging (d3-drag)](https://github.com/d3/d3-drag/blob/master/README.md) The drag behavior d3.behavior.drag has been renamed to d3.drag. The *drag*.origin method has been replaced by [*drag*.subject](https://github.com/d3/d3-drag/blob/master/README.md#drag_subject), which allows you to define the thing being dragged at the start of a drag gesture. This is particularly useful with Canvas, where draggable objects typically share a Canvas element (as opposed to SVG, where draggable objects typically have distinct DOM elements); see the [circle dragging example](https://bl.ocks.org/mbostock/444757cc9f0fde320a5f469cd36860f4). A new [*drag*.container](https://github.com/d3/d3-drag/blob/master/README.md#drag_container) method lets you override the parent element that defines the drag gesture coordinate system. This defaults to the parent node of the element to which the drag behavior was applied. For dragging on Canvas elements, you probably want to use the Canvas element as the container. [Drag events](https://github.com/d3/d3-drag/blob/master/README.md#drag-events) now expose an [*event*.on](https://github.com/d3/d3-drag/blob/master/README.md#event_on) method for registering temporary listeners for duration of the current drag gesture; these listeners can capture state for the current gesture, such as the thing being dragged. A new *event*.active property lets you detect whether multiple (multitouch) drag gestures are active concurrently. The *dragstart* and *dragend* events have been renamed to *start* and *end*. By default, drag behaviors now ignore right-clicks intended for the context menu; use [*drag*.filter](https://github.com/d3/d3-drag/blob/master/README.md#drag_filter) to control which events are ignored. The drag behavior also ignores emulated mouse events on iOS. The drag behavior now consumes handled events, making it easier to combine with other interactive behaviors such as [zooming](#zooming-d3-zoom). The new [d3.dragEnable](https://github.com/d3/d3-drag/blob/master/README.md#dragEnable) and [d3.dragDisable](https://github.com/d3/d3-drag/blob/master/README.md#dragDisable) methods provide a low-level API for implementing drag gestures across browsers and devices. These methods are also used by other D3 components, such as the [brush](#brushes-d3-brush). ## [Delimiter-Separated Values (d3-dsv)](https://github.com/d3/d3-dsv/blob/master/README.md) Pursuant to the great namespace flattening, various CSV and TSV methods have new names: * d3.csv.parse ↦ [d3.csvParse](https://github.com/d3/d3-dsv/blob/master/README.md#csvParse) * d3.csv.parseRows ↦ [d3.csvParseRows](https://github.com/d3/d3-dsv/blob/master/README.md#csvParseRows) * d3.csv.format ↦ [d3.csvFormat](https://github.com/d3/d3-dsv/blob/master/README.md#csvFormat) * d3.csv.formatRows ↦ [d3.csvFormatRows](https://github.com/d3/d3-dsv/blob/master/README.md#csvFormatRows) * d3.tsv.parse ↦ [d3.tsvParse](https://github.com/d3/d3-dsv/blob/master/README.md#tsvParse) * d3.tsv.parseRows ↦ [d3.tsvParseRows](https://github.com/d3/d3-dsv/blob/master/README.md#tsvParseRows) * d3.tsv.format ↦ [d3.tsvFormat](https://github.com/d3/d3-dsv/blob/master/README.md#tsvFormat) * d3.tsv.formatRows ↦ [d3.tsvFormatRows](https://github.com/d3/d3-dsv/blob/master/README.md#tsvFormatRows) The [d3.csv](https://github.com/d3/d3-request/blob/master/README.md#csv) and [d3.tsv](https://github.com/d3/d3-request/blob/master/README.md#tsv) methods for loading files of the corresponding formats have not been renamed, however! Those are defined in [d3-request](#requests-d3-request).There’s no longer a d3.dsv method, which served the triple purpose of defining a DSV formatter, a DSV parser and a DSV requestor; instead, there’s just [d3.dsvFormat](https://github.com/d3/d3-dsv/blob/master/README.md#dsvFormat) which you can use to define a DSV formatter and parser. You can use [*request*.response](https://github.com/d3/d3-request/blob/master/README.md#request_response) to make a request and then parse the response body, or just use [d3.text](https://github.com/d3/d3-request/blob/master/README.md#text). The [*dsv*.parse](https://github.com/d3/d3-dsv/blob/master/README.md#dsv_parse) method now exposes the column names and their input order as *data*.columns. For example: ```js d3.csv("cars.csv", function(error, data) { if (error) throw error; console.log(data.columns); // ["Year", "Make", "Model", "Length"] }); ``` You can likewise pass an optional array of column names to [*dsv*.format](https://github.com/d3/d3-dsv/blob/master/README.md#dsv_format) to format only a subset of columns, or to specify the column order explicitly: ```js var string = d3.csvFormat(data, ["Year", "Model", "Length"]); ``` The parser is a bit faster and the formatter is a bit more robust: inputs are coerced to strings before formatting, fixing an obscure crash, and deprecated support for falling back to [*dsv*.formatRows](https://github.com/d3/d3-dsv/blob/master/README.md#dsv_formatRows) when the input *data* is an array of arrays has been removed. ## [Easings (d3-ease)](https://github.com/d3/d3-ease/blob/master/README.md) D3 3.x used strings, such as “cubic-in-out”, to identify easing methods; these strings could be passed to d3.ease or *transition*.ease. D3 4.0 uses symbols instead, such as [d3.easeCubicInOut](https://github.com/d3/d3-ease/blob/master/README.md#easeCubicInOut). Symbols are simpler and cleaner. They work well with Rollup to produce smaller custom bundles. You can still define your own custom easing function, too, if desired. Here’s the full list of equivalents: * linear ↦ [d3.easeLinear](https://github.com/d3/d3-ease/blob/master/README.md#easeLinear)¹ * linear-in ↦ [d3.easeLinear](https://github.com/d3/d3-ease/blob/master/README.md#easeLinear)¹ * linear-out ↦ [d3.easeLinear](https://github.com/d3/d3-ease/blob/master/README.md#easeLinear)¹ * linear-in-out ↦ [d3.easeLinear](https://github.com/d3/d3-ease/blob/master/README.md#easeLinear)¹ * linear-out-in ↦ [d3.easeLinear](https://github.com/d3/d3-ease/blob/master/README.md#easeLinear)¹ * poly-in ↦ [d3.easePolyIn](https://github.com/d3/d3-ease/blob/master/README.md#easePolyIn) * poly-out ↦ [d3.easePolyOut](https://github.com/d3/d3-ease/blob/master/README.md#easePolyOut) * poly-in-out ↦ [d3.easePolyInOut](https://github.com/d3/d3-ease/blob/master/README.md#easePolyInOut) * poly-out-in ↦ REMOVED² * quad-in ↦ [d3.easeQuadIn](https://github.com/d3/d3-ease/blob/master/README.md#easeQuadIn) * quad-out ↦ [d3.easeQuadOut](https://github.com/d3/d3-ease/blob/master/README.md#easeQuadOut) * quad-in-out ↦ [d3.easeQuadInOut](https://github.com/d3/d3-ease/blob/master/README.md#easeQuadInOut) * quad-out-in ↦ REMOVED² * cubic-in ↦ [d3.easeCubicIn](https://github.com/d3/d3-ease/blob/master/README.md#easeCubicIn) * cubic-out ↦ [d3.easeCubicOut](https://github.com/d3/d3-ease/blob/master/README.md#easeCubicOut) * cubic-in-out ↦ [d3.easeCubicInOut](https://github.com/d3/d3-ease/blob/master/README.md#easeCubicInOut) * cubic-out-in ↦ REMOVED² * sin-in ↦ [d3.easeSinIn](https://github.com/d3/d3-ease/blob/master/README.md#easeSinIn) * sin-out ↦ [d3.easeSinOut](https://github.com/d3/d3-ease/blob/master/README.md#easeSinOut) * sin-in-out ↦ [d3.easeSinInOut](https://github.com/d3/d3-ease/blob/master/README.md#easeSinInOut) * sin-out-in ↦ REMOVED² * exp-in ↦ [d3.easeExpIn](https://github.com/d3/d3-ease/blob/master/README.md#easeExpIn) * exp-out ↦ [d3.easeExpOut](https://github.com/d3/d3-ease/blob/master/README.md#easeExpOut) * exp-in-out ↦ [d3.easeExpInOut](https://github.com/d3/d3-ease/blob/master/README.md#easeExpInOut) * exp-out-in ↦ REMOVED² * circle-in ↦ [d3.easeCircleIn](https://github.com/d3/d3-ease/blob/master/README.md#easeCircleIn) * circle-out ↦ [d3.easeCircleOut](https://github.com/d3/d3-ease/blob/master/README.md#easeCircleOut) * circle-in-out ↦ [d3.easeCircleInOut](https://github.com/d3/d3-ease/blob/master/README.md#easeCircleInOut) * circle-out-in ↦ REMOVED² * elastic-in ↦ [d3.easeElasticOut](https://github.com/d3/d3-ease/blob/master/README.md#easeElasticOut)² * elastic-out ↦ [d3.easeElasticIn](https://github.com/d3/d3-ease/blob/master/README.md#easeElasticIn)² * elastic-in-out ↦ REMOVED² * elastic-out-in ↦ [d3.easeElasticInOut](https://github.com/d3/d3-ease/blob/master/README.md#easeElasticInOut)² * back-in ↦ [d3.easeBackIn](https://github.com/d3/d3-ease/blob/master/README.md#easeBackIn) * back-out ↦ [d3.easeBackOut](https://github.com/d3/d3-ease/blob/master/README.md#easeBackOut) * back-in-out ↦ [d3.easeBackInOut](https://github.com/d3/d3-ease/blob/master/README.md#easeBackInOut) * back-out-in ↦ REMOVED² * bounce-in ↦ [d3.easeBounceOut](https://github.com/d3/d3-ease/blob/master/README.md#easeBounceOut)² * bounce-out ↦ [d3.easeBounceIn](https://github.com/d3/d3-ease/blob/master/README.md#easeBounceIn)² * bounce-in-out ↦ REMOVED² * bounce-out-in ↦ [d3.easeBounceInOut](https://github.com/d3/d3-ease/blob/master/README.md#easeBounceInOut)² ¹ The -in, -out and -in-out variants of linear easing are identical, so there’s just d3.easeLinear.
    ² Elastic and bounce easing were inadvertently reversed in 3.x, so 4.0 eliminates -out-in easing! For convenience, there are also default aliases for each easing method. For example, [d3.easeCubic](https://github.com/d3/d3-ease/blob/master/README.md#easeCubic) is an alias for [d3.easeCubicInOut](https://github.com/d3/d3-ease/blob/master/README.md#easeCubicInOut). Most default to -in-out; the exceptions are [d3.easeBounce](https://github.com/d3/d3-ease/blob/master/README.md#easeBounce) and [d3.easeElastic](https://github.com/d3/d3-ease/blob/master/README.md#easeElastic), which default to -out. Rather than pass optional arguments to d3.ease or *transition*.ease, parameterizable easing functions now have named parameters: [*poly*.exponent](https://github.com/d3/d3-ease/blob/master/README.md#poly_exponent), [*elastic*.amplitude](https://github.com/d3/d3-ease/blob/master/README.md#elastic_amplitude), [*elastic*.period](https://github.com/d3/d3-ease/blob/master/README.md#elastic_period) and [*back*.overshoot](https://github.com/d3/d3-ease/blob/master/README.md#back_overshoot). For example, in D3 3.x you might say: ```js var e = d3.ease("elastic-out-in", 1.2); ``` The equivalent in D3 4.0 is: ```js var e = d3.easeElastic.amplitude(1.2); ``` Many of the easing functions have been optimized for performance and accuracy. Several bugs have been fixed, as well, such as the interpretation of the overshoot parameter for back easing, and the period parameter for elastic easing. Also, [d3-transition](#transitions-d3-transition) now explicitly guarantees that the last tick of the transition happens at exactly *t* = 1, avoiding floating point errors in some easing functions. There’s now a nice [visual reference](https://github.com/d3/d3-ease/blob/master/README.md) and an [animated reference](https://bl.ocks.org/mbostock/248bac3b8e354a9103c4) to the new easing functions, too! ## [Forces (d3-force)](https://github.com/d3/d3-force/blob/master/README.md) The force layout d3.layout.force has been renamed to d3.forceSimulation. The force simulation now uses [velocity Verlet integration](https://en.wikipedia.org/wiki/Verlet_integration#Velocity_Verlet) rather than position Verlet, tracking the nodes’ positions (*node*.x, *node*.y) and velocities (*node*.vx, *node*.vy) rather than their previous positions (*node*.px, *node*.py). Rather than hard-coding a set of built-in forces, the force simulation is now extensible: you specify which forces you want! The approach affords greater flexibility through composition. The new forces are more flexible, too: force parameters can typically be configured per-node or per-link. There are separate positioning forces for [*x*](https://github.com/d3/d3-force/blob/master/README.md#forceX) and [*y*](https://github.com/d3/d3-force/blob/master/README.md#forceY) that replace *force*.gravity; [*x*.x](https://github.com/d3/d3-force/blob/master/README.md#x_x) and [*y*.y](https://github.com/d3/d3-force/blob/master/README.md#y_y) replace *force*.size. The new [link force](https://github.com/d3/d3-force/blob/master/README.md#forceLink) replaces *force*.linkStrength and employs better default heuristics to improve stability. The new [many-body force](https://github.com/d3/d3-force/blob/master/README.md#forceManyBody) replaces *force*.charge and supports a new [minimum-distance parameter](https://github.com/d3/d3-force/blob/master/README.md#manyBody_distanceMin) and performance improvements thanks to 4.0’s [new quadtrees](#quadtrees-d3-quadtree). There are also brand-new forces for [centering nodes](https://github.com/d3/d3-force/blob/master/README.md#forceCenter) and [collision resolution](https://github.com/d3/d3-force/blob/master/README.md#forceCollision). The new forces and simulation have been carefully crafted to avoid nondeterminism. Rather than initializing nodes randomly, if the nodes do not have preset positions, they are placed in a phyllotaxis pattern: Phyllotaxis Random jitter is still needed to resolve link, collision and many-body forces if there are coincident nodes, but at least in the common case, the force simulation (and the resulting force-directed graph layout) is now consistent across browsers and reloads. D3 no longer plays dice! The force simulation has several new methods for greater control over heating, such as [*simulation*.alphaMin](https://github.com/d3/d3-force/blob/master/README.md#simulation_alphaMin) and [*simulation*.alphaDecay](https://github.com/d3/d3-force/blob/master/README.md#simulation_alphaDecay), and the internal timer. Calling [*simulation*.alpha](https://github.com/d3/d3-force/blob/master/README.md#simulation_alpha) now has no effect on the internal timer, which is controlled independently via [*simulation*.stop](https://github.com/d3/d3-force/blob/master/README.md#simulation_stop) and [*simulation*.restart](https://github.com/d3/d3-force/blob/master/README.md#simulation_restart). The force layout’s internal timer now starts automatically on creation, removing *force*.start. As in 3.x, you can advance the simulation manually using [*simulation*.tick](https://github.com/d3/d3-force/blob/master/README.md#simulation_tick). The *force*.friction parameter is replaced by *simulation*.velocityDecay. A new [*simulation*.alphaTarget](https://github.com/d3/d3-force/blob/master/README.md#simulation_alphaTarget) method allows you to set the desired alpha (temperature) of the simulation, such that the simulation can be smoothly reheated during interaction, and then smoothly cooled again. This improves the stability of the graph during interaction. The force layout no longer depends on the [drag behavior](#dragging-d3-drag), though you can certainly create [draggable force-directed graphs](https://bl.ocks.org/mbostock/ad70335eeef6d167bc36fd3c04378048)! Set *node*.fx and *node*.fy to fix a node’s position. As an alternative to a [Voronoi](#voronoi-d3-voronoi) SVG overlay, you can now use [*simulation*.find](https://github.com/d3/d3-force/blob/master/README.md#simulation_find) to find the closest node to a pointer. ## [Number Formats (d3-format)](https://github.com/d3/d3-format/blob/master/README.md) If a precision is not specified, the formatting behavior has changed: there is now a default precision of 6 for all directives except *none*, which defaults to 12. In 3.x, if you did not specify a precision, the number was formatted using its shortest unique representation (per [*number*.toString](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString)); this could lead to unexpected digits due to [floating point math](http://0.30000000000000004.com/). The new default precision in 4.0 produces more consistent results: ```js var f = d3.format("e"); f(42); // "4.200000e+1" f(0.1 + 0.2); // "3.000000e-1" ``` To trim insignificant trailing zeroes, use the *none* directive, which is similar `g`. For example: ```js var f = d3.format(".3"); f(0.12345); // "0.123" f(0.10000); // "0.1" f(0.1 + 0.2); // "0.3" ``` Under the hood, number formatting has improved accuracy with very large and very small numbers by using [*number*.toExponential](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toExponential) rather than [Math.log](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/log) to extract the mantissa and exponent. Negative zero (-0, an IEEE 754 construct) and very small numbers that round to zero are now formatted as unsigned zero. The inherently unsafe d3.round method has been removed, along with d3.requote. The [d3.formatPrefix](https://github.com/d3/d3-format/blob/master/README.md#formatPrefix) method has been changed. Rather than returning an SI-prefix string, it returns an SI-prefix format function for a given *specifier* and reference *value*. For example, to format thousands: ```js var f = d3.formatPrefix(",.0", 1e3); f(1e3); // "1k" f(1e4); // "10k" f(1e5); // "100k" f(1e6); // "1,000k" ``` Unlike the `s` format directive, d3.formatPrefix always employs the same SI-prefix, producing consistent results: ```js var f = d3.format(".0s"); f(1e3); // "1k" f(1e4); // "10k" f(1e5); // "100k" f(1e6); // "1M" ``` The new `(` sign option uses parentheses for negative values. This is particularly useful in conjunction with `$`. For example: ```js d3.format("+.0f")(-42); // "-42" d3.format("(.0f")(-42); // "(42)" d3.format("+$.0f")(-42); // "-$42" d3.format("($.0f")(-42); // "($42)" ``` The new `=` align option places any sign and symbol to the left of any padding: ```js d3.format(">6d")(-42); // " -42" d3.format("=6d")(-42); // "- 42" d3.format(">(6d")(-42); // " (42)" d3.format("=(6d")(-42); // "( 42)" ``` The `b`, `o`, `d` and `x` directives now round to the nearest integer, rather than returning the empty string for non-integers: ```js d3.format("b")(41.9); // "101010" d3.format("o")(41.9); // "52" d3.format("d")(41.9); // "42" d3.format("x")(41.9); // "2a" ``` The `c` directive is now for character data (*i.e.*, literal strings), not for character codes. The is useful if you just want to apply padding and alignment and don’t care about formatting numbers. For example, the infamous [left-pad](http://blog.npmjs.org/post/141577284765/kik-left-pad-and-npm) (as well as center- and right-pad!) can be conveniently implemented as: ```js d3.format(">10c")("foo"); // " foo" d3.format("^10c")("foo"); // " foo " d3.format("<10c")("foo"); // "foo " ``` There are several new methods for computing suggested decimal precisions; these are used by [d3-scale](#scales-d3-scale) for tick formatting, and are helpful for implementing custom number formats: [d3.precisionFixed](https://github.com/d3/d3-format/blob/master/README.md#precisionFixed), [d3.precisionPrefix](https://github.com/d3/d3-format/blob/master/README.md#precisionPrefix) and [d3.precisionRound](https://github.com/d3/d3-format/blob/master/README.md#precisionRound). There’s also a new [d3.formatSpecifier](https://github.com/d3/d3-format/blob/master/README.md#formatSpecifier) method for parsing, validating and debugging format specifiers; it’s also good for deriving related format specifiers, such as when you want to substitute the precision automatically. You can now set the default locale using [d3.formatDefaultLocale](https://github.com/d3/d3-format/blob/master/README.md#formatDefaultLocale)! The locales are published as [JSON](https://github.com/d3/d3-request/blob/master/README.md#json) to [npm](https://unpkg.com/d3-format/locale/). ## [Geographies (d3-geo)](https://github.com/d3/d3-geo/blob/master/README.md) Pursuant to the great namespace flattening, various methods have new names: * d3.geo.graticule ↦ [d3.geoGraticule](https://github.com/d3/d3-geo/blob/master/README.md#geoGraticule) * d3.geo.circle ↦ [d3.geoCircle](https://github.com/d3/d3-geo/blob/master/README.md#geoCircle) * d3.geo.area ↦ [d3.geoArea](https://github.com/d3/d3-geo/blob/master/README.md#geoArea) * d3.geo.bounds ↦ [d3.geoBounds](https://github.com/d3/d3-geo/blob/master/README.md#geoBounds) * d3.geo.centroid ↦ [d3.geoCentroid](https://github.com/d3/d3-geo/blob/master/README.md#geoCentroid) * d3.geo.distance ↦ [d3.geoDistance](https://github.com/d3/d3-geo/blob/master/README.md#geoDistance) * d3.geo.interpolate ↦ [d3.geoInterpolate](https://github.com/d3/d3-geo/blob/master/README.md#geoInterpolate) * d3.geo.length ↦ [d3.geoLength](https://github.com/d3/d3-geo/blob/master/README.md#geoLength) * d3.geo.rotation ↦ [d3.geoRotation](https://github.com/d3/d3-geo/blob/master/README.md#geoRotation) * d3.geo.stream ↦ [d3.geoStream](https://github.com/d3/d3-geo/blob/master/README.md#geoStream) * d3.geo.path ↦ [d3.geoPath](https://github.com/d3/d3-geo/blob/master/README.md#geoPath) * d3.geo.projection ↦ [d3.geoProjection](https://github.com/d3/d3-geo/blob/master/README.md#geoProjection) * d3.geo.projectionMutator ↦ [d3.geoProjectionMutator](https://github.com/d3/d3-geo/blob/master/README.md#geoProjectionMutator) * d3.geo.albers ↦ [d3.geoAlbers](https://github.com/d3/d3-geo/blob/master/README.md#geoAlbers) * d3.geo.albersUsa ↦ [d3.geoAlbersUsa](https://github.com/d3/d3-geo/blob/master/README.md#geoAlbersUsa) * d3.geo.azimuthalEqualArea ↦ [d3.geoAzimuthalEqualArea](https://github.com/d3/d3-geo/blob/master/README.md#geoAzimuthalEqualArea) * d3.geo.azimuthalEquidistant ↦ [d3.geoAzimuthalEquidistant](https://github.com/d3/d3-geo/blob/master/README.md#geoAzimuthalEquidistant) * d3.geo.conicConformal ↦ [d3.geoConicConformal](https://github.com/d3/d3-geo/blob/master/README.md#geoConicConformal) * d3.geo.conicEqualArea ↦ [d3.geoConicEqualArea](https://github.com/d3/d3-geo/blob/master/README.md#geoConicEqualArea) * d3.geo.conicEquidistant ↦ [d3.geoConicEquidistant](https://github.com/d3/d3-geo/blob/master/README.md#geoConicEquidistant) * d3.geo.equirectangular ↦ [d3.geoEquirectangular](https://github.com/d3/d3-geo/blob/master/README.md#geoEquirectangular) * d3.geo.gnomonic ↦ [d3.geoGnomonic](https://github.com/d3/d3-geo/blob/master/README.md#geoGnomonic) * d3.geo.mercator ↦ [d3.geoMercator](https://github.com/d3/d3-geo/blob/master/README.md#geoMercator) * d3.geo.orthographic ↦ [d3.geoOrthographic](https://github.com/d3/d3-geo/blob/master/README.md#geoOrthographic) * d3.geo.stereographic ↦ [d3.geoStereographic](https://github.com/d3/d3-geo/blob/master/README.md#geoStereographic) * d3.geo.transverseMercator ↦ [d3.geoTransverseMercator](https://github.com/d3/d3-geo/blob/master/README.md#geoTransverseMercator) Also renamed for consistency: * *circle*.origin ↦ [*circle*.center](https://github.com/d3/d3-geo/blob/master/README.md#circle_center) * *circle*.angle ↦ [*circle*.radius](https://github.com/d3/d3-geo/blob/master/README.md#circle_radius) * *graticule*.majorExtent ↦ [*graticule*.extentMajor](https://github.com/d3/d3-geo/blob/master/README.md#graticule_extentMajor) * *graticule*.minorExtent ↦ [*graticule*.extentMinor](https://github.com/d3/d3-geo/blob/master/README.md#graticule_extentMinor) * *graticule*.majorStep ↦ [*graticule*.stepMajor](https://github.com/d3/d3-geo/blob/master/README.md#graticule_stepMajor) * *graticule*.minorStep ↦ [*graticule*.stepMinor](https://github.com/d3/d3-geo/blob/master/README.md#graticule_stepMinor) Projections now have more appropriate defaults. For example, [d3.geoOrthographic](https://github.com/d3/d3-geo/blob/master/README.md#geoOrthographic) has a 90° clip angle by default, showing only the front hemisphere, and [d3.geoGnomonic](https://github.com/d3/d3-geo/blob/master/README.md#geoGnomonic) has a default 60° clip angle. The default [projection](https://github.com/d3/d3-geo/blob/master/README.md#path_projection) for [d3.geoPath](https://github.com/d3/d3-geo/blob/master/README.md#geoPath) is now null rather than [d3.geoAlbersUsa](https://github.com/d3/d3-geo/blob/master/README.md#geoAlbersUsa); a null projection is used with [pre-projected geometry](https://bl.ocks.org/mbostock/5557726) and is typically faster to render. “Fallback projections”—when you pass a function rather than a projection to [*path*.projection](https://github.com/d3/d3-geo/blob/master/README.md#path_projection)—are no longer supported. For geographic projections, use [d3.geoProjection](https://github.com/d3/d3-geo/blob/master/README.md#geoProjection) or [d3.geoProjectionMutator](https://github.com/d3/d3-geo/blob/master/README.md#geoProjectionMutator) to define a custom projection. For arbitrary geometry transformations, implement the [stream interface](https://github.com/d3/d3-geo/blob/master/README.md#streams); see also [d3.geoTransform](https://github.com/d3/d3-geo/blob/master/README.md#geoTransform). The “raw” projections (e.g., d3.geo.equirectangular.raw) are no longer exported. ## [Hierarchies (d3-hierarchy)](https://github.com/d3/d3-hierarchy/blob/master/README.md) Pursuant to the great namespace flattening: * d3.layout.cluster ↦ [d3.cluster](https://github.com/d3/d3-hierarchy/blob/master/README.md#cluster) * d3.layout.hierarchy ↦ [d3.hierarchy](https://github.com/d3/d3-hierarchy/blob/master/README.md#hierarchy) * d3.layout.pack ↦ [d3.pack](https://github.com/d3/d3-hierarchy/blob/master/README.md#pack) * d3.layout.partition ↦ [d3.partition](https://github.com/d3/d3-hierarchy/blob/master/README.md#partition) * d3.layout.tree ↦ [d3.tree](https://github.com/d3/d3-hierarchy/blob/master/README.md#tree) * d3.layout.treemap ↦ [d3.treemap](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap) As an alternative to using JSON to represent hierarchical data (such as the “flare.json format” used by many D3 examples), the new [d3.stratify](https://github.com/d3/d3-hierarchy/blob/master/README.md#stratify) operator simplifies the conversion of tabular data to hierarchical data! This is convenient if you already have data in a tabular format, such as the result of a SQL query or a CSV file: ``` name,parent Eve, Cain,Eve Seth,Eve Enos,Seth Noam,Seth Abel,Eve Awan,Eve Enoch,Awan Azura,Eve ``` To convert this to a root [*node*](https://github.com/d3/d3-hierarchy/blob/master/README.md#hierarchy): ```js var root = d3.stratify() .id(function(d) { return d.name; }) .parentId(function(d) { return d.parent; }) (nodes); ``` The resulting *root* can be passed to [d3.tree](https://github.com/d3/d3-hierarchy/blob/master/README.md#tree) to produce a tree diagram like this: Root nodes can also be created from JSON data using [d3.hierarchy](https://github.com/d3/d3-hierarchy/blob/master/README.md#hierarchy). The hierarchy layouts now take these root nodes as input rather than operating directly on JSON data, which helps to provide a cleaner separation between the input data and the computed layout. (For example, use [*node*.copy](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_copy) to isolate layout changes.) It also simplifies the API: rather than each hierarchy layout needing to implement value and sorting accessors, there are now generic [*node*.sum](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_sum) and [*node*.sort](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_sort) methods that work with any hierarchy layout. The new d3.hierarchy API also provides a richer set of methods for manipulating hierarchical data. For example, to generate an array of all nodes in topological order, use [*node*.descendants](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_descendants); for just leaf nodes, use [*node*.leaves](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_leaves). To highlight the ancestors of a given *node* on mouseover, use [*node*.ancestors](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_ancestors). To generate an array of {source, target} links for a given hierarchy, use [*node*.links](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_links); this replaces *treemap*.links and similar methods on the other layouts. The new [*node*.path](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_path) method replaces d3.layout.bundle; see also [d3.curveBundle](https://github.com/d3/d3-shape/blob/master/README.md#curveBundle) for hierarchical edge bundling. The hierarchy layouts have been rewritten using new, non-recursive traversal methods ([*node*.each](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_each), [*node*.eachAfter](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_eachAfter) and [*node*.eachBefore](https://github.com/d3/d3-hierarchy/blob/master/README.md#node_eachBefore)), improving performance on large datasets. The d3.tree layout no longer uses a *node*.\_ field to store temporary state during layout. Treemap tiling is now [extensible](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap-tiling) via [*treemap*.tile](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap_tile)! The default squarified tiling algorithm, [d3.treemapSquarify](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemapSquarify), has been completely rewritten, improving performance and fixing bugs in padding and rounding. The *treemap*.sticky method has been replaced with the [d3.treemapResquarify](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemapResquarify), which is identical to d3.treemapSquarify except it performs stable neighbor-preserving updates. The *treemap*.ratio method has been replaced with [*squarify*.ratio](https://github.com/d3/d3-hierarchy/blob/master/README.md#squarify_ratio). And there’s a new [d3.treemapBinary](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemapBinary) for binary treemaps! Treemap padding has also been improved. The treemap now distinguishes between [outer padding](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap_paddingOuter) that separates a parent from its children, and [inner padding](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap_paddingInner) that separates adjacent siblings. You can set the [top-](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap_paddingTop), [right-](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap_paddingRight), [bottom-](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap_paddingBottom) and [left-](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap_paddingLeft)outer padding separately. There are new examples for the traditional [nested treemap](https://bl.ocks.org/mbostock/911ad09bdead40ec0061) and for Lü and Fogarty’s [cascaded treemap](https://bl.ocks.org/mbostock/f85ffb3a5ac518598043). And there’s a new example demonstrating [d3.nest with d3.treemap](https://bl.ocks.org/mbostock/2838bf53e0e65f369f476afd653663a2). The space-filling layouts [d3.treemap](https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap) and [d3.partition](https://github.com/d3/d3-hierarchy/blob/master/README.md#partition) now output *x0*, *x1*, *y0*, *y1* on each node instead of *x0*, *dx*, *y0*, *dy*. This improves accuracy by ensuring that the edges of adjacent cells are exactly equal, rather than sometimes being slightly off due to floating point math. The partition layout now supports [rounding](https://github.com/d3/d3-hierarchy/blob/master/README.md#partition_round) and [padding](https://github.com/d3/d3-hierarchy/blob/master/README.md#partition_padding). The circle-packing layout, [d3.pack](https://github.com/d3/d3-hierarchy/blob/master/README.md#pack), has been completely rewritten to better implement Wang et al.’s algorithm, fixing major bugs and improving results! Welzl’s algorithm is now used to compute the exact [smallest enclosing circle](https://bl.ocks.org/mbostock/29c534ff0b270054a01c) for each parent, rather than the approximate answer used by Wang et al. The 3.x output is shown on the left; 4.0 is shown on the right: Circle Packing in 3.x Circle Packing in 4.0 A non-hierarchical implementation is also available as [d3.packSiblings](https://github.com/d3/d3-hierarchy/blob/master/README.md#packSiblings), and the smallest enclosing circle implementation is available as [d3.packEnclose](https://github.com/d3/d3-hierarchy/blob/master/README.md#packEnclose). [Pack padding](https://github.com/d3/d3-hierarchy/blob/master/README.md#pack_padding) now applies between a parent and its children, as well as between adjacent siblings. In addition, you can now specify padding as a function that is computed dynamically for each parent. ## Internals The d3.rebind method has been removed. (See the [3.x source](https://github.com/d3/d3/blob/v3.5.17/src/core/rebind.js).) If you want to wrap a getter-setter method, the recommend pattern is to implement a wrapper method and check the return value. For example, given a *component* that uses an internal [*dispatch*](#dispatches-d3-dispatch), *component*.on can rebind *dispatch*.on as follows: ```js component.on = function() { var value = dispatch.on.apply(dispatch, arguments); return value === dispatch ? component : value; }; ``` The d3.functor method has been removed. (See the [3.x source](https://github.com/d3/d3/blob/v3.5.17/src/core/functor.js).) If you want to promote a constant value to a function, the recommended pattern is to implement a closure that returns the constant value. If desired, you can use a helper method as follows: ```js function constant(x) { return function() { return x; }; } ``` Given a value *x*, to promote *x* to a function if it is not already: ```js var fx = typeof x === "function" ? x : constant(x); ``` ## [Interpolators (d3-interpolate)](https://github.com/d3/d3-interpolate/blob/master/README.md) The [d3.interpolate](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolate) method no longer delegates to d3.interpolators, which has been removed; its behavior is now defined by the library. It is now slightly faster in the common case that *b* is a number. It only uses [d3.interpolateRgb](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateRgb) if *b* is a valid CSS color specifier (and not approximately one). And if the end value *b* is null, undefined, true or false, d3.interpolate now returns a constant function which always returns *b*. The behavior of [d3.interpolateObject](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateObject) and [d3.interpolateArray](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateArray) has changed slightly with respect to properties or elements in the start value *a* that do not exist in the end value *b*: these properties and elements are now ignored, such that the ending value of the interpolator at *t* = 1 is now precisely equal to *b*. So, in 3.x: ```js d3.interpolateObject({foo: 2, bar: 1}, {foo: 3})(0.5); // {bar: 1, foo: 2.5} in 3.x ``` Whereas in 4.0, *a*.bar is ignored: ```js d3.interpolateObject({foo: 2, bar: 1}, {foo: 3})(0.5); // {foo: 2.5} in 4.0 ``` If *a* or *b* are undefined or not an object, they are now implicitly converted to the empty object or empty array as appropriate, rather than throwing a TypeError. The d3.interpolateTransform interpolator has been renamed to [d3.interpolateTransformSvg](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateTransformSvg), and there is a new [d3.interpolateTransformCss](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateTransformCss) to interpolate CSS transforms! This allows [d3-transition](#transitions-d3-transition) to automatically interpolate both the SVG [transform attribute](https://www.w3.org/TR/SVG/coords.html#TransformAttribute) and the CSS [transform style property](https://www.w3.org/TR/css-transforms-1/#transform-property). (Note, however, that only 2D CSS transforms are supported.) The d3.transform method has been removed. Color space interpolators now interpolate opacity (see [d3-color](#colors-d3-color)) and return rgb(…) or rgba(…) CSS color specifier strings rather than using the RGB hexadecimal format. This is necessary to support opacity interpolation, but is also beneficial because it matches CSS computed values. When a channel in the start color *a* is undefined, color interpolators now use the corresponding channel value from the end color *b*, or *vice versa*. This logic previously applied to some channels (such as saturation in HSL), but now applies to all channels in all color spaces, and is especially useful when interpolating to or from transparent. There are now “long” versions of cylindrical color space interpolators: [d3.interpolateHslLong](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateHslLong), [d3.interpolateHclLong](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateHclLong) and [d3.interpolateCubehelixLong](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateCubehelixLong). These interpolators use linear interpolation of hue, rather than using the shortest path around the 360° hue circle. See [d3.interpolateRainbow](https://github.com/d3/d3-scale/blob/master/README.md#interpolateRainbow) for an example. The Cubehelix color space is now supported by [d3-color](#colors-d3-color), and so there are now [d3.interpolateCubehelix](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateCubehelix) and [d3.interpolateCubehelixLong](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateCubehelixLong) interpolators. [Gamma-corrected color interpolation](https://web.archive.org/web/20160112115812/http://www.4p8.com/eric.brasseur/gamma.html) is now supported for both RGB and Cubehelix color spaces as [*interpolate*.gamma](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolate_gamma). For example, to interpolate from purple to orange with a gamma of 2.2 in RGB space: ```js var interpolate = d3.interpolateRgb.gamma(2.2)("purple", "orange"); ``` There are new interpolators for uniform non-rational [B-splines](https://en.wikipedia.org/wiki/B-spline)! These are useful for smoothly interpolating between an arbitrary sequence of values from *t* = 0 to *t* = 1, such as to generate a smooth color gradient from a discrete set of colors. The [d3.interpolateBasis](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateBasis) and [d3.interpolateBasisClosed](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateBasisClosed) interpolators generate one-dimensional B-splines, while [d3.interpolateRgbBasis](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateRgbBasis) and [d3.interpolateRgbBasisClosed](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateRgbBasisClosed) generate three-dimensional B-splines through RGB color space. These are used by [d3-scale-chromatic](https://github.com/d3/d3-scale-chromatic) to generate continuous color scales from ColorBrewer’s discrete color schemes, such as [PiYG](https://bl.ocks.org/mbostock/048d21cf747371b11884f75ad896e5a5). There’s also now a [d3.quantize](https://github.com/d3/d3-interpolate/blob/master/README.md#quantize) method for generating uniformly-spaced discrete samples from a continuous interpolator. This is useful for taking one of the built-in color scales (such as [d3.interpolateViridis](https://github.com/d3/d3-scale/blob/master/README.md#interpolateViridis)) and quantizing it for use with [d3.scaleQuantize](https://github.com/d3/d3-scale/blob/master/README.md#scaleQuantize), [d3.scaleQuantile](https://github.com/d3/d3-scale/blob/master/README.md#scaleQuantile) or [d3.scaleThreshold](https://github.com/d3/d3-scale/blob/master/README.md#scaleThreshold). ## [Paths (d3-path)](https://github.com/d3/d3-path/blob/master/README.md) The [d3.path](https://github.com/d3/d3-path/blob/master/README.md#path) serializer implements the [CanvasPathMethods API](https://www.w3.org/TR/2dcontext/#canvaspathmethods), allowing you to write code that can render to either Canvas or SVG. For example, given some code that draws to a canvas: ```js function drawCircle(context, radius) { context.moveTo(radius, 0); context.arc(0, 0, radius, 0, 2 * Math.PI); } ``` You can render to SVG as follows: ```js var context = d3.path(); drawCircle(context, 40); pathElement.setAttribute("d", context.toString()); ``` The path serializer enables [d3-shape](#shapes-d3-shape) to support both Canvas and SVG; see [*line*.context](https://github.com/d3/d3-shape/blob/master/README.md#line_context) and [*area*.context](https://github.com/d3/d3-shape/blob/master/README.md#area_context), for example. ## [Polygons (d3-polygon)](https://github.com/d3/d3-polygon/blob/master/README.md) There’s no longer a d3.geom.polygon constructor; instead you just pass an array of vertices to the polygon methods. So instead of *polygon*.area and *polygon*.centroid, there’s [d3.polygonArea](https://github.com/d3/d3-polygon/blob/master/README.md#polygonArea) and [d3.polygonCentroid](https://github.com/d3/d3-polygon/blob/master/README.md#polygonCentroid). There are also new [d3.polygonContains](https://github.com/d3/d3-polygon/blob/master/README.md#polygonContains) and [d3.polygonLength](https://github.com/d3/d3-polygon/blob/master/README.md#polygonLength) methods. There’s no longer an equivalent to *polygon*.clip, but if [Sutherland–Hodgman clipping](https://en.wikipedia.org/wiki/Sutherland–Hodgman_algorithm) is needed, please [file a feature request](https://github.com/d3/d3-polygon/issues). The d3.geom.hull operator has been simplified: instead of an operator with *hull*.x and *hull*.y accessors, there’s just the [d3.polygonHull](https://github.com/d3/d3-polygon/blob/master/README.md#polygonHull) method which takes an array of points and returns the convex hull. ## [Quadtrees (d3-quadtree)](https://github.com/d3/d3-quadtree/blob/master/README.md) The d3.geom.quadtree method has been replaced by [d3.quadtree](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree). 4.0 removes the concept of quadtree “generators” (configurable functions that build a quadtree from an array of data); there are now just quadtrees, which you can create via d3.quadtree and add data to via [*quadtree*.add](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_add) and [*quadtree*.addAll](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_addAll). This code in 3.x: ```js var quadtree = d3.geom.quadtree() .extent([[0, 0], [width, height]]) (data); ``` Can be rewritten in 4.0 as: ```js var quadtree = d3.quadtree() .extent([[0, 0], [width, height]]) .addAll(data); ``` The new quadtree implementation is vastly improved! It is no longer recursive, avoiding stack overflows when there are large numbers of coincident points. The internal storage is now more efficient, and the implementation is also faster; constructing a quadtree of 1M normally-distributed points takes about one second in 4.0, as compared to three seconds in 3.x. The change in [internal *node* structure](https://github.com/d3/d3-quadtree/blob/master/README.md#nodes) affects [*quadtree*.visit](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_visit): use *node*.length to distinguish leaf nodes from internal nodes. For example, to iterate over all data in a quadtree: ```js quadtree.visit(function(node) { if (!node.length) { do { console.log(node.data); } while (node = node.next) } }); ``` There’s a new [*quadtree*.visitAfter](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_visitAfter) method for visiting nodes in post-order traversal. This feature is used in [d3-force](#forces-d3-force) to implement the [Barnes–Hut approximation](https://en.wikipedia.org/wiki/Barnes–Hut_simulation). You can now remove data from a quadtree using [*quadtree*.remove](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_remove) and [*quadtree*.removeAll](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_removeAll). When adding data to a quadtree, the quadtree will now expand its extent by repeated doubling if the new point is outside the existing extent of the quadtree. There are also [*quadtree*.extent](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_extent) and [*quadtree*.cover](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_cover) methods for explicitly expanding the extent of the quadtree after creation. Quadtrees support several new utility methods: [*quadtree*.copy](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_copy) returns a copy of the quadtree sharing the same data; [*quadtree*.data](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_data) generates an array of all data in the quadtree; [*quadtree*.size](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_size) returns the number of data points in the quadtree; and [*quadtree*.root](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_root) returns the root node, which is useful for manual traversal of the quadtree. The [*quadtree*.find](https://github.com/d3/d3-quadtree/blob/master/README.md#quadtree_find) method now takes an optional search radius, which is useful for pointer-based selection in [force-directed graphs](https://bl.ocks.org/mbostock/ad70335eeef6d167bc36fd3c04378048). ## [Queues (d3-queue)](https://github.com/d3/d3-queue/blob/master/README.md) Formerly known as Queue.js and queue-async, [d3.queue](https://github.com/d3/d3-queue) is now included in the default bundle, making it easy to load data files in parallel. It has been rewritten with fewer closures to improve performance, and there are now stricter checks in place to guarantee well-defined behavior. You can now use instanceof d3.queue and inspect the queue’s internal private state. ## [Random Numbers (d3-random)](https://github.com/d3/d3-random/blob/master/README.md) Pursuant to the great namespace flattening, the random number generators have new names: * d3.random.normal ↦ [d3.randomNormal](https://github.com/d3/d3-random/blob/master/README.md#randomNormal) * d3.random.logNormal ↦ [d3.randomLogNormal](https://github.com/d3/d3-random/blob/master/README.md#randomLogNormal) * d3.random.bates ↦ [d3.randomBates](https://github.com/d3/d3-random/blob/master/README.md#randomBates) * d3.random.irwinHall ↦ [d3.randomIrwinHall](https://github.com/d3/d3-random/blob/master/README.md#randomIrwinHall) There are also new random number generators for [exponential](https://github.com/d3/d3-random/blob/master/README.md#randomExponential) and [uniform](https://github.com/d3/d3-random/blob/master/README.md#randomUniform) distributions. The [normal](https://github.com/d3/d3-random/blob/master/README.md#randomNormal) and [log-normal](https://github.com/d3/d3-random/blob/master/README.md#randomLogNormal) random generators have been optimized. ## [Requests (d3-request)](https://github.com/d3/d3-request/blob/master/README.md) The d3.xhr method has been renamed to [d3.request](https://github.com/d3/d3-request/blob/master/README.md#request). Basic authentication is now supported using [*request*.user](https://github.com/d3/d3-request/blob/master/README.md#request_user) and [*request*.password](https://github.com/d3/d3-request/blob/master/README.md#request_password). You can now configure a timeout using [*request*.timeout](https://github.com/d3/d3-request/blob/master/README.md#request_timeout). If an error occurs, the corresponding [ProgressEvent](https://xhr.spec.whatwg.org/#interface-progressevent) of type “error” is now passed to the error listener, rather than the [XMLHttpRequest](https://xhr.spec.whatwg.org/#interface-xmlhttprequest). Likewise, the ProgressEvent is passed to progress event listeners, rather than using [d3.event](https://github.com/d3/d3-selection/blob/master/README.md#event). If [d3.xml](https://github.com/d3/d3-request/blob/master/README.md#xml) encounters an error parsing XML, this error is now reported to error listeners rather than returning a null response. The [d3.request](https://github.com/d3/d3-request/blob/master/README.md#request), [d3.text](https://github.com/d3/d3-request/blob/master/README.md#text) and [d3.xml](https://github.com/d3/d3-request/blob/master/README.md#xml) methods no longer take an optional mime type as the second argument; use [*request*.mimeType](https://github.com/d3/d3-request/blob/master/README.md#request_mimeType) instead. For example: ```js d3.xml("file.svg").mimeType("image/svg+xml").get(function(error, svg) { … }); ``` With the exception of [d3.html](https://github.com/d3/d3-request/blob/master/README.md#html) and [d3.xml](https://github.com/d3/d3-request/blob/master/README.md#xml), Node is now supported via [node-XMLHttpRequest](https://github.com/driverdan/node-XMLHttpRequest). ## [Scales (d3-scale)](https://github.com/d3/d3-scale/blob/master/README.md) Pursuant to the great namespace flattening: * d3.scale.linear ↦ [d3.scaleLinear](https://github.com/d3/d3-scale/blob/master/README.md#scaleLinear) * d3.scale.sqrt ↦ [d3.scaleSqrt](https://github.com/d3/d3-scale/blob/master/README.md#scaleSqrt) * d3.scale.pow ↦ [d3.scalePow](https://github.com/d3/d3-scale/blob/master/README.md#scalePow) * d3.scale.log ↦ [d3.scaleLog](https://github.com/d3/d3-scale/blob/master/README.md#scaleLog) * d3.scale.quantize ↦ [d3.scaleQuantize](https://github.com/d3/d3-scale/blob/master/README.md#scaleQuantize) * d3.scale.threshold ↦ [d3.scaleThreshold](https://github.com/d3/d3-scale/blob/master/README.md#scaleThreshold) * d3.scale.quantile ↦ [d3.scaleQuantile](https://github.com/d3/d3-scale/blob/master/README.md#scaleQuantile) * d3.scale.identity ↦ [d3.scaleIdentity](https://github.com/d3/d3-scale/blob/master/README.md#scaleIdentity) * d3.scale.ordinal ↦ [d3.scaleOrdinal](https://github.com/d3/d3-scale/blob/master/README.md#scaleOrdinal) * d3.time.scale ↦ [d3.scaleTime](https://github.com/d3/d3-scale/blob/master/README.md#scaleTime) * d3.time.scale.utc ↦ [d3.scaleUtc](https://github.com/d3/d3-scale/blob/master/README.md#scaleUtc) Scales now generate ticks in the same order as the domain: if you have a descending domain, you now get descending ticks. This change affects the order of tick elements generated by [axes](#axes-d3-axis). For example: ```js d3.scaleLinear().domain([10, 0]).ticks(5); // [10, 8, 6, 4, 2, 0] ``` [Log tick formatting](https://github.com/d3/d3-scale/blob/master/README.md#log_tickFormat) now assumes a default *count* of ten, not Infinity, if not specified. Log scales with domains that span many powers (such as from 1e+3 to 1e+29) now return only one [tick](https://github.com/d3/d3-scale/blob/master/README.md#log_ticks) per power rather than returning *base* ticks per power. Non-linear quantitative scales are slightly more accurate. You can now control whether an ordinal scale’s domain is implicitly extended when the scale is passed a value that is not already in its domain. By default, [*ordinal*.unknown](https://github.com/d3/d3-scale/blob/master/README.md#ordinal_unknown) is [d3.scaleImplicit](https://github.com/d3/d3-scale/blob/master/README.md#scaleImplicit), causing unknown values to be added to the domain: ```js var x = d3.scaleOrdinal() .domain([0, 1]) .range(["red", "green", "blue"]); x.domain(); // [0, 1] x(2); // "blue" x.domain(); // [0, 1, 2] ``` By setting *ordinal*.unknown, you instead define the output value for unknown inputs. This is particularly useful for choropleth maps where you want to assign a color to missing data. ```js var x = d3.scaleOrdinal() .domain([0, 1]) .range(["red", "green", "blue"]) .unknown(undefined); x.domain(); // [0, 1] x(2); // undefined x.domain(); // [0, 1] ``` The *ordinal*.rangeBands and *ordinal*.rangeRoundBands methods have been replaced with a new subclass of ordinal scale: [band scales](https://github.com/d3/d3-scale/blob/master/README.md#band-scales). The following code in 3.x: ```js var x = d3.scale.ordinal() .domain(["a", "b", "c"]) .rangeBands([0, width]); ``` Is equivalent to this in 4.0: ```js var x = d3.scaleBand() .domain(["a", "b", "c"]) .range([0, width]); ``` The new [*band*.padding](https://github.com/d3/d3-scale/blob/master/README.md#band_padding), [*band*.paddingInner](https://github.com/d3/d3-scale/blob/master/README.md#band_paddingInner) and [*band*.paddingOuter](https://github.com/d3/d3-scale/blob/master/README.md#band_paddingOuter) methods replace the optional arguments to *ordinal*.rangeBands. The new [*band*.bandwidth](https://github.com/d3/d3-scale/blob/master/README.md#band_bandwidth) and [*band*.step](https://github.com/d3/d3-scale/blob/master/README.md#band_step) methods replace *ordinal*.rangeBand. There’s also a new [*band*.align](https://github.com/d3/d3-scale/blob/master/README.md#band_align) method which you can use to control how the extra space outside the bands is distributed, say to shift columns closer to the *y*-axis. Similarly, the *ordinal*.rangePoints and *ordinal*.rangeRoundPoints methods have been replaced with a new subclass of ordinal scale: [point scales](https://github.com/d3/d3-scale/blob/master/README.md#point-scales). The following code in 3.x: ```js var x = d3.scale.ordinal() .domain(["a", "b", "c"]) .rangePoints([0, width]); ``` Is equivalent to this in 4.0: ```js var x = d3.scalePoint() .domain(["a", "b", "c"]) .range([0, width]); ``` The new [*point*.padding](https://github.com/d3/d3-scale/blob/master/README.md#point_padding) method replaces the optional *padding* argument to *ordinal*.rangePoints. Like *ordinal*.rangeBand with *ordinal*.rangePoints, the [*point*.bandwidth](https://github.com/d3/d3-scale/blob/master/README.md#point_bandwidth) method always returns zero; a new [*point*.step](https://github.com/d3/d3-scale/blob/master/README.md#point_step) method returns the interval between adjacent points. The [ordinal scale constructor](https://github.com/d3/d3-scale/blob/master/README.md#ordinal-scales) now takes an optional *range* for a shorter alternative to [*ordinal*.range](https://github.com/d3/d3-scale/blob/master/README.md#ordinal_range). This is especially useful now that the categorical color scales have been changed to simple arrays of colors rather than specialized ordinal scale constructors: * d3.scale.category10 ↦ [d3.schemeCategory10](https://github.com/d3/d3-scale/blob/master/README.md#schemeCategory10) * d3.scale.category20 ↦ [d3.schemeCategory20](https://github.com/d3/d3-scale/blob/master/README.md#schemeCategory20) * d3.scale.category20b ↦ [d3.schemeCategory20b](https://github.com/d3/d3-scale/blob/master/README.md#schemeCategory20b) * d3.scale.category20c ↦ [d3.schemeCategory20c](https://github.com/d3/d3-scale/blob/master/README.md#schemeCategory20c) The following code in 3.x: ```js var color = d3.scale.category10(); ``` Is equivalent to this in 4.0: ```js var color = d3.scaleOrdinal(d3.schemeCategory10); ``` [Sequential scales](https://github.com/d3/d3-scale/blob/master/README.md#scaleSequential), are a new class of scales with a fixed output [interpolator](https://github.com/d3/d3-scale/blob/master/README.md#sequential_interpolator) instead of a [range](https://github.com/d3/d3-scale/blob/master/README.md#continuous_range). Typically these scales are used to implement continuous sequential or diverging color schemes. Inspired by Matplotlib’s new [perceptually-motived colormaps](https://bids.github.io/colormap/), 4.0 now features [viridis](https://github.com/d3/d3-scale/blob/master/README.md#interpolateViridis), [inferno](https://github.com/d3/d3-scale/blob/master/README.md#interpolateInferno), [magma](https://github.com/d3/d3-scale/blob/master/README.md#interpolateMagma), [plasma](https://github.com/d3/d3-scale/blob/master/README.md#interpolatePlasma) interpolators for use with sequential scales. Using [d3.quantize](https://github.com/d3/d3-interpolate/blob/master/README.md#quantize), these interpolators can also be applied to [quantile](https://github.com/d3/d3-scale/blob/master/README.md#quantile-scales), [quantize](https://github.com/d3/d3-scale/blob/master/README.md#quantize-scales) and [threshold](https://github.com/d3/d3-scale/blob/master/README.md#threshold-scales) scales. [viridis](https://github.com/d3/d3-scale/blob/master/README.md#interpolateViridis) [inferno](https://github.com/d3/d3-scale/blob/master/README.md#interpolateInferno) [magma](https://github.com/d3/d3-scale/blob/master/README.md#interpolateMagma) [plasma](https://github.com/d3/d3-scale/blob/master/README.md#interpolatePlasma) 4.0 also ships new Cubehelix schemes, including [Dave Green’s default](https://github.com/d3/d3-scale/blob/master/README.md#interpolateCubehelixDefault) and a [cyclical rainbow](https://github.com/d3/d3-scale/blob/master/README.md#interpolateRainbow) inspired by [Matteo Niccoli](https://mycarta.wordpress.com/2013/02/21/perceptual-rainbow-palette-the-method/): [cubehelix](https://github.com/d3/d3-scale/blob/master/README.md#interpolateCubehelixDefault) [rainbow](https://github.com/d3/d3-scale/blob/master/README.md#interpolateRainbow) [warm](https://github.com/d3/d3-scale/blob/master/README.md#interpolateWarm) [cool](https://github.com/d3/d3-scale/blob/master/README.md#interpolateCool) For even more sequential and categorical color schemes, see [d3-scale-chromatic](https://github.com/d3/d3-scale-chromatic). For an introduction to scales, see [Introducing d3-scale](https://medium.com/@mbostock/introducing-d3-scale-61980c51545f). ## [Selections (d3-selection)](https://github.com/d3/d3-selection/blob/master/README.md) Selections no longer subclass Array using [prototype chain injection](http://perfectionkills.com/how-ecmascript-5-still-does-not-allow-to-subclass-an-array/#wrappers_prototype_chain_injection); they are now plain objects, improving performance. The internal fields (*selection*.\_groups, *selection*.\_parents) are private; please use the documented public API to manipulate selections. The new [*selection*.nodes](https://github.com/d3/d3-selection/blob/master/README.md#selection_nodes) method generates an array of all nodes in a selection. Selections are now immutable: the elements and parents in a selection never change. (The elements’ attributes and content will of course still be modified!) The [*selection*.sort](https://github.com/d3/d3-selection/blob/master/README.md#selection_sort) and [*selection*.data](https://github.com/d3/d3-selection/blob/master/README.md#selection_data) methods now return new selections rather than modifying the selection in-place. In addition, [*selection*.append](https://github.com/d3/d3-selection/blob/master/README.md#selection_append) no longer merges entering nodes into the update selection; use [*selection*.merge](https://github.com/d3/d3-selection/blob/master/README.md#selection_merge) to combine enter and update after a data join. For example, the following [general update pattern](https://bl.ocks.org/mbostock/a8a5baa4c4a470cda598) in 3.x: ```js var circle = svg.selectAll("circle").data(data) // UPDATE .style("fill", "blue"); circle.exit().remove(); // EXIT circle.enter().append("circle") // ENTER; modifies UPDATE! 🌶 .style("fill", "green"); circle // ENTER + UPDATE .style("stroke", "black"); ``` Would be rewritten in 4.0 as: ```js var circle = svg.selectAll("circle").data(data) // UPDATE .style("fill", "blue"); circle.exit().remove(); // EXIT circle.enter().append("circle") // ENTER .style("fill", "green") .merge(circle) // ENTER + UPDATE .style("stroke", "black"); ``` This change is discussed further in [What Makes Software Good](https://medium.com/@mbostock/what-makes-software-good-943557f8a488). In 3.x, the [*selection*.enter](https://github.com/d3/d3-selection/blob/master/README.md#selection_enter) and [*selection*.exit](https://github.com/d3/d3-selection/blob/master/README.md#selection_exit) methods were undefined until you called *selection*.data, resulting in a TypeError if you attempted to access them. In 4.0, now they simply return the empty selection if the selection has not been joined to data. In 3.x, [*selection*.append](https://github.com/d3/d3-selection/blob/master/README.md#selection_append) would always append the new element as the last child of its parent. A little-known trick was to use [*selection*.insert](https://github.com/d3/d3-selection/blob/master/README.md#selection_insert) without specifying a *before* selector when entering nodes, causing the entering nodes to be inserted before the following element in the update selection. In 4.0, this is now the default behavior of *selection*.append; if you do not specify a *before* selector to *selection*.insert, the inserted element is appended as the last child. This change makes the general update pattern preserve the relative order of elements and data. For example, given the following DOM: ```html
    a
    b
    f
    ``` And the following code: ```js var div = d3.select("body").selectAll("div") .data(["a", "b", "c", "d", "e", "f"], function(d) { return d || this.textContent; }); div.enter().append("div") .text(function(d) { return d; }); ``` The resulting DOM will be: ```html
    a
    b
    c
    d
    e
    f
    ``` Thus, the entering *c*, *d* and *e* are inserted before *f*, since *f* is the following element in the update selection. Although this behavior is sufficient to preserve order if the new data’s order is stable, if the data changes order, you must still use [*selection*.order](https://github.com/d3/d3-selection/blob/master/README.md#selection_order) to reorder elements. There is now only one class of selection. 3.x implemented enter selections using a special class with different behavior for *enter*.append and *enter*.select; a consequence of this design was that enter selections in 3.x lacked [certain methods](https://github.com/d3/d3/issues/2043). In 4.0, enter selections are simply normal selections; they have the same methods and the same behavior. Placeholder [enter nodes](https://github.com/d3/d3-selection/blob/master/src/selection/enter.js) now implement [*node*.appendChild](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild), [*node*.insertBefore](https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore), [*node*.querySelector](https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector), and [*node*.querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll). The [*selection*.data](https://github.com/d3/d3-selection/blob/master/README.md#selection_data) method has been changed slightly with respect to duplicate keys. In 3.x, if multiple data had the same key, the duplicate data would be ignored and not included in enter, update or exit; in 4.0 the duplicate data is always put in the enter selection. In both 3.x and 4.0, if multiple elements have the same key, the duplicate elements are put in the exit selection. Thus, 4.0’s behavior is now symmetric for enter and exit, and the general update pattern will now produce a DOM that matches the data even if there are duplicate keys. Selections have several new methods! Use [*selection*.raise](https://github.com/d3/d3-selection/blob/master/README.md#selection_raise) to move the selected elements to the front of their siblings, so that they are drawn on top; use [*selection*.lower](https://github.com/d3/d3-selection/blob/master/README.md#selection_lower) to move them to the back. Use [*selection*.dispatch](https://github.com/d3/d3-selection/blob/master/README.md#selection_dispatch) to dispatch a [custom event](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) to event listeners. When called in getter mode, [*selection*.data](https://github.com/d3/d3-selection/blob/master/README.md#selection_data) now returns the data for all elements in the selection, rather than just the data for the first group of elements. The [*selection*.call](https://github.com/d3/d3-selection/blob/master/README.md#selection_call) method no longer sets the `this` context when invoking the specified function; the *selection* is passed as the first argument to the function, so use that. The [*selection*.on](https://github.com/d3/d3-selection/blob/master/README.md#selection_on) method now accepts multiple whitespace-separated typenames, so you can add or remove multiple listeners simultaneously. For example: ```js selection.on("mousedown touchstart", function() { console.log(d3.event.type); }); ``` The arguments passed to callback functions has changed slightly in 4.0 to be more consistent. The standard arguments are the element’s datum (*d*), the element’s index (*i*), and the element’s group (*nodes*), with *this* as the element. The slight exception to this convention is *selection*.data, which is evaluated for each group rather than each element; it is passed the group’s parent datum (*d*), the group index (*i*), and the selection’s parents (*parents*), with *this* as the group’s parent. The new [d3.local](https://github.com/d3/d3-selection/blob/master/README.md#local-variables) provides a mechanism for defining [local variables](https://bl.ocks.org/mbostock/e1192fe405703d8321a5187350910e08): state that is bound to DOM elements, and available to any descendant element. This can be a convenient alternative to using [*selection*.each](https://github.com/d3/d3-selection/blob/master/README.md#selection_each) or storing local state in data. The d3.ns.prefix namespace prefix map has been renamed to [d3.namespaces](https://github.com/d3/d3-selection/blob/master/README.md#namespaces), and the d3.ns.qualify method has been renamed to [d3.namespace](https://github.com/d3/d3-selection/blob/master/README.md#namespace). Several new low-level methods are now available, as well. [d3.matcher](https://github.com/d3/d3-selection/blob/master/README.md#matcher) is used internally by [*selection*.filter](https://github.com/d3/d3-selection/blob/master/README.md#selection_filter); [d3.selector](https://github.com/d3/d3-selection/blob/master/README.md#selector) is used by [*selection*.select](https://github.com/d3/d3-selection/blob/master/README.md#selection_select); [d3.selectorAll](https://github.com/d3/d3-selection/blob/master/README.md#selectorAll) is used by [*selection*.selectAll](https://github.com/d3/d3-selection/blob/master/README.md#selection_selectAll); [d3.creator](https://github.com/d3/d3-selection/blob/master/README.md#creator) is used by [*selection*.append](https://github.com/d3/d3-selection/blob/master/README.md#selection_append) and [*selection*.insert](https://github.com/d3/d3-selection/blob/master/README.md#selection_insert). The new [d3.window](https://github.com/d3/d3-selection/blob/master/README.md#window) returns the owner window for a given element, window or document. The new [d3.customEvent](https://github.com/d3/d3-selection/blob/master/README.md#customEvent) temporarily sets [d3.event](https://github.com/d3/d3-selection/blob/master/README.md#event) while invoking a function, allowing you to implement controls which dispatch custom events; this is used by [d3-drag](https://github.com/d3/d3-drag), [d3-zoom](https://github.com/d3/d3-zoom) and [d3-brush](https://github.com/d3/d3-brush). For the sake of parsimony, the multi-value methods—where you pass an object to set multiple attributes, styles or properties simultaneously—have been extracted to [d3-selection-multi](https://github.com/d3/d3-selection-multi) and are no longer part of the default bundle. The multi-value map methods have also been renamed to plural form to reduce overload: [*selection*.attrs](https://github.com/d3/d3-selection-multi/blob/master/README.md#selection_attrs), [*selection*.styles](https://github.com/d3/d3-selection-multi/blob/master/README.md#selection_styles) and [*selection*.properties](https://github.com/d3/d3-selection-multi/blob/master/README.md#selection_properties). ## [Shapes (d3-shape)](https://github.com/d3/d3-shape/blob/master/README.md) Pursuant to the great namespace flattening: * d3.svg.line ↦ [d3.line](https://github.com/d3/d3-shape/blob/master/README.md#lines) * d3.svg.line.radial ↦ [d3.radialLine](https://github.com/d3/d3-shape/blob/master/README.md#radialLine) * d3.svg.area ↦ [d3.area](https://github.com/d3/d3-shape/blob/master/README.md#areas) * d3.svg.area.radial ↦ [d3.radialArea](https://github.com/d3/d3-shape/blob/master/README.md#radialArea) * d3.svg.arc ↦ [d3.arc](https://github.com/d3/d3-shape/blob/master/README.md#arcs) * d3.svg.symbol ↦ [d3.symbol](https://github.com/d3/d3-shape/blob/master/README.md#symbols) * d3.svg.symbolTypes ↦ [d3.symbolTypes](https://github.com/d3/d3-shape/blob/master/README.md#symbolTypes) * d3.layout.pie ↦ [d3.pie](https://github.com/d3/d3-shape/blob/master/README.md#pies) * d3.layout.stack ↦ [d3.stack](https://github.com/d3/d3-shape/blob/master/README.md#stacks) * d3.svg.diagonal ↦ REMOVED (see [d3/d3-shape#27](https://github.com/d3/d3-shape/issues/27)) * d3.svg.diagonal.radial ↦ REMOVED Shapes are no longer limited to SVG; they can now render to Canvas! Shape generators now support an optional *context*: given a [CanvasRenderingContext2D](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D), you can render a shape as a canvas path to be filled or stroked. For example, a [canvas pie chart](https://bl.ocks.org/mbostock/8878e7fd82034f1d63cf) might use an arc generator: ```js var arc = d3.arc() .outerRadius(radius - 10) .innerRadius(0) .context(context); ``` To render an arc for a given datum *d*: ```js context.beginPath(); arc(d); context.fill(); ``` See [*line*.context](https://github.com/d3/d3-shape/blob/master/README.md#line_context), [*area*.context](https://github.com/d3/d3-shape/blob/master/README.md#area_context) and [*arc*.context](https://github.com/d3/d3-shape/blob/master/README.md#arc_context) for more. Under the hood, shapes use [d3-path](#paths-d3-path) to serialize canvas path methods to SVG path data when the context is null; thus, shapes are optimized for rendering to canvas. You can also now derive lines from areas. The line shares most of the same accessors, such as [*line*.defined](https://github.com/d3/d3-shape/blob/master/README.md#line_defined) and [*line*.curve](https://github.com/d3/d3-shape/blob/master/README.md#line_curve), with the area from which it is derived. For example, to render the topline of an area, use [*area*.lineY1](https://github.com/d3/d3-shape/blob/master/README.md#area_lineY1); for the baseline, use [*area*.lineY0](https://github.com/d3/d3-shape/blob/master/README.md#area_lineY0). 4.0 introduces a new curve API for specifying how line and area shapes interpolate between data points. The *line*.interpolate and *area*.interpolate methods have been replaced with [*line*.curve](https://github.com/d3/d3-shape/blob/master/README.md#line_curve) and [*area*.curve](https://github.com/d3/d3-shape/blob/master/README.md#area_curve). Curves are implemented using the [curve interface](https://github.com/d3/d3-shape/blob/master/README.md#custom-curves) rather than as a function that returns an SVG path data string; this allows curves to render to either SVG or Canvas. In addition, *line*.curve and *area*.curve now take a function which instantiates a curve for a given *context*, rather than a string. The full list of equivalents: * linear ↦ [d3.curveLinear](https://github.com/d3/d3-shape/blob/master/README.md#curveLinear) * linear-closed ↦ [d3.curveLinearClosed](https://github.com/d3/d3-shape/blob/master/README.md#curveLinearClosed) * step ↦ [d3.curveStep](https://github.com/d3/d3-shape/blob/master/README.md#curveStep) * step-before ↦ [d3.curveStepBefore](https://github.com/d3/d3-shape/blob/master/README.md#curveStepBefore) * step-after ↦ [d3.curveStepAfter](https://github.com/d3/d3-shape/blob/master/README.md#curveStepAfter) * basis ↦ [d3.curveBasis](https://github.com/d3/d3-shape/blob/master/README.md#curveBasis) * basis-open ↦ [d3.curveBasisOpen](https://github.com/d3/d3-shape/blob/master/README.md#curveBasisOpen) * basis-closed ↦ [d3.curveBasisClosed](https://github.com/d3/d3-shape/blob/master/README.md#curveBasisClosed) * bundle ↦ [d3.curveBundle](https://github.com/d3/d3-shape/blob/master/README.md#curveBundle) * cardinal ↦ [d3.curveCardinal](https://github.com/d3/d3-shape/blob/master/README.md#curveCardinal) * cardinal-open ↦ [d3.curveCardinalOpen](https://github.com/d3/d3-shape/blob/master/README.md#curveCardinalOpen) * cardinal-closed ↦ [d3.curveCardinalClosed](https://github.com/d3/d3-shape/blob/master/README.md#curveCardinalClosed) * monotone ↦ [d3.curveMonotoneX](https://github.com/d3/d3-shape/blob/master/README.md#curveMonotoneX) But that’s not all! 4.0 now provides parameterized Catmull–Rom splines as proposed by [Yuksel *et al.*](http://www.cemyuksel.com/research/catmullrom_param/). These are available as [d3.curveCatmullRom](https://github.com/d3/d3-shape/blob/master/README.md#curveCatmullRom), [d3.curveCatmullRomClosed](https://github.com/d3/d3-shape/blob/master/README.md#curveCatmullRomClosed) and [d3.curveCatmullRomOpen](https://github.com/d3/d3-shape/blob/master/README.md#curveCatmullRomOpen). catmullRom catmullRomOpen catmullRomClosed Each curve type can define its own named parameters, replacing *line*.tension and *area*.tension. For example, Catmull–Rom splines are parameterized using [*catmullRom*.alpha](https://github.com/d3/d3-shape/blob/master/README.md#curveCatmullRom_alpha) and defaults to 0.5, which corresponds to a centripetal spline that avoids self-intersections and overshoot. For a uniform Catmull–Rom spline instead: ```js var line = d3.line() .curve(d3.curveCatmullRom.alpha(0)); ``` 4.0 fixes the interpretation of the cardinal spline *tension* parameter, which is now specified as [*cardinal*.tension](https://github.com/d3/d3-shape/blob/master/README.md#curveCardinal_tension) and defaults to zero for a uniform Catmull–Rom spline; a tension of one produces a linear curve. The first and last segments of basis and cardinal curves have also been fixed! The undocumented *interpolate*.reverse field has been removed. Curves can define different behavior for toplines and baselines by counting the sequence of [*curve*.lineStart](https://github.com/d3/d3-shape/blob/master/README.md#curve_lineStart) within [*curve*.areaStart](https://github.com/d3/d3-shape/blob/master/README.md#curve_areaStart). See the [d3.curveStep implementation](https://github.com/d3/d3-shape/blob/master/src/curve/step.js) for an example. 4.0 fixes numerous bugs in the monotone curve implementation, and introduces [d3.curveMonotoneY](https://github.com/d3/d3-shape/blob/master/README.md#curveMonotoneY); this is like d3.curveMonotoneX, except it requires that the input points are monotone in *y* rather than *x*, such as for a vertically-oriented line chart. The new [d3.curveNatural](https://github.com/d3/d3-shape/blob/master/README.md#curveNatural) produces a [natural cubic spline](http://mathworld.wolfram.com/CubicSpline.html). The default [β](https://github.com/d3/d3-shape/blob/master/README.md#bundle_beta) for [d3.curveBundle](https://github.com/d3/d3-shape/blob/master/README.md#curveBundle) is now 0.85, rather than 0.7, matching the values used by [Holten](https://www.win.tue.nl/vis1/home/dholten/papers/bundles_infovis.pdf). 4.0 also has a more robust implementation of arc padding; see [*arc*.padAngle](https://github.com/d3/d3-shape/blob/master/README.md#arc_padAngle) and [*arc*.padRadius](https://github.com/d3/d3-shape/blob/master/README.md#arc_padRadius). 4.0 introduces a new symbol type API. Symbol types are passed to [*symbol*.type](https://github.com/d3/d3-shape/blob/master/README.md#symbol_type) in place of strings. The equivalents are: * circle ↦ [d3.symbolCircle](https://github.com/d3/d3-shape/blob/master/README.md#symbolCircle) * cross ↦ [d3.symbolCross](https://github.com/d3/d3-shape/blob/master/README.md#symbolCross) * diamond ↦ [d3.symbolDiamond](https://github.com/d3/d3-shape/blob/master/README.md#symbolDiamond) * square ↦ [d3.symbolSquare](https://github.com/d3/d3-shape/blob/master/README.md#symbolSquare) * triangle-down ↦ REMOVED * triangle-up ↦ [d3.symbolTriangle](https://github.com/d3/d3-shape/blob/master/README.md#symbolTriangle) * ADDED ↦ [d3.symbolStar](https://github.com/d3/d3-shape/blob/master/README.md#symbolStar) * ADDED ↦ [d3.symbolWye](https://github.com/d3/d3-shape/blob/master/README.md#symbolWye) The full set of symbol types is now: Lastly, 4.0 overhauls the stack layout API, replacing d3.layout.stack with [d3.stack](https://github.com/d3/d3-shape/blob/master/README.md#stacks). The stack generator no longer needs an *x*-accessor. In addition, the API has been simplified: the *stack* generator now accepts tabular input, such as this array of objects: ```js var data = [ {month: new Date(2015, 0, 1), apples: 3840, bananas: 1920, cherries: 960, dates: 400}, {month: new Date(2015, 1, 1), apples: 1600, bananas: 1440, cherries: 960, dates: 400}, {month: new Date(2015, 2, 1), apples: 640, bananas: 960, cherries: 640, dates: 400}, {month: new Date(2015, 3, 1), apples: 320, bananas: 480, cherries: 640, dates: 400} ]; ``` To generate the stack layout, first define a stack generator, and then apply it to the data: ```js var stack = d3.stack() .keys(["apples", "bananas", "cherries", "dates"]) .order(d3.stackOrderNone) .offset(d3.stackOffsetNone); var series = stack(data); ``` The resulting array has one element per *series*. Each series has one point per month, and each point has a lower and upper value defining the baseline and topline: ```js [ [[ 0, 3840], [ 0, 1600], [ 0, 640], [ 0, 320]], // apples [[3840, 5760], [1600, 3040], [ 640, 1600], [ 320, 800]], // bananas [[5760, 6720], [3040, 4000], [1600, 2240], [ 800, 1440]], // cherries [[6720, 7120], [4000, 4400], [2240, 2640], [1440, 1840]], // dates ] ``` Each series in then typically passed to an [area generator](https://github.com/d3/d3-shape/blob/master/README.md#areas) to render an area chart, or used to construct rectangles for a bar chart. Stack generators no longer modify the input data, so *stack*.out has been removed. For an introduction to shapes, see [Introducing d3-shape](https://medium.com/@mbostock/introducing-d3-shape-73f8367e6d12). ## [Time Formats (d3-time-format)](https://github.com/d3/d3-time-format/blob/master/README.md) Pursuant to the great namespace flattening, the format constructors have new names: * d3.time.format ↦ [d3.timeFormat](https://github.com/d3/d3-time-format/blob/master/README.md#timeFormat) * d3.time.format.utc ↦ [d3.utcFormat](https://github.com/d3/d3-time-format/blob/master/README.md#utcFormat) * d3.time.format.iso ↦ [d3.isoFormat](https://github.com/d3/d3-time-format/blob/master/README.md#isoFormat) The *format*.parse method has also been removed in favor of separate [d3.timeParse](https://github.com/d3/d3-time-format/blob/master/README.md#timeParse), [d3.utcParse](https://github.com/d3/d3-time-format/blob/master/README.md#utcParse) and [d3.isoParse](https://github.com/d3/d3-time-format/blob/master/README.md#isoParse) parser constructors. Thus, this code in 3.x: ```js var parseTime = d3.time.format("%c").parse; ``` Can be rewritten in 4.0 as: ```js var parseTime = d3.timeParse("%c"); ``` The multi-scale time format d3.time.format.multi has been replaced by [d3.scaleTime](https://github.com/d3/d3-scale/blob/master/README.md#scaleTime)’s [tick format](https://github.com/d3/d3-scale/blob/master/README.md#time_tickFormat). Time formats now coerce inputs to dates, and time parsers coerce inputs to strings. The `%Z` directive now allows more flexible parsing of time zone offsets, such as `-0700`, `-07:00`, `-07`, and `Z`. The `%p` directive is now parsed correctly when the locale’s period name is longer than two characters (*e.g.*, “a.m.”). The default U.S. English locale now uses 12-hour time and a more concise representation of the date. This aligns with local convention and is consistent with [*date*.toLocaleString](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString) in Chrome, Firefox and Node: ```js var now = new Date; d3.timeFormat("%c")(new Date); // "6/23/2016, 2:01:33 PM" d3.timeFormat("%x")(new Date); // "6/23/2016" d3.timeFormat("%X")(new Date); // "2:01:38 PM" ``` You can now set the default locale using [d3.timeFormatDefaultLocale](https://github.com/d3/d3-time-format/blob/master/README.md#timeFormatDefaultLocale)! The locales are published as [JSON](https://github.com/d3/d3-request/blob/master/README.md#json) to [npm](https://unpkg.com/d3-time-format/locale/). The performance of time formatting and parsing has been improved, and the UTC formatter and parser have a cleaner implementation (that avoids temporarily overriding the Date global). ## [Time Intervals (d3-time)](https://github.com/d3/d3-time/blob/master/README.md) Pursuant to the great namespace flattening, the local time intervals have been renamed: * ADDED ↦ [d3.timeMillisecond](https://github.com/d3/d3-time/blob/master/README.md#timeMillisecond) * d3.time.second ↦ [d3.timeSecond](https://github.com/d3/d3-time/blob/master/README.md#timeSecond) * d3.time.minute ↦ [d3.timeMinute](https://github.com/d3/d3-time/blob/master/README.md#timeMinute) * d3.time.hour ↦ [d3.timeHour](https://github.com/d3/d3-time/blob/master/README.md#timeHour) * d3.time.day ↦ [d3.timeDay](https://github.com/d3/d3-time/blob/master/README.md#timeDay) * d3.time.sunday ↦ [d3.timeSunday](https://github.com/d3/d3-time/blob/master/README.md#timeSunday) * d3.time.monday ↦ [d3.timeMonday](https://github.com/d3/d3-time/blob/master/README.md#timeMonday) * d3.time.tuesday ↦ [d3.timeTuesday](https://github.com/d3/d3-time/blob/master/README.md#timeTuesday) * d3.time.wednesday ↦ [d3.timeWednesday](https://github.com/d3/d3-time/blob/master/README.md#timeWednesday) * d3.time.thursday ↦ [d3.timeThursday](https://github.com/d3/d3-time/blob/master/README.md#timeThursday) * d3.time.friday ↦ [d3.timeFriday](https://github.com/d3/d3-time/blob/master/README.md#timeFriday) * d3.time.saturday ↦ [d3.timeSaturday](https://github.com/d3/d3-time/blob/master/README.md#timeSaturday) * d3.time.week ↦ [d3.timeWeek](https://github.com/d3/d3-time/blob/master/README.md#timeWeek) * d3.time.month ↦ [d3.timeMonth](https://github.com/d3/d3-time/blob/master/README.md#timeMonth) * d3.time.year ↦ [d3.timeYear](https://github.com/d3/d3-time/blob/master/README.md#timeYear) The UTC time intervals have likewise been renamed: * ADDED ↦ [d3.utcMillisecond](https://github.com/d3/d3-time/blob/master/README.md#utcMillisecond) * d3.time.second.utc ↦ [d3.utcSecond](https://github.com/d3/d3-time/blob/master/README.md#utcSecond) * d3.time.minute.utc ↦ [d3.utcMinute](https://github.com/d3/d3-time/blob/master/README.md#utcMinute) * d3.time.hour.utc ↦ [d3.utcHour](https://github.com/d3/d3-time/blob/master/README.md#utcHour) * d3.time.day.utc ↦ [d3.utcDay](https://github.com/d3/d3-time/blob/master/README.md#utcDay) * d3.time.sunday.utc ↦ [d3.utcSunday](https://github.com/d3/d3-time/blob/master/README.md#utcSunday) * d3.time.monday.utc ↦ [d3.utcMonday](https://github.com/d3/d3-time/blob/master/README.md#utcMonday) * d3.time.tuesday.utc ↦ [d3.utcTuesday](https://github.com/d3/d3-time/blob/master/README.md#utcTuesday) * d3.time.wednesday.utc ↦ [d3.utcWednesday](https://github.com/d3/d3-time/blob/master/README.md#utcWednesday) * d3.time.thursday.utc ↦ [d3.utcThursday](https://github.com/d3/d3-time/blob/master/README.md#utcThursday) * d3.time.friday.utc ↦ [d3.utcFriday](https://github.com/d3/d3-time/blob/master/README.md#utcFriday) * d3.time.saturday.utc ↦ [d3.utcSaturday](https://github.com/d3/d3-time/blob/master/README.md#utcSaturday) * d3.time.week.utc ↦ [d3.utcWeek](https://github.com/d3/d3-time/blob/master/README.md#utcWeek) * d3.time.month.utc ↦ [d3.utcMonth](https://github.com/d3/d3-time/blob/master/README.md#utcMonth) * d3.time.year.utc ↦ [d3.utcYear](https://github.com/d3/d3-time/blob/master/README.md#utcYear) The local time range aliases have been renamed: * d3.time.seconds ↦ [d3.timeSeconds](https://github.com/d3/d3-time/blob/master/README.md#timeSeconds) * d3.time.minutes ↦ [d3.timeMinutes](https://github.com/d3/d3-time/blob/master/README.md#timeMinutes) * d3.time.hours ↦ [d3.timeHours](https://github.com/d3/d3-time/blob/master/README.md#timeHours) * d3.time.days ↦ [d3.timeDays](https://github.com/d3/d3-time/blob/master/README.md#timeDays) * d3.time.sundays ↦ [d3.timeSundays](https://github.com/d3/d3-time/blob/master/README.md#timeSundays) * d3.time.mondays ↦ [d3.timeMondays](https://github.com/d3/d3-time/blob/master/README.md#timeMondays) * d3.time.tuesdays ↦ [d3.timeTuesdays](https://github.com/d3/d3-time/blob/master/README.md#timeTuesdays) * d3.time.wednesdays ↦ [d3.timeWednesdays](https://github.com/d3/d3-time/blob/master/README.md#timeWednesdays) * d3.time.thursdays ↦ [d3.timeThursdays](https://github.com/d3/d3-time/blob/master/README.md#timeThursdays) * d3.time.fridays ↦ [d3.timeFridays](https://github.com/d3/d3-time/blob/master/README.md#timeFridays) * d3.time.saturdays ↦ [d3.timeSaturdays](https://github.com/d3/d3-time/blob/master/README.md#timeSaturdays) * d3.time.weeks ↦ [d3.timeWeeks](https://github.com/d3/d3-time/blob/master/README.md#timeWeeks) * d3.time.months ↦ [d3.timeMonths](https://github.com/d3/d3-time/blob/master/README.md#timeMonths) * d3.time.years ↦ [d3.timeYears](https://github.com/d3/d3-time/blob/master/README.md#timeYears) The UTC time range aliases have been renamed: * d3.time.seconds.utc ↦ [d3.utcSeconds](https://github.com/d3/d3-time/blob/master/README.md#utcSeconds) * d3.time.minutes.utc ↦ [d3.utcMinutes](https://github.com/d3/d3-time/blob/master/README.md#utcMinutes) * d3.time.hours.utc ↦ [d3.utcHours](https://github.com/d3/d3-time/blob/master/README.md#utcHours) * d3.time.days.utc ↦ [d3.utcDays](https://github.com/d3/d3-time/blob/master/README.md#utcDays) * d3.time.sundays.utc ↦ [d3.utcSundays](https://github.com/d3/d3-time/blob/master/README.md#utcSundays) * d3.time.mondays.utc ↦ [d3.utcMondays](https://github.com/d3/d3-time/blob/master/README.md#utcMondays) * d3.time.tuesdays.utc ↦ [d3.utcTuesdays](https://github.com/d3/d3-time/blob/master/README.md#utcTuesdays) * d3.time.wednesdays.utc ↦ [d3.utcWednesdays](https://github.com/d3/d3-time/blob/master/README.md#utcWednesdays) * d3.time.thursdays.utc ↦ [d3.utcThursdays](https://github.com/d3/d3-time/blob/master/README.md#utcThursdays) * d3.time.fridays.utc ↦ [d3.utcFridays](https://github.com/d3/d3-time/blob/master/README.md#utcFridays) * d3.time.saturdays.utc ↦ [d3.utcSaturdays](https://github.com/d3/d3-time/blob/master/README.md#utcSaturdays) * d3.time.weeks.utc ↦ [d3.utcWeeks](https://github.com/d3/d3-time/blob/master/README.md#utcWeeks) * d3.time.months.utc ↦ [d3.utcMonths](https://github.com/d3/d3-time/blob/master/README.md#utcMonths) * d3.time.years.utc ↦ [d3.utcYears](https://github.com/d3/d3-time/blob/master/README.md#utcYears) The behavior of [*interval*.range](https://github.com/d3/d3-time/blob/master/README.md#interval_range) (and the convenience aliases such as [d3.timeDays](https://github.com/d3/d3-time/blob/master/README.md#timeDays)) has been changed when *step* is greater than one. Rather than filtering the returned dates using the field number, *interval*.range now behaves like [d3.range](https://github.com/d3/d3-array/blob/master/README.md#range): it simply skips, returning every *step*th date. For example, the following code in 3.x returns only odd days of the month: ```js d3.time.days(new Date(2016, 4, 28), new Date(2016, 5, 5), 2); // [Sun May 29 2016 00:00:00 GMT-0700 (PDT), // Tue May 31 2016 00:00:00 GMT-0700 (PDT), // Wed Jun 01 2016 00:00:00 GMT-0700 (PDT), // Fri Jun 03 2016 00:00:00 GMT-0700 (PDT)] ``` Note the returned array of dates does not start on the *start* date because May 28 is even. Also note that May 31 and June 1 are one day apart, not two! The behavior of d3.timeDays in 4.0 is probably closer to what you expect: ```js d3.timeDays(new Date(2016, 4, 28), new Date(2016, 5, 5), 2); // [Sat May 28 2016 00:00:00 GMT-0700 (PDT), // Mon May 30 2016 00:00:00 GMT-0700 (PDT), // Wed Jun 01 2016 00:00:00 GMT-0700 (PDT), // Fri Jun 03 2016 00:00:00 GMT-0700 (PDT)] ``` If you want a filtered view of a time interval (say to guarantee that two overlapping ranges are consistent, such as when generating [time scale ticks](https://github.com/d3/d3-scale/blob/master/README.md#time_ticks)), you can use the new [*interval*.every](https://github.com/d3/d3-time/blob/master/README.md#interval_every) method or its more general cousin [*interval*.filter](https://github.com/d3/d3-time/blob/master/README.md#interval_filter): ```js d3.timeDay.every(2).range(new Date(2016, 4, 28), new Date(2016, 5, 5)); // [Sun May 29 2016 00:00:00 GMT-0700 (PDT), // Tue May 31 2016 00:00:00 GMT-0700 (PDT), // Wed Jun 01 2016 00:00:00 GMT-0700 (PDT), // Fri Jun 03 2016 00:00:00 GMT-0700 (PDT)] ``` Time intervals now expose an [*interval*.count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) method for counting the number of interval boundaries after a *start* date and before or equal to an *end* date. This replaces d3.time.dayOfYear and related methods in 3.x. For example, this code in 3.x: ```js var now = new Date; d3.time.dayOfYear(now); // 165 ``` Can be rewritten in 4.0 as: ```js var now = new Date; d3.timeDay.count(d3.timeYear(now), now); // 165 ``` Likewise, in place of 3.x’s d3.time.weekOfYear, in 4.0 you would say: ```js d3.timeWeek.count(d3.timeYear(now), now); // 24 ``` The new *interval*.count is of course more general. For example, you can use it to compute hour-of-week for a heatmap: ```js d3.timeHour.count(d3.timeWeek(now), now); // 64 ``` Here are all the equivalences from 3.x to 4.0: * d3.time.dayOfYear ↦ [d3.timeDay](https://github.com/d3/d3-time/blob/master/README.md#timeDay).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.sundayOfYear ↦ [d3.timeSunday](https://github.com/d3/d3-time/blob/master/README.md#timeSunday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.mondayOfYear ↦ [d3.timeMonday](https://github.com/d3/d3-time/blob/master/README.md#timeMonday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.tuesdayOfYear ↦ [d3.timeTuesday](https://github.com/d3/d3-time/blob/master/README.md#timeTuesday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.wednesdayOfYear ↦ [d3.timeWednesday](https://github.com/d3/d3-time/blob/master/README.md#timeWednesday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.thursdayOfYear ↦ [d3.timeThursday](https://github.com/d3/d3-time/blob/master/README.md#timeThursday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.fridayOfYear ↦ [d3.timeFriday](https://github.com/d3/d3-time/blob/master/README.md#timeFriday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.saturdayOfYear ↦ [d3.timeSaturday](https://github.com/d3/d3-time/blob/master/README.md#timeSaturday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.weekOfYear ↦ [d3.timeWeek](https://github.com/d3/d3-time/blob/master/README.md#timeWeek).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.dayOfYear.utc ↦ [d3.utcDay](https://github.com/d3/d3-time/blob/master/README.md#utcDay).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.sundayOfYear.utc ↦ [d3.utcSunday](https://github.com/d3/d3-time/blob/master/README.md#utcSunday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.mondayOfYear.utc ↦ [d3.utcMonday](https://github.com/d3/d3-time/blob/master/README.md#utcMonday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.tuesdayOfYear.utc ↦ [d3.utcTuesday](https://github.com/d3/d3-time/blob/master/README.md#utcTuesday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.wednesdayOfYear.utc ↦ [d3.utcWednesday](https://github.com/d3/d3-time/blob/master/README.md#utcWednesday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.thursdayOfYear.utc ↦ [d3.utcThursday](https://github.com/d3/d3-time/blob/master/README.md#utcThursday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.fridayOfYear.utc ↦ [d3.utcFriday](https://github.com/d3/d3-time/blob/master/README.md#utcFriday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.saturdayOfYear.utc ↦ [d3.utcSaturday](https://github.com/d3/d3-time/blob/master/README.md#utcSaturday).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) * d3.time.weekOfYear.utc ↦ [d3.utcWeek](https://github.com/d3/d3-time/blob/master/README.md#utcWeek).[count](https://github.com/d3/d3-time/blob/master/README.md#interval_count) D3 4.0 now also lets you define custom time intervals using [d3.timeInterval](https://github.com/d3/d3-time/blob/master/README.md#timeInterval). The [d3.timeYear](https://github.com/d3/d3-time/blob/master/README.md#timeYear), [d3.utcYear](https://github.com/d3/d3-time/blob/master/README.md#utcYear), [d3.timeMillisecond](https://github.com/d3/d3-time/blob/master/README.md#timeMillisecond) and [d3.utcMillisecond](https://github.com/d3/d3-time/blob/master/README.md#utcMillisecond) intervals have optimized implementations of [*interval*.every](https://github.com/d3/d3-time/blob/master/README.md#interval_every), which is necessary to generate time ticks for very large or very small domains efficiently. More generally, the performance of time intervals has been improved, and time intervals now do a better job with respect to daylight savings in various locales. ## [Timers (d3-timer)](https://github.com/d3/d3-timer/blob/master/README.md) In D3 3.x, the only way to stop a timer was for its callback to return true. For example, this timer stops after one second: ```js d3.timer(function(elapsed) { console.log(elapsed); return elapsed >= 1000; }); ``` In 4.0, use [*timer*.stop](https://github.com/d3/d3-timer/blob/master/README.md#timer_stop) instead: ```js var t = d3.timer(function(elapsed) { console.log(elapsed); if (elapsed >= 1000) { t.stop(); } }); ``` The primary benefit of *timer*.stop is that timers are not required to self-terminate: they can be stopped externally, allowing for the immediate and synchronous disposal of associated resources, and the separation of concerns. The above is equivalent to: ```js var t = d3.timer(function(elapsed) { console.log(elapsed); }); d3.timeout(function() { t.stop(); }, 1000); ``` This improvement extends to [d3-transition](#transitions-d3-transition): now when a transition is interrupted, its resources are immediately freed rather than having to wait for transition to start. 4.0 also introduces a new [*timer*.restart](https://github.com/d3/d3-timer/blob/master/README.md#timer_restart) method for restarting timers, for replacing the callback of a running timer, or for changing its delay or reference time. Unlike *timer*.stop followed by [d3.timer](https://github.com/d3/d3-timer/blob/master/README.md#timer), *timer*.restart maintains the invocation priority of an existing timer: it guarantees that the order of invocation of active timers remains the same. The d3.timer.flush method has been renamed to [d3.timerFlush](https://github.com/d3/d3-timer/blob/master/README.md#timerFlush). Some usage patterns in D3 3.x could cause the browser to hang when a background page returned to the foreground. For example, the following code schedules a transition every second: ```js setInterval(function() { d3.selectAll("div").transition().call(someAnimation); // BAD }, 1000); ``` If such code runs in the background for hours, thousands of queued transitions will try to run simultaneously when the page is foregrounded. D3 4.0 avoids this hang by freezing time in the background: when a page is in the background, time does not advance, and so no queue of timers accumulates to run when the page returns to the foreground. Use d3.timer instead of transitions to schedule a long-running animation, or use [d3.timeout](https://github.com/d3/d3-timer/blob/master/README.md#timeout) and [d3.interval](https://github.com/d3/d3-timer/blob/master/README.md#interval) in place of setTimeout and setInterval to prevent transitions from being queued in the background: ```js d3.interval(function() { d3.selectAll("div").transition().call(someAnimation); // GOOD }, 1000); ``` By freezing time in the background, timers are effectively “unaware” of being backgrounded. It’s like nothing happened! 4.0 also now uses high-precision time ([performance.now](https://developer.mozilla.org/en-US/docs/Web/API/Performance/now)) where available; the current time is available as [d3.now](https://github.com/d3/d3-timer/blob/master/README.md#now). ## [Transitions (d3-transition)](https://github.com/d3/d3-transition/blob/master/README.md) The [*selection*.transition](https://github.com/d3/d3-transition/blob/master/README.md#selection_transition) method now takes an optional *transition* instance which can be used to synchronize a new transition with an existing transition. (This change is discussed further in [What Makes Software Good?](https://medium.com/@mbostock/what-makes-software-good-943557f8a488)) For example: ```js var t = d3.transition() .duration(750) .ease(d3.easeLinear); d3.selectAll(".apple").transition(t) .style("fill", "red"); d3.selectAll(".orange").transition(t) .style("fill", "orange"); ``` Transitions created this way inherit timing from the closest ancestor element, and thus are synchronized even when the referenced *transition* has variable timing such as a staggered delay. This method replaces the deeply magical behavior of *transition*.each in 3.x; in 4.0, [*transition*.each](https://github.com/d3/d3-transition/blob/master/README.md#transition_each) is identical to [*selection*.each](https://github.com/d3/d3-selection/blob/master/README.md#selection_each). Use the new [*transition*.on](https://github.com/d3/d3-transition/blob/master/README.md#transition_on) method to listen to transition events. The meaning of [*transition*.delay](https://github.com/d3/d3-transition/blob/master/README.md#transition_delay) has changed for chained transitions created by [*transition*.transition](https://github.com/d3/d3-transition/blob/master/README.md#transition_transition). The specified delay is now relative to the *previous* transition in the chain, rather than the *first* transition in the chain; this makes it easier to insert interstitial pauses. For example: ```js d3.selectAll(".apple") .transition() // First fade to green. .style("fill", "green") .transition() // Then red. .style("fill", "red") .transition() // Wait one second. Then brown, and remove. .delay(1000) .style("fill", "brown") .remove(); ``` Time is now frozen in the background; see [d3-timer](#timers-d3-timer) for more information. While it was previously the case that transitions did not run in the background, now they pick up where they left off when the page returns to the foreground. This avoids page hangs by not scheduling an unbounded number of transitions in the background. If you want to schedule an infinitely-repeating transition, use transition events, or use [d3.timeout](https://github.com/d3/d3-timer/blob/master/README.md#timeout) and [d3.interval](https://github.com/d3/d3-timer/blob/master/README.md#interval) in place of [setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout) and [setInterval](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval). The [*selection*.interrupt](https://github.com/d3/d3-transition/blob/master/README.md#selection_interrupt) method now cancels all scheduled transitions on the selected elements, in addition to interrupting any active transition. When transitions are interrupted, any resources associated with the transition are now released immediately, rather than waiting until the transition starts, improving performance. (See also [*timer*.stop](https://github.com/d3/d3-timer/blob/master/README.md#timer_stop).) The new [d3.interrupt](https://github.com/d3/d3-transition/blob/master/README.md#interrupt) method is an alternative to [*selection*.interrupt](https://github.com/d3/d3-transition/blob/master/README.md#selection_interrupt) for quickly interrupting a single node. The new [d3.active](https://github.com/d3/d3-transition/blob/master/README.md#active) method allows you to select the currently-active transition on a given *node*, if any. This is useful for modifying in-progress transitions and for scheduling infinitely-repeating transitions. For example, this transition continuously oscillates between red and blue: ```js d3.select("circle") .transition() .on("start", function repeat() { d3.active(this) .style("fill", "red") .transition() .style("fill", "blue") .transition() .on("start", repeat); }); ``` The [life cycle of a transition](https://github.com/d3/d3-transition/blob/master/README.md#the-life-of-a-transition) is now more formally defined and enforced. For example, attempting to change the duration of a running transition now throws an error rather than silently failing. The [*transition*.remove](https://github.com/d3/d3-transition/blob/master/README.md#transition_remove) method has been fixed if multiple transition names are in use: the element is only removed if it has no scheduled transitions, regardless of name. The [*transition*.ease](https://github.com/d3/d3-transition/blob/master/README.md#transition_ease) method now always takes an [easing function](#easings-d3-ease), not a string. When a transition ends, the tweens are invoked one last time with *t* equal to exactly 1, regardless of the associated easing function. As with [selections](#selections-d3-selection) in 4.0, all transition callback functions now receive the standard arguments: the element’s datum (*d*), the element’s index (*i*), and the element’s group (*nodes*), with *this* as the element. This notably affects [*transition*.attrTween](https://github.com/d3/d3-transition/blob/master/README.md#transition_attrTween) and [*transition*.styleTween](https://github.com/d3/d3-transition/blob/master/README.md#transition_styleTween), which no longer pass the *tween* function the current attribute or style value as the third argument. The *transition*.attrTween and *transition*.styleTween methods can now be called in getter modes for debugging or to share tween definitions between transitions. Homogenous transitions are now optimized! If all elements in a transition share the same tween, interpolator, or event listeners, this state is now shared across the transition rather than separately allocated for each element. 4.0 also uses an optimized default interpolator in place of [d3.interpolate](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolate) for [*transition*.attr](https://github.com/d3/d3-transition/blob/master/README.md#transition_attr) and [*transition*.style](https://github.com/d3/d3-transition/blob/master/README.md#transition_style). And transitions can now interpolate both [CSS](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateTransformCss) and [SVG](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateTransformSvg) transforms. For reusable components that support transitions, such as [axes](#axes-d3-axis), a new [*transition*.selection](https://github.com/d3/d3-transition/blob/master/README.md#transition_selection) method returns the [selection](#selections-d3-selection) that corresponds to a given transition. There is also a new [*transition*.merge](https://github.com/d3/d3-transition/blob/master/README.md#transition_merge) method that is equivalent to [*selection*.merge](https://github.com/d3/d3-selection/blob/master/README.md#selection_merge). For the sake of parsimony, the multi-value map methods have been extracted to [d3-selection-multi](https://github.com/d3/d3-selection-multi) and are no longer part of the default bundle. The multi-value map methods have also been renamed to plural form to reduce overload: [*transition*.attrs](https://github.com/d3/d3-selection-multi/blob/master/README.md#transition_attrs) and [*transition*.styles](https://github.com/d3/d3-selection-multi/blob/master/README.md#transition_styles). ## [Voronoi Diagrams (d3-voronoi)](https://github.com/d3/d3-voronoi/blob/master/README.md) The d3.geom.voronoi method has been renamed to [d3.voronoi](https://github.com/d3/d3-voronoi/blob/master/README.md#voronoi), and the *voronoi*.clipExtent method has been renamed to [*voronoi*.extent](https://github.com/d3/d3-voronoi/blob/master/README.md#voronoi_extent). The undocumented *polygon*.point property in 3.x, which is the element in the input *data* corresponding to the polygon, has been renamed to *polygon*.data. Calling [*voronoi*](https://github.com/d3/d3-voronoi/blob/master/README.md#_voronoi) now returns the full [Voronoi diagram](https://github.com/d3/d3-voronoi/blob/master/README.md#voronoi-diagrams), which includes topological information: each Voronoi edge exposes *edge*.left and *edge*.right specifying the sites on either side of the edge, and each Voronoi cell is defined as an array of these edges and a corresponding site. The Voronoi diagram can be used to efficiently compute both the Voronoi and Delaunay tessellations for a set of points: [*diagram*.polygons](https://github.com/d3/d3-voronoi/blob/master/README.md#diagram_polygons), [*diagram*.links](https://github.com/d3/d3-voronoi/blob/master/README.md#diagram_links), and [*diagram*.triangles](https://github.com/d3/d3-voronoi/blob/master/README.md#diagram_triangles). The new topology is also useful in conjunction with TopoJSON; see the [Voronoi topology example](https://bl.ocks.org/mbostock/cd52a201d7694eb9d890). The [*voronoi*.polygons](https://github.com/d3/d3-voronoi/blob/master/README.md#voronoi_polygons) and [*diagram*.polygons](https://github.com/d3/d3-voronoi/blob/master/README.md#diagram_polygons) now require an [extent](https://github.com/d3/d3-voronoi/blob/master/README.md#voronoi_extent); there is no longer an implicit extent of ±1e6. The [*voronoi*.links](https://github.com/d3/d3-voronoi/blob/master/README.md#voronoi_links), [*voronoi*.triangles](https://github.com/d3/d3-voronoi/blob/master/README.md#voronoi_triangles), [*diagram*.links](https://github.com/d3/d3-voronoi/blob/master/README.md#diagram_links) and [*diagram*.triangles](https://github.com/d3/d3-voronoi/blob/master/README.md#diagram_triangles) are now affected by the clip extent: as the Delaunay is computed as the dual of the Voronoi, two sites are only linked if the clipped cells are touching. To compute the Delaunay triangulation without respect to clipping, set the extent to null. The Voronoi generator finally has well-defined behavior for coincident vertices: the first of a set of coincident points has a defined cell, while the subsequent duplicate points have null cells. The returned array of polygons is sparse, so by using *array*.forEach or *array*.map, you can easily skip undefined cells. The Voronoi generator also now correctly handles the case where no cell edges intersect the extent. ## [Zooming (d3-zoom)](https://github.com/d3/d3-zoom/blob/master/README.md) The zoom behavior d3.behavior.zoom has been renamed to d3.zoom. Zoom behaviors no longer store the active zoom transform (*i.e.*, the visible region; the scale and translate) internally. The zoom transform is now stored on any elements to which the zoom behavior has been applied. The zoom transform is available as *event*.transform within a zoom event or by calling [d3.zoomTransform](https://github.com/d3/d3-zoom/blob/master/README.md#zoomTransform) on a given *element*. To zoom programmatically, use [*zoom*.transform](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_transform) with a given [selection](#selections-d3-selection) or [transition](#transitions-d3-transition); see the [zoom transitions example](https://bl.ocks.org/mbostock/b783fbb2e673561d214e09c7fb5cedee). The *zoom*.event method has been removed. To make programmatic zooming easier, there are several new convenience methods on top of *zoom*.transform: [*zoom*.translateBy](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_translateBy), [*zoom*.scaleBy](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_scaleBy) and [*zoom*.scaleTo](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_scaleTo). There is also a new API for describing [zoom transforms](https://github.com/d3/d3-zoom/blob/master/README.md#zoom-transforms). Zoom behaviors are no longer dependent on [scales](#scales-d3-scale), but you can use [*transform*.rescaleX](https://github.com/d3/d3-zoom/blob/master/README.md#transform_rescaleX), [*transform*.rescaleY](https://github.com/d3/d3-zoom/blob/master/README.md#transform_rescaleY), [*transform*.invertX](https://github.com/d3/d3-zoom/blob/master/README.md#transform_invertX) or [*transform*.invertY](https://github.com/d3/d3-zoom/blob/master/README.md#transform_invertY) to transform a scale’s domain. 3.x’s *event*.scale is replaced with *event*.transform.k, and *event*.translate is replaced with *event*.transform.x and *event*.transform.y. The *zoom*.center method has been removed in favor of programmatic zooming. The zoom behavior finally supports simple constraints on panning! The new [*zoom*.translateExtent](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_translateExtent) lets you define the viewable extent of the world: the currently-visible extent (the extent of the viewport, as defined by [*zoom*.extent](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_extent)) is always contained within the translate extent. The *zoom*.size method has been replaced by *zoom*.extent, and the default behavior is now smarter: it defaults to the extent of the zoom behavior’s owner element, rather than being hardcoded to 960×500. (This also improves the default path chosen during smooth zoom transitions!) The zoom behavior’s interaction has also improved. It now correctly handles concurrent wheeling and dragging, as well as concurrent touching and mousing. The zoom behavior now ignores wheel events at the limits of its scale extent, allowing you to scroll past a zoomable area. The *zoomstart* and *zoomend* events have been renamed *start* and *end*. By default, zoom behaviors now ignore right-clicks intended for the context menu; use [*zoom*.filter](https://github.com/d3/d3-zoom/blob/master/README.md#zoom_filter) to control which events are ignored. The zoom behavior also ignores emulated mouse events on iOS. The zoom behavior now consumes handled events, making it easier to combine with other interactive behaviors such as [dragging](#dragging-d3-drag). ================================================ FILE: inst/www/d3/v7/LICENSE ================================================ Copyright 2010-2023 Mike Bostock Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies. THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. ================================================ FILE: inst/www/d3/v7/README.md ================================================ # D3: Data-Driven Documents **D3** (or **D3.js**) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, Canvas and HTML. D3 combines powerful visualization and interaction techniques with a data-driven approach to DOM manipulation, giving you the full capabilities of modern browsers and the freedom to design the right visual interface for your data. ## Resources * [Introduction](https://observablehq.com/@d3/learn-d3) * [API Reference](https://github.com/d3/d3/blob/main/API.md) * [Releases](https://github.com/d3/d3/releases) * [Examples](https://observablehq.com/@d3/gallery) * [Wiki](https://github.com/d3/d3/wiki) ## Installing If you use npm, `npm install d3`. You can also download the [latest release on GitHub](https://github.com/d3/d3/releases/latest). For vanilla HTML in modern browsers, import D3 from jsDelivr: ```html ``` For legacy environments, you can load D3’s UMD bundle from an npm-based CDN such as jsDelivr; a `d3` global is exported: ```html ``` You can also use the standalone D3 microlibraries. For example, [d3-selection](https://github.com/d3/d3-selection): ```html ``` D3 is written using [ES2015 modules](http://www.2ality.com/2014/09/es6-modules-final.html). Create a custom bundle using Rollup, Webpack, or your preferred bundler. To import D3 into an ES2015 application, either import specific symbols from specific D3 modules: ```js import {scaleLinear} from "d3-scale"; ``` Or import everything into a namespace (here, `d3`): ```js import * as d3 from "d3"; ``` Or using dynamic import: ```js const d3 = await import("d3"); ``` You can also import individual modules and combine them into a `d3` object using [Object.assign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign): ```js const d3 = await Promise.all([ import("d3-format"), import("d3-geo"), import("d3-geo-projection") ]).then(d3 => Object.assign({}, ...d3)); ``` ================================================ FILE: man/change_to_name.Rd ================================================ % Generated by roxygen2: do not edit by hand % Please edit documentation in R/hierarchy.R \name{change_to_name} \alias{change_to_name} \title{Change Column Name in Children to "name"} \usage{ change_to_name(x, column = 1) } \arguments{ \item{x}{\code{data.frame} or \code{data.frame} derivative, such as \code{tibble}} \item{column}{column to convert} } \value{ \code{data.frame} } \description{ Change Column Name in Children to "name" } ================================================ FILE: man/d3_dep_jetpack.Rd ================================================ % Generated by roxygen2: do not edit by hand % Please edit documentation in R/dependencies.R \name{d3_dep_jetpack} \alias{d3_dep_jetpack} \title{'d3.js' Dependency for Version 4 Jetpack} \usage{ d3_dep_jetpack(offline = TRUE) } \arguments{ \item{offline}{\code{logical} to specify whether to use a local copy of d3.js (\code{TRUE}) or use cdn (\code{FALSE})} } \value{ \code{htmltools::htmlDependency} } \description{ d3-jetpack is a set of nifty convenience wrappers that speed up your daily work with d3.js. Must be included after \code{d3_dep_v4()}. Learn more by reading \href{https://github.com/gka/d3-jetpack}{d3-jetpack} or by watching this \href{https://www.youtube.com/watch?v=_5ky0AYq_Dg&t=4s}{YouTube}. } \examples{ \dontrun{ library(d3r) library(htmltools) tl <- tagList(tags$script(HTML(sprintf( " var x = 5; var svg = d3.select('body') .append('svg'); svg.append('rect') .at({ x: 100, y: 100, width: 100, height: 100 }) .st({ fill: 'blue', stroke: 'purple' }); " ))), d3_dep_v4(), d3_dep_jetpack()) browsable(tl) tl <- tagList(tags$script(HTML(sprintf( " var svg = d3.select('body') .append('svg'); test_data = [{x: 250, y: 250}, {x: 300, y: 300}, {x: 300, y: 100}]; svg.appendMany(test_data, 'circle') .at({ cx: function(d){return d.x}, cy: function(d){return d.y}, r: 50 }) .st({ fill: 'purple', stroke: 'blue' }); " ))), d3_dep_v4(), d3_dep_jetpack()) browsable(tl) } } \seealso{ Other 'd3' dependency functions: \code{\link{d3_dep_v3}()}, \code{\link{d3_dep_v4}()}, \code{\link{d3_dep_v5}()}, \code{\link{d3_dep_v6}()}, \code{\link{d3_dep_v7}()} } \concept{'d3' dependency functions} ================================================ FILE: man/d3_dep_v3.Rd ================================================ % Generated by roxygen2: do not edit by hand % Please edit documentation in R/dependencies.R \name{d3_dep_v3} \alias{d3_dep_v3} \title{'d3.js' Dependency for Version 3} \usage{ d3_dep_v3(offline = TRUE) } \arguments{ \item{offline}{\code{logical} to specify whether to use a local copy of d3.js (\code{TRUE}) or use cdn (\code{FALSE})} } \value{ \code{htmltools::htmlDependency} } \description{ 'd3.js' Dependency for Version 3 } \examples{ library(d3r) library(htmltools) tagList(d3_dep_v3()) } \seealso{ \code{\link{d3_dep_v7}}, \code{\link{d3_dep_v6}}, \code{\link{d3_dep_v5}}, \code{\link{d3_dep_v4}}, and \code{\link{d3_dep_jetpack}}. Other 'd3' dependency functions: \code{\link{d3_dep_jetpack}()}, \code{\link{d3_dep_v4}()}, \code{\link{d3_dep_v5}()}, \code{\link{d3_dep_v6}()}, \code{\link{d3_dep_v7}()} } \concept{'d3' dependency functions} ================================================ FILE: man/d3_dep_v4.Rd ================================================ % Generated by roxygen2: do not edit by hand % Please edit documentation in R/dependencies.R \name{d3_dep_v4} \alias{d3_dep_v4} \title{'d3.js' Dependency for Version 4} \usage{ d3_dep_v4(offline = TRUE) } \arguments{ \item{offline}{\code{logical} to specify whether to use a local copy of d3.js (\code{TRUE}) or use cdn (\code{FALSE})} } \value{ \code{htmltools::htmlDependency} } \description{ 'd3.js' Dependency for Version 4 } \examples{ library(d3r) library(htmltools) tagList(d3_dep_v4()) } \seealso{ \code{\link{d3_dep_v7}}, \code{\link{d3_dep_v6}}, \code{\link{d3_dep_v5}}, \code{\link{d3_dep_v3}}, and \code{\link{d3_dep_jetpack}}. Other 'd3' dependency functions: \code{\link{d3_dep_jetpack}()}, \code{\link{d3_dep_v3}()}, \code{\link{d3_dep_v5}()}, \code{\link{d3_dep_v6}()}, \code{\link{d3_dep_v7}()} } \concept{'d3' dependency functions} ================================================ FILE: man/d3_dep_v5.Rd ================================================ % Generated by roxygen2: do not edit by hand % Please edit documentation in R/dependencies.R \name{d3_dep_v5} \alias{d3_dep_v5} \title{'d3.js' Dependency for Version 5} \usage{ d3_dep_v5(offline = TRUE) } \arguments{ \item{offline}{\code{logical} to specify whether to use a local copy of d3.js (\code{TRUE}) or use cdn (\code{FALSE})} } \value{ \code{htmltools::htmlDependency} } \description{ 'd3.js' Dependency for Version 5 } \examples{ library(d3r) library(htmltools) tagList(d3_dep_v5()) } \seealso{ \code{\link{d3_dep_v7}}, \code{\link{d3_dep_v6}}, \code{\link{d3_dep_v4}}, \code{\link{d3_dep_v3}}, and \code{\link{d3_dep_jetpack}}. Other 'd3' dependency functions: \code{\link{d3_dep_jetpack}()}, \code{\link{d3_dep_v3}()}, \code{\link{d3_dep_v4}()}, \code{\link{d3_dep_v6}()}, \code{\link{d3_dep_v7}()} } \concept{'d3' dependency functions} ================================================ FILE: man/d3_dep_v6.Rd ================================================ % Generated by roxygen2: do not edit by hand % Please edit documentation in R/dependencies.R \name{d3_dep_v6} \alias{d3_dep_v6} \title{'d3.js' Dependency for Version 6} \usage{ d3_dep_v6(offline = TRUE) } \arguments{ \item{offline}{\code{logical} to specify whether to use a local copy of d3.js (\code{TRUE}) or use cdn (\code{FALSE})} } \value{ \code{htmltools::htmlDependency} } \description{ 'd3.js' Dependency for Version 6 } \examples{ library(d3r) library(htmltools) tagList(d3_dep_v6()) } \seealso{ \code{\link{d3_dep_v7}}, \code{\link{d3_dep_v5}}, \code{\link{d3_dep_v4}}, \code{\link{d3_dep_v3}}, and \code{\link{d3_dep_jetpack}}. Other 'd3' dependency functions: \code{\link{d3_dep_jetpack}()}, \code{\link{d3_dep_v3}()}, \code{\link{d3_dep_v4}()}, \code{\link{d3_dep_v5}()}, \code{\link{d3_dep_v7}()} } \concept{'d3' dependency functions} ================================================ FILE: man/d3_dep_v7.Rd ================================================ % Generated by roxygen2: do not edit by hand % Please edit documentation in R/dependencies.R \name{d3_dep_v7} \alias{d3_dep_v7} \title{'d3.js' Dependency for Version 7} \usage{ d3_dep_v7(offline = TRUE) } \arguments{ \item{offline}{\code{logical} to specify whether to use a local copy of d3.js (\code{TRUE}) or use cdn (\code{FALSE})} } \value{ \code{htmltools::htmlDependency} } \description{ 'd3.js' Dependency for Version 7 } \examples{ library(d3r) library(htmltools) tagList(d3_dep_v7()) } \seealso{ \code{\link{d3_dep_v6}}, \code{\link{d3_dep_v5}}, \code{\link{d3_dep_v4}}, \code{\link{d3_dep_v3}}, and \code{\link{d3_dep_jetpack}}. Other 'd3' dependency functions: \code{\link{d3_dep_jetpack}()}, \code{\link{d3_dep_v3}()}, \code{\link{d3_dep_v4}()}, \code{\link{d3_dep_v5}()}, \code{\link{d3_dep_v6}()} } \concept{'d3' dependency functions} ================================================ FILE: man/d3_igraph.Rd ================================================ % Generated by roxygen2: do not edit by hand % Please edit documentation in R/igraph.R \name{d3_igraph} \alias{d3_igraph} \title{Convert 'igraph' to 'd3.js'} \usage{ d3_igraph(igrf = NULL, json = TRUE) } \arguments{ \item{igrf}{\code{igraph}} \item{json}{\code{logical} to return as \code{JSON}} } \value{ \code{list} } \description{ Convert 'igraph' to 'd3.js' } \examples{ \dontrun{ library(igraph) library(igraphdata) library(d3r) # with random graph d3r::d3_igraph(igraph::sample_pa(100)) # check case where vertices 0 cols d3_igraph(igraph::watts.strogatz.game(1, 50, 4, 0.05)) # with karate from igraphdata # notice graph attributes are added data("karate",package="igraphdata") (karate_d3 <- d3r::d3_igraph(karate)) listviewer::jsonedit(karate_d3) data("kite",package="igraphdata") listviewer::jsonedit(d3_igraph(kite)) } } ================================================ FILE: man/d3_json.Rd ================================================ % Generated by roxygen2: do not edit by hand % Please edit documentation in R/json.R \name{d3_json} \alias{d3_json} \title{Create 'JSON' that 'd3.js' Expects} \usage{ d3_json(x = NULL, strip = TRUE) } \arguments{ \item{x}{data, usually in the form of \code{data.frame} or \code{list}} \item{strip}{\code{logical} to remove outer array. Use \code{strip=TRUE} for hierarchies from \code{d3_nest}} } \value{ \code{string} of 'JSON' data } \description{ Create 'JSON' that 'd3.js' Expects } ================================================ FILE: man/d3_nest.Rd ================================================ % Generated by roxygen2: do not edit by hand % Please edit documentation in R/hierarchy.R \name{d3_nest} \alias{d3_nest} \title{Convert a \code{data.frame} to a 'd3.js' Hierarchy} \usage{ d3_nest(data = NULL, value_cols = character(), root = "root", json = TRUE) } \arguments{ \item{data}{\code{data.frame} or \code{data.frame} derivative, such as \code{tibble}} \item{value_cols}{\code{character} vector with the names of the columns to use as data} \item{root}{\code{character} name of the root level of the hierarchy} \item{json}{\code{logical} to return as \code{JSON}} } \value{ nested \code{data.frame} } \description{ Convert a \code{data.frame} to a 'd3.js' Hierarchy } \examples{ # convert Titanic to a nested d3 hierarchy # devtools::install_github("timelyportfolio/d3r") library(d3r) library(dplyr) titanic_df <- data.frame(Titanic) tit_tb <- titanic_df \%>\% select(Class,Age,Survived,Sex,Freq) \%>\% d3_nest(value_cols="Freq", root="titanic") tit_tb # see as tibble titanic_df \%>\% select(Class,Age,Survived,Sex,Freq) \%>\% d3_nest(value_cols="Freq", root="titanic", json=FALSE) # see the structure with listviewer tit_tb \%>\% listviewer::jsonedit() \dontrun{ library(treemap) library(d3r) library(dplyr) library(tidyr) treemap::random.hierarchical.data() \%>\% d3_nest(value_cols = "x") # use example from ?treemap data(GNI2014) treemap( GNI2014, index=c("continent", "iso3"), vSize="population", vColor="GNI", type="value", draw=FALSE ) \%>\% {.$tm} \%>\% select(continent,iso3,color,vSize) \%>\% d3_nest(value_cols = c("color", "vSize")) } } ================================================ FILE: man/d3_party.Rd ================================================ % Generated by roxygen2: do not edit by hand % Please edit documentation in R/party.R \name{d3_party} \alias{d3_party} \title{Convert partykit to d3.js hierarchy} \usage{ d3_party(tree = NULL, json = TRUE) } \arguments{ \item{tree}{\code{partykit} object to be converted} \item{json}{\code{logical} to return \code{list} or \code{json}} } \value{ \code{list} or \code{json} depending on \code{json} arg } \description{ This thing is not even close to being done, so please help with ideas and contributions. } \examples{ \dontrun{ library(d3r) # from ?rpart data("kyphosis", package="rpart") d3_party( rpart::rpart(Kyphosis ~ Age + Number + Start, data = kyphosis) ) # if you want the list instead of json d3_party( rpart::rpart(Kyphosis ~ Age + Number + Start, data = kyphosis), json = FALSE ) # with ctree instead of rpart # using example from ?ctree d3_party(partykit::ctree(Species ~ .,data = iris)) #devtools::install_github("timelyportfolio/d3treeR") library(d3treeR) d3tree2( d3_party( rpart::rpart(Kyphosis ~ Age + Number + Start, data = kyphosis) ), celltext = "rule", valueField = "n" ) } } ================================================ FILE: man/d3_table.Rd ================================================ % Generated by roxygen2: do not edit by hand % Please edit documentation in R/table.R \name{d3_table} \alias{d3_table} \title{Converts Table to 'd3' Nodes and Links} \usage{ d3_table(tB = NULL, vars = NULL, agg = "Freq") } \arguments{ \item{tB}{\code{table} to convert} \item{vars}{\code{character} vector of column names} \item{agg}{\code{character} column name of aggregated value} } \value{ \code{list} of two \code{data.frames} - one for nodes and one for links of the network. This structure is helpful when working with \code{networkD3} and \code{visNetwork}. } \description{ Converts Table to 'd3' Nodes and Links } \examples{ library(d3r) d3_table(Titanic, c("Class","Sex")) } ================================================ FILE: man/d3_v8.Rd ================================================ % Generated by roxygen2: do not edit by hand % Please edit documentation in R/v8.R \name{d3_v8} \alias{d3_v8} \title{Create V8 Context with D3} \usage{ d3_v8(...) } \arguments{ \item{...}{arguments passed to \code{v8()}} } \value{ \code{v8} context with d3.js loaded and available as d3 } \description{ Create V8 Context with D3 } \examples{ \dontrun{ # to do this all in R, please see ggraph # https://github.com/thomasp85/ggraph # by Thomas Lin Pedersen library(d3r) # make a simple data.frame of US state data states <- data.frame( region = as.character(state.region), state = as.character(state.abb), population = state.x77[,"Population"], stringsAsFactors = FALSE ) # use d3_nest to get the data.frame in a d3 hierarchy state_hier <- d3_nest( states, value_cols = "population" ) # use d3_v8 to do something useful with d3 and, our state data ctx <- d3_v8() ctx$eval(sprintf( " var states = \%s", state_hier )) ctx$eval( " // we assigned the variable states above // so now make it a real d3 hierarchy var root = d3.hierarchy(states); // sum on population root.sum(function(d) {return d.population ? d.population : 0}); // use d3 to circle pack or state hierarchy d3.pack()(root); // get something we can convert into a data.frame in R var states_packed = []; root.each(function(d) { states_packed.push({ name: d.data.name, radius: d.r, x: d.x, y: d.y }); }); " ) # now get states_packed from our context # to plot in R states_packed <- ctx$get("states_packed") opar <- par(no.readonly=TRUE) # make it square par(pty="s") symbols( states_packed$x, states_packed$y, states_packed$radius, inches=FALSE, asp=1 ) text(y~x, data=states_packed, labels=states_packed$name) # return to original par before we made it square par(opar) # d3.quadtree example library(d3r) x = runif(100) y = runif(100) ctx <- d3_v8() # assign pts as array of pts in V8 ctx$assign("pts", matrix(c(x,y),ncol=2,byrow=TRUE)) # use d3.quadtree() to plot rects ctx$eval( " var d3q = d3.quadtree() .addAll(pts); // nodes function from https://bl.ocks.org/mbostock/4343214 function nodes(quadtree) { var nodes = []; quadtree.visit(function(node, x0, y0, x1, y1) { nodes.push({x0:x0, y0:y0, x1: x1, y1: y1}) }); return nodes; } " ) nodes <- ctx$get("nodes(d3q)", simplifyVector = FALSE) # draw points opar <- par(no.readonly=TRUE) # make it square par(pty="s") plot(y~x) # draw quadtree rects rect( lapply(nodes,function(x){x$x0}), lapply(nodes,function(x){x$y0}), lapply(nodes,function(x){x$x1}), lapply(nodes,function(x){x$y1}) ) par(opar) } } ================================================ FILE: man/promote_na.Rd ================================================ % Generated by roxygen2: do not edit by hand % Please edit documentation in R/hierarchy.R \name{promote_na} \alias{promote_na} \title{Apply `promote_na` to All Rows} \usage{ promote_na(x) } \arguments{ \item{x}{\code{data.frame}} } \value{ \code{data.frame} } \description{ Apply `promote_na` to All Rows } ================================================ FILE: man/promote_na_one.Rd ================================================ % Generated by roxygen2: do not edit by hand % Please edit documentation in R/hierarchy.R \name{promote_na_one} \alias{promote_na_one} \title{Promote NA to Top Level} \usage{ promote_na_one(x) } \arguments{ \item{x}{\code{data.frame}} } \value{ \code{data.frame} } \description{ Promote NA to Top Level } ================================================ FILE: tests/testthat/test_deps.R ================================================ context("dependencies") v3 <- d3_dep_v3() v3_offline <- d3_dep_v3(offline=FALSE) v4 <- d3_dep_v4() v4_offline <- d3_dep_v4(offline=FALSE) v5 <- d3_dep_v5() v5_offline <- d3_dep_v5(offline=FALSE) v6 <- d3_dep_v6() v6_offline <- d3_dep_v6(offline = FALSE) v7 <- d3_dep_v7() v7_offline <- d3_dep_v7(offline = FALSE) jetpack <- d3_dep_jetpack() jetpack_offline <- d3_dep_jetpack(offline=FALSE) test_that("d3_dep-* returns html_dependency", { expect_is(v3, "html_dependency") expect_is(v4, "html_dependency") expect_is(v5, "html_dependency") expect_is(v6, "html_dependency") expect_is(v7, "html_dependency") expect_is(jetpack, 'html_dependency') }) test_that("d3_dep-* src href is a valid url", { skip_if_not_installed("httr") skip_on_cran() is_valid_url <- function(u){ !httr::http_error(u) } expect_true(is_valid_url(file.path(v3_offline$src$href,v3$script))) expect_true(is_valid_url(file.path(v4_offline$src$href,v4$script))) expect_true(is_valid_url(file.path(v5_offline$src$href,v5$script))) expect_true(is_valid_url(file.path(v6_offline$src$href,v6$script))) expect_true(is_valid_url(file.path(jetpack_offline$src$href,jetpack$script))) }) test_that("d3_dep-* src file is a valid file", { expect_true(file.exists(file.path(v3$src$file,v3$script))) expect_true(file.exists(file.path(v4$src$file,v4$script))) expect_true(file.exists(file.path(v5$src$file,v5$script))) expect_true(file.exists(file.path(v6$src$file,v6$script))) expect_true(file.exists(file.path(v7$src$file,v7$script))) expect_true(file.exists(file.path(jetpack$src$file, jetpack$script))) }) test_that("d3_dep_v7 on latest d3 release", { skip_if_not_installed("github") expect_identical( sprintf("v%s",v7$version), github::get.latest.release("d3","d3")$content$tag_name ) }) test_that("d3-jetpack on latest release", { skip_on_cran() skip_on_travis() skip_if_not_installed("github") expect_identical( jetpack$version, gsub( x=github::get.latest.release("gka","d3-jetpack")$content$tag_name, pattern="v", replacement="" ) ) }) ================================================ FILE: tests/testthat/test_hier.R ================================================ context("hierarchy") hier <- data.frame( lvl1 = c(rep("A",4), rep("B",3)), lvl2 = c(rep("A.1",2),rep("A.2",2),"B.1","B.2","B.3"), lvl3 = c(NA,"A.1.a","A.1.b","A.1.c","B.1.a",NA,"B.1.b"), size = c(1,2,3,4,5,6,7), stringsAsFactors=FALSE ) test_that("d3_nest works as json", { skip_on_cran() skip_on_travis() # default as json expect_identical( unclass(d3_nest(hier, value_cols="size")), '{"children":[{"name":"A","children":[{"name":"A.1","children":[{"name":"A.1.a","size":2,"colname":"lvl3"}],"size":1,"colname":"lvl2"},{"name":"A.2","children":[{"name":"A.1.b","size":3,"colname":"lvl3"},{"name":"A.1.c","size":4,"colname":"lvl3"}],"colname":"lvl2"}],"colname":"lvl1"},{"name":"B","children":[{"name":"B.1","children":[{"name":"B.1.a","size":5,"colname":"lvl3"}],"colname":"lvl2"},{"name":"B.2","children":[],"size":6,"colname":"lvl2"},{"name":"B.3","children":[{"name":"B.1.b","size":7,"colname":"lvl3"}],"colname":"lvl2"}],"colname":"lvl1"}],"name":"root"}' ) # json = FALSE expect_identical( d3_nest(hier, value_cols="size", json=FALSE), structure(list(children = list(structure(list(name = c("A", "B" ), children = list(structure(list(name = c("A.1", "A.2"), children = list( structure(list(name = "A.1.a", size = 2, colname = "lvl3"), .Names = c("name", "size", "colname"), row.names = c(NA, -1L), class = c("tbl_df", "tbl", "data.frame")), structure(list(name = c("A.1.b", "A.1.c" ), size = c(3, 4), colname = c("lvl3", "lvl3")), .Names = c("name", "size", "colname"), class = c("tbl_df", "tbl", "data.frame" ), row.names = c(NA, -2L))), size = c(1, NA), colname = c("lvl2", "lvl2")), .Names = c("name", "children", "size", "colname"), class = c("tbl_df", "tbl", "data.frame"), row.names = c(NA, -2L)), structure(list( name = c("B.1", "B.2", "B.3"), children = list(structure(list( name = "B.1.a", size = 5, colname = "lvl3"), .Names = c("name", "size", "colname"), class = c("tbl_df", "tbl", "data.frame" ), row.names = c(NA, -1L)), structure(list(name = character(0), size = numeric(0), colname = character(0)), .Names = c("name", "size", "colname"), row.names = integer(0), class = c("tbl_df", "tbl", "data.frame")), structure(list(name = "B.1.b", size = 7, colname = "lvl3"), .Names = c("name", "size", "colname" ), class = c("tbl_df", "tbl", "data.frame"), row.names = c(NA, -1L))), size = c(NA, 6, NA), colname = c("lvl2", "lvl2", "lvl2")), .Names = c("name", "children", "size", "colname" ), class = c("tbl_df", "tbl", "data.frame"), row.names = c(NA, -3L))), colname = c("lvl1", "lvl1")), .Names = c("name", "children", "colname"), class = c("tbl_df", "tbl", "data.frame"), row.names = c(NA, -2L))), name = "root"), .Names = c("children", "name"), row.names = c(NA, -1L), class = c("tbl_df", "tbl", "data.frame")) ) }) test_that("d3_nest works with multiple NA levels", { skip_on_cran() skip_on_travis() hier2 <- data.frame( i1 = "A", i2 = NA, i3 = NA, size = 20, stringsAsFactors = FALSE ) # default as json expect_identical( unclass(d3_nest(hier2, value_cols="size")), '{"children":[{"name":"A","children":[],"size":20,"colname":"i1"}],"name":"root"}' ) }) ================================================ FILE: tests/testthat/test_igraph.R ================================================ context("igraph") test_that("d3_igraph works",{ skip_if_not_installed("igraph") skip_if_not_installed("jsonlite") library("igraph") bull <- graph.famous("Bull") # default as json expect_identical( unclass(d3_igraph(bull)), '{"nodes":[{"id":"0"},{"id":"1"},{"id":"2"},{"id":"3"},{"id":"4"}],"links":[{"source":"0","target":"1"},{"source":"0","target":"2"},{"source":"1","target":"2"},{"source":"1","target":"3"},{"source":"2","target":"4"}],"attributes":{"name":"Bull"}}' ) # json=FALSE so list expect_identical( unclass(jsonlite::toJSON( d3_igraph(bull, json=FALSE), dataframe="rows", auto_unbox=TRUE )), '{"nodes":[{"id":"0"},{"id":"1"},{"id":"2"},{"id":"3"},{"id":"4"}],"links":[{"source":"0","target":"1"},{"source":"0","target":"2"},{"source":"1","target":"2"},{"source":"1","target":"3"},{"source":"2","target":"4"}],"attributes":{"name":"Bull"}}' ) #d3_igraph converts node and edge attributes" bull_node_attr <- bull V(bull_node_attr)$color <- "blue" expect_identical( unclass(d3_igraph(bull_node_attr)), '{"nodes":[{"color":"blue","id":"0"},{"color":"blue","id":"1"},{"color":"blue","id":"2"},{"color":"blue","id":"3"},{"color":"blue","id":"4"}],"links":[{"source":"0","target":"1"},{"source":"0","target":"2"},{"source":"1","target":"2"},{"source":"1","target":"3"},{"source":"2","target":"4"}],"attributes":{"name":"Bull"}}' ) # add edge attributes E(bull_node_attr)$weight <- 1:length(E(bull_node_attr)) expect_equal( d3_igraph(bull_node_attr, json=FALSE), list( nodes = data.frame( "color" = rep("blue", 5), "id" = as.character(0:4), stringsAsFactors = FALSE ), links = data.frame( "source" = as.character(c(0,0,1,1,2)), "target" = as.character(c(1,2,2,3,4)), "weight" = 1:5, stringsAsFactors = FALSE ), "attributes" = list(name = "Bull") ) ) }) ================================================ FILE: tests/testthat/test_table.R ================================================ context("table") test_that("d3_table works with 1 var", { expect_identical( d3_table(UCBAdmissions,"Admit"), list( nodes=structure( data.frame( name = c("Admitted","Rejected","UCBAdmissions"), value = c(1755,2771,4526), stringsAsFactors = FALSE ), row.names = as.character(1:3) ), links = data.frame( source = c(2,2), target = c(0,1), value = c(1755, 2771), stringsAsFactors = FALSE ) ) ) }) test_that("d3_table works with > 1 var", { expect_identical( d3_table(Titanic, c("Age","Sex")), list( nodes = structure( data.frame( name = c("Child","Adult","Male","Female","Titanic"), value = c(109,2092,1731,470,2201), stringsAsFactors = FALSE ), row.names = as.character(seq_len(5)) ), links = data.frame( source = c(0,1,0,1,4,4), target = c(2,2,3,3,0,1), value = c(64,1667,45,425,109,2092), stringsAsFactors = FALSE ) ) ) }) ================================================ FILE: tests/testthat/test_v8.R ================================================ context("V8context") test_that("d3_v8 has d3", { skip_if_not_installed("V8") skip_on_cran() skip_on_travis() # d3_v8 works returns v8 context with d3 installed expect_identical( d3_v8()$get("global.d3.version"), d3_dep_v6()$version ) }) ================================================ FILE: tests/testthat.R ================================================ library(testthat) library(d3r) test_check("d3r")