データを可視化し、グラフから別のグラフへアニメーション推移させる事が出来るスクリプト・「Vizzu」

Vizzu

See the Pen
Untitled by kachibito (@kachibito)
on CodePen.

Vizzuはデータを可視化し、グラフから別のグラフへアニメーション推移させる事が出来るスクリプトです。非依存で単体で動作します。

複数の数値やラベルを設定する事で、グラフからグラフへと推移する、というもの。上にサンプルを用意してありますので右下のRerunを押せば動作確認できます。

import Vizzu from "https://cdn.jsdelivr.net/npm/vizzu@0.3.0/dist/vizzu.min.js";

let data = {
	series: [
		{ name: "りんご", values: ["2018年", "2019年", "2020年"] },
		{ name: "ぶどう", values: [15, 32, 12] },
		{ name: "みかん", values: [5, 3, 2] }
	]
};

let chart = new Vizzu("myVizzu", { data });

chart.animate({
	x: "りんご",
	y: "ぶどう"
});

chart.animate({
	color: "りんご",
	x: "みかん",
	geometry: "circle"
});

オプションもいろいろ用意されていましたのである程度応用もききそうです。ライセンスはApache-2.0との事です。

Vizzu