react-geo-grapher is a library that allows you to display quantitative data across sections of a geographic region.

You must have a geojson file that matches the desired region and this file must follow a specific structure.
see this example.

Install

Using npm:

npm install react-geo-grapher

Using yarn:

yarn add react-geo-grapher

For the library to work correctly it is necessary to add the following line to the .env at the root of the project.

SKIP_PREFLIGHT_CHECK=true

BarMap

      // import your geojson file
      import goias from "./goias.json"
      import {BarMap} from  'react-geo-grapher'

      ...

      // Set the properties
      <BarMap
        style={{ width: "400px", background: "#ffffff" }}
        geojson={goias}
        percents={[40, 30, 30]}
        colors={['#040DA6', '#10863C', '#920B8E']}
        scale={5500}
      />

Properties

Parameter	Type	Definition
percents	Array<number>	Each array index will correspond to a section in the map, the sum of array values ​​must equal 100, all numbers must be integers.
colors	Array<string>	Each index of the array will match the color of a section on the map.
geojson	Feature or FeatureCollection or any	Geojson file.
style	CSSProperties or undefined	Css properties that will be applied to the </div> around the map.
scale	number	Property from ComposableMapProps that scale the geojson on the map.
ComposableMapProps?	ComposableMapProps	More details here
ZoomableGroupProps?	ZoomableGroupProps	More details here

LineMap

      // import your geojson file
      import goias from "./goias.json";
      import {LineMap} from  'react-geo-grapher'
      ...

      // Set the properties
      <LineMap
        style={{ width: "400px", background: "#ffffff" }}
        geojson={goias}
        percents={[40, 30, 30]}
        colors={['#040DA6', '#10863C', '#920B8E']}
        scale={4700}
        scaleFactor={30}
        strokeWidth="15px"
      />

Properties

Parameter	Type	Definition
percents	Array<number>	Each array index will correspond to a section in the map, the sum of array values ​​must equal 100, all numbers must be integers.
colors	Array<string>	Each index of the array will match the color of a section on the map.
geojson	Feature or FeatureCollection or any	Geojson file.
style	CSSProperties or undefined	Css properties that will be applied to the </div> around the map.
scale	number	Property from ComposableMapProps that scale the geojson on the map.
scaleFactor	number	number-1 of lines.
strokeWidth	string	stroke width of line (The larger, the greater the height of each line).
ComposableMapProps?	ComposableMapProps	More details here
ZoomableGroupProps?	ZoomableGroupProps	More details here

CircMap

This map is too strong for codesandbox to load it...

      // import your geojson file
      import goias from "./goias.json";
      import {CircMap} from  'react-geo-grapher'
      ...

      // Set the properties
      <CircMap
        style={{ width: "400px", background: "#ffffff" }}
        geojson={goias}
        percents={[40, 30, 30]}
        colors={['#040DA6', '#10863C', '#920B8E']}
        scale={4700}
        spacing={25}
        itemSize={8}
      />

Properties

Parameter	Type	Definition
limits	Array<number>	Each array index will correspond to a section in the map, the sum of array values ​​must equal 100, all numbers must be integers.
colors	Array<string>	Each index of the array will match the color of a section on the map.
geojson	Feature or FeatureCollection or any	Geojson file.
style	CSSProperties or undefined	Css properties that will be applied to the </div> around the map.
scale	number	Property from ComposableMapProps that scale the geojson on the map.
spacing	number	Space between circles.
itemSize	number	Circles radius.
ComposableMapProps?	ComposableMapProps	More details here
ZoomableGroupProps?	ZoomableGroupProps	More details here

SquaredMap

This map is too strong for codesandbox to load it...

      // import your geojson file
      import goias from "./goias.json";
      import {SquaredMap} from  'react-geo-grapher'
      ...

      // Set the properties
      <SquaredMap
        style={{ width: "400px", background: "#ffffff" }}
        geojson={goias}
        percents={[40, 30, 30]}
        colors={['#040DA6', '#10863C', '#920B8E']}
        scale={4700}
        spacing={25}
        itemSize={8}
      />

Properties

Parameter	Type	Definition
percents	Array<number>	Each array index will correspond to a section in the map, the sum of array values ​​must equal 100, all numbers must be integers.
colors	Array<string>	Each index of the array will match the color of a section on the map.
geojson	Feature or FeatureCollection or any	Geojson file.
style	CSSProperties or undefined	Css properties that will be applied to the </div> around the map.
scale	number	Property from ComposableMapProps that scale the geojson on the map.
spacing	number	Space between squares.
itemSize	number	Width and height of squares.
ComposableMapProps?	ComposableMapProps	More details here
ZoomableGroupProps?	ZoomableGroupProps	More details here

Considerations

• This library uses products from other libraries, such as react-simple-maps and turf.
• It is not recommended for use in commercial projects as it contains some incompatibility issues with some geojson file structures.