esuarezd/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## data.csv

          
            localidad
            Tradicional
            Adultos
            Tradicional y Adultos
            Sector Oficial
            Sector No Oficial

            
              SUBA
              29
              1
              2
              9
              23

            
              ENGATIVA
              19
              1
              4
              8
              16

            
              KENNEDY
              23
              1
              0
              10
              14

            
              CIUDAD BOLIVAR
              13
              0
              2
              8
              7

            
              USME
              15
              0
              0
              11
              4

            
              BOSA
              11
              1
              2
              6
              8

            
              SAN CRISTOBAL
              9
              1
              1
              7
              4

            
              USAQUEN
              11
              0
              0
              5
              6

            
              RAFAEL URIBE
              5
              0
              5
              9
              1

            
              ANTONIO NARIÑO
              5
              1
              2
              4
              4

            
              BARRIOS UNIDOS
              6
              1
              0
              4
              3

            
              FONTIBON
              5
              0
              1
              5
              1

            
              TUNJUELITO
              5
              0
              1
              4
              2

            
              PUENTE ARANDA
              5
              0
              0
              4
              1

            
              LOS MARTIRES
              3
              0
              0
              2
              1

            
              SANTA FE
              2
              0
              1
              3
              0

            
              TEUSAQUILLO
              0
              1
              2
              0
              3

            
              CANDELARIA
              1
              0
              0
              0
              1

            
              CHAPINERO
              1
              1
              0
              1
              1

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

body {
  font: 10px sans-serif;
}

svg {
  padding: 10px 0 0 10px;
}

.legend {
  vertical-align: top;
}

.label {
  text-anchor: middle;
}

.label-name {
  font-weight: bold;
}

</style>
<body>
<script src="//d3js.org/d3.v4.0.0-alpha.15.min.js"></script>
<script>

var formatSum = d3.format(".1s");

var padding = 10;

var radius = d3.scaleSqrt()
    .range([0, 220]);

var color = d3.scaleOrdinal()
    .range(["#6b486b","#7b6888","#8a89a6", "#d0743c", "#ff8c00"]);

var arc = d3.arc()
    .padRadius(50);

var pie = d3.pie()
    .sort(null)
    .padAngle(0.02)
    .value(function(d) { return d.schools; });

d3.csv("data.csv", function(d, i, columns) {
  return {
    state: d.localidad,
    sum: d3.sum(columns.slice(1), function(key) { return +d[key]; }),
    sectores: columns.slice(1).map(function(key) {
      return {
        sector: key,
        schools: +d[key]
      };
    })
  };
}, function(error, data) {
  if (error) throw error;

  radius.domain([0, d3.max(data, function(d) { return d.sum; })]);

  color.domain(data.columns.slice(1));

  var legend = d3.select("body").append("svg")
      .attr("class", "legend")
      .attr("width", 120)
      .attr("height", (data.columns.length - 1) * 20)
    .selectAll("g")
      .data(data.columns.slice(1).reverse())
    .enter().append("g")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

  legend.append("rect")
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);

  legend.append("text")
      .attr("x", 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .text(function(d) { return d; });

  var svg = d3.select("body").selectAll(".pie")
      .data(data.sort(function(a, b) { return b.sum - a.sum; }))
    .enter().append("svg")
      .attr("class", "pie")
      .each(multiple)
    .select("g");

  var label = svg.append("text")
      .attr("class", "label");

  label.append("tspan")
      .attr("class", "label-name")
      .attr("x", 0)
      .attr("dy", "-.2em")
      .text(function(d) { return d.state; });

  label.append("tspan")
      .attr("class", "label-value")
      .attr("x", 0)
      .attr("dy", "1.1em")
      .text(function(d) { return formatSum(d.sum)/2; });

  function multiple(d) {
    var r = radius(d.sum);

    var svg = d3.select(this)
        .attr("width", r * 2)
        .attr("height", r * 2)
      .append("g")
        .attr("transform", "translate(" + r + "," + r + ")");

    svg.selectAll(".arc")
        .data(function(d) { return pie(d.sectores); })
      .enter().append("path")
        .attr("class", "arc")
        .attr("d", arc.outerRadius(r).innerRadius(r * 0.6))
        .style("fill", function(d) { return color(d.data.sector); });
  }
});

