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 | |