shimizuD3.jsを使ったPathのアニメーションについて勉強中です。path要素のアニメーションはcircle要素やrect要素を使ったアニメーションより、いろいろと手間がかかるのですが、その中でも地理情報を元に作成したPathを動かすのは結構難儀だったりします。これができるといろいろと表現の幅が広がるので、知恵熱だしながら下記サンプルを元に習作をつくってみました。Gunma上記サンプルを元に群馬県をバブルっぽくしてみました。exampleほとんど上記サンプルのままですが、簡単に説明すると、各市ポリゴンの中心座標を取得し三角関数を使って円の座標データを別に作成しています。円の描き方に関しては下記記事がとても参考になります。俺も何をやりたかったのかわからなかった」exampleカスタムinterpolateを作成してPathデータを補間しています。線グラフ→水平線→水平線(座標点補間)→群馬県という感じで変化させていて、間の2つが無いとあまり綺麗なアニメーションになりません。やって綺麗な遷移を作るかがPath要素をトランジションさせたいときの難しいところですね。失敗作ちなみに遷移のさせかたに失敗すると、下記のようなとんでもない動作になったりします。APIにGeoJSONを編集する機能が付いたので、サクッとGeoJSONエディタ作ってみた。行き来する出稼ぎエンジニア。GIS(地理情報システム)・データビジュアライゼーション・オープンデータなどについて書いてます。