hierarchical chart

CSS

text {
  font: 10px sans-serif;
}

rect.background {
  fill: white;
}

.axis {
  shape-rendering: crispEdges;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
}

JavaScript

var root = {
	"name": "root",
	"children": [{
		"name": "Ambulatorial",
		"children": [{
			"name": "Sala de Imunização",
			"size": 1
		}, {
			"name": "Sala de Enfermagem (Serviços)",
			"size": 3
		}, {
			"name": "Clínicas Indiferenciado",
			"size": 6
		}, {
			"name": "Clínicas Especializadas",
			"size": 4
		}]
	}, {
		"name": "Hospitalar",
		"children": [{
			"name": "Leitos de Alojamento Conjunto",
			"size": 5
		}, {
			"name": "Leitos RN Patológico",
			"size": 2
		}, {
			"name": "Leitos RN Normal",
			"size": 3
		}, {
			"name": "Sala de Pré-Parto",
			"size": 1
		}, {
			"name": "Sala de Recuperação",
			"size": 1
		}, {
			"name": "Sala de Cururgia (Centro Cirúrgico)",
			"size": 3
		}]
	}, {
		"name": "Urgência e Emergência",
		"children": [{
			"name": "Sala de Atendimento a Paciente Crítico/Sala de Estabilização",
			"size": 1
		}, {
			"name": "Consultórios Médicos",
			"size": 5
		}, {
			"name": "Sala de Curativo",
			"size": 1
		}, {
			"name": "Sala de Gesso",
			"size": 1
		}, {
			"name": "Sala de Repouso/Observação – Masculino",
			"size": 1
		}, {
			"name": "Sala de Repouso/Observação – Feminino",
			"size": 1
		}, {
			"name": "Sala de Repouso/Observação – Pediátrica",
			"size": 1
		}, {
			"name": "Sala de Atendimento Indiferenciado",
			"size": 1
		}, {
			"name": "Sala de Atendimento Pediátrico",
			"size": 1
		}]
	}]
};

var margin = {top: 30, right: 120, bottom: 0, left: 120},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom,
    valueMargin = 4;

var x = d3.scale.linear()
    .range([0, width]);

var barHeight = 20;

var color = d3.scale.ordinal()
    .range(["steelblue", "#ccc"]);

var duration = 750,
    delay = 25;

var partition = d3.layout.partition()
    .value(function(d) { return d.size; });

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("top");

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height +...