data
chart = {
init_graph(data);
orderNodes(data);
assignRows(data);
orderLinks(data);
computeRanges(data);
const links = data.links.map(d => Object.create(d));
const nodes = data.nodes.map(d => Object.create(d));
const simulation = d3.forceSimulation(nodes)
.force("link", d3.forceLink(links).id(d => d.id))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2))
.tick(300);
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const link = svg.append("g")
.attr("class", "link")
.attr("stroke", "black")
.selectAll("line")
.data(links)
.join("line")
.attr("stroke-width", d => Math.sqrt(d.value));
const node = svg.append("g")
.attr("class", "node")
.attr("stroke", "#fff")
.attr("stroke-width", 1.5)
.selectAll("circle")
.data(nodes)
.join("circle")
.attr("opacity", 1)
.attr("r", 5)
.attr("fill", color);
node.append("title")
.text(d => d.id);
simulation.on("end", () => {
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);
});
invalidation.then(() => simulation.stop());
const node_lines = svg.append("g")
.attr("class", "node_lines")
.selectAll("line")
.data(nodes)
.join("line")
.attr("stroke-width", 1.5)
.attr("stroke", "#999")
.attr("x1", d => d.x)
.attr("y1", d => d.y)
.attr("x2", d => d.x)
.attr("y2", d => d.y);
var t = svg.transition()
.duration(1500);
var t2 = svg.transition().delay(1500)
.duration(1500);
var t3 = svg.transition().delay(3000)
.duration(1500);
node_lines
.transition(t)
.attr("x1", margin.left)
.attr("y1", d => d.y)
.attr("x2", width - margin.right)
.attr("y2", d => d.y);
svg.select(".link").raise();
svg.select(".node").raise();
node
.transition(t2)
.attr("cy", d => y(d.row));
node_lines
.transition(t2)
.attr("y1", d => y(d.row))
.attr("y2", d => y(d.row));
link
.transition(t2)
.attr("y1", d => y(d.source.row))
.attr("y2", d => y(d.target.row));
link
.transition(t3)
.attr("stroke-width", 1.5)
.attr("x1", d => x(d.index))
.attr("x2", d => x(d.index));
node.transition(d3.easeLinear).delay(3000).duration(1500)
.attr("opacity", 0)
.remove();
node_lines
.transition().delay(4500).duration(1500)
.attr("x1", d => x(d.minCol))
.attr("x2", d => x(d.maxCol));
var labels = svg.append("g")
.attr("class", "labels")
.attr("font-size", 6)
.attr("text-anchor", "end")
.attr("dominant-baseline", "middle")
.attr("stroke-width", 3)
.attr("stroke-linejoin", "round")
.attr("font-family", "sans-serif")
.selectAll("text")
.data(nodes)
.join("text")
.attr("id", "text")
.text(d => d.id)
.attr("x", d => 0)
.attr("y", d => y(d.row))
.clone(true).lower()
.attr("stroke", "white")
.attr("id", "border");
labels = d3.select(labels.node().parentNode).selectAll("text");
labels.transition().delay(4500).duration(1500)
.attr("x", d => x(d.minCol) - 5);
return svg.node();
}
y = d3.scaleBand()
.domain(d3.range(data.nodes.length))
.range([margin.top, height - margin.bottom])
.padding(.1);
x = d3.scaleBand()
.domain(d3.range(data.links.length))
.range([margin.left, width - margin.right])
.padding(.1);
function init_graph(data) {
for (var i = 0; i < data.nodes.length; i++) {
data.nodes[i].row = -1;
data.nodes[i].degree = 0;
//data.nodes[i].zoneMin = -1000;
//data.nodes[i].zoneMax = -1000;
data.nodes[i].neighbors = [];
data.nodes[i].minCol = Number.MAX_SAFE_INTEGER;
data.nodes[i].maxCol = Number.MIN_SAFE_INTEGER;
}
var node_map = data.nodes.reduce((map, obj, idx) => {
map[obj.id] = idx;
return map;
}, {});
for (var i = 0; i < data.links.length; i++) {
var link = data.links[i];
var source = data.nodes[node_map[link.source]];
var target = data.nodes[node_map[link.target]];
source.degree++;
target.degree++;
source.neighbors.push(target);
target.neighbors.push(source);
}
}
function compareNodeDegree(a, b) {
return b.degree - a.degree;
}
function orderNodes(data) {
data.nodes.sort(compareNodeDegree);
for (var i = 0; i < data.nodes.length; i++) {
data.nodes[i].neighbors.sort(compareNodeDegree);
}
}
function orderLinks(data) {
var node_map = data.nodes.reduce((map, obj, idx) => {
map[obj.id] = idx;
return map;
}, {})
for (var i = 0; i < data.links.length; i++) {
var source = data.nodes[node_map[data.links[i].source]];
var target = data.nodes[node_map[data.links[i].target]];
data.links[i].row = Math.min(source.row, target.row)
data.links[i].height = Math.abs(target.row - source.row);
}
data.links.sort(function(a, b) {
if (a.row != b.row) {
return a.row - b.row;
} else {
return a.height - b.height;
}
});
}
function assignRows(data) {
var nextAvailableRow = 0;
for (var i = 0; i < data.nodes.length; i++) {
if (data.nodes[i].row != -1) continue;
var node = data.nodes[i];
node.row = nextAvailableRow++;
for (var j = 0; j < node.neighbors.length; j++) {
if (node.neighbors[j].row != -1) continue;
node.neighbors[j].row = nextAvailableRow++;
}
}
}
function computeRanges(data) {
var node_map = data.nodes.reduce((map, obj, idx) => {
map[obj.id] = idx;
return map;
}, {});
for (var i = 0; i < data.links.length; i++) {
var source = data.nodes[node_map[data.links[i].source]];
var target = data.nodes[node_map[data.links[i].target]];
source.minCol = Math.min(source.minCol, i);
source.maxCol = Math.max(source.maxCol, i);
target.minCol = Math.min(target.minCol, i);
target.maxCol = Math.max(target.maxCol, i);
}
}
data = FileAttachment("miserables.json").json()
height = 600
color = {
const scale = d3.scaleOrdinal(d3.schemeCategory10);
return d => scale(d.group);
}
d3 = require("d3@6")
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.
