Santander educacion Colapsible2

.block

license: gpl-3.0

README.md

An interactive version of a Reingold–Tilford tree. Click on the nodes to expand or collapse.

forked from mbostock's block: Collapsible Tree

forked from Adlopez2016's block: Santander educacion Colapsible

flare.json

{
 "name": "Santander",
 "children": [
  {
   "name": "Rural",
   "children": [
    {
     "name": "Oficial",
     "children": [
{"name":"Aguada","size":86},
{"name":"Albania","size":459},
{"name":"Aratoca","size":1693},
{"name":"Barbosa","size":2539},
{"name":"Barichara","size":532},
{"name":"Betulia","size":917},
{"name":"Bolívar","size":1505},
{"name" :"Cabrera","size":108},
{"name":"California","size":41},
{"name":"Capitanejo","size":177},
{"name":"Carcasí","size":701},
{"name":"Cepitá","size":219},
{"name":"Cerrito","size":335},
{"name":"Charalá","size":678},
{"name":"Charta","size":136},
{"name":"Chima","size":180},
{"name":"Chipatá","size":388},
{"name":"Cimitarra","size":3880},
{"name":"Concepción","size":386},
{"name":"Confines","size":147},
{"name":"Contratación","size":56},
{"name":"Coromoro","size":714},
{"name":"Curití","size":870},
{"name":"El Carmen De Chucurí","size":2475},
{"name":"El Guacamayo","size":171},
{"name":"El Peñón","size":597},
{"name":"El Playón","size":1216},
{"name":"Enciso","size":272},
{"name":"Florián","size":648},
{"name":"Galán","size":261},
{"name":"Gambita","size":430},
{"name":"Guaca","size":807},
{"name":"Guadalupe","size":312},
{"name":"Guapotá","size":122},
{"name":"Guavatá","size":419},
{"name":"Güepsa","size":80},
{"name":"Hato","size":321},
{"name":"Jesús María","size":143},
{"name":"Jordán","size":280},
{"name":"La Belleza","size":650},
{"name":"La Paz","size":500},
{"name":"Landázuri","size":1565},
{"name":"Lebríja","size":3120},
{"name":"Los Santos","size":2201},
{"name":"Macaravita","size":192},
{"name":"Málaga","size":187},
{"name":"Matanza","size":797},
{"name":"Mogotes","size":1250},
{"name":"Molagavita","size":633},
{"name":"Ocamonte","size":482},
{"name":"Oiba","size":946},
{"name":"Onzaga","size":334},
{"name":"Palmar","size":306},
{"name":"Palmas Del Socorro","size":154},
{"name":"Páramo","size":292},
{"name":"Pinchote","size":206},
{"name":"Puente Nacional","size":726},
{"name":"Puerto Parra","size":963},
{"name":"Puerto Wilches","size":5073},
{"name":"Rionegro","size":3524},
{"name":"Sabana De Torres","size":2594},
{"name":"San Andrés","size":858},
{"name":"San Benito","size":275},
{"name":"San Gil","size":1103},
{"name":"San Joaquín","size":211},
{"name":"San José De Miranda","size":300},
{"name":"San Miguel","size":115},
{"name":"San Vicente De Chucurí","size":3722},
{"name":"Santa Bárbara","size":267},
{"name":"Santa Helena Del Opón","size":532},
{"name":"Simacota","size":1358},
{"name":"Socorro","size":749},
{"name":"Suaita","size":1882},
{"name":"Sucre","size":1206},
{"name":"Suratá","size":398},
{"name":"Tona","size":1041},
{"name":"Valle De San José","size":539},
{"name":"Vélez","size":1302},
{"name":"Vetas","size":72},
{"name":"Villanueva","size":270},
{"name":"Zapatoca","size":564}
     ]
    },
    {
     "name": "Particular",
     "children": [
     {"name":"Barbosa","size":73},
{"name":"Barichara","size":67},
{"name":"Bolívar","size":72},
{"name":"Cabrera","size":16},
{"name":"California","size":16},
{"name":"Capitanejo","size":47},
{"name":"Carcasí","size":86},
{"name":"Cepitá","size":64},
{"name":"Cerrito","size":88},
{"name":"Charalá","size":56},
{"name":"Chima","size":37},
{"name":"Chipatá","size":18},
{"name":"Cimitarra","size":45},
{"name":"Concepción","size":174},
{"name":"Confines","size":44},
{"name":"Contratación","size":66},
{"name":"Coromoro","size":65},
{"name":"Curití","size":171},
{"name":"El Carmen De Chucurí","size":142},
{"name":"El Peñón","size":60},
{"name":"Encino","size":33},
{"name":"Enciso","size":84},
{"name":"Florián","size":24},
{"name":"Galán","size":44},
{"name":"Gambita","size":69},
{"name":"Guaca","size":153},
{"name":"Guadalupe","size":31},
{"name":"Guavatá","size":8},
{"name":"Güepsa","size":53},
{"name":"Hato","size":42},
{"name":"Jordán","size":37},
{"name":"La Belleza","size":113},
{"name":"La Paz","size":19},
{"name":"Lebríja","size":94},
{"name":"Macaravita","size":66},
{"name":"Málaga","size":172},
{"name":"Matanza","size":111},
{"name":"Mogotes","size":76},
{"name":"Molagavita","size":55},
{"name":"Ocamonte","size":23},
{"name":"Onzaga","size":115},
{"name":"Páramo","size":128},
{"name":"Pinchote","size":91},
{"name":"Puente Nacional","size":68},
{"name":"Puerto Parra","size":75},
{"name":"Puerto Wilches","size":206},
{"name":"Rionegro","size":149},
{"name":"San Andrés","size":128},
{"name":"San Benito","size":4},
{"name":"San Gil","size":368},
{"name":"San Joaquín","size":39},
{"name":"San José De Miranda","size":119},
{"name":"San Miguel","size":61},
{"name":"San Vicente De Chucurí","size":100},
{"name":"Santa Bárbara","size":71},
{"name":"Santa Helena Del Opón","size":130},
{"name":"Simacota","size":318},
{"name":"Socorro","size":181},
{"name":"Suaita","size":67},
{"name":"Sucre","size":106},
{"name":"Suratá","size":52},
{"name":"Tona","size":36},
{"name":"Valle De San José","size":32},
{"name":"Vélez","size":76},
{"name":"Villanueva","size":79},
{"name":"Zapatoca","size":147}
     ]
    }
      ]
  },
  {
   "name": "Urbano",
   "children": [
        {
     "name": "Oficial",
     "children": [
      {"name":"Aguada","size":194},
{"name":"Albania","size":207},
{"name":"Barbosa","size":1670},
{"name":"Barichara","size":685},
{"name":"Betulia","size":321},
{"name":"Bolívar","size":734},
{"name":"Cabrera","size":211},
{"name":"California","size":279},
{"name":"Capitanejo","size":819},
{"name":"Carcasí","size":96},
{"name":"Cepitá","size":146},
{"name":"Cerrito","size":850},
{"name":"Charalá","size":1978},
{"name":"Charta","size":311},
{"name":"Chima","size":271},
{"name":"Chipatá","size":306},
{"name":"Cimitarra","size":3642},
{"name":"Concepción","size":506},
{"name":"Confines","size":303},
{"name":"Contratación","size":615},
{"name":"Coromoro","size":279},
{"name":"Curití","size":1281},
{"name":"El Carmen De Chucurí","size":893},
{"name":"El Guacamayo","size":190},
{"name":"El Peñón","size":382},
{"name":"El Playón","size":1676},
{"name":"Encino","size":417},
{"name":"Enciso","size":397},
{"name":"Florián","size":491},
{"name":"Galán","size":285},
{"name":"Gambita","size":336},
{"name":"Guaca","size":148},
{"name":"Guadalupe","size":704},
{"name":"Guapotá","size":260},
{"name":"Guavatá","size":175},
{"name":"Güepsa","size":772},
{"name":"Hato","size":94},
{"name":"Jesús María","size":487},
{"name":"La Belleza","size":676},
{"name":"La Paz","size":258},
{"name":"Landázuri","size":910},
{"name":"Lebríja","size":3472},
{"name":"Los Santos","size":492},
{"name":"Macaravita","size":259},
{"name":"Málaga","size":4369},
{"name":"Matanza","size":361},
{"name":"Mogotes","size":1178},
{"name":"Molagavita","size":103},
{"name":"Ocamonte","size":337},
{"name":"Oiba","size":1274},
{"name":"Onzaga","size":350},
{"name":"Palmas Del Socorro","size":343},
{"name":"Páramo","size":595},
{"name":"Pinchote","size":500},
{"name":"Puente Nacional","size":2668},
{"name":"Puerto Parra","size":572},
{"name":"Puerto Wilches","size":3205},
{"name":"Rionegro","size":1978},
{"name":"Sabana De Torres","size":3895},
{"name":"San Andrés","size":847},
{"name":"San Benito","size":181},
{"name":"San Gil","size":7360},
{"name":"San Joaquín","size":202},
{"name":"San José De Miranda","size":348},
{"name":"San Miguel","size":378},
{"name":"San Vicente De Chucurí","size":2749},
{"name":"Santa Bárbara","size":151},
{"name":"Santa Helena Del Opón","size":193},
{"name":"Simacota","size":465},
{"name":"Socorro","size":4163},
{"name":"Suaita","size":116},
{"name":"Sucre","size":306},
{"name":"Suratá","size":274},
{"name":"Tona","size":237},
{"name":"Valle De San José","size":454},
{"name":"Vélez","size":2134},
{"name":"Vetas","size":248},
{"name":"Villanueva","size":912},
{"name":"Zapatoca","size":1134}
   ]
    },
    {
    "name": "Particular", 
    "Children":[ 
     {"name":"Aguadas","size":14},
{"name":"Albania","size":15},
{"name":"Barbosa","size":2134},
{"name":"Barichara","size":167},
{"name":"Capitanejo","size":7},
{"name":"Cimitarra","size":393},
{"name":"El Playón","size":76},
{"name":"Guapotá","size":28},
{"name":"Jesús María","size":7},
{"name":"Landázuri","size":121},
{"name":"Lebríja","size":1486},
{"name":"Los Santos","size":77},
{"name":"Málaga","size":136},
{"name":"Mogotes","size":47},
{"name":"Molagavita","size":17},
{"name":"Oiba","size":68},
{"name":"Palmas Del Socorro","size":42},
{"name":"Sabana De Torres","size":898},
{"name":"San Gil","size":3108},
{"name":"San Vicente De Chucurí","size":94},
{"name":"Simacota","size":6},
{"name":"Socorro","size":1392},
{"name":"Suaita","size":20},
{"name":"Tona","size":18},
{"name":"Valle De San José","size":66},
{"name":"Vélez","size":634},
{"name":"Vetas","size":33},
{"name":"Villanueva","size":25},
{"name":"Zapatocas","size":265}
    ]
  }
]
}, 
  {
   "name": "Grado",
   "children": [
    {
     "name": "Primaria",
     "children": [
      {"name": "Completa", "size": 31731},
      {"name": "Fin de semana", "size": 1},
      {"name": "Mañana", "size": 38429},
      {"name": "Tarde", "size": 10188}
  ]
    },
    {
     "name": "Bachillerato",
     "children": [
     {"name": "Completa", "size": 33769},
      {"name": "Fin de semana", "size": 3170},
      {"name": "Mañana", "size": 34849},
      {"name": "Tarde", "size": 4720},
      {"name": "Nocturna", "size": 3147}
          ]
    }
      ]
  }
 ]
}
]
}

