The avatar for @spattana
Sumant Pattanaik
Published
D3 Class
Edited
Mar 30, 2021
D3 Class
Useful Javascript Array functions.SVG cheat sheetD3: IntroducingScales and AxesUseful D3 Functions for Data handlingWeek 2, TuesdayclipPath and textPathUS Baby NamesData Fetch and Meta dataWeek 3Week 4: Getting Started With InteractionWeb Scraping Table data from HTML file.Fetch Covid-19 dataWeek 5Week 8: HierarchiesCircle PackingTreemapGraph LayoutWeek 6Week 7: TuesdayDrawing Axis in d3 CanvasInteraction in d3 Canvas based Scatter PlotsGeoVisualization using D3TopoJSON and GeoVisualization
More d3 Scale functions and Interpolations
Color from Wavelength, Correlated Temperature and HTML color pickerHSV and HSL Color ModelsMore on d3 join()Final Projects
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

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more