Full-stack data visualizer.
That means I enjoy doing everything, from raw data to revealing & pretty interactive data visualizations.
Public
Edited
May 7, 2024
chart = {
// Specify the dimensions of the chart.
const width = 928;
const height = 900;
// The force simulation mutates links and nodes, so create a copy
// so that re-evaluating this cell produces the same result.
const links = data.links.map(d => ({...d}));
const nodes = data.nodes.map(d => ({...d}));
// Specify the scales.
const color = d3.scaleOrdinal(d3.schemeTableau10);
const radius = d3.scaleSqrt([0, d3.max(nodes, d => d.connections)], [4, 10]);
// Create a simulation with several forces.
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())
.on("tick", ticked);
// Create sublinks and subnodes
const selected = '1043615',
first = links.filter(d => d.source.id == selected).map(d => ({ ...d, grade: 'first' })).map(d => d.target.id),
second = links.filter(d => first.indexOf(d.source.id) != -1).map(d => d.target.id).filter(d => d != selected);
console.log(first)
console.log(second)
// recorro los nodos
// si estan en el link con grade, copio el grade
// filtro los que tienen grade
// Create the SVG container.
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;");
// Add a line for each link, and a circle for each node.
const link = svg.append("g")
.attr("stroke-opacity", 1)
.selectAll("line")
.data(links.filter(d => d.grade != ''))
.join("line")
.attr("stroke-width", d => console.log(d.grade == 'first'))
.attr("stroke-width", d => (d.grade == 'first') ? 1 : 4)
.attr("stroke", d => color(d.type));
// create all the groups for the nodes (circles)
const group = svg.append("g")
.selectAll("g")
.data(nodes)
.enter().append("g");
// create all the nodes (circles)
const node = group.append("circle")
.attr("r", d => radius(d.connections))
.attr("fill", "#000")
.attr("stroke", "#fff")
.attr('opacity', 1);
// append the text element
const text = group.append('text')
.text(d => d.id)
.attr("style", "display: none")
.attr("x", 14)
.attr("y", ".31em")
.attr("fill", "#000")
.style("font-size", "16px");
// mouseover and mouseout event of the nodes
node.on("mouseover", (event, d) => {
// downlighght non selected nodes
const ids = links
.filter(l => d == l.source)
.map(l => l.target)
.map(l => l.id)
.concat(d.id);
const subgroup = group.filter(n => {
return ids.indexOf(n.id) == -1
});
subgroup.lower();
subgroup.selectAll('circle')
.attr('opacity', 0.1)
// downlighght non selected links
link.attr('stroke-opacity', l => (d != l.source) ? 0.1 : 1);
const a = link.filter(l => d == l.source);
console.log(a)
// show texts
text.style('display', t => (t.id === d.id) ? "inline" : "none");
})
.on("mouseout", (d) => {
text.style("display", "none");
link.attr("stroke-opacity", 1);
node.attr('opacity', 1)
});
// Add a drag behavior.
node.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
// Set the position attributes of links and nodes each time the simulation ticks.
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);
group
.attr("transform", d => `translate( ${d.x} , ${d.y} )`);
}
// Reheat the simulation when drag starts, and fix the subject position.
function dragstarted(event) {
if (!event.active) simulation.alphaTarget(0.3).restart();
event.subject.fx = event.subject.x;
event.subject.fy = event.subject.y;
}
// Update the subject (dragged node) position during drag.
function dragged(event) {
event.subject.fx = event.x;
event.subject.fy = event.y;
}
// Restore the target alpha so the simulation cools after dragging ends.
// Unfix the subject position now that it’s no longer being dragged.
function dragended(event) {
if (!event.active) simulation.alphaTarget(0);
event.subject.fx = null;
event.subject.fy = null;
}
// When this cell is re-run, stop the previous simulation. (This doesn’t
// really matter since the target alpha is zero and the simulation will
// stop naturally, but it’s a good practice.)
invalidation.then(() => simulation.stop());
return svg.node();
}
data = FileAttachment("result2plot@2.json").json()
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.
