Miles McCrocklin milroc

[ Launch: bars ] 9820337 by milroc

d3.unconf example gist. Fork it here.

Click on any arc to zoom in. Click on the center circle to zoom out.

A sunburst is similar to a treemap, except it uses a radial layout. The root node of the tree is at the center, with leaves on the circumference. The area (or angle, depending on implementation) of each arc corresponds to its value. Sunburst design by John Stasko. Data courtesy Jeff Heer.

This bar chart visualizes hierarchical data using D3. Each blue bar represents a folder, whose length encodes the total size of all files in that folder (and all subfolders). Clicking on a bar dives into that folder, while clicking on the background bubbles back up to the parent folder. The effect is similar to a zoomable partition layout, though in a more conventional display.

	{
	"name": "flare",
	"children": [
	{
	"name": "analytics",
	"children": [
	{
	"name": "cluster",
	"children": [
	{"name": "AgglomerativeCluster", "size": 3938},

	<!DOCTYPE html>
	<meta charset="utf-8">
	<html>
	<head>
	<link href='http://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
	<style>

	.axis text {
	font: 14px 'Inconsolata';
	}


	d3.custom = {};

	d3.custom.utils = {};

	d3.custom.utils.windowResize = function() {};

	d3.custom.heatmap = function() {
	// basic data
	var margin = {top: 0, bottom: 0, left: 0, right: 0},

	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	rect {
	stroke: #fff;
	}

	</style>
	<body>