こんばんは、「好きなこと、おもしろいこと」をコンセプトに活動しているテックチーム 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を見るだけで済んじゃうじゃんっていうのは内緒で 