This is a data visualization project of the state of DeveloperKaki, the largest online developer community in Malaysia, based on the data from the Developer Salary Survey.

Clone repository

git clone https://github.com/itschrislow/state-of-developer-kaki-2021.git

Development mode

yarn
yarn start

Production mode

yarn build
yarn global add serve
serve -s build

On server restart, a script will be run to write chart data to be consumed by chart-related components. Chart data is formatted by the helpers file following the format specified in nivo's documentation (data vizualization library used).

See the main project structure below for more information.

Important folders and files in the src directory

|- data
|   |- dataset.json                   # cleaned dataset
|   |- helpers.js                     # helper functions to format chart data based on nivo documentation
|   |- scripts.js                     # script to write formatted data into charts folder below on server restart
|   |- charts
|       |- [chart1].json
|       |- ...
|
|- components
|   |- charts                         # contains only chart components
|       |- [ChartComponentName].jsx
|       |- ...
|   |- [ComponentName].jsx            # all other components
|   |- ...

REACT_APP_GA_ID (optional) - Google Analytics ID