45:["$","title",null,{"children":"footbal force graph | BELKOUT FATIMAZOHRA | Observable"}] 4d:T207c,chart = { // --- Bigger canvas const W = width; const H = 800; const links = data[0].links.map(d => Object.create(d)); const nodes = data[0].nodes.map(d => Object.create(d)); const neighbors = new Map(nodes.map(d => [d.id, []])); for (const l of data[0].links) { neighbors.get(l.source).push({id: l.target, value: l.value}); neighbors.get(l.target).push({id: l.source, value: l.value}); } const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id).distance(70)) .force("charge", d3.forceManyBody().strength(-120)) .force("collide", d3.forceCollide(12)) .force("x", d3.forceX(W / 2).strength(0.08)) .force("y", d3.forceY(H / 2).strength(0.08)); // --- Fisheye distortion --- const fisheye = (() => { let radius = 80, distortion = 3, k0, k1, focus = [0, 0]; function rescale() { k0 = Math.exp(distortion); k0 = (k0 / (k0 - 1)) * radius; k1 = distortion / radius; } function f(d) { const dx = d.x - focus[0], dy = d.y - focus[1]; const dd = Math.hypot(dx, dy); if (!dd || dd >= radius) return {x: d.x, y: d.y, z: 1}; const k = (k0 * (1 - Math.exp(-dd * k1))) / dd * 0.75 + 0.25; return {x: focus[0] + dx * k, y: focus[1] + dy * k, z: Math.min(k, 10)}; } f.radius = r => (r === undefined ? radius : (radius = +r, rescale(), f)); f.distortion = k => (k === undefined ? distortion : (distortion = +k, rescale(), f)); f.focus = p => (p === undefined ? focus : (focus = p, f)); rescale(); return f; })(); // --- Controls --- const toggle = Inputs.radio(["Force", "Fisheye"], {value: "Force", label: "Mode"}); const radiusInput = Inputs.range([30, 400], {value: fisheye.radius(), step: 5, label: "Fisheye radius"}); const distortionInput = Inputs.range([1, 10], {value: fisheye.distortion(), step: 0.5, label: "Distortion"}); let mode = "Force"; let active = false; let hovered = null; const svg = d3.create("svg") .attr("viewBox", [0, 0, W, H]) .style("width", "100%") .style("height", "auto") .style("display", "block"); const svgNode = svg.node(); const link = svg.append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll("line") .data(links) .join("line") .attr("stroke-width", d => Math.sqrt(d.value)); const node = svg.append("g") .selectAll(".node") .data(nodes) .join("g") .attr("class", "node") .call(drag(simulation)); const circle = node.append("circle") .attr("r", 5) .attr("fill", color); const label = node.append("text") .text(d => d.id) .style("fill", "#000") .style("font-size", "12px") .attr("x", 6) .attr("y", 6) .attr("text-anchor", "middle"); //lEns indicator const lens = svg.append("circle") .attr("r", fisheye.radius()) .attr("fill", "none") .attr("stroke", "#4682b4") .attr("stroke-opacity", 0.5) .attr("stroke-dasharray", "4 3") .style("pointer-events", "none") .style("display", "none"); // Tooltip const tooltip = d3.create("div") .style("position", "absolute") .style("pointer-events", "none") .style("display", "none") .style("background", "rgba(255,255,255,0.97)") .style("border", "1px solid #bbb") .style("border-radius", "6px") .style("padding", "8px 10px") .style("font", "12px sans-serif") .style("box-shadow", "0 2px 8px rgba(0,0,0,0.2)") .style("max-width", "240px") .style("z-index", 10); const tooltipNode = tooltip.node(); function tooltipHTML(d) { const nb = neighbors.get(d.id).slice().sort((a, b) => b.value - a.value); const total = d3.sum(nb, n => n.value); const top = nb.slice(0, 8).map(n => `${n.id} (${n.value})`).join(", "); return `

${d.id}

Group: ${d.group}

Connections: ${nb.length}

Total link weight: ${total}

${nb.length ? `

Linked to: ${top}${nb.length > 8 ? ", …" : ""}

` : ""}`; } let pos = new Map(); let mouse = null; function updateTooltip() { if (!hovered || !mouse) { tooltipNode.style.display = "none"; return; } const rect = containerNode.getBoundingClientRect(); tooltipNode.style.display = "block"; tooltipNode.innerHTML = tooltipHTML(hovered); let left = mouse[0] - rect.left + 14; let top = mouse[1] - rect.top + 14; if (left + tooltipNode.offsetWidth > rect.width) left = mouse[0] - rect.left - tooltipNode.offsetWidth - 14; tooltipNode.style.left = `${Math.max(0, left)}px`; tooltipNode.style.top = `${top}px`; } function findHovered(p) { let best = null, bestDist = Infinity; for (const d of nodes) { const q = pos.get(d); const dist = Math.hypot(q.x - p[0], q.y - p[1]); const pick = 5 * Math.min(q.z, 3) + 5; if (dist < pick && dist < bestDist) { best = d; bestDist = dist; } } return best; } function render() { pos = new Map(nodes.map(d => [d, active ? fisheye(d) : {x: d.x, y: d.y, z: 1}])); const connected = hovered ? new Set([hovered.id, ...neighbors.get(hovered.id).map(n => n.id)]) : null; link .attr("x1", d => pos.get(d.source).x) .attr("y1", d => pos.get(d.source).y) .attr("x2", d => pos.get(d.target).x) .attr("y2", d => pos.get(d.target).y) .attr("stroke-opacity", d => !hovered ? 0.6 : (d.source === hovered || d.target === hovered) ? 1 : 0.08) .attr("stroke", d => hovered && (d.source === hovered || d.target === hovered) ? "#e45756" : "#999"); node.attr("transform", d => { const p = pos.get(d); return `translate(${p.x}, ${p.y})`; }) .style("opacity", d => !connected || connected.has(d.id) ? 1 : 0.25); circle.attr("r", d => 5 * Math.min(pos.get(d).z, 3)) .attr("stroke", d => d === hovered ? "#000" : null) .attr("stroke-width", d => d === hovered ? 2 : null); label.style("font-size", d => `${12 * Math.min(pos.get(d).z, 2)}px`); lens.style("display", active ? null : "none") .attr("r", fisheye.radius()) .attr("cx", fisheye.focus()[0]) .attr("cy", fisheye.focus()[1]); } function toSvgCoords(event) { const pt = svgNode.createSVGPoint(); pt.x = event.clientX; pt.y = event.clientY; const p = pt.matrixTransform(svgNode.getScreenCTM().inverse()); return [p.x, p.y]; } function applyMode() { mode = toggle.value; active = false; hovered = null; node.style("pointer-events", mode === "Force" ? "all" : "none") .style("cursor", mode === "Force" ? "grab" : null); svgNode.style.cursor = mode === "Fisheye" ? "crosshair" : ""; radiusInput.style.display = distortionInput.style.display = mode === "Fisheye" ? "" : "none"; render(); updateTooltip(); } toggle.addEventListener("input", applyMode); radiusInput.addEventListener("input", () => { fisheye.radius(radiusInput.value); render(); }); distortionInput.addEventListener("input", () => { fisheye.distortion(distortionInput.value); render(); }); svgNode.addEventListener("mousemove", event => { const p = toSvgCoords(event); mouse = [event.clientX, event.clientY]; if (mode === "Fisheye") { active = true; fisheye.focus(p); render(); } const h = findHovered(p); const changed = h !== hovered; hovered = h; if (changed || mode === "Fisheye") render(); updateTooltip(); }); svgNode.addEventListener("mouseleave", () => { active = false; hovered = null; mouse = null; render(); updateTooltip(); }); const margin = 20; simulation.on("tick", () => { for (const d of nodes) { d.x = Math.max(margin, Math.min(W - margin, d.x)); d.y = Math.max(margin, Math.min(H - margin, d.y)); } render(); }); const containerNode = html`

${toggle}${radiusInput}${distortionInput}${svgNode}${tooltipNode}

`; applyMode(); invalidation.then(() => simulation.stop()); return containerNode; }4e:T1bed,data = [{ "nodes": [ {"id": "ARG", "group": 1, "x": 0.3784, "y": 0.7257, "z": 0.5}, {"id": "AUT", "group": 2, "x": 0.7070, "y": 0.3091, "z": 0.5}, {"id": "BEL", "group": 3, "x": 0.3112, "y": 0.3627, "z": 0.5}, {"id": "BGR", "group": 4, "x": 0.4901, "y": 0.2231, "z": 0.5}, {"id": "BRA", "group": 5, "x": 0.4183, "y": 0.8734, "z": 0.5}, {"id": "CHE", "group": 6, "x": 0.8277, "y": 0.7710, "z": 0.5}, {"id": "CHL", "group": 7, "x": 0.0570, "y": 0.4660, "z": 0.5}, {"id": "CMR", "group": 8, "x": 0.6661, "y": 0.4183, "z": 0.5}, {"id": "COL", "group": 9, "x": 0.1708, "y": 0.7309, "z": 0.5}, {"id": "DEU", "group": 10, "x": 0.6178, "y": 0.2022, "z": 0.5}, {"id": "DNK", "group": 11, "x": 0.7995, "y": 0.3587, "z": 0.5}, {"id": "ESP", "group": 12, "x": 0.5580, "y": 0.5982, "z": 0.5}, {"id": "FRA", "group": 13, "x": 0.6993, "y": 0.2113, "z": 0.5}, {"id": "GBR", "group": 14, "x": 0.8284, "y": 0.4099, "z": 0.5}, {"id": "GRE", "group": 15, "x": 0.8529, "y": 0.5632, "z": 0.5}, {"id": "HRV", "group": 16, "x": 0.6570, "y": 0.7437, "z": 0.5}, {"id": "IRN", "group": 17, "x": 0.6526, "y": 0.0804, "z": 0.5}, {"id": "ITA", "group": 18, "x": 0.4556, "y": 0.6498, "z": 0.5}, {"id": "JAM", "group": 19, "x": 0.8974, "y": 0.5263, "z": 0.5}, {"id": "JPN", "group": 20, "x": 0.7505, "y": 0.9353, "z": 0.5}, {"id": "KOR", "group": 21, "x": 0.9060, "y": 0.8003, "z": 0.5}, {"id": "MAR", "group": 22, "x": 0.4052, "y": 0.5224, "z": 0.5}, {"id": "MEX", "group": 23, "x": 0.5903, "y": 0.8579, "z": 0.5}, {"id": "NGA", "group": 24, "x": 0.4846, "y": 0.5060, "z": 0.5}, {"id": "NLD", "group": 25, "x": 0.6541, "y": 0.5668, "z": 0.5}, {"id": "NOR", "group": 26, "x": 0.7761, "y": 0.4672, "z": 0.5}, {"id": "PRT", "group": 27, "x": 0.1998, "y": 0.4088, "z": 0.5}, {"id": "PRY", "group": 28, "x": 0.5335, "y": 0.8248, "z": 0.5}, {"id": "ROM", "group": 29, "x": 0.6593, "y": 0.5079, "z": 0.5}, {"id": "SCO", "group": 30, "x": 0.9430, "y": 0.4508, "z": 0.5}, {"id": "TUN", "group": 31, "x": 0.4882, "y": 0.0647, "z": 0.5}, {"id": "TUR", "group": 32, "x": 0.5347, "y": 0.3531, "z": 0.5}, {"id": "USA", "group": 33, "x": 0.3644, "y": 0.1830, "z": 0.5}, {"id": "YUG", "group": 34, "x": 0.5178, "y": 0.7720, "z": 0.5}, {"id": "ZAF", "group": 35, "x": 0.7861, "y": 0.6645, "z": 0.5} ], "links": [ {"source": "ARG", "target": "ESP", "value": 4}, {"source": "ARG", "target": "ITA", "value": 9}, {"source": "AUT", "target": "DEU", "value": 7}, {"source": "AUT", "target": "ESP", "value": 1}, {"source": "AUT", "target": "FRA", "value": 1}, {"source": "AUT", "target": "GBR", "value": 1}, {"source": "AUT", "target": "ITA", "value": 1}, {"source": "BEL", "target": "DEU", "value": 2}, {"source": "BEL", "target": "FRA", "value": 2}, {"source": "BEL", "target": "ITA", "value": 2}, {"source": "BEL", "target": "NLD", "value": 2}, {"source": "BGR", "target": "DEU", "value": 4}, {"source": "BGR", "target": "ESP", "value": 1}, {"source": "BGR", "target": "PRT", "value": 1}, {"source": "BGR", "target": "TUR", "value": 4}, {"source": "BRA", "target": "ESP", "value": 4}, {"source": "BRA", "target": "FRA", "value": 1}, {"source": "BRA", "target": "ITA", "value": 5}, {"source": "BRA", "target": "JPN", "value": 1}, {"source": "BRA", "target": "PRT", "value": 1}, {"source": "CHL", "target": "ARG", "value": 1}, {"source": "CHL", "target": "ITA", "value": 1}, {"source": "CHL", "target": "USA", "value": 1}, {"source": "CMR", "target": "AUT", "value": 1}, {"source": "CMR", "target": "DEU", "value": 1}, {"source": "CMR", "target": "ESP", "value": 2}, {"source": "CMR", "target": "FRA", "value": 7}, {"source": "CMR", "target": "GRE", "value": 1}, {"source": "CMR", "target": "ITA", "value": 2}, {"source": "CMR", "target": "JPN", "value": 2}, {"source": "CMR", "target": "PRT", "value": 2}, {"source": "CMR", "target": "TUR", "value": 2}, {"source": "COL", "target": "ARG", "value": 3}, {"source": "COL", "target": "BRA", "value": 2}, {"source": "COL", "target": "ESP", "value": 1}, {"source": "COL", "target": "ITA", "value": 1}, {"source": "COL", "target": "USA", "value": 2}, {"source": "DEU", "target": "ESP", "value": 1}, {"source": "DEU", "target": "FRA", "value": 1}, {"source": "DEU", "target": "ITA", "value": 2}, {"source": "DNK", "target": "DEU", "value": 3}, {"source": "DNK", "target": "ESP", "value": 1}, {"source": "DNK", "target": "GBR", "value": 6}, {"source": "DNK", "target": "ITA", "value": 1}, {"source": "DNK", "target": "NLD", "value": 1}, {"source": "DNK", "target": "SCO", "value": 3}, {"source": "DNK", "target": "TUR", "value": 1}, {"source": "HRV", "target": "AUT", "value": 1}, {"source": "HRV", "target": "DEU", "value": 2}, {"source": "HRV", "target": "ESP", "value": 4}, {"source": "HRV", "target": "GBR", "value": 2}, {"source": "HRV", "target": "ITA", "value": 4}, {"source": "HRV", "target": "TUR", "value": 1}, {"source": "IRN", "target": "DEU", "value": 3}, {"source": "ITA", "target": "ESP", "value": 2}, {"source": "ITA", "target": "FRA", "value": 1}, {"source": "ITA", "target": "GBR", "value": 2}, {"source": "JAM", "target": "GBR", "value": 1}, {"source": "KOR", "target": "FRA", "value": 1}, {"source": "KOR", "target": "JPN", "value": 4}, {"source": "MAR", "target": "FRA", "value": 3}, {"source": "MAR", "target": "DEU", "value": 4}, {"source": "MAR", "target": "ESP", "value": 1}, {"source": "MAR", "target": "TUN", "value": 1}, {"source": "MAR", "target": "ITA", "value": 3}, {"source": "MAR", "target": "PRT", "value": 1}, {"source": "NGA", "target": "BGR", "value": 2}, {"source": "NGA", "target": "CHE", "value": 1}, {"source": "NGA", "target": "DEU", "value": 1}, {"source": "NGA", "target": "FRA", "value": 4}, {"source": "NGA", "target": "ESP", "value": 3}, {"source": "NGA", "target": "ITA", "value": 2}, {"source": "NGA", "target": "NLD", "value": 3}, {"source": "NGA", "target": "USA", "value": 3}, {"source": "NGA", "target": "TUR", "value": 1}, {"source": "NGA", "target": "ZAF", "value": 1}, {"source": "NLD", "target": "DEU", "value": 1}, {"source": "NLD", "target": "ESP", "value": 5}, {"source": "NLD", "target": "GRE", "value": 4}, {"source": "NLD", "target": "ITA", "value": 2}, {"source": "NOR", "target": "DEU", "value": 3}, {"source": "NOR", "target": "ESP", "value": 1}, {"source": "NOR", "target": "GBR", "value": 12}, {"source": "NOR", "target": "GRE", "value": 2}, {"source": "NOR", "target": "ITA", "value": 1}, {"source": "NOR", "target": "SCO", "value": 3}, {"source": "YUG", "target": "ITA", "value": 7}, {"source": "YUG", "target": "JPN", "value": 2}, {"source": "PRY", "target": "MEX", "value": 1} ]}]4f:[] 49:{"id":"ec3f650d8432c2a0","slug":"footbal-force-graph","title":"footbal force graph","thumbnail":"c3124ffe6a5e374b7be318d6ef5903791c0abe5a13af0c9192a2573226256be7","access_level":"public","create_time":"$D2026-11-12T13:40:09.968Z","update_time":"$D2026-11-12T18:30:57.163Z","view_time":null,"first_public_time":"$D2026-11-12T14:13:58.374Z","has_unpublished_edits":null,"fork":{"id":"2641d5392c418bac","slug":null,"title":"footbal force graph","owner":{"id":"53ebf3d88fe2346b","login":"samfad91","name":"Samiha"}},"stars":0,"starred":false,"owner":{"type":"team","id":"6322484d2fb984ea","login":"belkout-fatimazohra","name":"BELKOUT FATIMAZOHRA","avatar_url":"https://avatars-next.observableusercontent.com/1c31f01799b023b191e7c49992697c485819e8bf20c4154e82b494a01b392819","tier":"free_2026","bio":"","followed_by_you":false,"follows_you":false},"version":62,"publish_version":62,"role":null,"authored":false,"authors":[{"type":"individual","id":"a0eef2ff1139f467","login":"belkout-fatimazohra","name":"BELKOUT FATIMAZOHRA","avatar_url":"https://avatars-next.observableusercontent.com/1c31f01799b023b191e7c49992697c485819e8bf20c4154e82b494a01b392819","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"6322484d2fb984ea","login":"belkout-fatimazohra","name":"BELKOUT FATIMAZOHRA","avatar_url":"https://avatars-next.observableusercontent.com/1c31f01799b023b191e7c49992697c485819e8bf20c4154e82b494a01b392819","tier":"free_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"footbal force graph","cells":[{"id":0,"value":"md`# footbal force graph`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"html` Data from this link\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"drag = simulation => {\n\n function dragstarted(d) {\n if (!d3.event.active) simulation.alphaTarget(0.3).restart();\n d.fx = d.x;\n d.fy = d.y;\n }\n\n function dragged(d) {\n d.fx = d3.event.x;\n d.fy = d3.event.y;\n }\n\n function dragended(d) {\n if (!d3.event.active) simulation.alphaTarget(0);\n d.fx = null;\n d.fy = null;\n }\n\n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"color = {\n const scale = d3.scaleOrdinal(d3.schemeCategory10);\n return d => scale(d.group);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$4e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4f","stdlib":"1"}} 44:null