https://github.com/leandrocollares/human-development-index
An interactive choropleth map that displays human development indices in the world between 1990 and 2018
https://github.com/leandrocollares/human-development-index
d3 data-visualization react
Last synced: 2 months ago
JSON representation
An interactive choropleth map that displays human development indices in the world between 1990 and 2018
- Host: GitHub
- URL: https://github.com/leandrocollares/human-development-index
- Owner: leandrocollares
- Created: 2020-03-02T17:18:39.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-03-02T19:28:59.000Z (over 6 years ago)
- Last Synced: 2025-07-05T18:36:00.709Z (about 1 year ago)
- Topics: d3, data-visualization, react
- Language: JavaScript
- Homepage: https://leandrocollares.github.io/human-development-index/
- Size: 996 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Human development index (HDI)
An interactive choropleth map that shows human development indices in the world. The visualization offers the following interaction possibilities:
* Moving the slider allows users to see how human development indices varied between 1990 and 2018.
* Hovering over a country causes a tooltip containing the HDI for the chosen year to be displayed.
* Users can select an HDI range by clicking and dragging on the legend. Countries whose indices fall within the said HDI range will be highlighted.
The visualization was implemented with [React](https://reactjs.org/) and [D3](https://d3js.org/). React renders visualization components, whereas D3 handles data and axis calculations. Thanks to React Hooks, only functional
components were employed.
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
## Getting started
* Clone or download the repository
* Navigate to the project directory: ```cd human-development-index```
* Install dependencies: ```npm install```
* Run the app in development mode: ```npm start```
Please refer to the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started) for further information.
## Data source
[United Nations Development Programme](http://hdr.undp.org/en/data) · Data downloaded on 20 February 2020.