D3.js scaleSequential clamp: avoiding surprise color extrapolation in v7

Unbounded sequential scales spill color outside the intended range

Mapping data to color with scaleSequential without bounds lets values outside the domain be interpolated beyond the palette. The result can be hues that were not designed for the visualization, or null-like rendering when the interpolator receives out-of-range input. Explicitly bounding the scale avoids that spill.

Version-aware interpolator choice

D3 v7 includes perceptual interpolators such as d3.interpolateViridis in core. Earlier releases required an external plugin for the same palettes, which changes bundle composition and version compatibility decisions. Checking d3.version confirms which set is available.

Chaining transitions and interrupting stale animations

Chaining .duration(750).ease(d3.easeCubicOut) creates smooth animation without manual timers. If state changes mid-animation, calling selection.interrupt() on the selection before starting a new transition prevents competing tweens and erratic rendering.

Worked example with clamp, built-in interpolator, and interrupt

import * as d3 from 'd3';
const color = d3.scaleSequential(d3.interpolateViridis).domain([0,100]).clamp(true);
const circles = d3.select('svg')
  .selectAll('circle')
  .data([25,50,75])
  .join('circle')
  .attr('cx', (d,i)=>100+i*100)
  .attr('cy',100)
  .attr('r',30)
  .style('fill', d=>color(d));
circles.on('mouseover', function(){
  d3.select(this).transition()
    .duration(750)
    .ease(d3.easeCubicOut)
    .attr('r',40);
});
d3.select('button').on('click', ()=>{
  d3.selectAll('circle').interrupt();
});

Limitations and verification

Clamp(true) truncates values to the domain endpoints, so out-of-range data no longer signals via color. Verify by inspecting computed fill values after data changes and confirming that d3.version matches the expected major release. Replace external chromatic calls with core interpolators and confirm no additional network requests for palette scripts.

Action steps

Make clamp(true) a default for bounded sequential scales, prefer core interpolators when on v7+, and pair transitions with interrupt before restarting animations. Verify version after upgrades.