Semiotic 3.12.0 adds network perspectives and accessible controls inside charts, reduces the code shipped by named imports, and brings more of the live chart's appearance into server exports. Read thefull changelogfor the individual changes.
A chart can be a place to work
A network diagram can explain where systems sit and how they connect. A histogram can let a reader move a threshold and see the consequences. Those interactions need to remain readable with a keyboard, and the exported chart needs to preserve the same visual claim. This release extends those possibilities while reducing the cost of importing the charts that implement them.
Network perspective
Every network chart accepts perspective: isometric, pixel, dimetric, military, or cabinet projection. The layout retains its coordinates while the finished scene gains depth. Hover, tooltips, keyboard focus, annotations, zoom, component SSR, and static SVG follow the projected marks.
The object form adds elevation, extruded leaf rectangles, ground grids, plates, labelled regions, routing, glyphs, and animated transitions. semiotic/network/perspective exports glyph builders and PerspectiveToggle. Custom layouts can place decorations on the projected ground or keep them upright at a node's anchor. Theperspective guide explains the prop shapes and fitting behavior.
Reach for perspective when depth or a spatial metaphor helps explain a system. Keep a flat view for precise comparison of areas and lengths; ProcessSankey's elapsed-time axis is especially sensitive to projection. Configuration diagnostics warn about that combination.
Direct manipulation controls
XY and ordinal frames accept interactiveGraphics through frameProps. The callback receives scales and pointerToPlot, so controls can use the chart's own coordinate system. Their focusable SVG layer sits in a labelled group outside the chart's image role, keeping sliders exposed to assistive technology.
DirectManipulationMarkers supplies ordered handles bounded by their neighbors. Coincident handles separate according to drag direction.DirectManipulationControl adds pointToValue, stepOrigin, PageUp/PageDown, and keyboard start/end callbacks. Use these for thresholds and ranges that readers should adjust in context; use an ordinary form control when the setting has no useful relationship to chart geometry. Seevisualization controls.
Smaller named imports
Named imports now discard unrelated charts from shared published chunks. Components retain their DevTools names, and plugin registration happens when charts render. XY animation interpolation also loads on demand. The README's cold-consumer table separates initial-load gzip from code fetched later, so it better reflects a code-splitting application.
Continue using family imports such as semiotic/xy and semiotic/network. No import migration is required to benefit from the improved tree-shaking.
Rendering, annotations, and tooltips
- Component SSR paints final data geometry even when intro animation is enabled. Static backgrounds, force-graph category colors, and curved edge opacity more closely match the live chart.
- Canvas and SVG hatches share angle, spacing, and opacity behavior. AreaChart semantic gradients follow the y-domain; custom area gradients can opt in with
extent: "domain". - Threshold and band annotations accept
labelColor. RealtimeHistogram and TemporalHistogram accept valueBandsfor unstacked bars, preserving one bin datum per mark. - Tooltip placement transitions ease same-side movement and skip the first placement and flips. Compact legends preserve room for the plot, and keyboard-focused data-table links remain visible.
- Validation and CLI doctor diagnostics suggest corrections for unknown axis keys and likely annotation field typos.
Upgrade notes
Install with npm install semiotic@3.12.0. The new APIs are additive; review these corrected behaviors when updating visual snapshots or handling control events:
- Hatches: positive angles turn clockwise from horizontal on both backends. SVG's previous direction was mirrored. Canvas hatches at ±45° are about 1.4 times sparser; divide spacing by 1.41 to preserve the old density. The recipe kit's SVG
hatchFill helper retains its separate angle convention measured from vertical. - Controls: keyboard changes now fire
onChangeStart and onChangeEnd. Consumers that commit on release should handle those events for keyboard input too. The default slider announcement uses its standard role; supply ariaRoleDescription only when you need a custom one. - Server output: animated charts now export their final state. Check snapshots affected by hatch direction, semantic gradient stops, backgrounds, category colors, or compact legend reservations.
- Low-level network frames: a bare force frame restores its built-in layout on demand in the browser. Server rendering still needs explicit
registerBuiltInNetworkLayouts().
The migration guide covers the broader version-3 API. The tagged changelog above records this minor release's behavior changes.