D3.jsを使ってみた

WEBデザイン


要素をクリックすると動きます。元に戻すには真ん中をクリックします。
var data = {
	"name": "脊椎動物",
	"children": [
		{
			"name": "哺乳類",
			"children": [
				{
					"name": "霊長目",
					"value": 5
				},
				{
					"name": "齧歯目",
					"value": 5
				},
				{
					"name": "鯨偶蹄目",
					"value": 5
				},
				{
					"name": "食肉目",
					"value": 5
				},
				{
					"name": "奇蹄目",
					"value": 5
				},
				{
					"name": "その他",
					"value": 5
				}
			]
		},
		{
			"name": "鳥類",
			"children": [
				{
					"name": "キジ目",
					"value": 5
				},
				{
					"name": "カモ目",
					"value": 5
				},
				{
					"name": "ハト目",
					"value": 5
				},
				{
					"name": "ダチョウ目",
					"value": 5
				},
				{
					"name": "その他",
					"value": 5
				}
			]
		},
		{
			"name": "爬虫類",
			"children": [
				{
					"name": "カメ目",
					"value": 5
				},
				{
					"name": "ムカシトカゲ目",
					"value": 5
				},
				{
					"name": "有隣目",
					"value": 5
				},
				{
					"name": "ワニ目",
					"value": 5
				}
			]
		},
		{
			"name": "両生類",
			"children": [
				{
					"name": "無尾目",
					"value": 5
				},
				{
					"name": "有尾目",
					"value": 5
				},
				{
					"name": "無足目",
					"value": 5
				}
			]
		},
		{
			"name": "魚類",
			"children": [
				{
					"name": "条鰭類",
					"value": 5
				},
				{
					"name": "その他",
					"value": 5
				}
			]
		}
	]
}
デモ用に作ったデータセットなんですが、作るのがかなり面倒なのでcsvか何かを変換して作るツールを探してみます。