こんばんは、「好きなこと、おもしろいこと」をコンセプトに活動しているテックチーム soberです。

いやー、サッカー悔しかったですね！

あと少しのところが、世界の壁なのでしょうか・・・。

世界の壁とはどれほどなのかと思い、

10年分のサッカーFIFAランキングを可視化してみました！

ドン！

↓デモ↓
https://soberjp.github.io/FIFA-Ranking

グループリーグの日本、コロンビア、ポーランド、セネガルと本日対戦したベルギーの5チームの10年分のFIFAランキングを可視化してみました。

可視化してみると、なにやら見えてきますね！

2011年には日本が上位だったのに、2012年を境に明暗が別れていますね。
ポーランドとベルギーの伸び率がすごい。しかもベルギーは1位になったこともあるらしいです。

近年はすごい差ですね・・・。

それでは可視化するおもしろさが少しだけ伝わったところでコードをご紹介。
難しいことは考えず、あくまでシンプルに構築してみました。

↓コードはこちら↓
https://github.com/soberjp/FIFA-Ranking

自分の環境でも試す方法

実行環境


Node.js v9.2.0
npm v5.5.1

パッケージインストール


npm install

ビルド


npm run build

ローカルwebサーバー起動


npm run dev

でできます！

パッケージはこんな感じのをインストール

package.json


{
  "name": "FIFARanking",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "sober",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.5.4",
    "webpack-dev-server": "^2.7.1"
  },
  "dependencies": {
    "c3": "^0.6.2",
    "css-loader": "^0.28.11",
    "d3": "^5.5.0",
    "file-loader": "^1.1.11",
    "jquery": "^3.3.1",
    "materialize-css": "^0.100.2",
    "style-loader": "^0.21.0",
    "url-loader": "^1.0.1"
  }
}

webpackとwebpack-dev-serverも設定してみる

webpack.config.js


var webpack = require('webpack');

module.exports = {
    entry: './_resouce/main.js',
    output: {
        path: __dirname + '/dist',
        filename: 'app.js'
    },
    module : {
        rules : [
            {
                test: /\.css/,
                loaders: ['style-loader', 'css-loader']
            },
            {
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader:"url-loader?limit=10000&mimetype=application/font-woff"
            },
            {
                test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: "file"
            }
        ]
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        })
    ],
    devServer: {
    contentBase: __dirname + '/dist',
        publicPath: '/',
        watchContentBase: true,
        open: true
}
};

パッケージしたいJSとCSSを書いておく

main.js


// JS一式を読み込んでパッケージ
import {chart} from './js/chart.js';

// CSS一式を読み込んでパッケージ
require('materialize-css/dist/css/materialize.css');
require('c3/c3.css');
require('./css/stylesheet.css');

// materialize(JS)を読み込んでパッケージ
require('materialize-css');

chart();

C3.jsを利用してシンプルにチャートを作成してみる

chart.js


export function chart() {

    var d3 = require('d3');
    var c3 = require('c3');

    c3.generate({
        size: {
            height: 600
        },
        data: {
            // データ格納
            columns: [
                ['日本', 43,29,19,22,47,54,53,45,57,61],
                ['ベルギー', 66,57,41,21,11,4,1,5,5,3],
                ['コロンビア', 39,48,36,5,4,3,8,6,13,16],
                ['ポーランド', 58,73,66,55,76,41,34,15,7,8],
                ['セネガル', 89,70,44,77,65,35,44,33,23,27]
            ],
            type: 'spline'
        },
        // 軸設定
        axis: {
            // 年表示
            x: {
                type: 'category',
                categories: ['2009年', '2010年', '2011年', '2012年', '2013年', '2014年', '2015年', '2016年', '2017年', '2018年']
            },
            // 順位表示
            y: {
                // 逆順表示
                inverted: true,
                // 左ラベル
                label: {
                    text: '順位',
                    position: 'outer-middle'
                }
            }
        },
        // グリッド追加
        grid: {
            x: {
                show: true
            },
            y: {
                show: true
            }
        },
        // ツールチップで順位表示
        tooltip: {
            format: {
                value: function (value) {
                    return d3.format(',')(value) + "位";
                }
            }
        },
        // ポイント表示
        point: {
            show: true
        }
    });

}

スタイルは少なめ

stylesheet.css



/*全体設定*/
html, body {
    background-color: #FFFFFF;
    color: #383838;
}

/*余白*/
#mm_60 {
    margin-top: 60px;
}

/*グラフフォントサイズ*/
.c3-axis-y text {
    font-size: 14px;
}
.c3-axis-x text {
    font-size: 14px;
}

htmlはdistディレクトリに置いておく

index.html


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="FIFA ランキング 比較">
    <meta name="description" content="FIFA ランキング 比較">
    <meta name="author" content="FIFA ランキング">
    <title>FIFA Ranking</title>
</head>
<body>

    <div id="mm_60"></div>

    <div class="row">
        <div class="container">
            <div class="col s12 center">
                <h3>FIFA ランキング</h3>
            </div>
        </div>
    </div>

    <div id="mm_60"></div>

    <div class="row">
        <div class="container">
            <div class="col s12 center">
                <div id="chart"></div>
            </div>
        </div>
    </div>

    <script src="./app.js"></script>

</body>
</html>

4年後はベスト8、いや優勝狙いたいですね！！

↓ FIFAランキングをスクレイピングしたサイトはこちらになります ↓
FIFA Ranking.net

FIFA Ranking.netを見るだけで済んじゃうじゃんっていうのは内緒で