Skip to content

Instantly share code, notes, and snippets.

View mundhradevang's full-sized avatar

mundhradevang

View GitHub Profile
@mundhradevang
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
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
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
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
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
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
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
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
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
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;