</script>
localidad	Tradicional	Adultos	Tradicional y Adultos	Sector Oficial	Sector No Oficial
SUBA	29	1	2	9	23
ENGATIVA	19	1	4	8	16
KENNEDY	23	1	0	10	14
CIUDAD BOLIVAR	13	0	2	8	7
USME	15	0	0	11	4
BOSA	11	1	2	6	8
SAN CRISTOBAL	9	1	1	7	4
USAQUEN	11	0	0	5	6
RAFAEL URIBE	5	0	5	9	1
ANTONIO NARIÑO	5	1	2	4	4
BARRIOS UNIDOS	6	1	0	4	3
FONTIBON	5	0	1	5	1
TUNJUELITO	5	0	1	4	2
PUENTE ARANDA	5	0	0	4	1
LOS MARTIRES	3	0	0	2	1
SANTA FE	2	0	1	3	0
TEUSAQUILLO	0	1	2	0	3
CANDELARIA	1	0	0	0	1
CHAPINERO	1	1	0	1	1
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	font: 10px sans-serif;
	}

	svg {
	padding: 10px 0 0 10px;
	}

	.legend {
	vertical-align: top;
	}

	.label {
	text-anchor: middle;
	}

	.label-name {
	font-weight: bold;
	}

	</style>
	<body>
	<script src="//d3js.org/d3.v4.0.0-alpha.15.min.js"></script>
	<script>

	var formatSum = d3.format(".1s");

	var padding = 10;

	var radius = d3.scaleSqrt()
	.range([0, 220]);

	var color = d3.scaleOrdinal()
	.range(["#6b486b","#7b6888","#8a89a6", "#d0743c", "#ff8c00"]);

	var arc = d3.arc()
	.padRadius(50);

	var pie = d3.pie()
	.sort(null)
	.padAngle(0.02)
	.value(function(d) { return d.schools; });

	d3.csv("data.csv", function(d, i, columns) {
	return {
	state: d.localidad,
	sum: d3.sum(columns.slice(1), function(key) { return +d[key]; }),
	sectores: columns.slice(1).map(function(key) {
	return {
	sector: key,
	schools: +d[key]
	};
	})
	};
	}, function(error, data) {
	if (error) throw error;

	radius.domain([0, d3.max(data, function(d) { return d.sum; })]);

	color.domain(data.columns.slice(1));

	var legend = d3.select("body").append("svg")
	.attr("class", "legend")
	.attr("width", 120)
	.attr("height", (data.columns.length - 1) * 20)
	.selectAll("g")
	.data(data.columns.slice(1).reverse())
	.enter().append("g")
	.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

	legend.append("rect")
	.attr("width", 18)
	.attr("height", 18)
	.style("fill", color);

	legend.append("text")
	.attr("x", 24)
	.attr("y", 9)
	.attr("dy", ".35em")
	.text(function(d) { return d; });

	var svg = d3.select("body").selectAll(".pie")
	.data(data.sort(function(a, b) { return b.sum - a.sum; }))
	.enter().append("svg")
	.attr("class", "pie")
	.each(multiple)
	.select("g");

	var label = svg.append("text")
	.attr("class", "label");

	label.append("tspan")
	.attr("class", "label-name")
	.attr("x", 0)
	.attr("dy", "-.2em")
	.text(function(d) { return d.state; });

	label.append("tspan")
	.attr("class", "label-value")
	.attr("x", 0)
	.attr("dy", "1.1em")
	.text(function(d) { return formatSum(d.sum)/2; });

	function multiple(d) {
	var r = radius(d.sum);

	var svg = d3.select(this)
	.attr("width", r * 2)
	.attr("height", r * 2)
	.append("g")
	.attr("transform", "translate(" + r + "," + r + ")");

	svg.selectAll(".arc")
	.data(function(d) { return pie(d.sectores); })
	.enter().append("path")
	.attr("class", "arc")
	.attr("d", arc.outerRadius(r).innerRadius(r * 0.6))
	.style("fill", function(d) { return color(d.data.sector); });
	}
	});

	</script>