はじめに
「民間給与実態統計」は民間の事業所における年間の給与の実態を調査することを目的としています。今回はその調査結果のうち、「第15表 業種別及び勤続年数別の給与所得者数・給与額」をreact-chartjs-2でグラフ化して、AWS Amplifyで公開しました。
データ
政府統計のポータルサイト「e-Stat」から各種統計情報をダウンロードすることができます。今回のデータは「第15表 業種別及び勤続年数別の給与所得者数・給与額」からダウンロードします。 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
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;
google-paletteとchart.jsでかっこいいグラフを描くを参考に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;
AWS Amplifyを使って公開します。
npm install --save aws-amplify
npm install --save aws-amplify-react
amplify init
amplify add hosting
amplify publish
まとめ
IT業界は実力主義であるというイメージが強いですが、年功序列だということがわかりました。
※横軸が勤続年数、縦軸が年収です。
メモ
- スマホだと画面横にしないとちゃんと見れない...
- JavaScriptとAWSは初心者なので、間違いがあったら教えてください。