One long page that embeds eighteen sparkta2 outputs via <iframe>: five maps, five sparkta2-native chart types (donut, bar2, line2, divbar, barrace), one label-wrap demo, two sparkta (Chart.js) pass-through charts, and six v0.8.0 demos — higher-order dashtab() tabs that swap the whole figure (including its geography), checkbox-toggleable overlay layers with client-side region dissolve and a sparse "key counties" spotlight, an offline georeferenced raster underlay, chart-side dashtabs, and two combined examples stacking every new option in single calls. 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 data-skip-resize escape hatch (the only example on this page with a visible iframe scrollbar).
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
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
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
Same bivariate as section 1, with a faded 50-state outline drawn behind the focused Texas layer.
Source: s4_basemap.html
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
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
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
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
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
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
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
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.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
One HTML file, two aggregation levels. dashtab(level) renders one full map per level of the variable — where over() breaks out subgroups within a chart and by() makes small multiples, dashtab() switches between entirely different figures. With dashtabgeo(texas|texas_districts) dashtabidwidth(5 7), the Counties tab joins 254 counties against 5-digit FIPS and the School-districts tab joins 1,016 districts against 7-digit LEAIDs — each tab brings its own geography, legend quantiles, and controls.
Source: s13_dashtab_multigeo.html — built by build_v080_demos.do
The new Layers section of the controls panel gives every overlay its own on/off checkbox. overlays(region states keystudy) draws three: the states boundary mesh from the bundled TopoJSON; region, a plain variable in the dataset mapping each county to its Comptroller economic region — the engine dissolves the county polygons by that variable in the browser (topojson.merge) and draws the twelve labelled region outlines on top, no region shapefile anywhere in this page; and keystudy, a sparse variable filled in for just eight (fake, for demonstration) study counties — empty rows join no group, so the checkbox becomes a toggleable spotlight outlining only the flagged counties. maplabels adds toggleable county name labels (real names, via the crosswalk) that hold their size while you zoom. New in v0.8.1: the bins are classes(jenks) natural breaks (see the cutpoints in the legend, now titled by the variable label), a zoom-aware miles scalebar and northarrow frame the map, and each overlay carries its own style via overlaycolors()/overlaywidths()/overlaydash() — navy regions, gray state lines, dashed orange spotlight. And in v0.8.2 the base boundaries joined in: slate county borders via linecolor()/linewidth() and a styled backdrop outline via basemapcolor()/basemapwidth() — every line on the map is now set from the Stata command line.
Source: s14_overlays_regions.html — built by build_v080_demos.do with data/comptroller_regions.csv
rasterimage() + rasterbounds(west south east north) embed a georeferenced image inside the HTML as a base64 data URI — still one self-contained file, no tile server, no network at view time. The image (here a synthetic gradient surface standing in for a satellite composite or model output) is stretched between its projected corner coordinates beneath the data layer, with its own Layers checkbox and opacity set by rasteropacity(). projection(mercator) keeps the alignment exact; under the default Albers the pixels stay straight while the graticule bends, so treat that combination as decorative.
Source: s15_raster_underlay.html — built by build_v080_demos.do with data/demo_raster_surface.png
The same higher-order tabs work on the native chart types. Here a horizontal bar2 switches between the twelve highest-poverty counties and the twelve Comptroller-region averages — each tab is a complete re-render at a different aggregation level, produced by one sparkta2 ..., type(bar2) dashtab(level) call on a stacked dataset.
Source: s16_chart_dashtab.html — built by build_v080_demos.do
The v0.8.0 layers compose with all of the existing interactivity. One call: a bivariate poverty-vs-uninsured map behind dashtab(level) tabs that switch aggregation level — the Counties tab shows each county's own values; the Region-averages tab paints the twelve Comptroller-region means (collapsed in Stata, stacked long) across the same county geometry, so the dissolved region outlines line up exactly with the color blocks. Plus the sparse keystudy spotlight (dashed orange, via the v0.8.1 overlay styling options), classes(jenks) natural-break axes, a zoom-aware miles scale bar, county name labels, a region filter dropdown, a poverty-rate range slider, name search, swap-axes, and the Export menu pinned to the bottom-right corner via downloadpos(below). Switch tabs and the whole stack — data, quantiles, overlays, controls — re-renders at the other aggregation level.
Source: s17_kitchen_sink.html — built by build_v080_demos.do
dashtab() is not only for geography. Stack two measures long — one value column, a labelled measure variable — and dashtab(measure) dashtabstyle(buttons) turns the tab bar into pill buttons that flip the same counties between poverty rate and uninsured rate. Composed here with the offline raster underlay (rasterimage(), mercator-aligned) and the dissolved region outlines on top.
Source: s18_measure_switch_raster.html — built by build_v080_demos.do
Built with sparkta2 v0.8.0 + 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).