The avatar for @spattana
Sumant Pattanaik
Published
D3 Class
Edited
Mar 30, 2021
Insert cell
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
Insert cell
Insert cell
multiElementScale = d3.scaleLinear()
.domain([-1, 0, 1])
.range(['red', 'white', 'blue']);
Insert cell
multiElementScale(0.5)
Insert cell
md` - Discrete domain and continuous numeric range: (position of bar, position of Points)
- d3.**scaleBand**(): used for position of the bars in Bar plot with Categorical data or discrete dates. Range is in quantitative domain.
- d3.**scalePoint**(): variant of scaleBand, used for scatterplots with an ordinal or categorical dimension. Range is in quantitative domain.
- Discrete domain and discrete range:
- d3.**scaleOrdinal**(): Used for categorical value to color, or to symbol. Domain and range are arrays.
`
Insert cell
Insert cell
Insert cell
Insert cell
radialScale = d3.scaleRadial().domain([0, 25])
Insert cell
sqrtScale = d3.scaleSqrt().domain([0, 25])
Insert cell
[1e8, 5e7,3e6, 200000, 760].map(d=>d3[radScaleChoice]().domain([700, 1e8]).range([5,80])(d))
Insert cell
Insert cell
color = "hsl(180,0,0)"
Insert cell
Insert cell
d3.symbols
Insert cell
Insert cell
d3.symbols
Insert cell
md`### Scale Sequential
Similar to scale linear. However, the output is mostly associated with an interpolator.`
Insert cell
seqScale = d3.scaleSequential().interpolator(t => `hello ${t}`)
Insert cell
d3.range(0, 26, 5).map(d => seqScale(d))
Insert cell
md`Similarly there are:
- d3.**scaleSequentialSqrt**()
- d3.**scaleSequentialLog**()
`
Insert cell
md `#### Interpolator:
a function that maps a value in the interval [0,1] (generally referred to *t*) and outputs an interpolated value between two value of most types

d3 provides a bunch of interpolators.`
Insert cell
Insert cell
d3.interpolate(0, 100)(0.3)
Insert cell
d3.interpolate("rgb(0,255,0)", "red")(0.5)
Insert cell
d3.interpolate("translate(0,0) rotate(0)", "translate(800,10) rotate(90)")(0.5)
Insert cell
d3
.range(0, 1.1, 0.25)
.map(t => d3.interpolate(new Date("2020-01-01"), new Date())(t))
Insert cell
d3
.range(0, 1.1, 0.25)
.map(t => d3.interpolate([1.78, 3.33, 2.1], [1.64, 1.2, 0])(t))
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
seqColorScale = d3.scaleSequential().domain([1,10]).interpolator(d3[seqColorChoice])
Insert cell
d3.schemeBlues[9]
Insert cell
md`### Diverging Color Schemes`
Insert cell
Insert cell
choropleth1
Insert cell
Insert cell
d3.mean(data.values())
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
md`### External Libraries & Imports`
Insert cell
import {select} from "@jashkenas/inputs"
Insert cell
import {getSVG} from "@spattana/topojson-and-geovisualization"
Insert cell
import {chart as radialBar} from "@d3/radial-stacked-bar-chart"
Insert cell
import {chart as choropleth, data} with {seqColorScale as color} from "@d3/choropleth"
Insert cell
import {chart as choropleth1} with {divColorScale as color} from "@d3/choropleth"
Insert cell
import {chart as choropleth2} with {quantizeColorScale as color} from "@d3/choropleth"
Insert cell
d3 = require("d3@6")
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more