dciWebMapper2: Client-Side Geovisualization
- dciWebMapper2 is a web-based geovisualization framework that integrates coordinated maps, statistical charts, and data tables for exploratory spatial analysis.
- It employs a client-side, server-free architecture using libraries like Leaflet, D3.js, and Crossfilter to enable linked, bidirectional filtering and interactive analytics.
- The framework supports applications across public health, transportation safety, and social justice with features such as time sliders, heatmaps, and projection switching.
dciWebMapper2 is a substantial extension of the original dciWebMapper framework for integrated, interactive geovisualization and exploratory spatial analysis in a fully client-side, open-source, and self-contained environment. It coordinates multi-type maps—choropleth, proportional symbol, small multiples, and heatmaps—with linked statistical charts, time sliders, data tables, and light-weight spatial analytics to support cross-filtered, bidirectional exploration of space, time, and attributes. The framework is presented as a server-free foundation for research, education, and civic engagement across domains including public health, transportation safety, environmental/climate justice, food access, and social vulnerability (Sarigai et al., 9 Sep 2025).
1. Conceptual scope and design objectives
dciWebMapper2 was introduced in response to a recurrent problem in web-based geovisualization: spatial datasets are increasingly multi-attribute and time-aware, yet many existing tools remain map-centered and do not provide systematic, linked multi-view analytics or accessible, inclusive design. The framework therefore emphasizes coordinated views in which thematic maps, charts, and tables are not merely colocated, but operationally linked through dynamic cross-filtering and multi-perspective reasoning (Sarigai et al., 9 Sep 2025).
The system extends the coordinated-view philosophy and modular architecture of the original dciWebMapper beyond point-based marker maps. Its principal enhancements include integrated multi-type maps; expanded linked statistical charts; coordinated, bidirectional updates across maps, charts, and data tables; time-aware interaction through a date/range slider; browser-based spatial selection and filtering; heatmap modes for cluster and hotspot exploration; SVG reprojection support; two layout options tailored to geography and task; and usability-oriented additions such as interface redundancy, scrollable legends, clear layer controls, spiderfy clustering for overlapping points, informative popups, demo videos, and documentation modules (Sarigai et al., 9 Sep 2025).
A central design objective is high-dimensional comparison without excessive visual clutter. To that end, dciWebMapper2 uses dropdown-driven variable switching within maps and charts, and complements this with small multiples when simultaneous side-by-side comparison is preferable. This design aligns cartographic and information-visualization principles with exploratory analysis workflows in which users must compare variables, scales, and temporal slices while moving between spatial and non-spatial views.
2. Architecture and coordinated-view mechanics
The framework uses a client-side, server-free architecture in which all logic runs in the browser and libraries are bundled directly within each app, avoiding external server dependencies. The implementation target is a modern web browser, with no build system or server required; applications can run locally or be hosted as static websites (Sarigai et al., 9 Sep 2025).
Its software stack combines Leaflet.js for interactive maps and controls; Leaflet.MarkerCluster for clustering and spiderfy; assorted Leaflet plugins such as minimap, measurement, and layer controls; D3.js for data binding and SVG rendering; DC.js for chart components and coordinated-view binding; Crossfilter.js for fast multidimensional filtering; DataTables for tabular interaction; ion.RangeSlider.js for range sliders; Turf.js for spatial operations; Leaflet-Geoman for geometry drawing and editing; and jQuery and Bootstrap for interface scaffolding (Sarigai et al., 9 Sep 2025).
The coordinated-view logic is organized around shared datasets and Crossfilter dimensions and groups. “Crossfilterable” components define views over a common dataset; user interactions such as brush, click, or dropdown selection update filters in Crossfilter; DC.js then triggers redraws of charts and map layers bound to the filtered dataset. Linked updates are bidirectional: map selections can filter charts and tables, and table-row selection can filter maps and charts. The framework also supports array filter/dimension tags in DC.js for multi-valued attributes stored in a single field, exemplified by values such as “blood, liver, lung” (Sarigai et al., 9 Sep 2025).
This architecture places dciWebMapper2 in the family of coordinated multiple views rather than standalone mapping widgets. Its technical significance lies less in a new rendering engine than in the integration of filtering, linked interaction, and modular composition under a static-deployment model. A plausible implication is that its reproducibility claims derive directly from this architectural choice: when applications are self-contained and server-free, redistribution and long-term hosting become simpler than in systems requiring external back-end services.
3. Visualization repertoire and interaction model
dciWebMapper2 supports several thematic map types. Choropleth maps provide dropdown-enabled thematic mapping over area units, including normalized and percentile indicators such as SVI scores, CEJST burdens, and food-access flags, rendered with color-gradient legends and popups. Proportional symbol maps encode absolute magnitudes by symbol size and can be combined with color for bivariate mapping. Heatmaps provide density-based views of high-volume point data in both static/global and filterable/local modes. Small multiples offer side-by-side choropleth panels for comparative reading across variables and projections (Sarigai et al., 9 Sep 2025).
Its linked statistical graphics include histograms with adjustable bin size and brushing, boxplots for distribution summaries and group comparisons with clickable ranges and outliers, stacked bar charts for categorical breakdowns, scatter plots with regression lines and polygon-based brushing, and donut charts for categorical distributions with scrollable legends. Data tables function as an additional analytic view rather than a passive appendix, because they participate in bidirectional filtering (Sarigai et al., 9 Sep 2025).
Interaction propagates across all views. Hover tooltips and popups expose local detail; clicking map units and symbols selects subsets; brushing in charts restricts the data universe; polygon, rectangle, and circle tools support spatial selection; dropdowns switch variables or apply filters; and time sliders provide temporal filtering. In point-based applications, Leaflet.MarkerCluster reduces clutter and interaction cost, while spiderfy clustering resolves dense overlaps. For polygon and point layers, spatial filtering and point-in-polygon queries are carried out in the browser through Leaflet-Geoman and Turf.js (Sarigai et al., 9 Sep 2025).
The framework also provides reprojection support in SVG layers, including Albers equal-area conic, cylindrical/equirectangular/Web Mercator, and azimuthal stereographic. In area-based thematic mapping, this matters because projection choice changes visual interpretation of areal extent. The inclusion of projection switching in the same interactive environment therefore links cartographic design and exploratory analysis rather than treating projection as a preprocessing decision.
4. Data structures, configuration, and analytic affordances
dciWebMapper2 supports point data, area-based polygon data, and raster-like heatmap layers. Case-study workflows included Python-based integration of multi-attribute tract-level data keyed by census tract IDs, as well as cleaning of point datasets to remove georeferencing errors. The framework’s data model therefore assumes stable keys for synchronized filtering across views, such as census tract IDs for polygons or unique sample and crash IDs for points (Sarigai et al., 9 Sep 2025).
Configuration occurs through interface elements embedded in the application. Maps can expose dropdowns for variable selection; scatter plots can allow axis selection; histograms can allow bin-size selection; range and time sliders can filter temporal extents; layer controls can manage basemaps, boundaries, heatmaps, and overlays; and SVG maps can expose projection-selection dropdowns. Color themes and legends are synchronized with selected variables, while donut-chart legends are both scrollable and filterable (Sarigai et al., 9 Sep 2025).
The framework incorporates light-weight spatial analytics rather than formal spatial-statistical inference. Spatial selection and filtering are implemented in the browser, and scatter plots with regression lines support exploratory correlation analysis. The paper explicitly does not present formal equations for choropleth break optimization, proportional-symbol scaling, heatmap or kernel-density estimation, regression, or spatial autocorrelation such as Moran’s I. It discusses cartographic considerations and references classification work such as Jenks/Natural Breaks, but it does not enumerate specific classification algorithms used nor provide formal objective functions for choropleth break selection in the implementation (Sarigai et al., 9 Sep 2025).
This distinction is methodologically important. dciWebMapper2 is designed for exploratory spatial analysis and transparent geospatial reasoning rather than as a formal inferential engine. A common misunderstanding would be to interpret its linked regression lines or heatmaps as a substitute for explicit statistical modeling; the documented implementation supports visual analysis and filtering, but the paper does not claim formal model estimation or full spatial-statistical diagnostics.
5. Applied implementations
The framework is demonstrated through three case studies that illustrate its domain adaptability. These are not abstract templates; each use case combines domain-specific data preparation with different choices of maps, charts, and interactions (Sarigai et al., 9 Sep 2025).
| Use case | Data and setting | Notable components |
|---|---|---|
| iPathogenTrackingMap | Panama, 1990–2020; small-mammal host samples, CHOV screening results, socioeconomic layers | Clustered marker map with spiderfy, choropleth positive rate, proportional symbol counts, donuts, row chart, time slider, boxplots, scatter plots, stacked bar, line series, species filters |
| iNMsocialJusticeMap | New Mexico tracts; SVI, CEJST, USDA Food Access | Three dropdown-enabled choropleths, small multiples with projection switching, donuts, bars, histograms, scatter plots with regression and axis selection |
| iABQtrafficCrashMap | Albuquerque, 2010–2023; severe crash records | Crash distribution with popups, spatial selection tool, layer controls, heatmaps, local filterable heatmap, time slider, select menus, row charts |
In iPathogenTrackingMap, coordinated views reveal spatial-temporal patterns and correlates of disease risks, while interface redundancy supports diverse user tasks. In iNMsocialJusticeMap, the integration of SVI, CEJST, and USDA Food Access supports high-dimensional comparisons across justice domains and foregrounds projection awareness for area-based analyses. In iABQtrafficCrashMap, spatial and temporal filtering support corridor- and neighborhood-level crash exploration, and the paper states that this use case supports Vision Zero goals through hotspot detection and focused spatial selection (Sarigai et al., 9 Sep 2025).
These applications also function as evidence for deployment practice. The framework’s apps are hosted on GitHub Pages for open access, accompanied by demo videos, and the code and assets are packaged within each app. Transparent documentation and openly available case-study apps and datasets are presented as part of the framework’s reproducibility model (Sarigai et al., 9 Sep 2025).
6. Accessibility, positioning, and limitations
Accessibility and inclusivity are explicit design principles. dciWebMapper2 emphasizes interface redundancy through status bars, synchronized highlights, explanatory tooltips, legends, and a data table so that multiple pathways reinforce understanding across different cognitive and perceptual preferences. The framework also uses color-blind-friendly palettes and consistent thematic colors across maps and charts, together with clear navigation bars, anchored status bars, scrollable legends, a mini-map, and concise titles to support spatial storytelling and user orientation (Sarigai et al., 9 Sep 2025).
In relation to other tools, the framework is positioned against web mapping libraries that provide standalone maps or unlinked charts. Its distinguishing characteristics are the coordinated-view architecture, linked multi-type views, dropdown-enabled high-dimensional comparisons, spatial selection and Turf.js analysis in the browser, projection switching, small multiples, interface redundancy, and an open-source, self-contained design without server-side dependencies (Sarigai et al., 9 Sep 2025).
The principal limitation identified in the paper is scale. Large or frequently updated datasets may strain the client-only architecture, and future work is suggested in the form of optional server-side indexing or preprocessing. Additional proposed extensions include moving beyond bivariate linked views to multivariate and 3D mapping, adding bivariate and multivariate choropleths, incorporating spatial statistics such as spatial autocorrelation, and continuing formal usability studies with broader user feedback (Sarigai et al., 9 Sep 2025).
A separate issue concerns nomenclature. Despite the suffix “2,” dciWebMapper2 is documented as a second-generation geovisualization framework rather than as the topological “2-Mapper” construction. A different paper on “Multiscale 2-Mapper” discusses a prospective web-based 2-Mapper or Multiscale Mapper tool “such as a prospective dciWebMapper2,” but also states that it does not name dciWebMapper2 specifically. This suggests a possible conceptual analogy in web-based exploratory analysis, but not an identity between the geovisualization framework and the topological data-analysis system (Fritze, 26 Sep 2025).