gamecubate · March 14, 2016 04:09
diff --git a/index.html b/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>
diff --git a/thumbnail.png b/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>