erc_treemap_fo.html

<!DOCTYPE html>
<html>
<head></head>
<style type="text/css">


#tree {
  width: 960px;
  height: 520px;
  background: #ddd;
}

text {
  pointer-events: none;
}

.grandparent text {
  font-weight: bold;
}

.barchart rect {
    fill : steelblue;
}

.barchart text {
    fill : white;
    font : 10px sans-serif;
    text-anchor: end;
}

rect {
  fill: none;
  stroke: #fff;
}

rect.parent,
.grandparent rect {
  stroke-width: 2px;
}

.grandparent rect {
  fill: orange;
}

.grandparent:hover rect {
  fill: #ee9700;
}

.children rect.parent,
.grandparent rect {
  cursor: pointer;
}

.children rect.parent {
  fill: #bbb;
  fill-opacity: 0.5;
}

.children:hover rect.child {
  stroke: #aaa;
}

.ui-state-default {
    font-size : 11px;
}

</style>
<body>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
<script type="text/javascript" src="http://www.billdwhite.com/wordpress/wp-content/js/browserdetect/browserdetect.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="pourover.js"></script>
<!-- <script charset="utf-8" src="d3.js" type="text/javascript"></script> -->
<style>
  #sortable { list-style-type: none; margin: 0; padding: 0; width: 100%; }
  #sortable li { margin: 3px 3px 3px 3px; padding: 1.0em; padding-left: 1.5em; font-size: 1.0em; height: 12px; }
  #sortable li span { position: absolute; margin-left: -1.3em; }
</style>
<div style="background:#aaf">
<h2>The ERC Data Browser</h2><p>
The European Research Council is responsible for disbursing billions of euros of research funding; this is an effort to understand that mass of data.<p>
<h4>Click the orange bar to zoom out, any colored rectangle to zoom in; hover over a rectangle for more data</h4><p>
Leaf nodes will display full summaries of a grant.  In some cases the display may get "wedged" and look erroneous after changing filters or reordering the tree; either reload or zoom in/out once and that should sort things out.
<hr>
</div>
<div style="background:#eeeeff">
<table>
<tr>
<td style="vertical-align: top;">
<div id="hierarchy">
<b>Drag to sort:</b><p>
<ul id="sortable">
    <li class="ui-state-default" value='category'><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Category</li>
    <li class="ui-state-default" value='call_year'><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Call Year</li>
    <li class="ui-state-default" value='call_domain'><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Call Domain</li>
    <li class="ui-state-default" value='country'><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Country</li>
</ul>
</div>
<b>Year:</b><p>
<div id="yeardiv"></div>
<select id="year" multiple="multiple">
</select>
<p>
<b>Country:</b><p>
<select id="country" multiple="multiple">
</select><p>
<b>Domain:</b><p>
<select id="domain" multiple="multiple">
</select><p>
<b>Category:</b><p>
<select id="category" multiple="multiple">
</select>
</td>
<td >
<div id="tree">
</div>
</td>
<td>
<div id="bargraphDiv">
</div>
</td>
</tr>
</table>
</div>

<script>
var arr = [ 
{ 'a' : 'a', 'b' : 1, 'c' : '5', 'size' : 2000, 'name' : 'adam' }, 
{ 'a' : 'b', 'b' : 2, 'c' : '6', 'size' : 4000, 'name' : 'bob' }, 
{ 'a' : 'a', 'b' : 2, 'c' : '6', 'size' : 6000, 'name' : 'charlie' }, 
{ 'a' : 'b', 'b' : 1, 'c' : '5', 'size' : 10000, 'name' : 'david' } 
];

var collection;
var years;
var countries;
var domains;
var categories;
var yearFilter;
var countryFilter;
var domainFilter;
var categoryFilter;
var dataView;

