@antonio-goncalves/react-regional-data-display v1.0.0

React Regional Data Display

React components based on mapbox used to display quantitative data of geographical regions with support for multiples data sets and dates.

Install

npm install @antonio-goncalves/react-regional-data-display

Usage

Usage example using data provided by Eurostats.

import * as React from "react";
import {ReactRegionalDataDisplay} from "@antonio-goncalves/react-regional-data-display";
import '@antonio-goncalves/react-regional-data-display/dist/main.css'

import useSWR from 'swr'
import axios from 'axios'


const center = {
    lng: 13.9612,
    lat: 57.1004,
    zoom: 2.36
}

const fetcher =( url:string )=> axios.get(url).then(res => res.data)

const MAPBOX_TOKEN="your-token";

export function DataDisplayWithData(){
    const { data:dataSets, error:dataSetsError } = useSWR('https://preview.antonio-goncalves.com/api/dataSets?ids=gdp,populationDensity', fetcher)
    const { data:regions, error:regionsError } = useSWR('https://preview.antonio-goncalves.com/api/regions/eurostatCountries10m?ids=BE,BG,CZ,DK,DE,EE,IE,EL,ES,FR,HR,IT,CY,LV,LT,LU,HU,MT,NL,AT,PL,PT,RO,SI,SK,FI,SE,IS,LI,NO,CH,UK,ME,MK,AL,RS,TR', fetcher)

    if(dataSetsError || regionsError){
        const errors = []
        if(dataSetsError){
            errors.push(<p style={{color:"red"}}>Error when fetching data sets: {dataSetsError.message}</p>)
        }
        if(regionsError){
            errors.push(<p style={{color:"red"}}>Error when fetching regions: {regionsError.message}</p>)
        }
        return <>
            {errors.map((el,i)=>(
                el
            ))}
        </>
    }

    return (
        <ReactRegionalDataDisplay
            dataSets={dataSets}
            regions={regions}
            mapBoxToken={MAPBOX_TOKEN}
            center={center}
        />
    )


}

Components

React component provided by this library.

ReactRegionalDataDisplay

Main component providing the map visualizer, data info, data set and date selection.

Properties

RegionsMap

Map component used on this project, can be used as a standalone component if date and data set selection is not required.

Properties

Scale

Coloured scale used on the map

Properties

Slider

Animated slider used for date selection.

Properties

Structures

Data structures used on this project.

DataSet

Object describing a data set.

Center

Object describing the center position and zoom on the map.

DataSetSource

Object describing the source of the data

DataSetDates

Object describing the dates available on the data set

Unit

Object describing the unit

DataScale

Object describing the scale used on the map

RegionData

Object describing the data for each region

Footnote

Object describing footnotes available

Region

Object containing the contours of a region

SliderValue

ScaleInterval