2f:Tf04,chart = { const width = 980; const height = 700; // Define a custom color scale with specific colors. const color = d3.scaleOrdinal() .domain(["Cited Works", "Other Group", "Orange Group", "Green Group", "Center"]) // Asegúrate de que los grupos coincidan con los valores en tus datos .range(["blue", "red", "orange", "green", "black"]); // Agrega colores para los nuevos nodos // La simulación de fuerza muta enlaces y nodos, así que crea una copia const links = data.links.map(d => ({...d})); const nodes = data.nodes.map(d => ({...d})); // Crea una simulación con varias fuerzas. const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id)) .force("charge", d3.forceManyBody()) .force("x", d3.forceX()) .force("y", d3.forceY()); // Crea el contenedor SVG. const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto;"); // Agrega una línea para cada enlace y un círculo para cada nodo. const link = svg.append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll("line") .data(links) .join("line") .attr("stroke-width", d => Math.sqrt(d.value)); const node = svg.append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle") .data(nodes) .join("circle") .attr("r", d => (d.group === 'Center' ? 10 : 5)) // Nodo central más grande // Usa la escala de colores personalizada según el grupo .attr("fill", d => { if (d.group === "Cited Works") { return color("Cited Works"); // Azul } else if (d.group === "Other Group") { return color("Other Group"); // Rojo } else if (d.group === "Orange Group") { return color("Orange Group"); // Naranja } else if (d.group === "Green Group") { return color("Green Group"); // Verde } else if (d.group === 'Center') { return color('Center'); // Negro } else { return "#ccc"; // Color por defecto si no coincide con ningún grupo } }) // Añadir un enlace para el nodo central .on("click", function(event, d) { if (d.group === 'Center') { window.open('http://www.ejemplo.com/imagen', '_blank'); // Cambia la URL por la de tu imagen } }); node.append("title") .text(d => d.id); // Agrega un comportamiento de arrastre. node.call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); // Establece los atributos de posición de enlaces y nodos cada vez que la simulación avanza. simulation.on("tick", () => { link .attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y); node .attr("cx", d => d.x) // Cambié `cx` a `cx` para círculos .attr("cy", d => d.y); // Cambié `cy` a `cy` para círculos }); // Recalienta la simulación cuando comienza el arrastre y fija la posición del sujeto. function dragstarted(event) { if (!event.active) simulation.alphaTarget(0.3).restart(); event.subject.fx = event.subject.x; event.subject.fy = event.subject.y; } // Actualiza la posición del sujeto (nodo arrastrado) durante el arrastre. function dragged(event) { event.subject.fx = event.x; event.subject.fy = event.y; } // Restaura el alpha objetivo para que la simulación se enfríe después de que termine el arrastre. function dragended(event) { if (!event.active) simulation.alphaTarget(0); event.subject.fx = null; event.subject.fy = null; } // Cuando esta celda se vuelve a ejecutar, detiene la simulación anterior. invalidation.then(() => simulation.stop()); return svg.node(); } 30:[{"id":"e3680d5f766e85edde560c9c31a6dba2ddfcf2f66e1dced4afa18d8040f1f205e0bde1b8b234d866373f2bfc5806fafc47e244c5c9f48b60aaa1917c1b80fcb7","href":"https://static.observableusercontent.com/files/e3680d5f766e85edde560c9c31a6dba2ddfcf2f66e1dced4afa18d8040f1f205e0bde1b8b234d866373f2bfc5806fafc47e244c5c9f48b60aaa1917c1b80fcb7","name":"graph.json","type":"application/octet-stream","lastModified":1729050943528.556,"size":73595}] 2d:{"title":"Disjoint force-directed graph","cells":[{"id":1,"value":"

Disjoint force-directed graph

D3 › Gallery

\n \n
Interactive Connection Graph
\n\nEste mapa interactivo representa el ecosistema de investigación y producción científica, donde cada nodo y conexión simboliza elementos clave:\n\nNodos Azules\nInvestigadores(as) y académicos(a) que forman parte del ecosistema de investigación. Al hacer clic, se accede a detalles como afiliación, especialización, etc.\nNodos Rojos\nInvestigaciones y proyectos en curso.\n","pinned":false,"hidden":false,"mode":"html"},{"id":7,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"data = FileAttachment(\"graph.json\").json()","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}