d3.json( "with_summary.json", function (d) { 
    arr = d; 
    collection = new PourOver.Collection( arr );
    years = _.sortBy(_.uniq(_.pluck( arr, "call_year" )));
    yearFilter = PourOver.makeExactFilter( "call_year", years );
    countries = _.sortBy(_.uniq(_.pluck( arr, "country" ) ));
    countryFilter = PourOver.makeExactFilter( "country", countries );
    domains = _.sortBy(_.uniq(_.pluck( arr, "call_domain" )));
    domainFilter = PourOver.makeExactFilter( "call_domain",  domains );
    categories = _.sortBy(_.uniq(_.pluck( arr, "category" )));
    categoryFilter = PourOver.makeExactFilter( "category", categories );

    //populate the UI
    var populateMultiSelect = function( id, data ) {
	d3.select(id).selectAll("option")
	    .data( data ).enter()
	    .append( "option" )
	    .attr( "value", function(d) { return d } )
	    .attr("selected", "selected")
	    .text( function(d) { 
		if (key) {
		    return key[d] || d;
		} else {
		    return d;
		}
	    } )
    }

    populateMultiSelect( "select#year", years )
    populateMultiSelect( "select#country", countries )
    populateMultiSelect( "select#domain", domains, {
	'CoG' : 'CoG: Consolidator Grant',
	'ID1' : 'ID1: Interdisciplinary Grants',
	'PoC' : 'PoC: Proof of Concept Grant',
	'SG-' : 'SG-: (special?)',
	'SyG' : 'Synergy Grant',
	'PE1' : 'PE1: Mathematical Foundations (all areas of mathematics and foundations of comp. sci, phys, stats)',
	'PE2' : 'PE2: Fundamental constituents of matter: particle, nuclear, plasma, atomic, molecular, gas, optical physics',
	'PE3' : 'PE3: Condensed matter physics: structure, electronic properties, fluids, nanosciences',
	'PE4' : 'PE4: Physical and analytical chemical sciences: analytical chemistry, chemical theory, physical chemistry/chemical physics',
	'PE5' : 'PE5: Materials and synthesis: materials synthesis, structure-properties relations, functional and advanced materials, molecular architecture, organic chemistry',
	'PE6' : 'PE6: Computer science and informatics: informatics and information systems, computer science, scientific computing, intelligent systems',
	'PE7' : 'PE7: Systems and communication engineering: electronic, communication, optical and systems engineering',
	'PE8' : 'PE8: Products and processes engineering: product design, process design and control, construction methods, civil engineering, energy systems, material engineering',
	'PE9' : 'PE9: Universe sciences: astro-physics/chemistry/biology; solar system; stellar, galactic and extragalactic astronomy, planetary systems, cosmology, space science, instrumentation',
	'PE10' : 'PE10: Earth system science: physical geography, geology, geophysics, meteorology, oceanography, climatology, ecology, global environmental change, biogeochemical cycles, natural resources management.',
	'SH1' : 'SH1: Individuals, institutions and markets: economics, finance and management',
	'SH2' : 'SH2: Institutions, values and beliefs and behaviour: sociology, social anthropology, political science, law, communication, social studies of science and technology',
	'SH3' : 'SH3: Environment and society: environmental studies, demography, social geography, urban and regional studies',
	'SH4' : 'SH4: The Human Mind and its complexity: cognition, psychology, linguistics, philosophy and education',
	'SH5' : 'SH5: Cultures and cultural production: literature, visual and performing arts, music, cultural and comparative studies',
	'SH6' : 'SH6: The study of the human past: archaeology, history and memory.',
	'LS1' : 'LS1: Molecular and Structural Biology and Biochemistry: molecular biology, biochemistry, biophysics, structural biology, biochemistry of signal transduction',
	'LS2' : 'LS2: Genetics, Genomics, Bioinformatics and Systems Biology: genetics, population genetics, molecular genetics, genomics, transcriptomics, proteomics, metabolomics, bioinformatics, computational biology, biostatistics, biological modelling and simulation, systems biology, genetic epidemiology',
	'LS3' : 'LS3: Cellular and Developmental Biology: cell biology, cell physiology, signal transduction, organogenesis, developmental genetics, pattern formation in plants and animals',
	'LS4' : 'LS4: Physiology, Pathophysiology and Endocrinology: organ physiology, pathophysiology, endocrinology, metabolism, ageing, regeneration, tumorigenesis, cardiovascular disease, metabolic syndrome',
	'LS5' : 'LS5: Neurosciences and neural disorders: neurobiology, neuroanatomy, neurophysiology, neurochemistry, neuropharmacology, neuroimaging, systems neuroscience, neurological disorders, psychiatry',
	'LS6' : 'LS6: Immunity and infection: immunobiology, aetiology of immune disorders, microbiology, virology, parasitology, global and other infectious diseases, population dynamics of infectious diseases, veterinary medicine',
	'LS7' : 'LS7: Diagnostic tools, therapies and public health: aetiology, diagnosis and treatment of disease, public health, epidemiology, pharmacology, clinical medicine, regenerative medicine, medical ethics',
	'LS8' : 'LS8: Evolutionary, population and environmental biology: evolution, ecology, animal behaviour, population biology, biodiversity, biogeography, marine biology, ecotoxicology, prokaryotic biology',
	'LS9' : 'LS9: Applied life sciences and biotechnology: agricultural, animal, fishery, forestry and food sciences; biotechnology, chemical biology, genetic engineering, synthetic biology, industrial biosciences; environmental biotechnology and remediation.'
    } );
    populateMultiSelect( "select#category", categories )

    collection.addFilters([yearFilter, countryFilter, domainFilter, categoryFilter]);

    var DataView = PourOver.View.extend({
	selectionFn : function() {
	    return collection.filters.call_year.current_query
		.and( collection.filters.country.current_query )
		.and( collection.filters.call_domain.current_query )
		.and( collection.filters.category.current_query );
	}
    });

    var queryAll = function( filter, arr ) {
	// make a union query of all the items in array
	if ( arr.length > 0 ) {
	    filter.query( arr[0] );
	    arr.slice(1,arr.length).forEach( function(a) {
		filter.unionQuery(a); 
	    });
	} else {
	    filter.query();
	}
    }
    

    //have to set all current queries first
    queryAll( collection.filters.call_year, years )
    queryAll( collection.filters.country, countries )
    queryAll( collection.filters.call_domain, domains )
    queryAll( collection.filters.category, categories )
    dataView = new DataView( "dataView", collection );
    setData( tree_from_array( dataView.getCurrentItems(), ['category', 'call_year','call_domain', 'country', ] ) ) 

    var resetData = function() {
	a = $("#sortable > li").map( function() { return $(this).attr("value") }).get();
	setData( tree_from_array( dataView.getCurrentItems(), a ) );
    }

    var multiSelectOnChangeFunction = function( id, filter ) {
	result = function( element, checked ) {
	    a = []
	    $(id).each( function() { 
		if ((this.value !== "multiselect-all") && this.selected) { 
		    a.push( this.value ); 
		} } );
	    queryAll( filter, a );
	    resetData();
	}
	return result
    }

    $(function() {
	$( "#sortable" ).sortable( {
	    update : function( event, ui ) { 
		resetData();
	    }
	});
	$( "#sortable" ).disableSelection();

	$( "#year" ).multiselect({
	    numberDisplayed : 0,
	    includeSelectAllOption : true,
	    onChange : multiSelectOnChangeFunction( "select#year > option", collection.filters.call_year )
	});
	$( "#country" ).multiselect({
	    numberDisplayed : 0,
	    includeSelectAllOption : true,
	    onChange : multiSelectOnChangeFunction( "select#country > option", collection.filters.country )
	});
	$( "#domain" ).multiselect({
	    numberDisplayed : 0,
	    includeSelectAllOption : true,
	    onChange : multiSelectOnChangeFunction( "select#domain > option", collection.filters.call_domain )
	});
	$( "#category" ).multiselect({
	    numberDisplayed : 0,
	    includeSelectAllOption : true,
	    onChange : multiSelectOnChangeFunction( "select#category > option", collection.filters.category )
	});
    });
} );

