primera puesta a punto
This commit is contained in:
commit
7fa1b82f58
5 changed files with 391 additions and 0 deletions
6
README.org
Normal file
6
README.org
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
* Mapas mentales
|
||||
|
||||
Archivos importantes:
|
||||
- =madrid-destino.json=, los datos de la estructura en formato JSON.
|
||||
- =madrid-destino-d3js.html=, el ejercicio de =opml2json= que sigue el de Mike Bostok con [[https://d3js.org][D3js]]
|
||||
- =madrid-destino-pintorajs.html=, el mapa mental con [[https://pintorajs.vercel.app/][Pintora.js]]
|
||||
174
madrid-destino-d3js.html
Normal file
174
madrid-destino-d3js.html
Normal file
|
|
@ -0,0 +1,174 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Dataflick Data Visualisation - India - 12th Year Plan</title>
|
||||
<link type="text/css" rel="stylesheet" href="css/style.css"/>
|
||||
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
|
||||
<style type="text/css">
|
||||
.node circle {
|
||||
cursor: pointer;
|
||||
fill: #fff;
|
||||
stroke: steelblue;
|
||||
stroke-width: 1.5px;
|
||||
}
|
||||
|
||||
.node text {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
path.link {
|
||||
fill: none;
|
||||
stroke: #ccc;
|
||||
stroke-width: 1.5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="body">
|
||||
<h1>Estructura de Madrid Destino</h1>
|
||||
<div id="footer">
|
||||
<p>Realizado con <a href="https://github.com/vchatterji/opml2json">opml2json</a></p>
|
||||
<div class="hint"><p>pincha para expandir o colapsar</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
var m = [20, 120, 20, 120],
|
||||
w = 1280 - m[1] - m[3],
|
||||
h = 800 - m[0] - m[2],
|
||||
i = 0,
|
||||
root;
|
||||
|
||||
var tree = d3.layout.tree()
|
||||
.size([h, w]);
|
||||
|
||||
var diagonal = d3.svg.diagonal()
|
||||
.projection(function(d) { return [d.y, d.x]; });
|
||||
|
||||
var vis = d3.select("#body").append("svg:svg")
|
||||
.attr("width", w + m[1] + m[3])
|
||||
.attr("height", h + m[0] + m[2])
|
||||
.append("svg:g")
|
||||
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
|
||||
|
||||
d3.json("madrid-destino.json", function(json) {
|
||||
root = json;
|
||||
root.x0 = h / 2;
|
||||
root.y0 = 0;
|
||||
|
||||
function toggleAll(d) {
|
||||
if (d.children) {
|
||||
d.children.forEach(toggleAll);
|
||||
toggle(d);
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize the display to show a few nodes.
|
||||
root.children.forEach(toggleAll);
|
||||
|
||||
update(root);
|
||||
});
|
||||
|
||||
function update(source) {
|
||||
var duration = d3.event && d3.event.altKey ? 5000 : 500;
|
||||
|
||||
// Compute the new tree layout.
|
||||
var nodes = tree.nodes(root).reverse();
|
||||
|
||||
// Normalize for fixed-depth.
|
||||
nodes.forEach(function(d) { d.y = d.depth * 180; });
|
||||
|
||||
// Update the nodes…
|
||||
var node = vis.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("svg:g")
|
||||
.attr("class", "node")
|
||||
.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
|
||||
.on("click", function(d) { toggle(d); update(d); });
|
||||
|
||||
nodeEnter.append("svg:circle")
|
||||
.attr("r", 1e-6)
|
||||
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
|
||||
|
||||
nodeEnter.append("svg: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", 1e-6);
|
||||
|
||||
// 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" : "#fff"; });
|
||||
|
||||
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 = vis.selectAll("path.link")
|
||||
.data(tree.links(nodes), function(d) { return d.target.id; });
|
||||
|
||||
// Enter any new links at the parent's previous position.
|
||||
link.enter().insert("svg:path", "g")
|
||||
.attr("class", "link")
|
||||
.attr("d", function(d) {
|
||||
var o = {x: source.x0, y: source.y0};
|
||||
return diagonal({source: o, target: o});
|
||||
})
|
||||
.transition()
|
||||
.duration(duration)
|
||||
.attr("d", diagonal);
|
||||
|
||||
// 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.
|
||||
function toggle(d) {
|
||||
if (d.children) {
|
||||
d._children = d.children;
|
||||
d.children = null;
|
||||
} else {
|
||||
d.children = d._children;
|
||||
d._children = null;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
84
madrid-destino-pintorajs.html
Normal file
84
madrid-destino-pintorajs.html
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="author" content="Adolfo Antón Bravo">
|
||||
<link rel="stylesheet" type="text/css" href="pintora.css" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/@pintora/standalone"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Estructura de Madrid-Destino 2016 con pintora.js</h1>
|
||||
<section>
|
||||
<div class="pintora">
|
||||
mindmap
|
||||
title: Madrid-Destino
|
||||
|
||||
** Presidente
|
||||
*** Consejero delegado
|
||||
*** Dirección General de Contenidos y espacios culturales
|
||||
**** Actividades culturales
|
||||
*** Departamentos
|
||||
**** Financiero y ventas
|
||||
***** Presupuestos y control financiero
|
||||
***** Administración y encomiendas
|
||||
***** Ventas y patrocinio
|
||||
***** Alquileres
|
||||
**** Legal
|
||||
***** Contratación
|
||||
***** Protección de datos, marcas y patentes
|
||||
**** Recursos humanos
|
||||
***** Relaciones laborales
|
||||
***** Administración de personal
|
||||
***** Planificación, organización y prevención de riesgos
|
||||
***** Gestión rrhh
|
||||
**** Seguridad y emergencias
|
||||
***** Seguridad
|
||||
***** Viabilidad técnica
|
||||
***** Coordinación de actividades empresariales y planes de autopromoción
|
||||
***** Producción de eventos
|
||||
**** Infraestructuras
|
||||
***** Proyectos y obras
|
||||
***** Mantenimiento y servicio
|
||||
***** Asesoramiento técnico
|
||||
**** Coordinación general
|
||||
***** Estrategia
|
||||
***** Servicios generales
|
||||
***** Secretaría y gestión documental, Tecnología
|
||||
**** Comunicación y marketing
|
||||
***** Comunicación
|
||||
***** Publicidad
|
||||
***** Identidad gráfica y audiovisual
|
||||
**** Espacios culturales
|
||||
***** Programación cultural
|
||||
***** Teatros
|
||||
****** Teatro Español y Naves
|
||||
****** Teatro Fernán Gómez
|
||||
****** Teatro Circo Price
|
||||
***** Daoiz y Velarde
|
||||
***** CentroCentro
|
||||
***** Conde Duque
|
||||
***** Medialab-Prado
|
||||
***** Matadero
|
||||
****** Intermediae
|
||||
****** Cineteca
|
||||
**** Turismo
|
||||
***** Promoción turística
|
||||
***** Marketing turístico y partenariado
|
||||
***** Madrid Convention Bureau
|
||||
***** Atención, información y proyectos turísticos.
|
||||
***** Desarrollo tecnológico y audiovisual
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<script>
|
||||
pintora.default.initBrowser();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
118
madrid-destino.json
Normal file
118
madrid-destino.json
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
{
|
||||
"name": "Madrid- Destino",
|
||||
"children": [
|
||||
{
|
||||
"name": "Presidente"
|
||||
},
|
||||
{
|
||||
"name": "Consejero Delegado"
|
||||
},
|
||||
{
|
||||
"name": "Dirección General de Contenidos y espacios culturales",
|
||||
"children": [
|
||||
{
|
||||
"name": "Actvidades culturales"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Departamentos",
|
||||
"children": [
|
||||
{
|
||||
"name": "Financiero y ventas",
|
||||
"children": [
|
||||
{"name": "Presupuestos y control financiero"},
|
||||
{"name": "Administración y encomiendas"},
|
||||
{"name": "Ventas y patrocinio"},
|
||||
{"name": "Alquileres"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Legal",
|
||||
"children": [
|
||||
{"name": "Contratación"},
|
||||
{"name": "Protección de datos, marcas y patentes"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Recursos humanos",
|
||||
"children": [
|
||||
{"name": "Relaciones laborales"},
|
||||
{"name": "Administración de personal"},
|
||||
{"name": "Planificación, organización y prevención de riesgos"},
|
||||
{"name": "Gestión de RRHH"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Seguridad y emergencias",
|
||||
"children": [
|
||||
{"name": "Seguridad"},
|
||||
{"name": "Viabilidad técnica"},
|
||||
{"name": "Coordinación de actividades empresariales y planes de auto promoción"},
|
||||
{"name": "Producción de eventos"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Infraestructuras",
|
||||
"children": [
|
||||
{"name": "Proyectos y obras"},
|
||||
{"name": "Mantenimiento y servicio"},
|
||||
{"name": "Asesoramiento técnico"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Coordinación General",
|
||||
"children": [
|
||||
{"name": "Estrategia"},
|
||||
{"name": "Servicios generales"},
|
||||
{"name": "Secretaría y gestión documental, Tecnología"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Comunicación y marketing",
|
||||
"children": [
|
||||
{"name": "Comunicación"},
|
||||
{"name": "Publicidad"},
|
||||
{"name": "Identidad gráfica y audiovisual"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Espacios culturales",
|
||||
"children": [
|
||||
{"name": "Programación cultural"},
|
||||
{
|
||||
"name": "Teatros",
|
||||
"children": [
|
||||
{"name": "Teatro Español y Naves"},
|
||||
{"name": "Teatro Fernán Gómez"},
|
||||
{"name": "Teatro Circo Price"}
|
||||
]
|
||||
},
|
||||
{"name": "Daoiz y Velarde"},
|
||||
{"name": "Centro Centro"},
|
||||
{"name": "Conde Duque"},
|
||||
{"name": "Medialab-Prado"},
|
||||
{
|
||||
"name": "Matadero",
|
||||
"children": [
|
||||
{"name": "Intermediae"},
|
||||
{"name": "Cineteca"}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Turismo",
|
||||
"children": [
|
||||
{"name": "Promoción turística"},
|
||||
{"name": "Marketing turístico y partenariado"},
|
||||
{"name": "Madrid Convention Bureau"},
|
||||
{"name": "Atención, información y proyectos turísticos"},
|
||||
{"name": "Desarrollo tecnológico y audiovisual"}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
9
pintora.css
Normal file
9
pintora.css
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
|
||||
section {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.pintora-wrapper {
|
||||
box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
Loading…
Reference in a new issue