Choropleth Map
Monthly active users of a web service by country, the data centers that serve them and the traffic between the data centers. Unovis draws it with TopoJSONMap. Every library gets the same country shapes and the same Blues color scheme.
Pick a preset to reconfigure every chart
What to look for
- Countries, points and links in one component. Unovis draws all three from the TopoJSON. ECharts combines a
geocomponent with map, scatter and lines series. The Chart.js geo plugin adds the data centers as a second,bubbleMapdataset; the Nivo demo draws the countries only, since its choropleth would draw the data centers as GeoJSON points of one fixed size. Neither draws links. Observable Plot layersgeo,dotandlinkmarks on one projection, and Vega-Lite layersgeoshape,circleandrulemarks. TanStack Charts draws each layer with ageoShapemark and has no text marks for maps, so the data centers are unlabeled. - Flows. Unovis sends particles along the links (
enableFlowAnimation), and ECharts does too (effect). Observable Plot draws its links as geodesics, so the long ones bend around the edge of the globe. - Fit and zoom. Unovis fits the map to its container and lets you zoom and pan, and so does ECharts. Nivo needs a projection scale that suits the container size, and neither Nivo nor Chart.js zooms. Vega-Lite fits its projection to the data; neither it nor Observable Plot zooms, and neither does TanStack Charts. Its tooltip snaps to the nearest feature's center, so near the edge of a large country it can name a neighbor.
- Color legend. Unovis places a RollingPinLegend above the map. ECharts (
visualMap) and the Chart.js geo plugin draw a color legend inside the chart, and Nivo draws one with itslegendsprop. - Projections. Unovis ships 30 projections (
MapProjection, from d3-geo and d3-geo-projection) and takes any d3 projection; the demo uses its default, Kavrayskiy VII. Nivo has 10 (projectionType, Mercator by default), and the Chart.js geo plugin takes any d3-geo projection (Equal Earth here, as in its docs). ECharts draws plain longitude and latitude unless you pass your own projection functions, and AG Charts maps are always Mercator. Observable Plot has 14 named d3-geo projections and Vega-Lite 15. - Presets. Mercator switches the projection (
projection), and every library follows: ECharts takes a d3-geo projection as a pair of functions, and Nivo draws Mercator already. Country labels names the countries (areaLabel) and hides the names that would cover a larger country's name, a data center or its label, or run off the map. ECharts and Chart.js hide a name that would cover another. Chart.js, with the official datalabels plugin (display: 'auto'), keeps the one earlier in the data, so the countries go largest first. ECharts keeps the one on the larger shape (labelLayout: { hideOverlap: true }), but itsgeocomponent's own labels skip label layout, so the names are a series of bare labels; these all tie, and it too keeps the earlier one. In both, a name can still cover a data center or run off the map. Observable Plot and Vega-Lite draw every name, overlapping or not, and Nivo and TanStack Charts have no labels on the map. Traffic bubbles sizes the data centers by the traffic through them (pointRadius); every library that draws them can, but Nivo has no option to size a GeoJSON point.
Feature comparison
| Feature | Unovis1.8.0 | Recharts3.10.1 | Chart.js4.5.1 | ECharts6.1.0 | Nivo0.99.0 | AG Charts14.2.0 | Observable Plot0.6.17 | Vega-Lite6.5.0 | TanStack Charts1.1.0 |
|---|---|---|---|---|---|---|---|---|---|
| Choropleth (TopoJSON / GeoJSON) | |||||||||
| Flow map | |||||||||
| Map projections | |||||||||
| Zoom and pan a map | |||||||||
| Tooltip | |||||||||
| Dark mode | |||||||||
| Rendering | SVG | SVGSource | CanvasSource | Canvas or SVGSource | SVG, Canvas or HTMLSource | CanvasSource | SVGSource | Canvas or SVGSource | SVG or CanvasSource |
Every cell links to its source. See how we compare for the rules we followed.