index.html

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

.node {
  cursor: pointer;
}

.node circle {
  fill: #67ff3d;
  stroke: steelblue;
  stroke-width: 3px;
}

.node text {
  font: 10px sans-serif;
}

.link {
  fill: none;
  stroke: #7aff7a;
  stroke-width: 1.5px;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var margin = {top: 20, right: 20, bottom: 20, left: 440},
    width = 2000 - margin.right - margin.left,
    height = 2000 - margin.top - margin.bottom;

var i = 0,
    duration = 1000,
    root;

var tree = d3.layout.tree()
    .size([height, width]);

var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.y, d.x]; });

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.right + margin.left)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.json("flare.json", function(error, flare) {
  if (error) throw error;

  root = flare;
  root.x0 = height / 2;
  root.y0 = 0;

  function collapse(d) {
    if (d.children) {
      d._children = d.children;
      d._children.forEach(collapse);
      d.children = null;
    }
  }

  root.children.forEach(collapse);
  update(root);
});

d3.select(self.frameElement).style("height", "100px");

function update(source) {

  // Compute the new tree layout.
  var nodes = tree.nodes(root).reverse(),
      links = tree.links(nodes);

  // Normalize for fixed-depth.
  nodes.forEach(function(d) { d.y = d.depth * 180; });

  // Update the nodes…
  var node = svg.selectAll("g.node")
      .data(nodes, function(d) { return d.id || (d.id = ++i); });

  // Enter any new nodes at the parent's previous position.
  var nodeEnter = node.enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
      .on("click", click);

  nodeEnter.append("circle")
      .attr("r", 1e-6)
      .style("fill", function(d) { return d._children ? "steelblue" : "#00256b"; });

  nodeEnter.append("text")
      .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
      .attr("dy", ".35em")
      .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
      .text(function(d) { return d.name; })
      .style("fill-opacity", 0.00000336);

  // Transition nodes to their new position.
  var nodeUpdate = node.transition()
      .duration(duration)
      .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });

  nodeUpdate.select("circle")
      .attr("r", 4.5)
      .style("fill", function(d) { return d._children ? "lightsteelblue" : "#006aff"; });

  nodeUpdate.select("text")
      .style("fill-opacity", 1);

  // Transition exiting nodes to the parent's new position.
  var nodeExit = node.exit().transition()
      .duration(duration)
      .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
      .remove();

  nodeExit.select("circle")
      .attr("r", 1e-6);

  nodeExit.select("text")
      .style("fill-opacity", 1e-6);

  // Update the links…
  var link = svg.selectAll("path.link")
      .data(links, function(d) { return d.target.id; });

  // Enter any new links at the parent's previous position.
  link.enter().insert("path", "g")
      .attr("class", "link")
      .attr("d", function(d) {
        var o = {x: source.x0, y: source.y0};
        return diagonal({source: o, target: o});
      });

  // Transition links to their new position.
  link.transition()
      .duration(duration)
      .attr("d", diagonal);

  // Transition exiting nodes to the parent's new position.
  link.exit().transition()
      .duration(duration)
      .attr("d", function(d) {
        var o = {x: source.x, y: source.y};
        return diagonal({source: o, target: o});
      })
      .remove();

  // Stash the old positions for transition.
  nodes.forEach(function(d) {
    d.x0 = d.x;
    d.y0 = d.y;
  });
}

// Toggle children on click.
function click(d) {
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }
  update(d);
}

</script>