Map

A Choropleth Map in REAVIZ is a thematic map where areas are shaded or patterned in proportion to the measurement of a statistical variable, such as population density or per-capita income. This map type makes it easy to visualize how a measurement varies across a geographic area or shows the level of variability within a region.

When to use:

• Visualize Geographic Data: Ideal for displaying data that varies across different regions.
• Show Regional Patterns: Useful for highlighting regional patterns and differences.
• Analyze Demographic Data: Great for analyzing data such as population density, income levels, or election results.

Quick Start

To get started with the map chart, you need to add some extra depedencies to your application:

• topojson-client
• world-atlas

Making these extra make it the bundle smaller and gives you more control of what data you import into your chart.

import { Map, MapMarker } from 'reaviz';
import { feature } from 'topojson-client';
import geojson from 'world-atlas/countries-110m.json';


const worldData = feature(geojson, geojson.objects.countries);


export default function App() {
  return (
    <Map
      data={worldData}
      height={350}
      width={400}
      markers={[
        <MapMarker coordinates={[-122.490402, 37.786453]} />,
        <MapMarker coordinates={[-58.3816, -34.6037]} />,
        <MapMarker coordinates={[-97.7437, 30.2711]} tooltip="Austin, TX" />
      ]}
    />
  );
}

In the above example, we can pass an array of MapMarkers which contain longitude and latitude coordinates for the location. Optionally, a tooltip can be defined on hover.

Examples

API

Map (opens in a new tab)

MapMarker (opens in a new tab)