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

Data visualization of the state of developers in Malaysia
https://github.com/itschrislow/state-of-developer-kaki

data-visualization data-viz salary-data visualization

Last synced: 13 days ago
JSON representation

Data visualization of the state of developers in Malaysia

• Host: GitHub
• URL: https://github.com/itschrislow/state-of-developer-kaki
• Owner: itschrislow
• Created: 2022-03-24T19:50:20.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-06-03T20:27:50.000Z (over 1 year ago)
• Last Synced: 2024-10-04T19:56:09.446Z (about 1 month ago)
• Topics: data-visualization, data-viz, salary-data, visualization
• Language: JavaScript
• Homepage: https://stateofdevkaki.com/
• Size: 3.58 MB
• Stars: 8
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

        


  



  

## 💡 Overview


This is a data visualization project of the state of [DeveloperKaki](https://www.facebook.com/groups/developerkaki/), the largest online developer community in Malaysia, based on the data from the [Developer Salary Survey](https://www.facebook.com/groups/developerkaki/permalink/1475965772749331/).

## 🛠 Installation

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

```

## 📄 Getting Started

### Data processing

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

See the main project structure below for more information.

### Main Project Structure

Important folders and files in the [`src`](src) directory

```bash

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

|   |- ...

```

### Environment Variables

`REACT_APP_GA_ID` (optional) - Google Analytics ID