treshold=0.90
chart3={
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append('rect')
.attr('width', '100%')
.attr('height', '100%')
.attr('fill', 'white')
.on('click', function() {
// Restaura la opacidad normal de los nodos y enlaces.
d3.selectAll('.link').style('stroke-opacity', '0.6');
d3.selectAll('.node').style('opacity', '1');
});
var container = svg.append('g');
// Aplica el zoom al contenedor svg.
svg.call(zoom(container));
// Filtra los enlaces según el peso (value) mayor que el umbral (treshold).
const filteredLinks = links.filter(d => d.weight > treshold);
// Filtra los nodos que están conectados a algún enlace filtrado.
const filteredNodes = nodes.filter(d => {
return filteredLinks.some(link => link.source === d.id || link.target === d.id);
});
// Crea la simulación de fuerza con los nodos filtrados.
const simulation = d3.forceSimulation(filteredNodes)
.force("link", d3.forceLink(filteredLinks).id(d => d.id).distance(d => 5 * calculateDistance(d)))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2))
.on("tick", ticked);
// Escala de colores para los tipos de enlaces.
const colorScale = d3.scaleOrdinal()
.domain([...new Set(filteredLinks.map(d => d.type))])
.range(d3.schemeCategory10);
// Crea los enlaces.
const link = container.append("g")
.style("stroke-opacity", 0.6)
.selectAll("line")
.data(filteredLinks)
.enter().append("line")
.attr("stroke-width", 3)
.style("stroke", d => {
if (d.type === 'partnership') {
return 'red';
} else {
return '#999';
}
});
// Crea los nodos.
const node = container.append("g")
.style("stroke", "#fff")
.style("stroke-width", 1.5)
.selectAll("circle")
.data(filteredNodes)
.enter().append("circle")
.attr("r", 10)
.attr("fill", colores)
.call(drag(simulation))
.on("mouseover", handleMouseOver)
.on("mouseout", handleMouseOut);
// Crea la leyenda.
const legend = svg.append("g")
.attr("class", "legend")
.selectAll("g")
.data([...new Set(filteredLinks.map(d => d.type))])
.enter()
.append("g")
.attr("transform", (d, i) => "translate(0," + i * 20 + ")");
legend.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", d => {
if (d === 'partnership') {
return 'red';
} else {
return '#999';
}
});
legend.append("text")
.attr("x", width - 24)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(d => d);
// Agrega el título a los nodos.
node.append("title")
.text(d => d.id);
// Función que se llama en cada tick de la simulación.
function ticked() {
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)
.attr("cy", d => d.y);
}
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.
