前々から作ってみたかったデータ ビジュアライゼーション プロジェクトです。スクロールバーを左右すると年代を前後できます。指定した年代にあわせて、その出来事が起こった場所でマーカーをつけるアイディアです。
d3.jsはスケールなどに使用しました。scaleTime()でスクロールバーに、getMercator()で地図情報の処理に使用しています。SVGの各要素はNuxt.jsに描画させています。やはりデータ数が多いと、マシンによってはコマ落ちがあるのがちょっと辛いところ。各項目の出典はこちらです。位置情報の追加は独自ですのでご了承ください。
参考:
- https://bl.ocks.org/officeofjane/47d2b0bfeecfcb41d2212d06d095c763
- https://github.com/thegoodideaco/visualizing-hierarchies
- http://nafox.blog59.fc2.com/blog-category-5.html
- https://ysinc.co.jp/blog/css-watercolor/