A range interval chart displays min-max ranges or intervals as vertical or horizontal bars/segments for each category, making it ideal for visualizing uncertainty bounds, confidence intervals, or value spreads. Unlike error bars which extend from a central data point, range intervals show the full span between two values as a filled bar or line segment, emphasizing the range itself rather than deviation from a center. This visualization excels at comparing ranges across multiple categories simultaneously.
// anyplot.ai
// range-interval: Range Interval Chart
// Library: d3 7.9.0 | JavaScript 22.23.2
// Quality: 94/100 | Created: 2026-09-02
const t = window.ANYPLOT_TOKENS;
const { width, height } = window.ANYPLOT_SIZE;
const margin = { top: 110, right: 70, bottom: 90, left: 110 };
const iw = width - margin.left - margin.right;
const ih = height - margin.top - margin.bottom;
// --- Data: monthly temperature range for a temperate city (deg C) ----------
// Range widths vary (4-11 deg) to show volatile shoulder-season swings (Mar/Apr)
// against calmer winter and mid-summer stretches.
const months = [
{ label: "Jan", min: -2, max: 2, mean: 0.3 },
{ label: "Feb", min: -1, max: 5, mean: 2.4 },
{ label: "Mar", min: 2, max: 12, mean: 7.6 },
{ label: "Apr", min: 6, max: 17, mean: 12.3 },
{ label: "May", min: 11, max: 20, mean: 16.2 },
{ label: "Jun", min: 15, max: 23, mean: 19.4 },
{ label: "Jul", min: 18, max: 26, mean: 22.3 },
{ label: "Aug", min: 18, max: 25, mean: 21.8 },
{ label: "Sep", min: 13, max: 20, mean: 16.6 },
{ label: "Oct", min: 7, max: 14, mean: 10.9 },
{ label: "Nov", min: 2, max: 8, mean: 5.3 },
{ label: "Dec", min: -1, max: 3, mean: 1.1 },
];
const coldest = months.reduce((a, b) => (b.min < a.min ? b : a));
const warmest = months.reduce((a, b) => (b.max > a.max ? b : a));
// --- SVG mount ---------------------------------------------------------------
const svg = d3.select("#container").append("svg").attr("width", width).attr("height", height);
const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
// --- Scales -------------------------------------------------------------------
const x = d3.scaleBand().domain(months.map((d) => d.label)).range([0, iw]).padding(0.35);
const y = d3
.scaleLinear()
.domain([d3.min(months, (d) => d.min), d3.max(months, (d) => d.max)])
.nice()
.range([ih, 0]);
// --- Gridlines (y only) --------------------------------------------------------
g.append("g")
.attr("class", "grid")
.call(d3.axisLeft(y).tickSize(-iw).tickFormat(""))
.call((sel) => sel.select(".domain").remove())
.selectAll("line")
.attr("stroke", t.grid);
// --- Mean trend curve (smoothed d3-shape overlay linking monthly means) --------
const meanLine = d3
.line()
.x((d) => x(d.label) + x.bandwidth() / 2)
.y((d) => y(d.mean))
.curve(d3.curveCatmullRom.alpha(0.5));
g.append("path")
.datum(months)
.attr("fill", "none")
.attr("stroke", t.ink)
.attr("stroke-width", 2)
.attr("stroke-dasharray", "2,5")
.attr("stroke-opacity", 0.3)
.attr("d", meanLine);
// --- Range bars -----------------------------------------------------------------
g.selectAll("rect.range")
.data(months)
.join("rect")
.attr("class", "range")
.attr("x", (d) => x(d.label))
.attr("width", x.bandwidth())
.attr("y", (d) => y(d.max))
.attr("height", (d) => y(d.min) - y(d.max))
.attr("rx", 4)
.attr("fill", t.palette[0])
.attr("fill-opacity", 0.55)
.attr("stroke", t.palette[0])
.attr("stroke-width", 1.5);
// --- Endpoint markers (min / max emphasis) --------------------------------------
for (const key of ["min", "max"]) {
g.selectAll(`circle.${key}`)
.data(months)
.join("circle")
.attr("class", key)
.attr("cx", (d) => x(d.label) + x.bandwidth() / 2)
.attr("cy", (d) => y(d[key]))
.attr("r", 7)
.attr("fill", t.palette[0])
.attr("stroke", t.pageBg)
.attr("stroke-width", 2.5);
}
// --- Extreme-month emphasis (coldest & warmest, sharpens the seasonal story) ----
for (const [d, key, label] of [
[coldest, "min", "Coldest"],
[warmest, "max", "Warmest"],
]) {
const cx = x(d.label) + x.bandwidth() / 2;
const cy = y(d[key]);
g.append("circle")
.attr("cx", cx)
.attr("cy", cy)
.attr("r", 11)
.attr("fill", "none")
.attr("stroke", t.palette[0])
.attr("stroke-width", 2)
.attr("stroke-opacity", 0.6);
g.append("text")
.attr("x", cx)
.attr("y", cy - 20)
.attr("text-anchor", "middle")
.attr("fill", t.inkSoft)
.style("font-size", "13px")
.style("font-weight", "600")
.text(label);
}
// --- Midpoint reference tick -----------------------------------------------------
g.selectAll("line.mean")
.data(months)
.join("line")
.attr("class", "mean")
.attr("x1", (d) => x(d.label) + x.bandwidth() * 0.18)
.attr("x2", (d) => x(d.label) + x.bandwidth() * 0.82)
.attr("y1", (d) => y(d.mean))
.attr("y2", (d) => y(d.mean))
.attr("stroke", t.ink)
.attr("stroke-opacity", 0.55)
.attr("stroke-width", 2);
// --- Axes ------------------------------------------------------------------------
const xAxis = g.append("g").attr("transform", `translate(0,${ih})`).call(d3.axisBottom(x));
const yAxis = g.append("g").call(d3.axisLeft(y).tickFormat((d) => `${d}°`));
for (const ax of [xAxis, yAxis]) {
ax.selectAll("text").attr("fill", t.inkSoft).style("font-size", "14px");
ax.selectAll("line").attr("stroke", t.inkSoft);
ax.select(".domain").attr("stroke", t.inkSoft);
}
// --- Axis labels -------------------------------------------------------------------
g.append("text")
.attr("x", iw / 2)
.attr("y", ih + 60)
.attr("text-anchor", "middle")
.attr("fill", t.ink)
.style("font-size", "16px")
.text("Month");
g.append("text")
.attr("transform", "rotate(-90)")
.attr("x", -ih / 2)
.attr("y", -80)
.attr("text-anchor", "middle")
.attr("fill", t.ink)
.style("font-size", "16px")
.text("Temperature (°C)");
// --- Title -------------------------------------------------------------------------
const title = "Monthly Temperature Range · range-interval · javascript · d3 · anyplot.ai";
const titleFontSize = Math.round(22 * Math.min(1, 67 / title.length));
svg
.append("text")
.attr("x", width / 2)
.attr("y", 50)
.attr("text-anchor", "middle")
.attr("fill", t.ink)
.style("font-size", `${titleFontSize}px`)
.style("font-weight", "600")
.text(title);
Runnable source as JSON, for any HTTP client: https://api.anyplot.ai/specs/range-interval/d3/code. Any spec id and library id listed in llms-full.txt fit the same URL shape; every URL below is complete and callable.
{
"spec_id": "range-interval",
"language": "javascript",
"library": "d3",
"page": "https://anyplot.ai/range-interval/javascript/d3",
"hub": "https://anyplot.ai/range-interval",
"code_json": "https://api.anyplot.ai/specs/range-interval/d3/code",
"spec_json": "https://api.anyplot.ai/specs/range-interval",
"render_light_png": "https://storage.googleapis.com/anyplot-images/plots/range-interval/javascript/d3/plot-light.png",
"render_dark_png": "https://storage.googleapis.com/anyplot-images/plots/range-interval/javascript/d3/plot-dark.png",
"interactive_light_html": "https://storage.googleapis.com/anyplot-images/plots/range-interval/javascript/d3/plot-light.html",
"interactive_dark_html": "https://storage.googleapis.com/anyplot-images/plots/range-interval/javascript/d3/plot-dark.html",
"quality_score": 94.0,
"license": "MIT",
"guide": "https://anyplot.ai/llms.txt"
}Part of Range Interval Chart on anyplot.ai.