function children_has_key( n, key ) {
    result = false;
    n.children.forEach( function(c) {
	if (c.name == key) {
	    result = true;
	}
    })
    return result;
}

function child_with_name( n, key ) {
    result = null;
    n.children.forEach( function(c) {
	if (c.name == key) {
	    result = c; 
	}
    })
    return result;
}

//test for tree from http://bl.ocks.org/mbostock/4063550

function tree1_from_array( a, keys ) {
    var id = 1;
    var result = { "name" : "All ERC", "children" : [] }
    a.forEach( function( i ) {
	var ks = keys.slice(0, keys.length)
	var n = result;
	while (ks.length > 0) {
	    var this_key_name = ks[0]
	    var this_key = i[ks[0]]
	    if (children_has_key(n, this_key)) {
		n = child_with_name( n, this_key );
	    } else {
		n.children.push( {
		    "id" : id,
		    "name" : this_key,
		    "children" : []
		})
		id = id +1;
		n = child_with_name(n, this_key)
	    }
	    ks = ks.slice(1, ks.length);
	}
	n.children.push( {
	    "id" : id,
	    "name" : i.project + "\n" + i.erc_funding,
	    "size" : i.erc_funding, //size

	    "project" : i.project,
	    "acronym" : i.acronym,
	    "pi" : i.pi,
	    "hi" : i.hi,
	    "country" : i.country,
	    "call_details": i.call_details,
	    "hi_website" : i.hi_website,
	    "erc_funding" : i.erc_funding,
	    "duration" : i.duration,
	    "category" : i.category,
	    "summary" : i.summary
	});
	id = id + 1;
    })
    return result
}


