今シーズンのアルビレックス新潟の総得点は41点。総失点は58点。いやー苦しいシーズンでした。。。
今回は、ヒートマップの練習ということで、アルビレックスの2015シーズンの得点時間帯と失点時間帯をヒートマップで視覚化してみました。
後半最後の失点は、毎年のことながら目立ちますね。そして、今年の特徴として試合終了間際の劇的な得点が多い印象でした。ヒートマップにも表れていますね。後半残り15分以内での得点が14点だそうです。
まあ、今シーズンの振り返りは長くなるのでここではやめときます。
さて、今回の手順ですが、まずは、データの収集から。
各試合の得点と失点の時間帯を振り分けていきます。
時間帯の区分けは、90分を15分づつに分けました。+は、アディショナルタイムです。
時間帯別の得点・失点を集計し、それぞれ足すと、以下のような表になります。
これをcsvにして、保存っと。
ヒートマップの作成はここを参考にしました。
今回のコードはこちら。
データを読み込んだら、Maxを求めておきます。
ここでの最大値は14のはずなんですが、d3.maxを使ったら、中途半端に6を取ってきてしまったので、無理やり解決。
d3.maxをいまいち掴みきれず。。最初の配列しか参照してないみたい？誰か教えてくださいな。
|
1 2 |
var Smax = Math.max.apply(null,data.map(function(d){return d.score }));//得点max var Lmax = Math.max.apply(null,data.map(function(d){return d.lost })); //失点max |
ヒートマップの表示部分の一部はこんな感じ。transitionで動きをつけたのは完全に無駄ですw
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
heatmap.append('rect') .attr("class","block") .attr("x", function(d,i){return i * blocksize}) .attr("y", blocksize) .attr("width",blocksize) .attr("height",blocksize) .attr("rx",100) .attr("ry",100) .attr("fill", function(d){ return ScolorScale(d.score); }) .transition() .delay(function(d,i){return i * 100}) .duration(2000) .ease("circle") .attr("rx",0) .attr("ry",0); |
Jのチーム毎に得点時間帯、失点時間帯をすべて可視化したら、各チームに差が出てきて面白くなるかなと思います。
コメントは受け付けていません。