mundhradevang’s gists

mundhradevang / index.html

Created April 29, 2011 20:22 — forked from devangmundhra/index.html

treemap with mouse interactivity

	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>Treemap</title>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js"></script>
	<link type="text/css" rel="stylesheet" href="treemap.css"/>
	</head>
	<body>
	<div id="chart"></div>

mundhradevang / index.html

Created June 5, 2011 02:45

Adding zooming functionality to treemap

	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>Treemap</title>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js"></script>
	<link type="text/css" rel="stylesheet" href="treemap.css"/>
	</head>
	<body>
	<div id="chart"></div>

mundhradevang / index.html

Created June 5, 2011 04:08 — forked from mbostock/.block

Treemap in D3/SVG with zooming capability

	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>Treemap</title>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js"></script>

	<style type="text/css">

	rect {

mundhradevang / index.html

Created June 9, 2011 06:06

Zoomable tree - without visibility attr

	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>Zoomable Treemap</title>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js"></script>
	<link type="text/css" rel="stylesheet" href="treemap.css"/>
	</head>
	<body>
	<div id="chart"></div>

mundhradevang / index.html

Created June 9, 2011 06:12

Zoomable tree - with visibility attr

	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>Zoomable Treemap</title>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js"></script>
	<link type="text/css" rel="stylesheet" href="treemap.css"/>
	</head>
	<body>
	<div id="chart"></div>

mundhradevang / index.html

Created August 17, 2011 02:37

Deleting cell in a treemap when clicked

	<!DOCTYPE html>
	<html>
	<head>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js"></script>
	<style type="text/css">

	rect {
	fill: none;
	stroke: #fff;

mundhradevang / index.html

Created August 19, 2011 07:34

Deleting cell in a treemap when clicked (using exit selection)

	<!DOCTYPE html>
	<html>
	<head>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js"></script>
	<style type="text/css">

	rect {
	fill: none;
	stroke: #fff;

mundhradevang / index.html

Created August 20, 2011 07:32

Transition breaking on each?

	<!DOCTYPE html>
	<html>
	<head>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
	</head>
	<body>
	<script type="text/javascript" src="trans.js"></script>
	</body>
	</html>

mundhradevang / index.html

Created September 1, 2011 08:25

Square Treemap SVG

	<!DOCTYPE html>
	<html>
	<head>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js"></script>
	<style type="text/css">

	rect {
	fill: none;
	stroke: #fff;

mundhradevang / d3.layout.js

Created September 1, 2011 08:25

Rectangular Treemap SVG

	(function(){d3.layout = {};
	// Implements hierarchical edge bundling using Holten's algorithm. For each
	// input link, a path is computed that travels through the tree, up the parent
	// hierarchy to the least common ancestor, and then back down to the destination
	// node. Each path is simply an array of nodes.
	d3.layout.bundle = function() {
	return function(links) {
	var paths = [],
	i = -1,
	n = links.length;