This force-directed graph shows students who are interested in playing with each other. Color coded by gender.
chart = { const links = data.links.map(d => Object.create(d)); const nodes = data.nodes.map(d => Object.create(d)); const simulation = forceSimulation(nodes, links).on("tick", ticked); const svg = d3.select(DOM.svg(width, height)) .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) .enter().append("line") .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) .enter().append("circle") .attr("r", 5) .attr("fill", color) .call(drag(simulation)); const label = svg.append("g") .attr("class", "labels") .selectAll("text") .data(nodes) .enter().append("text") .attr("dx", ".5em") .attr("dy", 0) .attr("size", 8) .text(function(d) { return d.id }); node.append("title") .text(d => d.id); 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); node .attr("cx", d => d.x) .attr("cy", d => d.y); label .attr("x", d => d.x) .attr("y", d => d.y); } return svg.node(); }
function forceSimulation(nodes, links) { return d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id)) .force("charge", d3.forceManyBody()) .force("center", d3.forceCenter()); }
data = ({ "nodes": [ {"id": "PS", "gender": "F"}, {"id": "PL", "gender": "M"}, {"id": "GD", "gender": "F"}, {"id": "DB", "gender": "M"}, {"id": "AK", "gender": "F"}, {"id": "DH", "gender": "F"}, {"id": "SB", "gender": "F"}, {"id": "MV", "gender": "F"}, {"id": "AC", "gender": "M"}, {"id": "AW", "gender": "M"}, {"id": "PT", "gender": "M"}, {"id": "LT", "gender": "F"}, {"id": "WJ", "gender": "M"}, {"id": "EA", "gender": "F"}, {"id": "BK", "gender": "M"}, {"id": "JO", "gender": "M"}, {"id": "DE", "gender": "M"}, {"id": "MM", "gender": "M"}, {"id": "DO", "gender": "F"}, ], "links": [ {"source": "PS", "target": "AK", "value": 1}, {"source": "PS", "target": "GD", "value": 1}, {"source": "PL", "target": "JO", "value": 1}, {"source": "GD", "target": "AK", "value": 1}, {"source": "GD", "target": "PS", "value": 1}, {"source": "GD", "target": "EA", "value": 1}, {"source": "DB", "target": "AC", "value": 1}, {"source": "DB", "target": "PL", "value": 1}, {"source": "AK", "target": "GD", "value": 1}, {"source": "AK", "target": "LT", "value": 1}, {"source": "AK", "target": "PS", "value": 1}, {"source": "DH", "target": "GD", "value": 1}, {"source": "DH", "target": "AK", "value": 1}, {"source": "SB", "target": "PS", "value": 1}, {"source": "SB", "target": "AK", "value": 1}, {"source": "MV", "target": "GD", "value": 1}, {"source": "AC", "target": "DB", "value": 1}, {"source": "AC", "target": "WJ", "value": 1}, {"source": "AW", "target": "WJ", "value": 1}, {"source": "AW", "target": "PT", "value": 1}, {"source": "PT", "target": "WJ", "value": 1}, {"source": "PT", "target": "JO", "value": 1}, {"source": "LT", "target": "GD", "value": 1}, {"source": "WJ", "target": "PT", "value": 1}, {"source": "WJ", "target": "MM", "value": 1}, {"source": "WJ", "target": "JO", "value": 1}, {"source": "EA", "target": "AW", "value": 1}, {"source": "EA", "target": "LT", "value": 1}, {"source": "EA", "target": "GD", "value": 1}, {"source": "BK", "target": "DB", "value": 1}, {"source": "JO", "target": "WJ", "value": 1}, {"source": "JO", "target": "GD", "value": 1}, {"source": "JO", "target": "PT", "value": 1}, {"source": "DE", "target": "AC", "value": 1}, {"source": "MM", "target": "WJ", "value": 1}, ] })
height = 600
color = { const scale = d3.scaleOrdinal(d3.schemeCategory10); return d => scale(d.gender); }
drag = simulation => { function dragstarted(d) { if (!d3.event.active) simulation.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) simulation.alphaTarget(0); d.fx = null; d.fy = null; } return d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); }
d3 = require("d3@5")