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

| Name | Type | Is Optional | Default Value | Description | |-----------------------|------------------|-------------|---------------------------|-----------------------------------------------------------------------------------------------------------------| | dataSets | DataSet[] | no | | Data sets available on the component. | | regions | Region[] | no | | GeoJSON data of regions available on the map. | | center | Center | yes | {   zoom:1,    lng:0,    lat:0} | Center position and zoom. | | mapBoxToken | string | no | | Access token required to use mapbox. | | mapHeight | string or number | yes | 500 | Height of the map, use a number of "px" or a sring for a css value. | | mapBoxOptions | object | yes | | Extra options passed to the mapbox constructor. | | onDataSetChange | (dataSetId:string)=>void| yes | | Fired when a new data set is selected. | | className | string | yes | | Custom class for the container. | | sliderClassName | string | yes | | Custom class for the slider element. | | dropdownClassName | string | yes | | Custom class for the dropdown element. | | placeholderClassName | string | yes | | Custom class for the placeholder text. | | mapContainerClassName | string | yes | | Custom class for map container. | | style | object | yes | | Custom style for the container. | | sliderStyle | object | yes | | Custom style for the slider element. | | dropdownStyle | object | yes | | Custom style for the dropdown element. | | placeholderStyle | object | yes | | Custom style for the placeholder text. | | mapContainerStyle | object | yes | | Custom style for map container. |

RegionsMap

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

Properties

| Name | Type | Is Optional | Default Value | Description | |----------------|----------------------|--------|---------------|----------------------------------------------------------------------------------------------------------------| | regionsData | RegionData[] or null | no | | Data value for each region. | | regions | Region[] | no | | GeoJSON data of regions available on the map. | | center | Center | yes | {   zoom:1,    lng:0,    lat:0} | Center position and zoom. | | mapBoxToken | string | no | | Access token required to use mapbox. | | mapHeight | string or number | yes | 500 | Height of the map, use a number of "px" or a sring for a css value. | | mapBoxOptions | object | yes | | Extra options passed to the mapbox constructor. | | scale | Scale | no | | Scale used by the map. | | footnotes | Footnote[] | yes | | Footnotes texts available to be used by data points. | | unit | Unit | no | | Unit of the data showed on the map. | | dropdownClassName | string | yes | | Custom class for the dropdown element. | | mapContainerClassName | string | yes | | Custom class for the map container. | | mapContainerStyle | object | yes | | Custom style for the map container. |

Scale

Coloured scale used on the map

Properties

| Name | Type | Is Optional | Default Value | Description | |-------------|---------|--------|---------------|--------------------------------------| | value | DataScale | no | | Numeric intervals and colors. | | unit | Unit | no | | Unit showed on the label. | | onMouseOver | (value?: ScaleInterval)=>void | no | | Mouse over event for each scale area. |

Slider

Animated slider used for date selection.

Properties

| Name | Type | Is Optional | Default Value | Description | |-------------|-----------------------|-------------|---------------|------------------------------------------------------------| | value | number | no | | Current selection of the scale. | | values | SliderValue[] | no | | Available values. | | timeBetweenJumps | number | yes | 1000 | Time in ms between between selection when in animated mode is enabled. | | onChange | (value: number)=>void | no | | Event when fired when the value changes | | className | string | yes | | Custom class for the slider. | | style | object | yes | | Custom style for the slider. |

Structures

Data structures used on this project.

DataSet

Object describing a data set.

| Name | Type | Is Optional | Default Value | Description | |-------------|---------------|-------------|---------------|-----------------------------------------------------------------------| | id | string | no | | Id of the data set. | | name | string | no | | Name of the data set. | | description | string | no | | Description of the data set. | | center | Center | no | | Position and zoom of the map (overrides "center" property of the map). | | source | DataSetSource | no | | Source of the data. | | dates | DataSetDates | no | | Dates of the data set. | | unit | Unit | no | | Unit of the data set. | | scale | DataScale | no | | Scale info for the data set. | | data | RegionData[] or null | no | | Data values for each region. | | footnotes | Footnote[] | yes | | Footnotes texts available to be used by data points. |

Center

Object describing the center position and zoom on the map.

| Name | Type | Is Optional | Default Value | Description | |------|--------|-------------|----------------------|-----------------| | lat | number | no | | Latitude value. | | lng | number | no | | Longitude value. | | zoom | number | no | | Zoom level. |

DataSetSource

Object describing the source of the data

| Name | Type | Is Optional | Default Value | Description | |------|--------|-------------|----------------------|-----------------------------------------------------------------| | name | string | no | | Name of the source. | | url | string | no | | Url of the source. |

DataSetDates

Object describing the dates available on the data set

| Name | Type | Is Optional | Default Value | Description | |------------|----------|-------------|----------------------|------------------------------------------------------------------------------------------| | format | string | no | | Format on how to display the dates. | | timestamps | number[] | no | | Values of the timestamps in ms. |

Unit

Object describing the unit

| Name | Type | Is Optional | Default Value | Description | |--------|--------|-------------|----------------------|----------------------| | name | string | no | | Name of the unit. | | symbol | string | no | | Symbol of the unit. |

DataScale

Object describing the scale used on the map

| Name | Type | Is Optional | Default Value | Description | |------------|----------|-------------|----------------------|--------------------------| | startValue | number | no | | First value of the scale. | | steps | number[] | no | | Values for each step. | | colors | string[] | no | | Color of each step. |

RegionData

Object describing the data for each region

| Name | Type | Is Optional | Default Value | Description | |---------------|----------|-------------|----------------------|----------------------| | dateTimestamp | number | no | | Date of the data. | | id | string | no | | Id of the region. | | value | number | no | | Numeric value of the data. | | footnoteIds | string[] | yes | | Ids of the footnotes. |

Footnote

Object describing footnotes available

| Name | Type | Is Optional | Default Value | Description | |-------------|----------|-------------|----------------------|----------------------------| | id | string | no | | Id of the footnote. | | value | string | no | | Text value of the footnote. |

Region

Object containing the contours of a region

| Name | Type | Is Optional | Default Value | Description | |---------|---------|-------------|----------------------|---------------------------------------------------| | id | string | no | | Id of the region. | | name | string | no | | name of the region. | | geoJSON | GeoJSON | no | | Contours of the region, GeoJSON (type="Feature"). |

SliderValue

| Name | Type | Is Optional | Default Value | Description | |---------|---------|-------------|----------------------|------------------------| | label | string | no | | Label of the value. | | value | number | no | | Numeric value. |

ScaleInterval

| Name | Type | Is Optional | Default Value | Description | |----------|--------|-------------|----------------------|-------------------| | minValue | number | no | | Minimum value. | | maxValue | number | no | | Maximum value. | | color | string | no | | Color of the area. |