44:["$","title",null,{"children":"footbal force graph | **Maroua** | Observable"}] 4c:T1111,chart = { const nodes = graph.nodes.map(d => Object.assign({}, d)); const links = graph.links.map(d => Object.assign({}, d)); const adj = new Map(nodes.map(d => [d.id, new Set()])); graph.links.forEach(l => { adj.get(l.source).add(l.target); adj.get(l.target).add(l.source); }); const r = d => 4 + Math.sqrt(d.players) * 1.3; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("font-family", "sans-serif") .style("background", "#fafafa") .style("cursor", mode === "fisheye" ? "crosshair" : "default"); const g = svg.append("g"); const link = g.append("g").attr("stroke", "#888").attr("stroke-opacity", 0.45) .selectAll("line").data(links).join("line") .attr("stroke-width", d => Math.sqrt(d.value) * 0.9); link.append("title").text(d => `${d.source} → ${d.target}: ${d.value} player(s)`); const node = g.append("g").selectAll(".node").data(nodes).join("g").attr("class", "node") .style("cursor", mode === "force" ? "grab" : "pointer"); const circle = node.append("circle") .attr("r", r).attr("fill", color).attr("stroke", "#fff").attr("stroke-width", 1.5); const label = node.append("text") .text(d => d.id) .attr("text-anchor", "middle") .style("font-size", "11px").style("font-weight", "600").style("fill", "#222") .style("paint-order", "stroke").style("stroke", "#fff").style("stroke-width", "3px") .style("pointer-events", "none"); node.append("title").text(d => `${d.name} (${d.continent})\nExports: ${d.out} players\nImports: ${d.in} players\nConnections: ${d.degree}`); node.on("mouseover", d => { node.style("opacity", n => (n === d || adj.get(d.id).has(n.id)) ? 1 : 0.12); link.attr("stroke-opacity", l => (l.source === d || l.target === d) ? 0.95 : 0.04) .attr("stroke", l => (l.source === d || l.target === d) ? "#e45756" : "#888"); }).on("mouseout", () => { node.style("opacity", 1); link.attr("stroke-opacity", 0.45).attr("stroke", "#888"); }); svg.call(d3.zoom().scaleExtent([0.3, 8]).on("zoom", () => g.attr("transform", d3.event.transform))) .on("dblclick.zoom", null); const legend = svg.append("g").attr("transform", "translate(14,16)"); continentList.forEach((c, i) => { const row = legend.append("g").attr("transform", `translate(0,${i * 18})`); row.append("circle").attr("r", 6).attr("cx", 6).attr("fill", continentColor(c)); row.append("text").attr("x", 18).attr("y", 4).style("font-size", "12px").text(c); }); legend.append("text").attr("y", continentList.length * 18 + 8) .style("font-size", "11px").style("fill", "#666").text("node size = players exchanged"); function draw() { link.attr("x1", d => d.source.px).attr("y1", d => d.source.py) .attr("x2", d => d.target.px).attr("y2", d => d.target.py); node.attr("transform", d => `translate(${d.px},${d.py})`); circle.attr("r", d => r(d) * d.pz); label.attr("y", d => -(r(d) * d.pz + 4)) .style("font-size", d => `${11 * Math.min(1 + (d.pz - 1) * 0.5, 2)}px`); } const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id) .distance(d => 30 + 70 / Math.sqrt(d.value))) .force("charge", d3.forceManyBody().strength(-320)) .force("collide", d3.forceCollide(d => r(d) + 3)) .force("center", d3.forceCenter(width / 2, height / 2)) .force("x", d3.forceX(width / 2).strength(0.04)) .force("y", d3.forceY(height / 2).strength(0.04)); const identity = () => nodes.forEach(d => { d.px = d.x; d.py = d.y; d.pz = 1; }); if (mode === "force") { simulation.on("tick", () => { identity(); draw(); }); node.call(drag(simulation)) .on("dblclick", d => { d.fx = null; d.fy = null; simulation.alpha(0.3).restart(); }); } else { simulation.stop(); for (let i = 0; i < 400; ++i) simulation.tick(); identity(); draw(); const fisheye = fisheyeCircular().radius(200).distortion(distortion); svg.on("mousemove", function() { fisheye.focus(d3.mouse(g.node())); nodes.forEach(d => { const f = fisheye(d); d.px = f.x; d.py = f.y; d.pz = Math.min(f.z, 3); }); draw(); }).on("mouseleave", () => { identity(); draw(); }); } invalidation.then(() => simulation.stop()); return svg.node(); }4d:Te77,graph = { const info = { ARG: ["Argentina", "South America"], AUT: ["Austria", "Europe"], BEL: ["Belgium", "Europe"], BGR: ["Bulgaria", "Europe"], BRA: ["Brazil", "South America"], CHE: ["Switzerland", "Europe"], CHL: ["Chile", "South America"], CMR: ["Cameroon", "Africa"], COL: ["Colombia", "South America"], DEU: ["Germany", "Europe"], DNK: ["Denmark", "Europe"], ESP: ["Spain", "Europe"], FRA: ["France", "Europe"], GBR: ["Great Britain", "Europe"], GRE: ["Greece", "Europe"], HRV: ["Croatia", "Europe"], IRN: ["Iran", "Asia"], ITA: ["Italy", "Europe"], JAM: ["Jamaica", "North America"], JPN: ["Japan", "Asia"], KOR: ["South Korea", "Asia"], MAR: ["Morocco", "Africa"], MEX: ["Mexico", "North America"], NGA: ["Nigeria", "Africa"], NLD: ["Netherlands", "Europe"], NOR: ["Norway", "Europe"], PRT: ["Portugal", "Europe"], PRY: ["Paraguay", "South America"], ROM: ["Romania", "Europe"], SCO: ["Scotland", "Europe"], TUN: ["Tunisia", "Africa"], TUR: ["Turkey", "Europe"], USA: ["United States", "North America"], YUG: ["Yugoslavia", "Europe"], ZAF: ["South Africa", "Africa"] }; const L = [ ["ARG","ESP",4],["ARG","ITA",9],["AUT","DEU",7],["AUT","ESP",1],["AUT","FRA",1],["AUT","GBR",1],["AUT","ITA",1], ["BEL","DEU",2],["BEL","FRA",2],["BEL","ITA",2],["BEL","NLD",2],["BGR","DEU",4],["BGR","ESP",1],["BGR","PRT",1],["BGR","TUR",4], ["BRA","ESP",4],["BRA","FRA",1],["BRA","ITA",5],["BRA","JPN",1],["BRA","PRT",1],["CHL","ARG",1],["CHL","ITA",1],["CHL","USA",1], ["CMR","AUT",1],["CMR","DEU",1],["CMR","ESP",2],["CMR","FRA",7],["CMR","GRE",1],["CMR","ITA",2],["CMR","JPN",2],["CMR","PRT",2],["CMR","TUR",2], ["COL","ARG",3],["COL","BRA",2],["COL","ESP",1],["COL","ITA",1],["COL","USA",2],["DEU","ESP",1],["DEU","FRA",1],["DEU","ITA",2], ["DNK","DEU",3],["DNK","ESP",1],["DNK","GBR",6],["DNK","ITA",1],["DNK","NLD",1],["DNK","SCO",3],["DNK","TUR",1], ["HRV","AUT",1],["HRV","DEU",2],["HRV","ESP",4],["HRV","GBR",2],["HRV","ITA",4],["HRV","TUR",1],["IRN","DEU",3], ["ITA","ESP",2],["ITA","FRA",1],["ITA","GBR",2],["JAM","GBR",7],["KOR","FRA",1],["KOR","JPN",4], ["MAR","DEU",3],["MAR","ESP",4],["MAR","FRA",1],["MAR","ITA",1],["MAR","PRT",3],["MAR","TUN",1], ["NGA","BEL",2],["NGA","CHE",1],["NGA","DEU",1],["NGA","ESP",4],["NGA","FRA",3],["NGA","ITA",2],["NGA","NLD",3],["NGA","TUR",3],["NGA","USA",1],["NGA","ZAF",1], ["NLD","DEU",1],["NLD","ESP",5],["NLD","GBR",4],["NLD","ITA",2], ["NOR","DEU",3],["NOR","ESP",1],["NOR","GBR",12],["NOR","GRE",2],["NOR","ITA",1],["NOR","SCO",3], ["PRY","BRA",10],["PRY","ESP",2],["PRY","MEX",1], ["ROM","BEL",1],["ROM","DEU",2],["ROM","ESP",6],["ROM","GBR",2],["ROM","GRE",2],["ROM","NLD",1],["ROM","TUR",4], ["SCO","FRA",1],["SCO","GBR",7],["TUN","DEU",2],["TUN","FRA",3],["USA","DEU",2],["USA","GBR",2],["USA","NLD",1], ["YUG","DEU",1],["YUG","ESP",9],["YUG","FRA",1],["YUG","GBR",1],["YUG","ITA",7],["YUG","JPN",2], ["ZAF","AUT",1],["ZAF","CHE",1],["ZAF","DEU",2],["ZAF","ESP",2],["ZAF","FRA",1],["ZAF","GBR",4],["ZAF","ITA",1],["ZAF","NLD",2],["ZAF","TUR",3] ]; const out = new Map(), inn = new Map(), deg = new Map(); L.forEach(([s, t, v]) => { out.set(s, (out.get(s) || 0) + v); inn.set(t, (inn.get(t) || 0) + v); deg.set(s, (deg.get(s) || 0) + 1); deg.set(t, (deg.get(t) || 0) + 1); }); const nodes = Object.keys(info).map(id => { const o = out.get(id) || 0, i = inn.get(id) || 0; return {id, name: info[id][0], continent: info[id][1], out: o, in: i, players: o + i, degree: deg.get(id) || 0}; }); return {nodes, links: L.map(([source, target, value]) => ({source, target, value}))}; }4e:[] 48:{"id":"a0b454ccbc2225ea","slug":"footbal-force-graph","title":"footbal force graph","thumbnail":"08d901a2e9213c073b4d29a50b9f1ef996bb59e441213c12653b693708143839","access_level":"public","create_time":"$D2026-11-12T13:29:09.059Z","update_time":"$D2026-11-12T14:28:50.804Z","view_time":null,"first_public_time":"$D2026-11-12T14:13:38.007Z","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":"121b1ffb4ad46da8","login":"maroua1234","name":"**Maroua**","avatar_url":"https://avatars-next.observableusercontent.com/7cbd7e82bef4bd1cc0488ec95e9969c2e8a0b54cf28ff40fa05334431bf30651","tier":"free_2026","bio":"","followed_by_you":false,"follows_you":false},"version":189,"publish_version":189,"role":null,"authored":false,"authors":[{"type":"individual","id":"8f2b1cec4931c71e","login":"maroua1234","name":"**Maroua**","avatar_url":"https://avatars-next.observableusercontent.com/7cbd7e82bef4bd1cc0488ec95e9969c2e8a0b54cf28ff40fa05334431bf30651","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"121b1ffb4ad46da8","login":"maroua1234","name":"**Maroua**","avatar_url":"https://avatars-next.observableusercontent.com/7cbd7e82bef4bd1cc0488ec95e9969c2e8a0b54cf28ff40fa05334431bf30651","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":false,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"md`# 1998 World Cup Player Exports (Force Graph with Fisheye)\nHover over the canvas to magnify nodes with the **fisheye lens**, or hover over a specific country to isolate its player transfer links.`","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"viewof mode = {\n const form = html`

\n View mode:\n Force graph\n Fisheye\n

`;\n form.value = \"force\";\n form.addEventListener(\"input\", e => { form.value = e.target.value; });\n return form;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"viewof distortion = {\n const input = html``;\n const out = html`3`;\n const form = html`

Fisheye distortion (fisheye mode only): ${input} ${out}

`;\n form.value = 3;\n input.addEventListener(\"input\", () => { form.value = +input.value; out.textContent = input.value; });\n return form;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"function fisheyeCircular() {\n let radius = 200, distortion = 2, k0, k1, focus = [0, 0];\n\n function fisheye(d) {\n const dx = d.x - focus[0], dy = d.y - focus[1], dd = Math.sqrt(dx * dx + dy * dy);\n if (!dd || dd >= radius) return {x: d.x, y: d.y, z: dd >= radius ? 1 : 10};\n const k = k0 * (1 - Math.exp(-dd * k1)) / dd * 0.75 + 0.25;\n return {x: focus[0] + dx * k, y: focus[1] + dy * k, z: Math.min(k, 10)};\n }\n\n function rescale() {\n k0 = Math.exp(distortion);\n k0 = k0 / (k0 - 1) * radius;\n k1 = distortion / radius;\n return fisheye;\n }\n\n fisheye.radius = function(_) { if (!arguments.length) return radius; radius = +_; return rescale(); };\n fisheye.distortion = function(_) { if (!arguments.length) return distortion; distortion = +_; return rescale(); };\n fisheye.focus = function(_) { if (!arguments.length) return focus; focus = _; return fisheye; };\n\n return rescale();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"function drag(simulation) {\n function dragstarted(d) {\n if (!d3.event.active) simulation.alphaTarget(0.3).restart();\n d.fx = d.x; d.fy = d.y;\n }\n function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; }\n function dragended(d) {\n if (!d3.event.active) simulation.alphaTarget(0);\n }\n return d3.drag().on(\"start\", dragstarted).on(\"drag\", dragged).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":67,"value":"continentList = [\"Europe\", \"South America\", \"Africa\", \"Asia\", \"North America\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"continentColor = d3.scaleOrdinal()\n .domain(continentList)\n .range([\"#4e79a7\", \"#59a14f\", \"#f28e2b\", \"#e15759\", \"#b07aa1\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"color = d => continentColor(d.continent)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"height = 650","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"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":"$W4e","stdlib":"1"}} 24:null