var children_from_array = function( arr, keys ) {

    var _children_from_array = function( carr, ckey ) {
	return { name : ckey, children : children_from_array( carr, keys.slice(1,keys.length) ) }
    };

    var result;

    if (keys.length === 0) {
	// if keys.length == 0, this is an array of children; assume the name attribute exists
	result = arr;
    } else {
	// otherwise, group by the first key, and children are the remaining keys
	result = _.map( _.groupBy( arr, keys[0] ), _children_from_array )
    }

    return result;
}

var paint_tree = function( node, starting_id ) {
    // walks a tree and paints its nodes with an ID and additional data
    node.id = starting_id
    starting_id = starting_id + 1

    if (node.hasOwnProperty( "children" )) {
	node.children.forEach( function(c) {
	    starting_id = paint_tree(c, starting_id)
	})
    } else { 
	node.name = node.acronym
	node.size = node.erc_funding
    }

    return starting_id
}

var tree_from_array = function( arr, keys ) {
    var result = { name : "All ERC", children : children_from_array( arr, keys ) }
    paint_tree( result, 0 );
    return result;
}

var margin = { top: 20, right:0, bottom:0, left:0 };
var formatNumber = d3.format(",d");
var svg_width = 960;
var svg_height = 500;
var svg_id = 0;
var transitioning = false;
var colorScale = d3.scale.category20();

var formatMoney = function( d ) {
    if ( d > 1000000000 ) {
	return "\u20AC" + (d/1000000000).toFixed(2) + "B";
    } else if ( d > 1000000 ) {
	return "\u20AC" + (d/1000000).toFixed(2) + "M";
    } else {
	return "\u20AC" + d.toFixed(2);
    }
}

var hexToRgb = function(hex) {
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : null;
}

var componentToHex = function(c) {
    var hex = c.toString(16);
    return hex.length == 1 ? "0" + hex : hex;
}

var rgbToHex = function(rgb) { 
    return "#" + componentToHex(rgb.r) + componentToHex(rgb.g) + componentToHex(rgb.b);
}

var alphacomp = function( comp, backgnd, opacity ) {
    return Math.round( comp*opacity + backnd*(1-opacity) );
}

var blend = function( color, opacity, backgnd ) {
    var c = hexToRgb(color);
    c.r = alphacomp( c.r, opacity, backgnd.r );
    c.g = alphacomp( c.g, opacity, backgnd.g );
    c.b = alphacomp( c.b, opacity, backgnd.b );
    return rgbToHex(c);
}

var rgbaFromHex = function( color, opacity ) {
    var c = hexToRgb( color );
    result = 'rgba(' +c.r+ ',' +c.g+ ',' + c.b + ',' + opacity + ')';
    return result;
}

