Public
Edited
May 28
d3 = require("d3@5")
viewof graphViz = {
const width = 900, height = 700;
const svg = d3.select(DOM.svg(width, height)).style("background", "#f0f0f0");
const nodes = data.nodes.map(d => ({...d}));
const links = data.edges.map(d => ({
source: d.source,
target: d.target
}));
const sim = d3.forceSimulation(nodes)
.force("link", d3.forceLink(links).id(d => d.id).distance(50))
.force("charge", d3.forceManyBody().strength(-100))
.force("center", d3.forceCenter(width / 2, height / 2));
svg.append("g")
.selectAll("line")
.data(links)
.join("line")
.attr("stroke", "#aaa")
.attr("stroke-opacity", 0.5);
const node = svg.append("g")
.selectAll("circle")
.data(nodes)
.join("circle")
.attr("r", 4)
.attr("fill", d => {
if (d.type === "Entity") return "#3182bd"; // azul
if (d.type === "Event") return "#fd8d3c"; // naranja
if (d.type === "Relationship") return "#74c476"; // verde
return "#ccc";
})
.append("title")
.text(d => d.label || d.name || d.id);
sim.on("tick", () => {
svg.selectAll("line")
.attr("x1", d => d.source.x)
.attr("y1", d => d.source.y)
.attr("x2", d => d.target.x)
.attr("y2", d => d.target.y);
svg.selectAll("circle")
.attr("cx", d => d.x)
.attr("cy", d => d.y);
});
return svg.node();
}
communications = data.nodes.filter(d => d.type === "Event" && d.sub_type === "Communication")
messagesByHour = communications.map(d => {
const ts = new Date(d.timestamp);
return {
date: new Date(ts.toISOString().split("T")[0]), // solo fecha
hour: ts.getHours(),
label: d.label,
id: d.id
};
});
Plot.plot({
width: 800,
height: 300,
x: {label: "Hora del día (0–23)", tickFormat: d => `${d}hs`},
y: {label: "Cantidad de mensajes"},
marks: [
Plot.barY(messagesByHour, Plot.groupX({y: "count"}, {x: d => d.hour}))
]
})
Plot.plot({
width: 900,
height: 500,
color: {scheme: "blues", label: "Mensajes"},
x: {label: "Hora del día", tickFormat: d => `${d}h`},
y: {label: "Fecha"},
marks: [
Plot.rect(messagesByHour, Plot.group(
{fill: "count"},
{x: "hour", y: "date"}
)),
Plot.text(messagesByHour, Plot.group(
{text: "count"},
{x: "hour", y: "date"}
))
]
})
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
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.
