Public
Edited
Aug 28, 2024
diagrama = {
// Diagrama de Ikigai con D3.js en Observable
// Crear el contenedor SVG con un canvas más grande
const width = 1000;
const height = 1000;
const svg = d3.select(DOM.svg(width, height));
// Datos de los círculos
const data = [
{ name: 'Experiencias Profesionales', cx: 300, cy: 500, r: 250, color: '#ff9999' },
{ name: 'Intereses Personales', cx: 700, cy: 500, r: 250, color: '#99ccff' },
{ name: 'Situación Actual', cx: 500, cy: 300, r: 250, color: '#99ff99' },
{ name: 'Objetivos Futuros', cx: 500, cy: 700, r: 250, color: '#ffcc99' }
];
// Crear contenedor para las tooltips
const tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("visibility", "hidden")
.style("background", "white")
.style("border", "1px solid #ccc")
.style("padding", "5px")
.style("border-radius", "5px")
.style("font-size", "12px");
// Dibujar los círculos con nueva disposición y tamaño aumentado
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", d => d.cx)
.attr("cy", d => d.cy)
.attr("r", d => d.r)
.style("fill", d => d.color)
.style("fill-opacity", 0.5)
.on("mouseover", function(event, d) {
tooltip.style("visibility", "visible").text(d.name);
d3.select(this).style("fill-opacity", 0.7);
})
.on("mousemove", function(event) {
tooltip.style("top", (event.pageY - 10) + "px").style("left", (event.pageX + 10) + "px");
})
.on("mouseout", function() {
tooltip.style("visibility", "hidden");
d3.select(this).style("fill-opacity", 0.5);
});
// Añadir etiquetas de texto para los círculos principales
svg.selectAll("text")
.data(data)
.enter()
.append("text")
.attr("x", d => d.cx - 30)
.attr("y", d => d.cy + 30)
.attr("dy", ".35em") // Ajuste vertical para que el texto quede centrado
.text(d => d.name)
.attr("text-anchor", "middle")
.style("fill", "#000")
.style("font-size", "14px");
// Añadir etiquetas para las intersecciones, en tamaño más pequeño y formato vertical
svg.append("text")
.attr("x", 400) // Entre "Experiencias Profesionales" y "Intereses Personales"
.attr("y", 500)
.text("Posibilidades y limitaciones")
.attr("text-anchor", "middle")
.style("fill", "#000")
.style("font-size", "10px")
.call(wrap, 60);
svg.append("text")
.attr("x", 600) // Entre "Intereses Personales" y "Situación Actual"
.attr("y", 400)
.text("Lo que amas")
.attr("text-anchor", "middle")
.style("fill", "#000")
.style("font-size", "10px")
.call(wrap, 60);
svg.append("text")
.attr("x", 500) // Entre "Situación Actual" y "Objetivos Futuros"
.attr("y", 600)
.text("Recursos disponibles")
.attr("text-anchor", "middle")
.style("fill", "#000")
.style("font-size", "10px")
.call(wrap, 60);
svg.append("text")
.attr("x", 500) // Entre "Objetivos Futuros" y "Experiencias Profesionales"
.attr("y", 400)
.text("Impacto potencial")
.attr("text-anchor", "middle")
.style("fill", "#000")
.style("font-size", "10px")
.call(wrap, 60);
// Añadir el texto central para el "Problema de Investigación"
svg.append("text")
.attr("x", 500) // Centrar el texto en el área de intersección
.attr("y", 500)
.text("Problema de Investigación")
.attr("text-anchor", "middle")
.style("fill", "#000")
.style("font-weight", "bold")
.style("font-size", "16px");
// Función para envolver el texto en varias líneas
function wrap(text, width) {
text.each(function() {
var text = d3.select(this),
words = text.text().split(/\s+/).reverse(),
word,
line = [],
lineNumber = 0,
lineHeight = 1.1, // altura de línea
y = text.attr("y"),
dy = 0, // Desplazamiento vertical
tspan = text.text(null).append("tspan").attr("x", text.attr("x")).attr("y", y).attr("dy", dy + "em");
while (word = words.pop()) {
line.push(word);
tspan.text(line.join(" "));
if (tspan.node().getComputedTextLength() > width) {
line.pop();
tspan.text(line.join(" "));
line = [word];
tspan = text.append("tspan").attr("x", text.attr("x")).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
}
}
});
}
return svg.node();
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
