LoginSignup
6

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-11-30

はじめに

「民間給与実態統計」は民間の事業所における年間の給与の実態を調査することを目的としています。今回はその調査結果のうち、「第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

初期画面が立ち上がります。
スクリーンショット 2018-11-30 12.41.52.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

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;

これで、だいぶ見やすくなりました。
スクリーンショット 2018-11-30 12.56.48.png

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

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

結果はこちら

まとめ

IT業界は実力主義であるというイメージが強いですが、年功序列だということがわかりました。
スクリーンショット 2018-11-30 13.13.07.png
※横軸が勤続年数、縦軸が年収です。

メモ

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6