25:["$","title",null,{"children":"footbal force graph | Adlen Alliouane | Observable"}] 4b:T48d8,chart = { const width = 920; const links = data[0].links.map(d => Object.create(d)); const nodes = data[0].nodes.map(d => Object.create(d)); const sortedCountries = nodes.map(d => d.id).sort(); const themes = { dark: { cardBg: "#0f172a", cardBorder: "#334155", barBg: "rgba(30, 41, 59, 0.92)", subPanelBg: "rgba(15, 23, 42, 0.65)", legendBg: "rgba(15, 23, 42, 0.85)", textPrimary: "#f8fafc", textSecondary: "#cbd5e1", accent: "#60a5fa", accentPurple: "#c084fc", accentEmerald: "#34d399", accentTextOnBtn: "#0f172a", inputBg: "#0f172a", inputBorder: "#475569", canvasBg: "radial-gradient(circle at center, #1e293b 0%, #0b1120 100%)", gridDot: "rgba(148, 163, 184, 0.14)", linkStroke: "#94a3b8", linkOpacity: 0.48, linkHighlight: "#60a5fa", linkDim: "#475569", nodeStroke: "#0f172a", labelFill: "#f1f5f9", labelHighlight: "#60a5fa", tooltipBg: "rgba(15, 23, 42, 0.92)", tooltipBorder: "#475569", lensFill: "rgba(96, 165, 250, 0.06)", lensStroke: "rgba(96, 165, 250, 0.45)", glowBlur: "2.5" }, light: { cardBg: "#ffffff", cardBorder: "#cbd5e1", barBg: "#f8fafc", subPanelBg: "#ffffff", legendBg: "#f1f5f9", textPrimary: "#0f172a", textSecondary: "#475569", accent: "#2563eb", accentPurple: "#7c3aed", accentEmerald: "#059669", accentTextOnBtn: "#ffffff", inputBg: "#ffffff", inputBorder: "#cbd5e1", canvasBg: "radial-gradient(circle at center, #ffffff 0%, #f1f5f9 100%)", gridDot: "rgba(100, 116, 139, 0.2)", linkStroke: "#64748b", linkOpacity: 0.42, linkHighlight: "#2563eb", linkDim: "#cbd5e1", nodeStroke: "#ffffff", labelFill: "#1e293b", labelHighlight: "#2563eb", tooltipBg: "rgba(255, 255, 255, 0.94)", tooltipBorder: "#cbd5e1", lensFill: "rgba(37, 99, 235, 0.06)", lensStroke: "rgba(37, 99, 235, 0.45)", glowBlur: "0" } }; let currentMode = "dark"; let hoveredNode = null; let sizeScale = 1.0; // Count links (degree) and shared players per country const stats = new Map(nodes.map(n => [n.id, { totalPlayers: 0, linkCount: 0, strongestLink: "None", maxVal: 0 }])); links.forEach(l => { const s = stats.get(l.source); const t = stats.get(l.target); s.totalPlayers += l.value; s.linkCount += 1; if (l.value > s.maxVal) { s.maxVal = l.value; s.strongestLink = `${l.target} (${l.value})`; } t.totalPlayers += l.value; t.linkCount += 1; if (l.value > t.maxVal) { t.maxVal = l.value; t.strongestLink = `${l.source} (${l.value})`; } }); // Scale circle radius directly from min-to-max link count const maxLinks = d3.max(nodes, d => stats.get(d.id).linkCount) || 1; const radiusByLinks = d3.scaleSqrt() .domain([1, maxLinks]) .range([5, 22]); const baseRadius = d => radiusByLinks(Math.max(1, stats.get(d.id).linkCount)) * sizeScale; const linkedByIndex = new Set(links.map(l => `${l.source},${l.target}`)); const isConnected = (a, b) => a.id === b.id || linkedByIndex.has(`${a.id},${b.id}`) || linkedByIndex.has(`${b.id},${a.id}`); const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id).distance(75)) .force("charge", d3.forceManyBody().strength(-440)) .force("center", d3.forceCenter(width / 2, height / 2)) .force("collide", d3.forceCollide().radius(d => baseRadius(d) + 8)); const wrapper = html`

`; // Top Control Bar const controlBar = d3.select(wrapper).append("div") .style("display", "flex").style("flex-wrap", "wrap").style("gap", "10px") .style("align-items", "center").style("padding", "12px 16px") .style("font-size", "12.5px").style("transition", "all 0.25s ease"); // 1. Searchable Country Filter const searchGroup = controlBar.append("div") .style("display", "flex").style("align-items", "center").style("gap", "6px") .style("padding", "4px 9px").style("border-radius", "8px"); const searchLabel = searchGroup.append("span").style("font-weight", "600").text("🔍 Country:"); const listId = `country-datalist-${Math.random().toString(36).slice(2, 8)}`; const countryInput = searchGroup.append("input") .attr("type", "text") .attr("list", listId) .attr("placeholder", "Search (e.g. BRA, ESP)...") .style("width", "145px").style("padding", "4px 8px").style("border-radius", "6px") .style("font-weight", "500").style("font-size", "12px").style("outline", "none"); const datalist = searchGroup.append("datalist").attr("id", listId); datalist.selectAll("option").data(sortedCountries).join("option").attr("value", d => d); const clearSearchBtn = searchGroup.append("button") .attr("type", "button").attr("title", "Clear search") .style("padding", "3px 7px").style("border-radius", "5px") .style("font-weight", "700").style("cursor", "pointer").style("font-size", "11px") .text("✕"); // 2. Fisheye Group const fisheyeGroup = controlBar.append("div") .style("display", "flex").style("align-items", "center").style("gap", "8px") .style("padding", "4px 10px").style("border-radius", "8px"); const fisheyeWrap = fisheyeGroup.append("label").style("display", "flex").style("align-items", "center").style("gap", "5px").style("cursor", "pointer"); const fisheyeCheckbox = fisheyeWrap.append("input").attr("type", "checkbox").property("checked", true) .style("width", "14px").style("height", "14px").style("cursor", "pointer"); const fisheyeText = fisheyeWrap.append("span").style("font-weight", "600").text("🔮 Fisheye"); const intensityLabel = fisheyeGroup.append("label").style("display", "flex").style("align-items", "center").style("gap", "5px"); intensityLabel.append("span").text("Intensity:"); const intensitySlider = intensityLabel.append("input").attr("type", "range") .attr("min", "0.5").attr("max", "6").attr("step", "0.5").attr("value", "2") .style("width", "64px").style("cursor", "pointer"); const intensityVal = intensityLabel.append("span").style("min-width", "22px").style("font-weight", "700").text("2.0"); fisheye.distortion(2); intensitySlider.on("input", function() { const val = +this.value; fisheye.distortion(val); intensityVal.text(val.toFixed(1)); }); // 3. Variable Circle Size Multiplier const sizeGroup = controlBar.append("div") .style("display", "flex").style("align-items", "center").style("gap", "6px") .style("padding", "4px 10px").style("border-radius", "8px"); const sizeText = sizeGroup.append("span").style("font-weight", "600").text("⚪ Size:"); const sizeSlider = sizeGroup.append("input").attr("type", "range") .attr("min", "0.5").attr("max", "2.2").attr("step", "0.1").attr("value", "1.0") .style("width", "64px").style("cursor", "pointer"); const sizeVal = sizeGroup.append("span").style("min-width", "28px").style("font-weight", "700").text("1.0x"); // 4. Action Buttons Group const actionGroup = controlBar.append("div").style("display", "flex").style("align-items", "center").style("gap", "5px").style("margin-left", "auto"); const toolButtons = [clearSearchBtn]; const makeBtn = (label) => { const b = actionGroup.append("button").attr("type", "button") .style("padding", "5px 9px").style("border-radius", "7px") .style("font-weight", "600").style("cursor", "pointer").style("font-size", "12px") .text(label); toolButtons.push(b); return b; }; const zoomInBtn = makeBtn("➕").attr("title", "Zoom In"); const zoomOutBtn = makeBtn("➖").attr("title", "Zoom Out"); const zoomResetBtn = makeBtn("Reset View"); const themeBtn = makeBtn("☀️ Light"); const unpinBtn = actionGroup.append("button").attr("type", "button") .style("font-weight", "700").style("border", "none").style("padding", "6px 10px") .style("border-radius", "7px").style("cursor", "pointer").style("font-size", "12px") .text("Unpin") .on("click", () => { nodes.forEach(n => { n.fx = null; n.fy = null; }); simulation.alpha(0.3).restart(); }); // Integrated Region Legend Bar const legendBar = d3.select(wrapper).append("div") .style("display", "flex").style("flex-wrap", "wrap").style("gap", "14px") .style("align-items", "center").style("padding", "8px 16px") .style("font-size", "11.5px").style("transition", "all 0.25s ease"); color.scale.domain().forEach(region => { const item = legendBar.append("span").style("display", "inline-flex").style("align-items", "center").style("gap", "6px"); item.append("span").style("width", "10px").style("height", "10px").style("border-radius", "50%") .style("background", color.scale(region)).style("display", "inline-block") .style("box-shadow", `0 0 6px ${color.scale(region)}`); item.append("span").style("font-weight", "600").text(region); }); // Canvas Container const canvasBox = d3.select(wrapper).append("div").style("position", "relative").style("width", "100%"); const svg = canvasBox.append("svg").attr("viewBox", [0, 0, width, height]) .style("display", "block").style("cursor", "grab").style("transition", "background 0.25s ease"); const tooltip = canvasBox.append("div") .style("position", "absolute").style("top", "14px").style("right", "14px") .style("backdrop-filter", "blur(8px)").style("border-radius", "12px") .style("padding", "12px 16px").style("font-size", "12px").style("line-height", "1.65") .style("box-shadow", "0 8px 24px rgba(0,0,0,0.18)") .style("pointer-events", "none").style("opacity", 0).style("transition", "opacity 0.15s ease"); const defs = svg.append("defs"); const pattern = defs.append("pattern").attr("id", "dot-grid") .attr("width", 24).attr("height", 24).attr("patternUnits", "userSpaceOnUse"); const patternDot = pattern.append("circle").attr("cx", 2).attr("cy", 2).attr("r", 1.1); const glow = defs.append("filter").attr("id", "neon-glow"); const glowBlurNode = glow.append("feGaussianBlur").attr("stdDeviation", "2.5").attr("result", "coloredBlur"); const feMerge = glow.append("feMerge"); feMerge.append("feMergeNode").attr("in", "coloredBlur"); feMerge.append("feMergeNode").attr("in", "SourceGraphic"); svg.append("rect").attr("width", width).attr("height", height).attr("fill", "url(#dot-grid)").style("pointer-events", "none"); const g = svg.append("g"); let currentTransform = d3.zoomIdentity; const zoomBehavior = d3.zoom() .scaleExtent([0.2, 8]) .on("start", () => svg.style("cursor", "grabbing")) .on("zoom", () => { currentTransform = d3.event.transform; g.attr("transform", currentTransform); }) .on("end", () => svg.style("cursor", "grab")); svg.call(zoomBehavior).on("dblclick.zoom", null); zoomInBtn.on("click", () => svg.transition().duration(250).call(zoomBehavior.scaleBy, 1.35)); zoomOutBtn.on("click", () => svg.transition().duration(250).call(zoomBehavior.scaleBy, 0.72)); zoomResetBtn.on("click", () => svg.transition().duration(300).call(zoomBehavior.transform, d3.zoomIdentity)); const lensCircle = g.append("circle").attr("r", 200) .attr("stroke-dasharray", "5,5").style("pointer-events", "none").style("opacity", 0); const link = g.append("g").selectAll("line").data(links).join("line") .attr("stroke-width", d => 0.9 + Math.sqrt(d.value) * 1.25); const node = g.append("g").selectAll("circle").data(nodes).join("circle") .attr("r", d => baseRadius(d)) .attr("fill", d => color(d)) .attr("stroke-width", 2) .style("filter", "url(#neon-glow)").style("cursor", "pointer") .call(drag(simulation)) .on("dblclick", function(d) { d3.event.stopPropagation(); d.fx = null; d.fy = null; simulation.alpha(0.2).restart(); }); const label = g.append("g").selectAll("text").data(nodes).join("text") .text(d => d.id).attr("font-size", 11).attr("font-weight", 700) .attr("dx", d => baseRadius(d) + 4).attr("dy", 3.5).style("pointer-events", "none"); function findSearchedNode() { const q = countryInput.property("value").trim().toUpperCase(); if (!q) return null; return nodes.find(n => n.id === q) || nodes.find(n => n.id.startsWith(q)) || null; } function highlightNode(d) { hoveredNode = d; const t = themes[currentMode]; if (!d) { node.style("opacity", 1); label.style("opacity", 1).attr("fill", t.labelFill).attr("font-size", 11); link.style("stroke", t.linkStroke).style("stroke-opacity", t.linkOpacity); tooltip.style("opacity", 0); return; } const st = stats.get(d.id); const reg = color.regions[d.id] || "Other"; node.style("opacity", o => isConnected(d, o) ? 1 : 0.15); label.style("opacity", o => isConnected(d, o) ? 1 : 0.15) .attr("fill", o => o.id === d.id ? t.labelHighlight : t.labelFill) .attr("font-size", o => o.id === d.id ? 13.5 : 11); link.style("stroke", l => (l.source.id === d.id || l.target.id === d.id) ? t.linkHighlight : t.linkDim) .style("stroke-opacity", l => (l.source.id === d.id || l.target.id === d.id) ? 1.0 : 0.08); tooltip.style("opacity", 1).html(`

${d.id} • ${reg}

🔗 Total Links: ${st.linkCount}

⚽ Total Players Shared: ${st.totalPlayers}

★ Strongest Link: ${st.strongestLink}

`); } sizeSlider.on("input", function() { sizeScale = +this.value; sizeVal.text(`${sizeScale.toFixed(1)}x`); node.attr("r", d => baseRadius(d)); label.attr("dx", d => baseRadius(d) + 4); simulation.force("collide", d3.forceCollide().radius(d => baseRadius(d) + 8)); simulation.alpha(0.15).restart(); }); function applyTheme(mode) { currentMode = mode; const t = themes[mode]; d3.select(wrapper) .style("background", t.cardBg) .style("border", `1px solid ${t.cardBorder}`); controlBar .style("background", t.barBg) .style("border-bottom", `1px solid ${t.cardBorder}`) .style("color", t.textPrimary); searchGroup .style("background", t.subPanelBg) .style("border", `1px solid ${t.inputBorder}`); searchLabel.style("color", t.accent); countryInput .style("background", t.inputBg) .style("color", t.textPrimary) .style("border", `1px solid ${t.inputBorder}`); fisheyeGroup .style("background", t.subPanelBg) .style("border", `1px solid ${t.inputBorder}`); fisheyeCheckbox.style("accent-color", t.accentPurple); fisheyeText.style("color", t.accentPurple); intensityLabel.style("color", t.textSecondary); intensitySlider.style("accent-color", t.accentPurple); intensityVal.style("color", t.textPrimary); sizeGroup .style("background", t.subPanelBg) .style("border", `1px solid ${t.inputBorder}`); sizeText.style("color", t.accentEmerald); sizeSlider.style("accent-color", t.accentEmerald); sizeVal.style("color", t.textPrimary); toolButtons.forEach(b => b .style("background", t.inputBg) .style("color", t.textPrimary) .style("border", `1px solid ${t.inputBorder}`) ); unpinBtn .style("background", t.accent) .style("color", t.accentTextOnBtn); legendBar .style("background", t.legendBg) .style("border-bottom", `1px solid ${t.cardBorder}`) .style("color", t.textPrimary); svg.style("background", t.canvasBg); patternDot.attr("fill", t.gridDot); glowBlurNode.attr("stdDeviation", t.glowBlur); lensCircle.attr("fill", t.lensFill).attr("stroke", t.lensStroke); node.attr("stroke", t.nodeStroke); tooltip .style("background", t.tooltipBg) .style("border", `1px solid ${t.tooltipBorder}`) .style("color", t.textPrimary); themeBtn.text(mode === "dark" ? "☀️ Light" : "🌙 Dark"); highlightNode(hoveredNode); } themeBtn.on("click", () => { applyTheme(currentMode === "dark" ? "light" : "dark"); }); node.on("mouseover", d => highlightNode(d)) .on("mouseout", () => highlightNode(findSearchedNode())); countryInput.on("input", () => highlightNode(findSearchedNode())); clearSearchBtn.on("click", () => { countryInput.property("value", ""); highlightNode(null); }); function resetFisheyePositions() { lensCircle.style("opacity", 0); 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) .attr("r", d => baseRadius(d)); label.attr("x", d => d.x).attr("y", d => d.y); } fisheyeCheckbox.on("change", function() { if (!this.checked) resetFisheyePositions(); }); 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); label.attr("x", d => d.x).attr("y", d => d.y); }); svg.on("mousemove", function() { if (!fisheyeCheckbox.property("checked")) { lensCircle.style("opacity", 0); return; } const mouse = currentTransform.invert(d3.mouse(this)); fisheye.focus(mouse); lensCircle.attr("cx", mouse[0]).attr("cy", mouse[1]).style("opacity", 1); node.each(d => { d.fisheye = fisheye(d); }) .attr("cx", d => d.fisheye.x).attr("cy", d => d.fisheye.y) .attr("r", d => baseRadius(d) * (0.65 + d.fisheye.z * 0.35)); label.attr("x", d => d.fisheye.x).attr("y", d => d.fisheye.y); link.attr("x1", d => d.source.fisheye.x).attr("y1", d => d.source.fisheye.y) .attr("x2", d => d.target.fisheye.x).attr("y2", d => d.target.fisheye.y); }).on("mouseleave", () => { if (fisheyeCheckbox.property("checked")) resetFisheyePositions(); }); applyTheme("dark"); return wrapper; }4c:T503,color = { const regions = { ARG: "South America", BRA: "South America", CHL: "South America", COL: "South America", PRY: "South America", AUT: "Western Europe", BEL: "Western Europe", CHE: "Western Europe", DEU: "Western Europe", ESP: "Western Europe", FRA: "Western Europe", GBR: "Western Europe", ITA: "Western Europe", NLD: "Western Europe", PRT: "Western Europe", SCO: "Western Europe", BGR: "Eastern Europe & Nordic", DNK: "Eastern Europe & Nordic", GRE: "Eastern Europe & Nordic", HRV: "Eastern Europe & Nordic", NOR: "Eastern Europe & Nordic", ROM: "Eastern Europe & Nordic", TUR: "Eastern Europe & Nordic", YUG: "Eastern Europe & Nordic", CMR: "Africa", MAR: "Africa", NGA: "Africa", TUN: "Africa", ZAF: "Africa", IRN: "Asia", JPN: "Asia", KOR: "Asia", JAM: "North & Central America", MEX: "North & Central America", USA: "North & Central America" }; // Lighter, luminous pastel-neon colors const scale = d3.scaleOrdinal() .domain(["Western Europe", "Eastern Europe & Nordic", "South America", "Africa", "Asia", "North & Central America"]) .range(["#60a5fa", "#c084fc", "#4ade80", "#facc15", "#f472b6", "#fb923c"]); const fn = d => scale(regions[d.id] || "Other"); fn.scale = scale; fn.regions = regions; return fn; }4d:T1c22,data = [{ "nodes": [ {"id": "ARG", "group": 1}, {"id": "AUT", "group": 2}, {"id": "BEL", "group": 3}, {"id": "BGR", "group": 4}, {"id": "BRA", "group": 5}, {"id": "CHE", "group": 6}, {"id": "CHL", "group": 7}, {"id": "CMR", "group": 8}, {"id": "COL", "group": 9}, {"id": "DEU", "group": 10}, {"id": "DNK", "group": 11}, {"id": "ESP", "group": 12}, {"id": "FRA", "group": 13}, {"id": "GBR", "group": 14}, {"id": "GRE", "group": 15}, {"id": "HRV", "group": 16}, {"id": "IRN", "group": 17}, {"id": "ITA", "group": 18}, {"id": "JAM", "group": 19}, {"id": "JPN", "group": 20}, {"id": "KOR", "group": 21}, {"id": "MAR", "group": 22}, {"id": "MEX", "group": 23}, {"id": "NGA", "group": 24}, {"id": "NLD", "group": 25}, {"id": "NOR", "group": 26}, {"id": "PRT", "group": 27}, {"id": "PRY", "group": 28}, {"id": "ROM", "group": 29}, {"id": "SCO", "group": 30}, {"id": "TUN", "group": 31}, {"id": "TUR", "group": 32}, {"id": "USA", "group": 33}, {"id": "YUG", "group": 34}, {"id": "ZAF", "group": 35} ], "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": 7}, {"source": "KOR", "target": "FRA", "value": 1}, {"source": "KOR", "target": "JPN", "value": 4}, {"source": "MAR", "target": "DEU", "value": 3}, {"source": "MAR", "target": "ESP", "value": 4}, {"source": "MAR", "target": "FRA", "value": 1}, {"source": "MAR", "target": "ITA", "value": 1}, {"source": "MAR", "target": "PRT", "value": 3}, {"source": "MAR", "target": "TUN", "value": 1}, {"source": "NGA", "target": "BEL", "value": 2}, {"source": "NGA", "target": "CHE", "value": 1}, {"source": "NGA", "target": "DEU", "value": 1}, {"source": "NGA", "target": "ESP", "value": 4}, {"source": "NGA", "target": "FRA", "value": 3}, {"source": "NGA", "target": "ITA", "value": 2}, {"source": "NGA", "target": "NLD", "value": 3}, {"source": "NGA", "target": "TUR", "value": 3}, {"source": "NGA", "target": "USA", "value": 1}, {"source": "NGA", "target": "ZAF", "value": 1}, {"source": "NLD", "target": "DEU", "value": 1}, {"source": "NLD", "target": "ESP", "value": 5}, {"source": "NLD", "target": "GBR", "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": "PRY", "target": "BRA", "value": 10}, {"source": "PRY", "target": "ESP", "value": 2}, {"source": "PRY", "target": "MEX", "value": 1}, {"source": "ROM", "target": "BEL", "value": 1}, {"source": "ROM", "target": "DEU", "value": 2}, {"source": "ROM", "target": "ESP", "value": 6}, {"source": "ROM", "target": "GBR", "value": 2}, {"source": "ROM", "target": "GRE", "value": 2}, {"source": "ROM", "target": "NLD", "value": 1}, {"source": "ROM", "target": "TUR", "value": 4}, {"source": "SCO", "target": "FRA", "value": 1}, {"source": "SCO", "target": "GBR", "value": 7}, {"source": "TUN", "target": "DEU", "value": 2}, {"source": "TUN", "target": "FRA", "value": 3}, {"source": "USA", "target": "DEU", "value": 2}, {"source": "USA", "target": "GBR", "value": 2}, {"source": "USA", "target": "NLD", "value": 1}, {"source": "YUG", "target": "DEU", "value": 1}, {"source": "YUG", "target": "ESP", "value": 9}, {"source": "YUG", "target": "FRA", "value": 1}, {"source": "YUG", "target": "GBR", "value": 1}, {"source": "YUG", "target": "ITA", "value": 7}, {"source": "YUG", "target": "JPN", "value": 2}, {"source": "ZAF", "target": "AUT", "value": 1}, {"source": "ZAF", "target": "CHE", "value": 1}, {"source": "ZAF", "target": "DEU", "value": 2}, {"source": "ZAF", "target": "ESP", "value": 2}, {"source": "ZAF", "target": "FRA", "value": 1}, {"source": "ZAF", "target": "GBR", "value": 4}, {"source": "ZAF", "target": "ITA", "value": 1}, {"source": "ZAF", "target": "NLD", "value": 2}, {"source": "ZAF", "target": "TUR", "value": 3} ] }]4e:[] 47:{"id":"35478baba107dad2","slug":"footbal-force-graph","title":"footbal force graph","thumbnail":"f9b7e3e6e23f9386aaf4c6afe66225a4bb06950e8012a7afe0f483d2710ece5f","access_level":"public","create_time":"$D2026-11-12T13:27:24.439Z","update_time":"$D2026-11-12T14:28:33.241Z","view_time":null,"first_public_time":"$D2026-11-12T14:29:50.254Z","has_unpublished_edits":null,"fork":{"id":"9a385867630c78cc","slug":null,"title":"footbal force graph","owner":{"id":"53ebf3d88fe2346b","login":"samfad91","name":"Samiha"}},"stars":0,"starred":false,"owner":{"type":"team","id":"e2410e62bf340a85","login":"adlen1","name":"Adlen Alliouane","avatar_url":"https://avatars-next.observableusercontent.com/007ecac73308cbf6dd5931c07eb6054bbc58686c37823534c8b02a887d849e50","tier":"free_2026","bio":"","followed_by_you":false,"follows_you":false},"version":118,"publish_version":118,"role":null,"authored":false,"authors":[{"type":"individual","id":"b0895832f2e94605","login":"adlen1","name":"Adlen Alliouane","avatar_url":"https://avatars-next.observableusercontent.com/007ecac73308cbf6dd5931c07eb6054bbc58686c37823534c8b02a887d849e50","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"e2410e62bf340a85","login":"adlen1","name":"Adlen Alliouane","avatar_url":"https://avatars-next.observableusercontent.com/007ecac73308cbf6dd5931c07eb6054bbc58686c37823534c8b02a887d849e50","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":15,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"drag = simulation => {\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 // Node stays pinned where dropped (Exercise 4.2d)\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":"$4c","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":"$4d","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"},{"id":40,"value":"fisheye = {\n let radius = 200,\n distortion = 2,\n k0,\n k1,\n focus = [0, 0];\n\n function fisheye(d) {\n const dx = d.x - focus[0],\n dy = d.y - focus[1],\n 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(_) {\n if (!arguments.length) return radius;\n radius = +_;\n return rescale();\n };\n\n fisheye.distortion = function(_) {\n if (!arguments.length) return distortion;\n distortion = +_;\n return rescale();\n };\n\n fisheye.focus = function(_) {\n if (!arguments.length) return focus;\n focus = _;\n return fisheye;\n };\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"}],"files":"$W4e","stdlib":"1"}} 24:null