「民間給与実態統計」の結果をreact-chartjs-2でグラフ化して、AWS Amplifyで公開する

##はじめに
「民間給与実態統計」は民間の事業所における年間の給与の実態を調査することを目的としています。今回はその調査結果のうち、「第15表　業種別及び勤続年数別の給与所得者数・給与額」をreact-chartjs-2でグラフ化して、AWS Amplifyで公開しました。

<a href="http://estat-20181130131122--hostingbucket.s3-website-us-east-1.amazonaws.com/">結果はこちら</a>

##データ
政府統計のポータルサイト「<a href="https://www.e-stat.go.jp/" target="_blank">e-Stat</a>」から各種統計情報をダウンロードすることができます。今回のデータは「<a href="https://www.e-stat.go.jp/stat-search/files?page=1&layout=datalist&toukei=00351000&tstat=000001012969&cycle=7&year=20170&month=0&tclass1=000001012970&stat_infid=000031768867" target="_blank">第15表　業種別及び勤続年数別の給与所得者数・給与額</a>」からダウンロードします。 Excel形式になっているので、以下のようにJSON形式に変換しておきます。

```
[
  {
    "label": "建設業",
    "data": [
      3821000, 
      4513000, 
      5065000, 
      5442000, 
      5959000, 
      6222000, 
      6320000, 
      5529000
    ]
  }, 
  {
    "label": "製造業",
    "data": [
      3532000, 
      4235000,
...
```

##手順
まずは、create-react-appでアプリケーションを作成します。

```
create-react-app salary
cd salary
npm start
```

初期画面が立ち上がります。
![スクリーンショット 2018-11-30 12.41.52.png](https://qiita-image-store.s3.amazonaws.com/0/232604/fee2b48c-09b9-cc33-cf97-d38bb09c3396.png)

react-chartjs-2をインストールします。

```
npm install react-chartjs-2 chart.js --save
```


App.jsを修正します。

```
import React, { Component } from 'react';
import { Line } from 'react-chartjs-2';
import salary from './salary.js';

const data = {
    labels: ['1~4年', '5~9年', '10~14年', '15~19年', '20~24年', '25~29年', '30~34年', '35以上'],
    datasets: salary
};

class App extends Component {
  render() {
    return (
      <div>
        <Line data={data} />
      </div>
    );
  }
}

export default App;
```

とりあえず表示されますが、何だか見づらいグラフです。
![スクリーンショット 2018-11-30 12.47.36.png](https://qiita-image-store.s3.amazonaws.com/0/232604/b6c887af-ef1c-5d4c-6756-508a5331873a.png)


<a href="https://qiita.com/enkatsu/items/6e5d959bc4da80c8af49">google-paletteとchart.jsでかっこいいグラフを描く</a>を参考にApp.jsを修正します。

```
npm install google-palette --save
```

```
import React, { Component } from 'react';
import { Line } from 'react-chartjs-2';
import salary from './salary.js';
import * as palette from 'google-palette';

const colors = palette('mpn65', salary.length).map((hex) => {
  return '#' + hex;
});

const datasets = salary.map((s, i) => {
  return {
    label: s.label,
    data: s.data,
    backgroundColor: colors[i],
    borderColor: colors[i],
    fill: false
  };
});

const data = {
    labels: ['1~4年', '5~9年', '10~14年', '15~19年', '20~24年', '25~29年', '30~34年', '35以上'],
    datasets: datasets
};

class App extends Component {
  render() {
    return (
      <div>
        <Line data={data} />
      </div>
    );
  }
}

export default App;
```

これで、だいぶ見やすくなりました。
![スクリーンショット 2018-11-30 12.56.48.png](https://qiita-image-store.s3.amazonaws.com/0/232604/2bde8792-cdde-2176-06f3-57c1a6efd30b.png)

AWS Amplifyを使って公開します。

```
npm install --save aws-amplify
npm install --save aws-amplify-react
amplify init
amplify add hosting
amplify publish
```

<a href="http://estat-20181130131122--hostingbucket.s3-website-us-east-1.amazonaws.com/">結果はこちら</a>

##まとめ
IT業界は実力主義であるというイメージが強いですが、年功序列だということがわかりました。
![スクリーンショット 2018-11-30 13.13.07.png](https://qiita-image-store.s3.amazonaws.com/0/232604/1bcbcdcd-8190-1ef1-8087-e9153ac479ba.png)
※横軸が勤続年数、縦軸が年収です。

##メモ

- スマホだと画面横にしないとちゃんと見れない...
- JavaScriptとAWSは初心者なので、間違いがあったら教えてください。