forked from mbostock's block: Tidy Tree vs. Dendrogram
forked from anonymous's block: Tidy Tree vs. Dendrogram
| license: gpl-3.0 | |
| border: no | |
| height: 2400 |
forked from mbostock's block: Tidy Tree vs. Dendrogram
forked from anonymous's block: Tidy Tree vs. Dendrogram
| id,value | |
| Criterio, | |
| Criterio.Lenguaje, | |
| Criterio.Lenguaje.Java,1 | |
| Criterio.Lenguaje.JavaScript,1 | |
| Criterio.Lenguaje.Python,1 | |
| Criterio.Tipo_de_conjunto_de_datos, | |
| Criterio.Tipo_de_conjunto_de_datos.Tablas_y_Campos, | |
| Criterio.Tipo_de_conjunto_de_datos.Tablas_y_Campos.Tablas,1 | |
| Criterio.Tipo_de_conjunto_de_datos.Tablas_y_Campos.Campos, | |
| Criterio.Tipo_de_conjunto_de_datos.Grafos_y_Árboles, | |
| Criterio.Tipo_de_conjunto_de_datos.Grafos_y_Árboles.Grafos,1 | |
| Criterio.Tipo_de_conjunto_de_datos.Grafos_y_Árboles.Árboles,1 | |
| Criterio.Tipo_de_conjunto_de_datos.Datos_espaciales, | |
| Criterio.Tipo_de_conjunto_de_datos.Datos_espaciales.Datos_espaciales,1 | |
| Criterio.Tipo_de_conjunto_de_datos.Datos_espaciales.Geometrías,1 | |
| Criterio.Manejo_de_widgets, | |
| Criterio.Manejo_de_widgets.Modularización, | |
| Criterio.Manejo_de_widgets.Comunicación, | |
| Criterio.Tipos_de_interacción, | |
| Criterio.Tipos_de_interacción.Datos, | |
| Criterio.Tipos_de_interacción.Datos.Poll,1, | |
| Criterio.Tipos_de_interacción.Usuario_final, | |
| Criterio.Tipos_de_interacción.Usuario_final.Zoom,1, | |
| Criterio.Tipos_de_interacción.Usuario_final.Pop_up,1, | |
| Criterio.Tipos_de_interacción.Usuario_final.Drill_down,1, | |
| Criterio.Licencias, | |
| Criterio.Licencias.Dominio_público,1, | |
| Criterio.Licencias.Código_abierto,1, | |
| Criterio.Licencias.Código_abierto_robustas,1, | |
| Criterio.Licencias.Código_abierto_robustas.Fuertes,1, | |
| Criterio.Licencias.Código_abierto_robustas.Débiles,1, | |
| Criterio.Licencias.Código_cerrado,1, |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| .node circle { | |
| fill: #999; | |
| } | |
| .node text { | |
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| font-size 60em: | |
| font: 10px sans-serif; | |
| } | |
| .node--internal circle { | |
| fill: #555; | |
| } | |
| .node--internal text { | |
| text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff; | |
| } | |
| .link { | |
| fill: none; | |
| stroke: #555; | |
| stroke-opacity: 0.4; | |
| stroke-width: 1.5px; | |
| } | |
| form { | |
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| position: absolute; | |
| left: 10px; | |
| top: 10px; | |
| } | |
| label { | |
| display: block; | |
| } | |
| </style> | |
| <form> | |
| <label><input type="radio" name="mode" value="cluster" checked> Dendrogram</label> | |
| <label><input type="radio" name="mode" value="tree"> Tree</label> | |
| </form> | |
| <svg width="700" height="1200"></svg> | |
| <script src="//d3js.org/d3.v4.min.js"></script> | |
| <script> | |
| var svg = d3.select("svg"), | |
| width = +svg.attr("width"), | |
| height = +svg.attr("height"), | |
| g = svg.append("g").attr("transform", "translate(40,0)"); | |
| var tree = d3.tree() | |
| .size([height - 400, width - 160]); | |
| var cluster = d3.cluster() | |
| .size([height, width - 160]); | |
| var stratify = d3.stratify() | |
| .parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf(".")); }); | |
| d3.csv("flare.csv", function(error, data) { | |
| if (error) throw error; | |
| var root = stratify(data) | |
| .sort(function(a, b) { return (a.height - b.height) || a.id.localeCompare(b.id); }); | |
| cluster(root); | |
| var link = g.selectAll(".link") | |
| .data(root.descendants().slice(1)) | |
| .enter().append("path") | |
| .attr("class", "link") | |
| .attr("d", diagonal); | |
| var node = g.selectAll(".node") | |
| .data(root.descendants()) | |
| .enter().append("g") | |
| .attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); }) | |
| .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }); | |
| node.append("circle") | |
| .attr("r", 2.5); | |
| node.append("text") | |
| .attr("dy", 3) | |
| .attr("x", function(d) { return d.children ? -8 : 8; }) | |
| .style("text-anchor", function(d) { return d.children ? "end" : "start"; }) | |
| .text(function(d) { return d.id.substring(d.id.lastIndexOf(".") + 1); }); | |
| d3.selectAll("input") | |
| .on("change", changed); | |
| var timeout = setTimeout(function() { | |
| d3.select("input[value=\"tree\"]") | |
| .property("checked", true) | |
| .dispatch("change"); | |
| }, 1000); | |
| function changed() { | |
| timeout = clearTimeout(timeout); | |
| (this.value === "tree" ? tree : cluster)(root); | |
| var t = d3.transition().duration(750); | |
| node.transition(t).attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }); | |
| link.transition(t).attr("d", diagonal); | |
| } | |
| }); | |
| function diagonal(d) { | |
| return "M" + d.y + "," + d.x | |
| + "C" + (d.parent.y + 20) + "," + d.x | |
| + " " + (d.parent.y + 20) + "," + d.parent.x | |
| + " " + d.parent.y + "," + d.parent.x; | |
| } | |
| </script> |
| �PNG | |