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

      // 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

      // 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.