var make_bargraph = function(d) {
    d._children.sort( function(a,b) { return a.name > b.name; } )
    var width = 300;

    //console.log(d)

    var dataMax = d3.max(_.pluck( d._children, "size" ))
    var barX = d3.scale.linear()
	.domain([0, dataMax])
	.range([0,width])

    var barheight = svg_height / d._children.length;
    var chart = d3.select("div#bargraphDiv").append("svg")
	.attr("class", "barchart")
	.attr("id", "bargraph")
	.attr("width", width )
	.attr("height", svg_height )

    var bar = chart.selectAll("g")
	.data(d._children)
	.enter().append("g")
	.attr("transform", function(d,i) { return "translate(0, " +i*barheight + ")"; })

    bar.append("rect")
	.attr("width", function(d) { return barX(d.size); })
	.attr("height", barheight - 1)
	.style("fill", function(d) { 
	    if (d._children) {
		return rgbaFromHex( colorScale( d.name ), 0.7 ); 
	    } else {
		return rgbaFromHex( colorScale( d.parent.name ), 0.7 );
	    } 
	});

    bar.append("text")
	.attr("x", function(d) { return barX(d.size) - 3; } )
	.attr("y", barheight / 2 )
//	.attr("dy", "3.5em")
	.style("fill", "white")
	.style("font", "10px sans-serif")
	.style("text-anchor", "end")
	.text( function(d) { return formatMoney(d.size); } );

    bar.append("text")
	.attr("x", 3 )
	.attr("y", barheight/2 )
	.style("fill","white")
	.style("font", "10px sans-serif")
	.style("text-anchor", "start")
	.text( function(d) { return d.name; });


}

function make_svg() {
    return d3.select("div#tree").append("svg")
	.attr("id", "treeMap"+svg_id)
	.attr("width", svg_width + margin.left + margin.right )
	.attr("height", svg_height + margin.top + margin.bottom)
	.style("margin.left", -margin.left + "px" )
	.style("margin.right", -margin.right + "px" )
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
	.style("shape-rendering", "crispEdges");
//	.attr("transform","translate(" + svg_width/2 + "," + svg_width/2 + ")" );
}

var svg;// = make_svg();

var grandparent;

var make_grandparent = function( svg ) {
    var result = svg.append("g")
	.attr("class", "grandparent" );

    result.append( "rect" )
	.attr("y", -margin.top )
	.attr("width", svg_width )
	.attr("height", margin.top )

    result.append( "text" )
	.attr("x", 6)
	.attr("y", 6-margin.top)
	.attr("dy", ".75em" )

    return result;
}

/*
var tree = d3.layout.tree()
    .size([360, svg_width / 2 - 120])
    .separation( function(a,b) { return (a.parent == b.parent ? 1 : 2 ) / a.depth; });
*/

var x = d3.scale.linear()
    .domain([0,svg_width])
    .range([0, svg_width]);

var y = d3.scale.linear()
    .domain([0, svg_height])
    .range([0, svg_height]);


function makeTreemap() {
    return d3.layout.treemap()
	.children( function( d, depth ) { return depth ? null : d._children; } )
	.sort( function(a,b) { return a.value - b.value; } )
	.ratio( svg_height / svg_width * 0.5 * (1 + Math.sqrt(5)))
	.round(false)
	.value( function(d) { return d.size; } );
}

var treemap = makeTreemap();

//borrowing heavily from bost.ocks.org/mike/treemap

