Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
chart = {
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().strength(-300))
.force("x", d3.forceX())
.force("y", d3.forceY())
.force('collide', d3.forceCollide(d => 80))
const svg = d3.create("svg")
.attr("viewBox", [-width / 2, -height / 2, width, height])
// Per-type markers, as they don't inherit styles.
svg.append("defs").selectAll("marker")
.data(types)
.join("marker")
.attr("id", d => `arrow-${d}`)
.attr("viewBox", "0 -5 10 10")
.attr("refX", 38)
.attr("refY", 0)
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("orient", "auto")
.append("path")
.attr("fill", color)
.attr("d", 'M0,-5L10,0L0,5');
const link = svg.append("g")
.attr("fill", "none")
.attr("stroke-width", 1.5)
.selectAll("path")
.data(links)
.join("path")
.attr("stroke", d => color(d.type));
const node = svg.append("g")
.attr("fill", "currentColor")
.attr("stroke-linecap", "round")
.attr("stroke-linejoin", "round")
.selectAll("g")
.data(nodes)
.join("g")
.call(drag(simulation));
node.append("circle")
.attr("stroke", "white")
.attr("stroke-width", 1.5)
.attr("r", function(d) {
return 10 + (d.linkCount * 2);
})
.attr('fill', d => color(d.linkCount))
.attr('z-index', -1);
node.append("text")
.attr("x", 30 + 4)
.attr("y", "0.31em")
.text(d => d.id)
.clone(true).lower()
.attr("fill", "none")
.attr("stroke", "white")
.attr("stroke-width", 3);
node.on('dblclick', (e, d) => console.log(nodes[d.index]))
simulation.on("tick", () => {
link.attr("d", linkArc);
node.attr("transform", d => `translate(${d.x},${d.y})`);
});
invalidation.then(() => simulation.stop());
return svg.node();
}
data2011 = d3.csvParse(await FileAttachment("2011@1.csv").text())
data2014 = d3.csvParse(await FileAttachment("2014-2.csv").text())
data2017 = d3.csvParse(await FileAttachment("2017-2.csv").text())
data2018 = d3.csvParse(await FileAttachment("2018@4.csv").text())
data2020 = d3.csvParse(await FileAttachment("2020@5.csv").text())
links = year
types = Array.from(new Set(links.map(d => d.type)))
data = ({nodes: Array.from(new Set(links.flatMap(l => [l.source, l.target])), id => ({id})), links})
data.nodes.forEach(function(node) {
if (!node["linkCount"]) {
node["linkCount"] = 0;
}
data.links.forEach(function(link) {
if (node.id == link.source || node.id == link.target) {
node.linkCount++;
}
});
});
data.nodes
height = 1000
color = d3.scaleOrdinal(types, d3.schemeCategory10)
linkArc = d =>`M${d.source.x},${d.source.y}A0,0 0 0,1 ${d.target.x},${d.target.y}`
d3 = require("d3@6")
import {swatches} from "@d3/color-legend"
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.
