gamecubate/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">

<style>
	body {
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		margin: 0;
		width: 960px;
		height: 500px;
	}

	#map {
		height: 450px;
	}

	.node {
		border: solid 1px #000;
		font: 12px sans-serif;
		line-height: 12px;
		overflow: hidden;
		position: absolute;
	}

	form {
		margin: 10px;
	}
</style>


<div id="map"></div>
<form>
	<label><input type="checkbox" name="names" value="names" checked>Descriptions</label>
</form>

<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>

<script>
var data = {
	name: 'categories',
	children: [
		{ name:'Loyer de base', value:0.066 },
		{ name:'Pourcentage des recettes', value:0.0675 },
		{ name:'Pénalité pour manque d’entracte', value:0.03 },
		{ name:'Impression du billet', value:0.006 },
		{ name:'Frais de billetterie', value:0.155 },
		{ name:'Nourriture et rafraîchissements', value:0.008 },
		{ name:'Autre frais', value:0.03 },
		{ name:'SOCAN', value:0.025 },
		{ name:'Salaire techniciens', value:0.133 },
		{ name:'Coûts pré-prod et mise en marché étalés', value:0.083 },
		{ name:'Droits d’auteur', value:0.074 },
		{ name:'Droits de suite', value:0.006 },
		{ name:'Frais de carte de crédit', value:0.0337 },
		{ name:'Producteur', value:0.1104 },
		{ name:'Artiste', value:0.175 }
	]
};

var
	map = d3.select('#map'),
	w = parseInt(map.style('width')),
	h = parseInt(map.style('width'));

var color = d3.scale.category20c();

var treemap = d3.layout.treemap()
	.size([w,h])
	.sticky(true)
	.value(function(d) { return d.value; });

var node = map.datum(data).selectAll(".node")
		.data(treemap.nodes)
	.enter().append("div")
		.attr("class", "node")
		.call(position)
		.style("background", function(d) { return color(d.name); })//d.children ? color(d.name) : null; })
		.call(name);

d3.select('input').on('change', function() {
	map.selectAll('.node').call(name);
});

function name() {
	var showNames = d3.select('input').property('checked');
	this.text(function(d){ return showNames ? d.name : ''; });
}

function position() {
	this
		.style("left", function(d) { return d.x + "px"; })
		.style("top", function(d) { return d.y + "px"; })
		.style("width", function(d) { return Math.max(0, d.dx - 1) + "px"; })
		.style("height", function(d) { return Math.max(0, d.dy - 1) + "px"; });
}
</script>

## thumbnail.png
_
	<!DOCTYPE html>
	<meta charset="utf-8">

	<style>
	body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin: 0;
	width: 960px;
	height: 500px;
	}

	#map {
	height: 450px;
	}

	.node {
	border: solid 1px #000;
	font: 12px sans-serif;
	line-height: 12px;
	overflow: hidden;
	position: absolute;
	}

	form {
	margin: 10px;
	}
	</style>


	<div id="map"></div>
	<form>
	<label><input type="checkbox" name="names" value="names" checked>Descriptions</label>
	</form>

	<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>

	<script>
	var data = {
	name: 'categories',
	children: [
	{ name:'Loyer de base', value:0.066 },
	{ name:'Pourcentage des recettes', value:0.0675 },
	{ name:'Pénalité pour manque d’entracte', value:0.03 },
	{ name:'Impression du billet', value:0.006 },
	{ name:'Frais de billetterie', value:0.155 },
	{ name:'Nourriture et rafraîchissements', value:0.008 },
	{ name:'Autre frais', value:0.03 },
	{ name:'SOCAN', value:0.025 },
	{ name:'Salaire techniciens', value:0.133 },
	{ name:'Coûts pré-prod et mise en marché étalés', value:0.083 },
	{ name:'Droits d’auteur', value:0.074 },
	{ name:'Droits de suite', value:0.006 },
	{ name:'Frais de carte de crédit', value:0.0337 },
	{ name:'Producteur', value:0.1104 },
	{ name:'Artiste', value:0.175 }
	]
	};

	var
	map = d3.select('#map'),
	w = parseInt(map.style('width')),
	h = parseInt(map.style('width'));

	var color = d3.scale.category20c();

	var treemap = d3.layout.treemap()
	.size([w,h])
	.sticky(true)
	.value(function(d) { return d.value; });

	var node = map.datum(data).selectAll(".node")
	.data(treemap.nodes)
	.enter().append("div")
	.attr("class", "node")
	.call(position)
	.style("background", function(d) { return color(d.name); })//d.children ? color(d.name) : null; })
	.call(name);

	d3.select('input').on('change', function() {
	map.selectAll('.node').call(name);
	});

	function name() {
	var showNames = d3.select('input').property('checked');
	this.text(function(d){ return showNames ? d.name : ''; });
	}

	function position() {
	this
	.style("left", function(d) { return d.x + "px"; })
	.style("top", function(d) { return d.y + "px"; })
	.style("width", function(d) { return Math.max(0, d.dx - 1) + "px"; })
	.style("height", function(d) { return Math.max(0, d.dy - 1) + "px"; });
	}
	</script>