@fundar/data-chart-telling 0.0.15 → 0.0.17

package/dist/charts/BaseChart.svelte

@@ -5,6 +5,7 @@
   import LegendLayout from '../layout/legend/LegendLayout.svelte';
   import { getConfiguration } from '../configuration/config.svelte';
   import { provideHover } from '../layout/tooltip/hover.svelte';
+  import { provideLegendInteraction } from '../layout/legend/interaction.svelte';
   import type { Snippet } from 'svelte';
   import type { LegendSection } from '../types/charts/legend';
   import type { HoverStrategy } from '../types/layout/tooltip';
@@ -59,6 +60,7 @@
   const cfg = $derived(getConfiguration());
 
   const hoverStore = provideHover();
+  provideLegendInteraction();
   $effect(() => {
     hoverStore.strategy = hover?.strategy ?? 'x';
     hoverStore.sync = hover?.sync ?? false;

package/dist/configuration/config.svelte.js

@@ -46,6 +46,7 @@ export const DEFAULT_CONFIG = {
         titleWeight: 500,
         gap: '0.5rem 2rem',
         swatchSize: '1.25rem',
+        disabledOpacity: 0.12,
     },
     axis: {
         color: 'currentColor',

package/dist/configuration/themes/index.d.ts

@@ -48,6 +48,7 @@ export declare const THEMES: {
             titleWeight?: string | number | undefined;
             gap?: string | undefined;
             swatchSize?: string | undefined;
+            disabledOpacity?: number | undefined;
         } | undefined;
         axis?: {
             color?: string | undefined;
@@ -170,6 +171,7 @@ export declare const THEMES: {
             titleWeight?: string | number | undefined;
             gap?: string | undefined;
             swatchSize?: string | undefined;
+            disabledOpacity?: number | undefined;
         } | undefined;
         axis?: {
             color?: string | undefined;
@@ -292,6 +294,7 @@ export declare const THEMES: {
             titleWeight?: string | number | undefined;
             gap?: string | undefined;
             swatchSize?: string | undefined;
+            disabledOpacity?: number | undefined;
         } | undefined;
         axis?: {
             color?: string | undefined;
@@ -414,6 +417,7 @@ export declare const THEMES: {
             titleWeight?: string | number | undefined;
             gap?: string | undefined;
             swatchSize?: string | undefined;
+            disabledOpacity?: number | undefined;
         } | undefined;
         axis?: {
             color?: string | undefined;

package/dist/index.d.ts

@@ -44,7 +44,7 @@ export type { GeoProjectionName, GeoProjectionConfig, GeoCustomProjection, GeoCu
 export type { GeoStyles, GeoTileLayerConfig, GeoZoomConfig } from './types/plots/styles/geo';
 export type { GeoMarker, GeoInsetMarker, GeoInsetLocation, GeoInsetProjectionName, GeoInsetProjectionConfig, } from './types/markers/geo';
 export type { TimeValue, Orientation, FacetColumns, FacetConfig, TimelineConfig, ChartPlotContext, ChartPlotSnippet, } from './types/charts/common';
-export type { LegendSection, DiscreteLegendSection, ContinuousLegendSection, LegendItem, } from './types/charts/legend';
+export type { LegendSection, DiscreteLegendSection, ContinuousLegendSection, LegendItem, LegendDisabledStyle, } from './types/charts/legend';
 export type { HoverStrategy, TooltipOptions, TooltipProp, } from './types/layout/tooltip';
 export type { ChartConfig, ChartConfigInput, TextStyle } from './types/configuration/styling';
 export type { ChartProps } from './types/charts/props';

package/dist/layout/legend/ContinuousSection.svelte

@@ -1,32 +1,69 @@
 <script lang="ts">
+  import { untrack } from 'svelte';
   import type { ContinuousLegendSection } from '../../types/charts/legend';
   import { makeColorScale } from '../../utils/color';
   import { getConfiguration } from '../../configuration/config.svelte';
+  import { getLegendInteraction, createLegendInteraction } from './interaction.svelte';
 
   let { section }: { section: ContinuousLegendSection } = $props();
 
   const cfg = $derived(getConfiguration());
   const gradientId = `dct-grad-${Math.random().toString(36).slice(2)}`;
   const barWidth = $derived(section.width ?? 170);
+
+  const fmt = $derived(section.format ?? ((v: number) => String(v)));
+
+  const tickPositions = $derived(
+    section.interactive
+      ? []
+      : (section.ticks ?? []).map((v) => ({
+          v,
+          t: (v - section.min) / (section.max - section.min || 1),
+          label: fmt(v),
+        })),
+  );
+
+  // ── Drag-to-narrow-margins ────────────────────────────────────────────────
+  const interaction = getLegendInteraction() ?? createLegendInteraction();
+
+  // Seeded once from the section's own bounds (deliberately untracked — a
+  // later `section.min`/`max` change re-clamps the existing lo/hi instead of
+  // resetting them back out to the new full range, see below).
+  let lo = $state(untrack(() => section.min));
+  let hi = $state(untrack(() => section.max));
+
+  // `section.min`/`max` can shift under an already-active selection — e.g. a
+  // consumer swaps `data` for a different year on its own timeline, and the
+  // value that used to be the max is no longer present. Re-clamping (instead
+  // of leaving lo/hi at their old absolute values) keeps the handles inside
+  // whatever range now actually exists: the lower handle can only move up to
+  // meet a risen min, the upper handle can only move down to meet a fallen
+  // max. Clamping each bound against *both* of the new min/max first (not
+  // just its own side) keeps lo/hi from inverting if the domain shifts
+  // entirely past the old selection.
+  $effect(() => {
+    lo = Math.min(Math.max(lo, section.min), section.max);
+    hi = Math.max(Math.min(hi, section.max), section.min);
+  });
+
+  function toT(v: number): number {
+    return (v - section.min) / (section.max - section.min || 1);
+  }
+  const loT = $derived(toT(lo));
+  const hiT = $derived(toT(hi));
+
+  const colorDomain = $derived.by((): [number, number] =>
+    section.interactive && (section.mode ?? 'filter') === 'rescale' ? [lo, hi] : [section.min, section.max],
+  );
   const colorScale = $derived(
     makeColorScale(
-      section.min,
-      section.max,
+      colorDomain[0],
+      colorDomain[1],
       section.colorMin ?? cfg.continuous.min,
       section.colorMax ?? cfg.continuous.max,
     ),
   );
 
-  const fmt = $derived(section.format ?? ((v: number) => String(v)));
-
-  const tickPositions = $derived(
-    (section.ticks ?? []).map((v) => ({
-      v,
-      t: (v - section.min) / (section.max - section.min || 1),
-      label: fmt(v),
-    })),
-  );
-
   const stops = $derived(
     Array.from({ length: 20 }, (_, i) => {
       const t = i / 19;
@@ -34,6 +71,56 @@
       return { offset: t * 100, color: colorScale(v) };
     }),
   );
+
+  $effect(() => {
+    if (!section.interactive) return;
+    interaction.continuousRange =
+      lo <= section.min && hi >= section.max
+        ? null
+        : {
+            min: lo,
+            max: hi,
+            mode: section.mode ?? 'filter',
+            disabledStyle: section.disabledStyle ?? { opacity: cfg.legend.disabledOpacity },
+          };
+  });
+
+  function startDrag(which: 'lo' | 'hi') {
+    return (event: PointerEvent) => {
+      if (!section.interactive) return;
+      event.preventDefault();
+      const target = event.currentTarget as SVGElement;
+      target.setPointerCapture(event.pointerId);
+      const startX = event.clientX;
+      const startValue = which === 'lo' ? lo : hi;
+      const valuePerPixel = (section.max - section.min) / barWidth;
+
+      function onMove(e: PointerEvent): void {
+        const next = startValue + (e.clientX - startX) * valuePerPixel;
+        if (which === 'lo') {
+          lo = Math.max(section.min, Math.min(next, hi));
+        } else {
+          hi = Math.min(section.max, Math.max(next, lo));
+        }
+      }
+      function onUp(e: PointerEvent): void {
+        target.releasePointerCapture(e.pointerId);
+        target.removeEventListener('pointermove', onMove);
+        target.removeEventListener('pointerup', onUp);
+        target.removeEventListener('pointercancel', onUp);
+      }
+      target.addEventListener('pointermove', onMove);
+      target.addEventListener('pointerup', onUp);
+      target.addEventListener('pointercancel', onUp);
+    };
+  }
+
+  function resetHandle(which: 'lo' | 'hi') {
+    return () => {
+      if (which === 'lo') lo = section.min;
+      else hi = section.max;
+    };
+  }
 </script>
 
 <div class="dct-continuous" style:width="{barWidth}px">
@@ -56,14 +143,56 @@
         stroke-width="1"
       />
     {/each}
+
+    {#if section.interactive}
+      {#if loT > 0}
+        <rect x="0" y="0" width={loT * barWidth} height="12" rx="2" fill="currentColor" fill-opacity="0.35" />
+      {/if}
+      {#if hiT < 1}
+        <rect x={hiT * barWidth} y="0" width={barWidth - hiT * barWidth} height="12" rx="2" fill="currentColor" fill-opacity="0.35" />
+      {/if}
+      <circle
+        class="dct-continuous__handle"
+        cx={loT * barWidth}
+        cy="6"
+        r="6"
+        onpointerdown={startDrag('lo')}
+        ondblclick={resetHandle('lo')}
+        role="slider"
+        aria-label="Margen inferior"
+        aria-valuemin={section.min}
+        aria-valuemax={hi}
+        aria-valuenow={lo}
+        tabindex="0"
+      />
+      <circle
+        class="dct-continuous__handle"
+        cx={hiT * barWidth}
+        cy="6"
+        r="6"
+        onpointerdown={startDrag('hi')}
+        ondblclick={resetHandle('hi')}
+        role="slider"
+        aria-label="Margen superior"
+        aria-valuemin={lo}
+        aria-valuemax={section.max}
+        aria-valuenow={hi}
+        tabindex="0"
+      />
+    {/if}
   </svg>
 
   <div class="dct-continuous__labels" style:width="{barWidth}px">
-    <span class="dct-continuous__edge dct-continuous__edge--start">{fmt(section.min)}</span>
-    {#each tickPositions as tick (tick.v)}
-      <span class="dct-continuous__tick" style:left="{tick.t * barWidth}px">{tick.label}</span>
-    {/each}
-    <span class="dct-continuous__edge dct-continuous__edge--end">{fmt(section.max)}</span>
+    {#if section.interactive}
+      <span class="dct-continuous__tick dct-continuous__tick--handle-lo" style:left="{loT * barWidth}px">{fmt(lo)}</span>
+      <span class="dct-continuous__tick dct-continuous__tick--handle-hi" style:left="{hiT * barWidth}px">{fmt(hi)}</span>
+    {:else}
+      <span class="dct-continuous__edge dct-continuous__edge--start">{fmt(section.min)}</span>
+      {#each tickPositions as tick (tick.v)}
+        <span class="dct-continuous__tick" style:left="{tick.t * barWidth}px">{tick.label}</span>
+      {/each}
+      <span class="dct-continuous__edge dct-continuous__edge--end">{fmt(section.max)}</span>
+    {/if}
   </div>
 </div>
 
@@ -92,4 +221,31 @@
     position: absolute;
     transform: translateX(-50%);
   }
+  /*
+   * Anchored outward (not centered, unlike a plain tick) so the label always
+   * grows into the bar instead of over its own edge — a centered label at
+   * lo=min or hi=max would overflow past `.dct-chart`'s `overflow: hidden`
+   * and get clipped, exactly like the old fixed min/max edge labels never did.
+   */
+  .dct-continuous__tick--handle-lo,
+  .dct-continuous__tick--handle-hi {
+    font-weight: 600;
+  }
+  .dct-continuous__tick--handle-lo {
+    transform: none;
+  }
+  .dct-continuous__tick--handle-hi {
+    transform: translateX(-100%);
+  }
+  .dct-continuous__handle {
+    fill: currentColor;
+    stroke: var(--dct-bg, #fff);
+    stroke-width: 1.5;
+    cursor: ew-resize;
+    touch-action: none;
+  }
+  .dct-continuous__handle:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+  }
 </style>

package/dist/layout/legend/DiscreteSection.svelte

@@ -1,13 +1,42 @@
 <script lang="ts">
+  import { SvelteSet } from 'svelte/reactivity';
   import { getConfiguration } from '../../configuration/config.svelte';
   import { paletteColor } from '../../utils/color';
-  import type { DiscreteLegendSection } from '../../types/charts/legend';
+  import { getLegendInteraction, createLegendInteraction } from './interaction.svelte';
+  import type { DiscreteLegendSection, LegendItem } from '../../types/charts/legend';
   import type { LineStyle } from '../../types/plots/constants';
 
   let { section }: { section: DiscreteLegendSection } = $props();
 
   const cfg = $derived(getConfiguration());
   const columns = $derived(section.columns ?? 1);
+  const interaction = getLegendInteraction() ?? createLegendInteraction();
+
+  const seeded = new SvelteSet<string>();
+  $effect(() => {
+    for (const item of section.items) {
+      if (seeded.has(item.name)) continue;
+      seeded.add(item.name);
+      if (item.disabled) {
+        interaction.disabledSeries.set(item.name, section.disabledStyle ?? { opacity: cfg.legend.disabledOpacity });
+      }
+    }
+  });
+
+  function toggle(item: LegendItem): void {
+    if (!section.interactive) return;
+    if (interaction.disabledSeries.has(item.name)) {
+      interaction.disabledSeries.delete(item.name);
+    } else {
+      interaction.disabledSeries.set(item.name, section.disabledStyle ?? { opacity: cfg.legend.disabledOpacity });
+    }
+  }
+
+  function onKeydown(event: KeyboardEvent, item: LegendItem): void {
+    if (event.key !== 'Enter' && event.key !== ' ') return;
+    event.preventDefault();
+    toggle(item);
+  }
 
   function dashArray(style?: LineStyle): string | undefined {
     switch (style) {
@@ -25,8 +54,23 @@
 
 <div class="dct-discrete" style:grid-template-columns="repeat({columns}, max-content)">
   {#each section.items as item, i (item.name)}
-    {@const color = item.color ?? paletteColor(i, cfg.palette)}
-    <div class="dct-discrete__item" style:opacity={item.opacity ?? 1}>
+    {@const disabledStyle = interaction.disabledSeries.get(item.name)}
+    {@const color = disabledStyle?.fill ?? disabledStyle?.stroke?.stroke ?? item.color ?? paletteColor(i, cfg.palette)}
+    {@const itemOpacity = disabledStyle ? (disabledStyle.opacity ?? cfg.legend.disabledOpacity) : (item.opacity ?? 1)}
+    <div
+      class="dct-discrete__item"
+      class:dct-discrete__item--interactive={section.interactive}
+      style:opacity={itemOpacity}
+      {...section.interactive
+        ? {
+            role: 'button',
+            tabindex: 0,
+            'aria-pressed': disabledStyle != null,
+            onclick: () => toggle(item),
+            onkeydown: (e: KeyboardEvent) => onKeydown(e, item),
+          }
+        : {}}
+    >
       <svg class="dct-discrete__swatch" viewBox="0 0 15 10">
         {#if item.symbol === 'circle'}
           <circle cx="5" cy="5" r="4" fill={color} />
@@ -70,6 +114,14 @@
     align-items: center;
     gap: 0.35rem;
     min-width: 0;
+    transition: opacity 0.15s ease;
+  }
+  .dct-discrete__item--interactive {
+    cursor: pointer;
+  }
+  .dct-discrete__item--interactive:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
   }
   .dct-discrete__swatch {
     width: var(--dct-legend-swatch, 1.25rem);

package/dist/layout/legend/interaction.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { LegendInteractionStore } from '../../types/layout/legend';
+/** Create + register the shared legend-interaction store. Call during component init. */
+export declare function provideLegendInteraction(): LegendInteractionStore;
+/** Read the shared legend-interaction store, or `null` when there is no provider. */
+export declare function getLegendInteraction(): LegendInteractionStore | null;
+/** A private legend-interaction store for a legend/plot used outside of a {@link BaseChart}. */
+export declare function createLegendInteraction(): LegendInteractionStore;

package/dist/layout/legend/interaction.svelte.js

@@ -0,0 +1,24 @@
+import { getContext, setContext } from 'svelte';
+import { SvelteMap } from 'svelte/reactivity';
+const LEGEND_INTERACTION_KEY = Symbol('dct-legend-interaction');
+function blank() {
+    return {
+        disabledSeries: new SvelteMap(),
+        continuousRange: null,
+    };
+}
+/** Create + register the shared legend-interaction store. Call during component init. */
+export function provideLegendInteraction() {
+    const store = $state(blank());
+    setContext(LEGEND_INTERACTION_KEY, store);
+    return store;
+}
+/** Read the shared legend-interaction store, or `null` when there is no provider. */
+export function getLegendInteraction() {
+    return getContext(LEGEND_INTERACTION_KEY) ?? null;
+}
+/** A private legend-interaction store for a legend/plot used outside of a {@link BaseChart}. */
+export function createLegendInteraction() {
+    const store = $state(blank());
+    return store;
+}

package/dist/plots/bar/BarSegments.svelte

@@ -18,6 +18,7 @@
     isHorizontal,
     BarMark,
     defaultColor,
+    disabledFill,
   }: {
     group: VisualGroup<Series<TData>, BarSegmentStyle>;
     seriesIndex: number;
@@ -25,6 +26,7 @@
     isHorizontal: boolean;
     BarMark: typeof BarX | typeof BarY;
     defaultColor: string;
+    disabledFill?: { fill?: string; fillOpacity?: number };
   } = $props();
 
   const xFn = $derived(resolveAccessor(group.series.x));
@@ -39,7 +41,8 @@
     {...isHorizontal
       ? { y: xFn, x1: stackedBaselineFn, x2: stackedTopFn }
       : { x: xFn, y1: stackedBaselineFn, y2: stackedTopFn }}
-    fill={defaultColor}
+    fill={disabledFill?.fill ?? defaultColor}
+    fillOpacity={disabledFill?.fillOpacity ?? 1}
   />
 {:else}
   {#each group.visualSegments as seg, i (`${group.series.name}-${i}`)}
@@ -48,8 +51,8 @@
       {...isHorizontal
         ? { y: xFn, x1: barLayout.valueBaseline, x2: yFn }
         : { x: xFn, y1: barLayout.valueBaseline, y2: yFn }}
-      fill={seg.style.fill ?? defaultColor}
-      fillOpacity={seg.style.fillOpacity ?? 1}
+      fill={disabledFill?.fill ?? seg.style.fill ?? defaultColor}
+      fillOpacity={disabledFill?.fillOpacity ?? seg.style.fillOpacity ?? 1}
       {...barLayout.layout === 'grouped'
         ? isHorizontal
           ? {

package/dist/plots/bar/BarSegments.svelte.d.ts

@@ -11,6 +11,10 @@ declare function $$render<TData extends Record<string, unknown>>(): {
         isHorizontal: boolean;
         BarMark: typeof BarX | typeof BarY;
         defaultColor: string;
+        disabledFill?: {
+            fill?: string;
+            fillOpacity?: number;
+        };
     };
     exports: {};
     bindings: "";

package/dist/plots/bar/Plot.svelte

@@ -5,6 +5,8 @@
   import { SvelteMap } from 'svelte/reactivity';
   import { paletteColor } from '../../utils/color';
   import { buildSeries } from '../../utils/grouping';
+  import { getLegendInteraction } from '../../layout/legend/interaction.svelte';
+  import { disabledFillOverride } from '../utils/legendDisabled';
   import { BarX, BarY } from 'svelteplot';
   import { resolveAccessor } from '../utils/accessors';
   import { getConfiguration } from '../../configuration/config.svelte';
@@ -160,7 +162,14 @@
   // which drive tick/domain computation and the Pointer's hit-testing) —
   // `row` (see BasePlotLayout/HoverPoint) is what lets the template recover the
   // semantic category regardless of which axis it landed on.
-  const hoverPoints = $derived(buildHoverPoints(resolvedSeries, isHorizontal, barLayout, cfg.palette));
+  const legendInteraction = $derived(getLegendInteraction());
+  // A legend-disabled series is dimmed on the bar itself, but never surfaces
+  // in hover/tooltip — its points are simply absent from the candidate list.
+  const hoverPoints = $derived(
+    buildHoverPoints(resolvedSeries, isHorizontal, barLayout, cfg.palette).filter(
+      (p) => !legendInteraction?.disabledSeries.has(p.series!),
+    ),
+  );
 
   const hoverActive = $derived(tooltip != null || hasHoverMarker(markers));
   const hoverStrategy = $derived(resolveHoverStrategy(tooltip?.strategy, markers, categoricalAxis));
@@ -189,7 +198,8 @@
   <RuleLayout {markers} seriesData={resolvedSeries} {matchedPoints} {ruleX} {ruleY} {impliesRuleX} {impliesRuleY}>
   {#each groupedSeries as group, seriesIndex (group.series.name)}
     {@const defaultColor = paletteColor(seriesIndex, cfg.palette)}
-    <BarSegments {group} {seriesIndex} {barLayout} {isHorizontal} {BarMark} {defaultColor} />
+    {@const disabledFill = disabledFillOverride(legendInteraction?.disabledSeries.get(group.series.name))}
+    <BarSegments {group} {seriesIndex} {barLayout} {isHorizontal} {BarMark} {defaultColor} {disabledFill} />
 
     {#if showVals}
       <ValueLabels {group} {seriesIndex} {barLayout} {isHorizontal} {valAnchor} {fmtVal} values={styles.values} axisColor={cfg.axis.color} />

package/dist/plots/geo/Plot.svelte

@@ -13,6 +13,8 @@
   import { isTopology, topologyToGeoJson } from '../utils/topojson';
   import { makeColorScale } from '../../utils/color';
   import { getConfiguration } from '../../configuration/config.svelte';
+  import { getLegendInteraction } from '../../layout/legend/interaction.svelte';
+  import { disabledFillOverride } from '../utils/legendDisabled';
   import { GEO_MARGIN_ESTIMATE } from '../../layout/plot/margins';
   import BasePlotLayout from '../../layout/plot/BasePlotLayout.svelte';
   import GeoLayout from '../../layout/geo/GeoLayout.svelte';
@@ -165,8 +167,16 @@
     return vals.length ? [Math.min(...vals), Math.max(...vals)] : null;
   });
 
+  // ── Legend-driven range filter (mirrors HeatmapPlot's own) ────────────────
+  const legendInteraction = $derived(getLegendInteraction());
+  const range = $derived(legendInteraction?.continuousRange);
+  const effectiveDomain = $derived.by((): [number, number] | null => {
+    if (!valueDomain) return null;
+    return range && range.mode === 'rescale' ? [range.min, range.max] : valueDomain;
+  });
+
   const colorScale = $derived(
-    valueDomain ? makeColorScale(valueDomain[0], valueDomain[1], minColor, maxColor) : null,
+    effectiveDomain ? makeColorScale(effectiveDomain[0], effectiveDomain[1], minColor, maxColor) : null,
   );
 
   function resolveBaseFill(f: TaggedFeature): string {
@@ -177,6 +187,14 @@
     return styles.fill ?? cfg.palette[0];
   }
 
+  function rangeFilteredStyle(base: GeoSegmentStyle, f: TaggedFeature): GeoSegmentStyle {
+    const r = range;
+    if (r == null || !value) return base;
+    const v = value(f);
+    if (v == null || (v >= r.min && v <= r.max)) return base;
+    return { ...base, ...disabledFillOverride(r.disabledStyle) };
+  }
+
   /** Per-marker color ramp for a `dot` marker's `value` channel — independent of the base map's own choropleth ramp. */
   function makeDotColorScale(marker: GeoDotMarker): ((v: number) => string) | null {
     if (!marker.value) return null;
@@ -197,7 +215,7 @@
   // shared numeric-scale machinery collapses a per-row fillOpacity/strokeWidth
   // *accessor* to a single value, so literal per-call constants are required.)
   function getFeatureStyle(f: TaggedFeature): GeoSegmentStyle {
-    return resolveFeatureStyle<GeoSegmentStyle>(segments, f.__id);
+    return rangeFilteredStyle(resolveFeatureStyle<GeoSegmentStyle>(segments, f.__id), f);
   }
 
   type StyleGroup = { style: GeoSegmentStyle; data: TaggedFeature[] };
@@ -228,7 +246,18 @@
     features.flatMap((f) => geometryPartCentroids(f.geometry).map(([cx, cy]) => ({ ...f, __cx: cx, __cy: cy }))),
   );
 
-  const hoverPoints = $derived(hoverCandidates.map((f) => ({ x: f.__cx, y: f.__cy, row: f, label: f.__id })));
+  // A feature outside the active range is dimmed in place, but never
+  // surfaces in hover/tooltip — it's simply absent from the candidate list.
+  const hoverPoints = $derived(
+    hoverCandidates
+      .filter((f) => {
+        const r = range;
+        if (r == null || !value) return true;
+        const v = value(f);
+        return v == null || (v >= r.min && v <= r.max);
+      })
+      .map((f) => ({ x: f.__cx, y: f.__cy, row: f, label: f.__id })),
+  );
   const hoverGetX = (f: TaggedFeature) => f.__cx;
   const hoverGetY = (f: TaggedFeature) => f.__cy;
 

package/dist/plots/heatmap/Plot.svelte

@@ -5,6 +5,8 @@
   import { buildSeries } from '../../utils/grouping';
   import { makeColorScale } from '../../utils/color';
   import { getConfiguration } from '../../configuration/config.svelte';
+  import { getLegendInteraction } from '../../layout/legend/interaction.svelte';
+  import { disabledFillOverride } from '../utils/legendDisabled';
   import BasePlotLayout from '../../layout/plot/BasePlotLayout.svelte';
   import AxisLayout from '../../layout/plot/AxisLayout.svelte';
   import GridLayout from '../../layout/plot/GridLayout.svelte';
@@ -86,15 +88,6 @@
   const getY = $derived(resolveAccessor<TData>(resolvedSeries[0]?.y ?? y!));
   const getZ = $derived(resolveAccessor<TData>(resolvedSeries[0]?.z ?? z!));
 
-  const hoverPoints = $derived(
-    flat.map((d) => ({
-      x: getX(d) as AxisValue,
-      y: getY(d) as AxisValue,
-      row: d,
-      label: fmtVal(Number(getZ(d)), ''),
-    })),
-  );
-
   const xDomain = $derived([...new Set(flat.map((d) => getX(d) as AxisValue))]);
   const yDomain = $derived([...new Set(flat.map((d) => getY(d) as AxisValue))]);
 
@@ -106,8 +99,42 @@
     return vals.length ? [Math.min(...vals, 0), Math.max(...vals)] : [0, 1];
   });
 
+  // ── Legend-driven range filter ────────────────────────────────────────────
+  const legendInteraction = $derived(getLegendInteraction());
+  const range = $derived(legendInteraction?.continuousRange);
+  // 'rescale' reprojects the ramp onto the narrowed range; 'filter' (and no
+  // active range) keeps the original domain — only which cells are hidden
+  // changes.
+  const effectiveDomain = $derived.by((): [number, number] =>
+    range && range.mode === 'rescale' ? [range.min, range.max] : valueDomain,
+  );
+
+  function rangeFilteredStyle(base: CellSegmentStyle, value: number): CellSegmentStyle {
+    const r = range;
+    if (r == null || (value >= r.min && value <= r.max)) return base;
+    return { ...base, ...disabledFillOverride(r.disabledStyle) };
+  }
+
   const colorScale = $derived(
-    makeColorScale(valueDomain[0], valueDomain[1], minColor, maxColor),
+    makeColorScale(effectiveDomain[0], effectiveDomain[1], minColor, maxColor),
+  );
+
+  // A cell outside the active range is dimmed in place, but never surfaces
+  // in hover/tooltip — it's simply absent from the candidate list.
+  const hoverPoints = $derived(
+    flat
+      .filter((d) => {
+        const r = range;
+        if (r == null) return true;
+        const v = Number(getZ(d));
+        return v >= r.min && v <= r.max;
+      })
+      .map((d) => ({
+        x: getX(d) as AxisValue,
+        y: getY(d) as AxisValue,
+        row: d,
+        label: fmtVal(Number(getZ(d)), ''),
+      })),
   );
 
   const segList = $derived(segments.default ?? []);
@@ -152,7 +179,11 @@
   });
 
   const getCellStyle = $derived(
-    (d: TData) => segStyleMap.get(`${String(getX(d))}::${String(getY(d))}`) ?? {},
+    (d: TData) =>
+      rangeFilteredStyle(
+        segStyleMap.get(`${String(getX(d))}::${String(getY(d))}`) ?? {},
+        Number(getZ(d)),
+      ),
   );
 
   /**

package/dist/plots/line/Plot.svelte

@@ -8,6 +8,8 @@
   import { getConfiguration } from '../../configuration/config.svelte';
   import { paletteColor } from '../../utils/color';
   import { buildSeries } from '../../utils/grouping';
+  import { getLegendInteraction } from '../../layout/legend/interaction.svelte';
+  import { disabledStrokeOverride, disabledDotsOverride } from '../utils/legendDisabled';
   import BasePlotLayout from '../../layout/plot/BasePlotLayout.svelte';
   import AxisLayout from '../../layout/plot/AxisLayout.svelte';
   import GridLayout from '../../layout/plot/GridLayout.svelte';
@@ -50,6 +52,7 @@
   }: Props = $props();
 
   const resolvedSeries = $derived(series ?? buildSeries(data!, x!, y!, z));
+  const legendInteraction = $derived(getLegendInteraction());
 
   $effect(() => { validateSegments(segments); });
 
@@ -82,8 +85,11 @@
   const xAcc = $derived(resolveAccessor(resolvedSeries[0]?.x ?? ((d: TData) => d)));
   const yAcc = $derived(resolveAccessor(resolvedSeries[0]?.y ?? ((d: TData) => d)));
   const flat = $derived(resolvedSeries.flatMap((s) => s.data));
+  // A legend-disabled series is dimmed on the mark itself, but never surfaces
+  // in hover/tooltip — its points are simply absent from the candidate list.
   const hoverPoints = $derived(
     resolvedSeries.flatMap((s, idx) => {
+      if (legendInteraction?.disabledSeries.has(s.name)) return [];
       const sx = resolveAccessor(s.x);
       const sy = resolveAccessor(s.y);
       return s.data.map((d) => ({
@@ -131,6 +137,9 @@
   <RuleLayout {markers} seriesData={resolvedSeries} {matchedPoints} {ruleX} {ruleY} {impliesRuleX} {impliesRuleY}>
   {#each groupedSeries as group, seriesIndex (group.series.name)}
     {@const defaultColor = paletteColor(seriesIndex, cfg.palette)}
+    {@const disabledOverride = legendInteraction?.disabledSeries.get(group.series.name)}
+    {@const disabledStroke = disabledStrokeOverride(disabledOverride)}
+    {@const disabledDots = disabledDotsOverride(disabledOverride)}
     {#each group.visualSegments as seg, i (`${group.series.name}-${i}`)}
       {@const strokeStyle = seg.style.stroke}
       {@const lineData = seg.data as unknown as Record<string | symbol, never>[]}
@@ -138,12 +147,12 @@
         data={lineData}
         x={resolveAccessor(group.series.x)}
         y={resolveAccessor(group.series.y)}
-        stroke={strokeStyle?.stroke ?? defaultColor}
-        strokeWidth={strokeStyle?.strokeWidth ?? cfg.line.strokeWidth}
-        strokeOpacity={strokeStyle?.strokeOpacity ?? 1}
-        strokeDasharray={strokeStyle?.strokeDasharray}
-        strokeLinejoin={strokeStyle?.strokeLinejoin}
-        strokeLinecap={strokeStyle?.strokeLinecap}
+        stroke={disabledStroke?.stroke ?? strokeStyle?.stroke ?? defaultColor}
+        strokeWidth={disabledStroke?.strokeWidth ?? strokeStyle?.strokeWidth ?? cfg.line.strokeWidth}
+        strokeOpacity={disabledStroke?.strokeOpacity ?? strokeStyle?.strokeOpacity ?? 1}
+        strokeDasharray={disabledStroke?.strokeDasharray ?? strokeStyle?.strokeDasharray}
+        strokeLinejoin={disabledStroke?.strokeLinejoin ?? strokeStyle?.strokeLinejoin}
+        strokeLinecap={disabledStroke?.strokeLinecap ?? strokeStyle?.strokeLinecap}
       />
       {#if seg.style.dots}
         {@const dotStyle = seg.style.dots}
@@ -151,14 +160,14 @@
           data={seg.data}
           x={resolveAccessor(group.series.x)}
           y={resolveAccessor(group.series.y)}
-          r={dotStyle.dotRadius ?? cfg.line.dotRadius}
-          fill={dotStyle.dotFill ?? strokeStyle?.stroke ?? defaultColor}
-          symbol={dotStyle.dotSymbol ?? 'circle'}
-          stroke={dotStyle.dotStroke ?? strokeStyle?.stroke ?? defaultColor}
-          strokeWidth={dotStyle.dotStrokeWidth ?? 1}
-          fillOpacity={dotStyle.dotFillOpacity ?? strokeStyle?.strokeOpacity ?? 1}
-          strokeOpacity={dotStyle.dotStrokeOpacity ?? strokeStyle?.strokeOpacity ?? 1}
-          strokeDasharray={dotStyle.dotStrokeDasharray}
+          r={disabledDots?.dotRadius ?? dotStyle.dotRadius ?? cfg.line.dotRadius}
+          fill={disabledDots?.dotFill ?? dotStyle.dotFill ?? strokeStyle?.stroke ?? defaultColor}
+          symbol={disabledDots?.dotSymbol ?? dotStyle.dotSymbol ?? 'circle'}
+          stroke={disabledDots?.dotStroke ?? dotStyle.dotStroke ?? strokeStyle?.stroke ?? defaultColor}
+          strokeWidth={disabledDots?.dotStrokeWidth ?? dotStyle.dotStrokeWidth ?? 1}
+          fillOpacity={disabledDots?.dotFillOpacity ?? dotStyle.dotFillOpacity ?? strokeStyle?.strokeOpacity ?? 1}
+          strokeOpacity={disabledDots?.dotStrokeOpacity ?? dotStyle.dotStrokeOpacity ?? strokeStyle?.strokeOpacity ?? 1}
+          strokeDasharray={disabledDots?.dotStrokeDasharray ?? dotStyle.dotStrokeDasharray}
         />
       {/if}
     {/each}

package/dist/plots/pyramid/Plot.svelte

@@ -5,6 +5,8 @@
   import { getConfiguration } from '../../configuration/config.svelte';
   import { paletteColor } from '../../utils/color';
   import { buildSeries } from '../../utils/grouping';
+  import { getLegendInteraction } from '../../layout/legend/interaction.svelte';
+  import { disabledFillOverride } from '../utils/legendDisabled';
   import { buildGroupedSeries, validateSegments, resolveSegmentsForSeries, matchesSegmentX, getDataForSegments } from '../utils/segments';
   import BasePlotLayout from '../../layout/plot/BasePlotLayout.svelte';
   import AxisLayout from '../../layout/plot/AxisLayout.svelte';
@@ -65,6 +67,7 @@
   $effect(() => { validateSegments(segments); });
 
   const cfg = $derived(getConfiguration());
+  const legendInteraction = $derived(getLegendInteraction());
   const leftColor = $derived(styles.colors?.left ?? paletteColor(0, cfg.palette));
   const rightColor = $derived(styles.colors?.right ?? paletteColor(1, cfg.palette));
   const showVals = $derived(styles.values?.show ?? false);
@@ -134,15 +137,19 @@
   const getY = (d: TaggedRow) => d.__y;
   const labelFor = (d: TaggedRow) => d.__label;
 
+  // A legend-disabled series is dimmed on the bar itself, but never surfaces
+  // in hover/tooltip — its points are simply absent from the candidate list.
   const hoverPoints = $derived(
-    flat.map((d) => ({
-      x: d.__x,
-      y: d.__y,
-      row: d,
-      label: d.__label,
-      series: d.__series,
-      color: d.__side === 'left' ? leftColor : rightColor,
-    })),
+    flat
+      .filter((d) => !legendInteraction?.disabledSeries.has(d.__series))
+      .map((d) => ({
+        x: d.__x,
+        y: d.__y,
+        row: d,
+        label: d.__label,
+        series: d.__series,
+        color: d.__side === 'left' ? leftColor : rightColor,
+      })),
   );
 
   const yDomain = $derived([
@@ -216,14 +223,15 @@
     {#each groupedSeries as group (group.series.name)}
       {@const defaultColor = group.series.side === 'left' ? leftColor : rightColor}
       {@const getCategory = resolveAccessor(group.series.x)}
+      {@const disabledFill = disabledFillOverride(legendInteraction?.disabledSeries.get(group.series.name))}
       {#each group.visualSegments as seg, i (`${group.series.name}-${i}`)}
         <BarX
           data={seg.data}
           x1={0}
           x2={(d: TData) => signedValue(group.series, d)}
           y={getCategory}
-          fill={seg.style.fill ?? defaultColor}
-          fillOpacity={seg.style.fillOpacity ?? 1}
+          fill={disabledFill?.fill ?? seg.style.fill ?? defaultColor}
+          fillOpacity={disabledFill?.fillOpacity ?? seg.style.fillOpacity ?? 1}
         />
       {/each}
 

package/dist/plots/utils/legendDisabled.d.ts

@@ -0,0 +1,15 @@
+import type { LegendDisabledStyle } from '../../types/charts/legend';
+import type { StrokeStyle, DotStyle } from '../../types/plots/styling';
+/**
+ * The three per-mark override layers a legend "disabled" state can apply,
+ * derived once from a {@link LegendDisabledStyle}. Each is `undefined` when
+ * there's no active override, so call sites can slot the result in as just
+ * one more `??` layer ahead of their existing segment-style/default-color
+ * chain — no branching needed at the call site.
+ */
+export declare function disabledStrokeOverride(disabled: LegendDisabledStyle | undefined): StrokeStyle | undefined;
+export declare function disabledDotsOverride(disabled: LegendDisabledStyle | undefined): DotStyle | undefined;
+export declare function disabledFillOverride(disabled: LegendDisabledStyle | undefined): {
+    fill?: string;
+    fillOpacity?: number;
+} | undefined;

package/dist/plots/utils/legendDisabled.js

@@ -0,0 +1,41 @@
+/**
+ * The three per-mark override layers a legend "disabled" state can apply,
+ * derived once from a {@link LegendDisabledStyle}. Each is `undefined` when
+ * there's no active override, so call sites can slot the result in as just
+ * one more `??` layer ahead of their existing segment-style/default-color
+ * chain — no branching needed at the call site.
+ */
+export function disabledStrokeOverride(disabled) {
+    if (!disabled)
+        return undefined;
+    return {
+        stroke: disabled.stroke?.stroke,
+        strokeWidth: disabled.stroke?.strokeWidth,
+        strokeOpacity: disabled.stroke?.strokeOpacity ?? disabled.opacity,
+        strokeDasharray: disabled.stroke?.strokeDasharray,
+        strokeLinecap: disabled.stroke?.strokeLinecap,
+        strokeLinejoin: disabled.stroke?.strokeLinejoin,
+    };
+}
+export function disabledDotsOverride(disabled) {
+    if (!disabled)
+        return undefined;
+    return {
+        dotRadius: disabled.dots?.dotRadius,
+        dotFill: disabled.dots?.dotFill,
+        dotFillOpacity: disabled.dots?.dotFillOpacity ?? disabled.opacity,
+        dotSymbol: disabled.dots?.dotSymbol,
+        dotStroke: disabled.dots?.dotStroke,
+        dotStrokeWidth: disabled.dots?.dotStrokeWidth,
+        dotStrokeOpacity: disabled.dots?.dotStrokeOpacity ?? disabled.opacity,
+        dotStrokeDasharray: disabled.dots?.dotStrokeDasharray,
+    };
+}
+export function disabledFillOverride(disabled) {
+    if (!disabled)
+        return undefined;
+    return {
+        fill: disabled.fill,
+        fillOpacity: disabled.fillOpacity ?? disabled.opacity,
+    };
+}

package/dist/types/charts/legend.d.ts

@@ -1,5 +1,20 @@
 import type { SymbolType, LineStyle } from '../plots/constants';
+import type { StrokeStyle, DotStyle } from '../plots/styling';
 export type LegendSectionType = 'discrete' | 'continuous';
+/**
+ * Style applied to whatever a legend interaction has turned "off" — a
+ * toggled-off discrete series, or a datapoint/cell/feature outside an active
+ * continuous range filter. `opacity` is a blanket convenience: any
+ * `*Opacity` field a consumer doesn't set falls back to it, so
+ * `{ opacity: 0.1 }` alone is enough to read as "disabled" everywhere.
+ */
+export type LegendDisabledStyle = {
+    opacity?: number;
+    stroke?: StrokeStyle;
+    dots?: DotStyle;
+    fill?: string;
+    fillOpacity?: number;
+};
 export type LegendItem = {
     name: string;
     label?: string;
@@ -7,12 +22,18 @@ export type LegendItem = {
     symbol?: SymbolType;
     opacity?: number;
     lineStyle?: LineStyle;
+    /** Initial toggled-off state (uncontrolled — the user can still click it back on). */
+    disabled?: boolean;
 };
 export type DiscreteLegendSection = {
     type: 'discrete';
     title?: string;
     items: LegendItem[];
     columns?: number;
+    /** Enables click-to-toggle on each item. */
+    interactive?: boolean;
+    /** Style applied to a toggled-off item's series. Falls back to `cfg.legend.disabledOpacity`. */
+    disabledStyle?: LegendDisabledStyle;
 };
 export type ContinuousLegendSection = {
     type: 'continuous';
@@ -25,5 +46,15 @@ export type ContinuousLegendSection = {
     ticks?: number[];
     width?: number;
     format?: (v: number) => string;
+    /** Enables drag handles on the bar's edges to narrow the visible range. */
+    interactive?: boolean;
+    /**
+     * How the color ramp responds to a narrowed range: `'rescale'` reprojects
+     * it onto the new bounds, `'filter'` keeps the original domain and only
+     * excludes out-of-range values. Defaults to `'filter'`.
+     */
+    mode?: 'rescale' | 'filter';
+    /** Style applied to values outside the active range. Falls back to `cfg.legend.disabledOpacity`. */
+    disabledStyle?: LegendDisabledStyle;
 };
 export type LegendSection = DiscreteLegendSection | ContinuousLegendSection;

package/dist/types/configuration/styling.d.ts

@@ -37,6 +37,8 @@ export type ChartConfig = {
         gap: string;
         /** swatch square size */
         swatchSize: string;
+        /** Fallback opacity for a legend-disabled series/value when a section doesn't set its own `disabledStyle`. */
+        disabledOpacity: number;
     };
     axis: {
         color: string;

package/dist/types/layout/legend.d.ts

@@ -0,0 +1,26 @@
+import type { SvelteMap } from 'svelte/reactivity';
+import type { LegendDisabledStyle } from '../charts/legend';
+/**
+ * Shared legend-interaction state for cross-cutting legend → plot wiring.
+ *
+ * {@link BaseChart} provides one store via context (mirrors {@link HoverStore});
+ * `DiscreteSection`/`ContinuousSection` write to it on click/drag, and every
+ * plot kind (line/bar/pyramid/heatmap/geo) reads the same instance to know
+ * what to dim. A standalone legend/plot with no provider falls back to its
+ * own private store via `createLegendInteraction`.
+ */
+export type LegendInteractionStore = {
+    /** Legend item name → resolved style to apply. Presence in the map means "disabled". */
+    disabledSeries: SvelteMap<string, LegendDisabledStyle>;
+    /**
+     * The active drag state of the (first) interactive continuous section, or
+     * `null` when none is interactive or the user hasn't narrowed it yet (full
+     * range — nothing hidden).
+     */
+    continuousRange: {
+        min: number;
+        max: number;
+        mode: 'rescale' | 'filter';
+        disabledStyle: LegendDisabledStyle;
+    } | null;
+};

package/dist/types/layout/legend.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundar/data-chart-telling",
-  "version": "0.0.15",
+  "version": "0.0.17",
   "type": "module",
   "files": [
     "dist"