function setData( data ) {
    var initialize = function( root ) {
	root.x = root.y = 0;
	root.dx = svg_width;
	root.dy = svg_height;
	root.depth = 0;
    }

    var accumulate = function(d)  {
	// aggregate values; "normally done by treemap layout but not here because of our
	// custom implementation"  -- not sure what this means
	return (d._children = d.children) ?
	    d.size = d.children.reduce( function(p, v) { return p + accumulate(v); }, 0 )
	: d.size
    }

    var layout = function( d ) {
	if (d._children) {
	    treemap.nodes( {_children : d._children} );
	    d._children.forEach( function(c) {
		c.x = d.x + c.x * d.dx;
		c.y = d.y + c.y * d.dy;
		c.dx *= d.dx;
		c.dy *= d.dy;
		c.parent = d;
		layout(c)
	    });
	}
    }

    var display = function( d ) {

	var transition = function( d) {
	    if ( transitioning || !d) return;
	    transitioning = true;

	    var g2 = display(d),
	    t1 = g1.transition().duration(750),
	    t2 = g2.transition().duration(750);

	    //update the domain only after entering new elements
	    x.domain([d.x, d.x + d.dx]);
	    y.domain([d.y, d.y + d.dy]);

	    //enable antialiasing during transition
	    svg.style("shape-rendering", null);

	    //draw child nodes atop parent nodes
	    svg.selectAll(".depth").sort( function(a,b) { return a.depth - b.depth; } );

	    // fade-in entering text
	    g2.selectAll("text").style("fill-opacity", 0)

	    //transitioning to new view
	    t1.selectAll("text").call(text).style("fill-opacity", 0);
	    t2.selectAll("text").call(text).style("fill-opacity", 1);
	    t1.selectAll( function() { return this.getElementsByTagName("foreignObject"); }).call(foreignObject).style("opacity", 0);
	    t2.selectAll(function () { return this.getElementsByTagName("foreignObject"); }).call(foreignObject).style("opacity", 1);

	    t1.selectAll("rect").call(rect);
	    t2.selectAll("rect").call(rect);

	    //remove old node when transition finished
	    t1.remove().each("end", function() {
		svg.style("shape-rendering", "crispEdges" );
		transitioning = false;
	    });
	}

	grandparent.datum( d.parent )
	    .on("click", transition)
	    .select("text")
	    .text( name(d) );

	var g1 = svg.insert("g", ".grandparent" )
	    .datum(d)
	    .attr("class", "depth" );

	var g = g1.selectAll("g")
	    .data(d._children)
	    .enter().append("g");

	g.filter( function(d) { return d._children; })
	    .classed("children", true)
	    .on("click", transition);

	g.selectAll(".child")
	    .data( function(d) { return d._children || [d]; } )
	    .enter()
	    .append("rect")
	    .attr("class", "child" )
	    .call(rect)
	    .style("fill", function(d) { 
		return colorScale( d.parent.name );
	    } )
	    .append("title")
	    .text( titleText );

	g.append("rect")
	    .attr("class", "parent")
	    .call(rect)
	    .append("title")
	    .text( titleText )
	    .style("fill", function(d) {
		return colorScale( d.name );
	    });

	var fobj = g.append("foreignObject");

	fobj.attr("dy", ".75em")
	    .call(foreignObject)
	    .attr("class", "parent")
	    .append("xhtml:body")
	    .style("background-color", function(d) { //do this here so body and div have transparent backgnd
		return rgbaFromHex(colorScale(d.name), 0 );
	    })
	    .attr("xmlns","http://www.w3.org/1999/xhtml")
	    .append("div")
	    .html( function (d) { 
		if (d._children) {
		    return d.name;
		} else {
		    return d.project + "<p><b>PI:</b> " + d.pi + "\n<p><b>HI:</b> " + d.hi + "\n<p><b>Country:</b> " + d.country + "<p><b>Amount:</b> " + formatMoney( d.erc_funding ) + "<p><b>Duration:</b> " + d.duration;
		}
	    })

	    
	fobj.append("title")
	    .text( titleText );
	
	d3.select("#bargraph").remove();
	make_bargraph(d);
	return g;
    }

    var titleText = function(d) {
	if (d._children) {
	    return d.name;
	} else {
	    return d.summary;
	}
    };

    var foreignObject = function( f ) {
	var margin = 6;
	f.attr("x", function(d) { return x(d.x) + margin; } )
	    .attr("y", function(d) { return y(d.y) + margin ; } )
	    .attr("width", function(d) { return x(d.x + d.dx ) - x(d.x) - 2*margin; })
	    .attr("height", function(d) { return y(d.y + d.dy ) - y(d.y) - 2*margin; })

    }

    var text = function( text ) {
	text.attr("x", function(d) { return x(d.x) + 6; } )
	    .attr("y", function(d) { return y(d.y) + 6; });
    }

    var rect = function( rect ) {
	
	rect.attr("x", function(d) { return x(d.x); } )
	    .attr("y", function(d) { return y(d.y); } )
	    .attr("width", function(d) { return x(d.x + d.dx ) - x(d.x); })
	    .attr("height", function(d) { return y(d.y + d.dy) - y(d.y); });
    }

    var name = function(d) {
	return d.parent ? name(d.parent) + "." + d.name : d.name
    }

    d3.select("#treeMap0").remove();
    treemap = makeTreemap();
    svg = make_svg();
    grandparent = make_grandparent(svg);

    initialize( data );
    accumulate( data );
    layout( data );
    display( data );
}

</script>

</body>
</html>