Published
Edited
Apr 23, 2021
1 star
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())
.force("x", d3.forceX())
.force("y", d3.forceY());
const svg = d3.create("svg")
.attr("viewBox", [-width / 2, -height / 2, width, height]);
const link = svg.append("g")
.attr("stroke", "#999")
.attr("stroke-opacity", 0.6)
.selectAll("line")
.data(links)
.join("line")
.attr("opacity", function(d) {
if (Position === null || Position === "-") { return 1 }
else {
if (d.target.position === Position) { return 1 }
else { return 0 }
}
})
.attr("stroke-width", d => Math.sqrt(d.value));
const node = svg.append("g")
.attr("stroke", "#fff")
.attr("stroke-width", 1.5)
.selectAll("circle")
.data(nodes)
.join("circle")
.attr("opacity", function(d) {
if (Position !== null & Position !== "-") {
if (d.position === "-") { return 1 }
else {
if (d.position === Position) { return 1 }
else {return 0}
}
}
else { return 1 }
})
.attr("r", function(d) {
if (d.group === "player") {
if (scalingPlayers===true) { return scalePlayer(d.value) } else { return 5 }
}
else {
if (scalingTeams===true) { return scaleTeam(d.value) } else { return 5 }
}
})
.attr("fill", d => d.group === "player" ? "#013369" : "#d50a0a")
.call(drag(simulation));
node.append("title")
.text(d => d.id);
simulation.on("tick", () => {
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());
return svg.node();
}
scalePlayer = d3.scaleLinear()
.domain([0, d3.max(data.nodes, d => d.group === "player" ? d.value : 0)])
.range([0, 15])
scaleTeam = d3.scaleLinear()
.domain([0, d3.max(data.nodes, d => d.group === "team" ? d.value : 0)])
.range([0, 20])
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.
