sparkta2 demo -- maps, native D3 charts, sparkta pass-through

One long page that embeds twelve sparkta2 outputs via <iframe>: five maps, five sparkta2-native chart types (donut, bar2, line2, divbar, barrace), one label-wrap demo, and two sparkta (Chart.js) pass-through charts. Every sparkta2-native iframe auto-resizes to its content so it does not get clipped behind a scrollbar. Section 11 deliberately opts out of auto-resize to demonstrate the <code>data-skip-resize</code> escape hatch (the only example on this page with a visible iframe scrollbar).

1. Bivariate choropleth -- full interactive UI

Two-variable joint quantile map of poverty rate (x) and uninsured rate (y) for Texas counties. Mode toggle, filters, sliders, search, swap-axes, and the Export dropdown. Hover for tooltips with three extra variables.

Source: s1_bivariate_full.html

2. Univariate choropleth -- Texas-tuned projection

Single-variable map of poverty rate. v0.6.1 switched the default projection for geo(texas) from d3.geoAlbersUsa() to a Texas-tuned d3.geoAlbers(), dropping the panhandle's lean from ~3 degrees to ~1 degree.

Source: s2_choropleth_texas.html

3. Hexbin -- spatial aggregation of county centroids

Hexagonal binning over 254 county centroids, mean poverty rate per hex (radius 22). Animates in via IntersectionObserver as the section scrolls into view.

Source: s3_hexbin.html

4. Bivariate + faded US-state basemap

Same bivariate as section 1, with a faded 50-state outline drawn behind the focused Texas layer.

Source: s4_basemap.html

5. Donut chart -- sparkta2-native (v0.7.0)

Five-slice ring chart of synthetic postsecondary enrollment by sector, in the Texas 2036 palette. Centre label shows the total automatically. Export menu offers PNG / SVG / Print to PDF / Download CSV / View data table.

Source: s5_donut.html

6. Native horizontal bar2 -- with v0.6.0 features

Mean poverty rate by region, sparkta2-native bar2. Inherits the v0.6.0 Export menu, the datatable option, and animate. Hover a bar for the per-region uninsured rate as a tooltip extra.

Source: s6_bar2_horizontal.html

7. Native line2 -- three series, 2018-2024

Multi-series line via over(). Three synthetic series (statewide, ESC 4, ESC 13) over a six-year span; monotone-X curve, dot tooltips per point.

Source: s7_line2_multi_series.html

8. Diverging stacked bar -- Pew-style Likert (v0.7.0)

Five long survey items rendered Pew-style: wrapped item text in the left margin, central zero baseline, direct % labels inside each segment, net favourability column on the right, no bottom axis.

Source: s8_divbar.html

9. Bar chart race -- Texas top counties, 2010-2024

Animated race across 15 frames. 2019-2024 values are real Census PEP estimates; 2010-2018 are synthetic random-walk backwards from each county's 2019 value (~1% YoY drift, set seed 1029384) so the race has enough movement to be interesting. Don't read the early years as facts.

Source: s9_barrace.html

10. Same bar2 -- wraplabel(off) + gutterwidth(140)

Identical input to section 6, but with v0.7.3 label-wrap controls: force single-line labels and shrink the left gutter to 140 px. Labels that would overflow get truncated with an ellipsis. Useful for narrow grid embeds.

Source: s10_bar2_truncate.html

11. sparkta pass-through -- scatter + lfit + CI

Non-map types fall through to Fahad Mirza's sparkta package (Chart.js). Same dataset rendered as a scatter plot with a linear-fit line and CI band.

Source: s11_sparkta_scatter.html

Note: this iframe deliberately shows a scrollbar. The sparkta (Chart.js) pass-through does not emit the sparkta2-resize postMessage that the parent listener uses to resize each iframe to match its content height. Rather than silently clipping the scatter, this section opts out of auto-resize with data-skip-resize="1" and lets the iframe render a native scrollbar. Every other section embeds a sparkta2-native output that speaks the resize protocol, so they fit their content with no scrollbar.

12. sparkta pass-through -- bar over region, stat(mean)

Same call shape used in existing _datashare do-files: type(bar) over(varname) stat(mean) with multiple y-variables. v0.7.1 keeps this path unchanged; opt in to sparkta2's D3-native bar by changing type(bar) to type(bar2).

Source: s12_sparkta_bar.html

Built with sparkta2 v0.7.8 + webdoc2. Each iframe is independent; the postMessage listener loaded below resizes every sparkta2-native iframe to match its content height (and sets scrolling="no"), except for iframes marked with data-skip-resize="1", which keep their declared height and native scrollbar (see section 11).