Quantize scale example: color encoding
This example shows a quantize scale used for color encoding: const color = d3.scaleQuantize([0, 1], ["brown", "steelblue"]); color(0.49) returns "brown"; color(0.51) returns "steelblue".
d3-scale
117 notes in this subject, read out of this brain and free to use. This is page 2 of 2.
Quantize scale example: stroke width
This example shows dividing the domain into three equally-sized parts with different range values to compute stroke width: const width = d3.scaleQuantize([10, 100], [1, 2, 4]); width(20) returns 1; width(50) returns 2; width(80) returns 4.
Symlog scale domain includes zero unlike log scale
A symlog scale domain can include zero, unlike a log scale. The transformation is based on a bi-symmetric log transformation as described by Webber.
scaleSymlog signature and construction
scaleSymlog(domain, range) constructs a new continuous scale with the specified domain and range. The constant defaults to 1, the default interpolator is used, and clamping is disabled. If a single argument is specified, it is interpreted as the range. If either domain or range are not specified, each defaults to [0, 1]. Unlike a log scale, a symlog scale domain can include zero.
scaleSymlog construction example with two arguments
const x = d3.scaleSymlog([0, 100], [0, 960]);
scaleSymlog construction example with single argument
const color = d3.scaleSymlog(["red", "blue"]) // default domain of [0, 1]
symlog.constant setter and getter
symlog.constant(constant) sets the symlog constant to the specified number and returns this scale. If constant is not specified, returns the current value of the symlog constant. The constant defaults to 1.
symlog.constant setter example
const x = d3.scaleSymlog([0, 100], [0, 960]).constant(2);
symlog.constant getter example
x.constant() // 2
sequential.rangeRound() method
sequential.rangeRound(range) is similar to sequential.range() but implicitly uses interpolateRound() as the interpolator.
scaleSequentialPow constructor
scaleSequentialPow(*domain*, *range*) returns a new sequential scale with an exponential transform, analogous to a power scale.
scaleSequentialSqrt constructor
scaleSequentialSqrt(*domain*, *range*) returns a new sequential scale with a square-root transform, analogous to a sqrt scale.
scaleSequentialSymlog constructor
scaleSequentialSymlog(*domain*, *range*) returns a new sequential scale with a symmetric logarithmic transform, analogous to a symlog scale.
scaleSequentialQuantile constructor
scaleSequentialQuantile(*domain*, *range*) returns a new sequential scale with a p-quantile transform, analogous to a quantile scale.
sequentialQuantile.quantiles() method
sequentialQuantile.quantiles(n) returns an array of n + 1 quantiles. For example, if n = 4, it returns an array of five numbers: the minimum value, the first quartile, the median, the third quartile, and the maximum.
scaleSequential example with interpolator shorthand
Example: const color = d3.scaleSequential(d3.interpolateBlues); creates a sequential scale with default domain [0, 1] and the Blues color interpolator.
scaleSequential example with array range
Example: const color = d3.scaleSequential(["red", "blue"]); creates a sequential scale that interpolates from red to blue.
scaleSequential example with custom interpolator function
Example: const rainbow = d3.scaleSequential((t) => d3.hsl(t * 360, 1, 0.5) + ""); creates a sequential scale with a custom rainbow interpolator that converts HSL values to strings.
scaleSequentialQuantile example with quantiles
Example: const color = d3.scaleSequentialQuantile().domain(penguins.map((d) => d.body_mass_g)).interpolator(d3.interpolateBlues); color.quantiles(4); returns [2700, 3550, 4050, 4750, 6300].
scaleSequential constructor signature
scaleSequential(*domain*, *interpolator*) constructs a new sequential scale. Domain defaults to [0, 1] if not specified. Interpolator defaults to the identity function if not specified. Both parameters are optional.
Sequential scale domain constraints
A sequential scale's domain must be numeric and must contain exactly two values. The input domain and output range of a sequential scale always have exactly two elements.
Sequential scale interpolator invocation
When a sequential scale is applied, the interpolator function is invoked with a value typically in the range [0, 1], where 0 represents the minimum value and 1 represents the maximum value.
Sequential scale interpolator as array
If the interpolator is an array, it represents the scale's two-element output range and is converted to an interpolator function using interpolate().
Sequential scale lacks invert and interpolate methods
Sequential scales do not expose invert and interpolate methods, unlike linear scales.
sequential.interpolator() method
sequential.interpolator(interpolator) sets the scale's interpolator to the specified function if interpolator is specified. If interpolator is not specified, it returns the scale's current interpolator.
sequential.range() method
sequential.range(range) accepts a two-element array that is converted to an interpolator function using interpolate(). This is equivalent to constructing a sequential scale with an interpolate value directly.
scaleThreshold example with numbers
const color = d3.scaleThreshold([0, 1], ['red', 'white', 'green']); color(-1) returns 'red', color(0) returns 'white', color(0.5) returns 'white', color(1) returns 'green', color(1000) returns 'green'.
scaleThreshold constructor signature
scaleThreshold(domain, range) constructs a new threshold scale. The domain parameter is optional and defaults to [0.5] if not specified. The range parameter is optional and defaults to [0, 1] if not specified. If domain is not specified but range is, pass range as the first positional argument.
scaleThreshold domain structure
The domain of a threshold scale is an array of threshold values that divide the continuous input domain into slices. If the range has n+1 elements, the domain must have n elements. Domain values must be in ascending order; otherwise the scale behavior is undefined. Values are typically numbers but any naturally ordered values such as strings will work.
scaleThreshold range structure
The range of a threshold scale is an array of discrete output values. If the domain has n elements, the range must have n+1 elements. Range elements need not be numbers; any value or type will work. If there are fewer than n+1 elements in the range, the scale may return undefined for some inputs. If there are more than n+1 elements, the additional values are ignored.
scaleThreshold call signature
Calling threshold(value) on a threshold scale returns the corresponding value in the output range for the given input value. The input value is compared against the domain thresholds to determine which range value to return.
scaleThreshold invertExtent method
threshold.invertExtent(value) returns the extent [x0, x1] of domain values that map to the given range value. For the lowest threshold, x0 is undefined (unbounded). For the highest threshold, x1 is undefined (unbounded). For thresholds in the middle, both x0 and x1 are defined as domain values.
scaleThreshold domain getter/setter
threshold.domain(domain) sets the scale's domain to the specified array. If domain is not specified, returns the scale's current domain. Domain values must be in ascending order.
scaleThreshold range getter/setter
threshold.range(range) sets the scale's range to the specified array. If range is not specified, returns the scale's current range. The range must have one more element than the domain.
scaleThreshold copy method
threshold.copy() returns an exact copy of the threshold scale. Changes to the original scale will not affect the copy, and vice versa.
scaleThreshold invertExtent example
const color = d3.scaleThreshold([0, 1], ['red', 'white', 'green']); color.invertExtent('red') returns [undefined, 0], color.invertExtent('white') returns [0, 1], color.invertExtent('green') returns [1, undefined].
scaleThreshold default domain example
const color = d3.scaleThreshold(['red', 'blue']); color(0) returns 'red', color(1) returns 'blue'. The default domain is [0.5], creating a single threshold that divides the range into two parts.
scaleTime example with position encoding
Example showing scaleTime usage: const x = d3.scaleTime([new Date(2000, 0, 1), new Date(2000, 0, 2)], [0, 960]); x(new Date(2000, 0, 1, 5)); // 200; x(new Date(2000, 0, 1, 16)); // 640; x.invert(200); // Sat Jan 01 2000 05:00:00 GMT-0800 (PST); x.invert(640); // Sat Jan 01 2000 16:00:00 GMT-0800 (PST)
scaleUtc signature and behavior
scaleUtc(domain, range) is equivalent to scaleTime but operates in Coordinated Universal Time (UTC) rather than local time. The default domain is [2000-01-01, 2000-01-02] in UTC time. The default range is [0, 1]. UTC scales should be preferred when possible as they behave more predictably: days are always twenty-four hours and the scale does not depend on the browser's time zone.
scaleUtc example with position encoding
Example showing scaleUtc usage: const x = d3.scaleUtc([new Date("2000-01-01"), new Date("2000-01-02")], [0, 960]); x(new Date("2000-01-01T05:00Z")); // 200; x(new Date("2000-01-01T16:00Z")); // 640; x.invert(200); // 2000-01-01T05:00Z; x.invert(640); // 2000-01-01T16:00Z
scaleTime signature and behavior
scaleTime(domain, range) constructs a new time scale with the specified domain and range. Domain values are coerced to dates rather than numbers, and invert likewise returns a date. The default domain is [2000-01-01, 2000-01-02] in local time. The default range is [0, 1]. Time scales implement ticks based on calendar intervals.
time.ticks signature and behavior
time.ticks(count) returns representative dates from the scale's domain. The returned tick values are uniformly-spaced (mostly), have sensible values (such as every day at midnight), and are guaranteed to be within the extent of the domain. An optional count may be specified to affect how many ticks are generated. If count is not specified, it defaults to 10. The specified count is only a hint; the scale may return more or fewer values depending on the domain.
time.ticks automatic interval levels
The following time intervals are considered for automatic ticks: 1-, 5-, 15- and 30-second; 1-, 5-, 15- and 30-minute; 1-, 3-, 6- and 12-hour; 1- and 2-day; 1-week; 1- and 3-month; 1-year.
time.ticks with explicit interval
In lieu of a count, a time interval may be explicitly specified to time.ticks. To prune the generated ticks for a given time interval, use interval.every. For example, to generate ticks at 15-minute intervals: x.ticks(d3.utcMinute.every(15)) with a domain from 2000-01-01T00:00Z to 2000-01-01T02:00Z returns ticks at 15-minute boundaries.
time.ticks example with utcMinute.every
Example showing ticks with explicit interval: const x = d3.scaleUtc().domain([new Date("2000-01-01T00:00Z"), new Date("2000-01-01T02:00Z")]); x.ticks(d3.utcMinute.every(15)); // [2000-01-01T00:00Z, 2000-01-01T00:15Z, 2000-01-01T00:30Z, 2000-01-01T00:45Z, 2000-01-01T01:00Z, 2000-01-01T01:15Z, 2000-01-01T01:30Z, 2000-01-01T01:45Z, 2000-01-01T02:00Z]
time.tickFormat signature and behavior
time.tickFormat(count, specifier) returns a time format function suitable for displaying tick values. The specified count is currently ignored but is accepted for consistency with other scales. If a format specifier is specified, this method is equivalent to timeFormat. If specifier is not specified, the default time format is returned.
time.tickFormat default format rules
The default multi-scale time format chooses a human-readable representation based on the specified date: %Y for year boundaries (2011); %B for month boundaries (February); %b %d for week boundaries (Feb 06); %a %d for day boundaries (Mon 07); %I %p for hour boundaries (01 AM); %I:%M for minute boundaries (01:23); :%S for second boundaries (:45); .%L for milliseconds for all other times (.012). This provides both local and global context in sequences of ticks.
time.tickFormat example
Example showing tickFormat usage: const x = d3.scaleUtc().domain([new Date("2000-01-01T00:00Z"), new Date("2000-01-01T02:00Z")]); const T = x.ticks(); // [2000-01-01T00:00Z, 2000-01-01T00:15Z, 2000-01-01T00:30Z, ...]; const f = x.tickFormat(); T.map(f); // ["2000", "12:15", "12:30", "12:45", "01 AM", "01:15", "01:30", "01:45", "02 AM"]
time.nice signature and behavior
time.nice(count) extends the domain so that it starts and ends on nice round values. This method typically modifies the scale's domain, and may only extend the bounds to the nearest round value. An optional tick count argument allows greater control over the step size used to extend the bounds, guaranteeing that the returned ticks will exactly cover the domain.
time.nice with explicit interval
Alternatively to a count, a time interval may be specified to time.nice to explicitly set the ticks. If an interval is specified, an optional step may also be specified to skip some ticks. For example, time.nice(d3.utcSecond.every(10)) will extend the domain to an even ten seconds (0, 10, 20, etc.).
time.nice example
Example showing nice usage: const x = d3.scaleUtc().domain([new Date("2000-01-01T12:34Z"), new Date("2000-01-01T12:59Z")]).nice(); x.domain(); // [2000-01-01T12:30Z, 2000-01-01T13:00Z]
time.nice use case and behavior with multiple domain values
Nicing is useful if the domain is computed from data, such as using extent, and may be irregular. For example, for a domain of [2009-07-13T00:02, 2009-07-13T23:48], the nice domain is [2009-07-13, 2009-07-14]. If the domain has more than two values, nicing the domain only affects the first and last value.
React LinePlot with d3-scale and d3-shape
Example React component using D3 for visualization. Non-DOM D3 modules like d3-scale, d3-array, and d3-shape work seamlessly in JSX. The component creates scales and a line generator, then uses them to render an SVG path and circles without D3 manipulating the DOM.
d3.scaleUtc signature
d3.scaleUtc() creates a UTC time scale. It has .domain([startDate, endDate]) and .range([minPixels, maxPixels]) methods. Example: d3.scaleUtc().domain([new Date("2023-01-01"), new Date("2024-01-01")]).range([40, 620]).
d3.scaleLinear signature
d3.scaleLinear() creates a linear quantitative scale. It has .domain([minValue, maxValue]) and .range([minPixels, maxPixels]) methods. Example: d3.scaleLinear().domain([0, 100]).range([370, 20]).
Basic blank chart example
This example shows how to create a blank chart with x and y axes. It declares dimensions (width 640, height 400) and margins (top 20, right 20, bottom 30, left 40), creates UTC time and linear scales with appropriate domains and ranges, creates an SVG element, appends x and y axis groups with translations, and returns the SVG DOM node.
Svelte LinePlot with d3-scale and d3-shape
Example Svelte component using D3 for visualization. Non-DOM D3 modules like d3-scale and d3-shape work seamlessly. Use reactive statements ($:) to recompute scales and line generators when data changes, then render the SVG path and circles.