2f:T1aec,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/sankey-diagram function SankeyChart({ nodes, // an iterable of node objects (typically [{id}, …]); implied by links if missing links // an iterable of link objects (typically [{source, target}, …]) }, { format = ",", // a function or format specifier for values in titles align = "justify", // convenience shorthand for nodeAlign nodeId = d => d.id, // given d in nodes, returns a unique identifier (string) nodeGroup, // given d in nodes, returns an (ordinal) value for color nodeGroups, // an array of ordinal values representing the node groups nodeLabel, // given d in (computed) nodes, text to label the associated rect nodeTitle = d => `${d.id}\n${format(d.value)}`, // given d in (computed) nodes, hover text nodeAlign = align, // Sankey node alignment strategy: left, right, justify, center nodeWidth = 15, // width of node rects nodePadding = 10, // vertical separation between adjacent nodes nodeLabelPadding = 6, // horizontal separation between node and label nodeStroke = "currentColor", // stroke around node rects nodeStrokeWidth, // width of stroke around node rects, in pixels nodeStrokeOpacity, // opacity of stroke around node rects nodeStrokeLinejoin, // line join for stroke around node rects linkSource = ({source}) => source, // given d in links, returns a node identifier string linkTarget = ({target}) => target, // given d in links, returns a node identifier string linkValue = ({value}) => value, // given d in links, returns the quantitative value linkPath = d3Sankey.sankeyLinkHorizontal(), // given d in (computed) links, returns the SVG path linkTitle = d => `${d.source.id} → ${d.target.id}\n${format(d.value)}`, // given d in (computed) links linkColor = "source-target", // source, target, source-target, or static color linkStrokeOpacity = 0.5, // link stroke opacity linkMixBlendMode = "multiply", // link blending mode colors = d3.schemeTableau10, // array of colors width = 640, // outer width, in pixels height = 400, // outer height, in pixels marginTop = 5, // top margin, in pixels marginRight = 1, // right margin, in pixels marginBottom = 5, // bottom margin, in pixels marginLeft = 1, // left margin, in pixels } = {}) { // Convert nodeAlign from a name to a function (since d3-sankey is not part of core d3). if (typeof nodeAlign !== "function") nodeAlign = { left: d3Sankey.sankeyLeft, right: d3Sankey.sankeyRight, center: d3Sankey.sankeyCenter }[nodeAlign] ?? d3Sankey.sankeyJustify; // Compute values. const LS = d3.map(links, linkSource).map(intern); const LT = d3.map(links, linkTarget).map(intern); const LV = d3.map(links, linkValue); if (nodes === undefined) nodes = Array.from(d3.union(LS, LT), id => ({id})); const N = d3.map(nodes, nodeId).map(intern); const G = nodeGroup == null ? null : d3.map(nodes, nodeGroup).map(intern); // Replace the input nodes and links with mutable objects for the simulation. nodes = d3.map(nodes, (_, i) => ({id: N[i]})); links = d3.map(links, (_, i) => ({source: LS[i], target: LT[i], value: LV[i]})); // Ignore a group-based linkColor option if no groups are specified. if (!G && ["source", "target", "source-target"].includes(linkColor)) linkColor = "currentColor"; // Compute default domains. if (G && nodeGroups === undefined) nodeGroups = G; // Construct the scales. const color = nodeGroup == null ? null : d3.scaleOrdinal(nodeGroups, colors); // Compute the Sankey layout. d3Sankey.sankey() .nodeId(({index: i}) => N[i]) .nodeAlign(nodeAlign) .nodeWidth(nodeWidth) .nodePadding(nodePadding) .extent([[marginLeft, marginTop], [width - marginRight, height - marginBottom]]) ({nodes, links}); // Compute titles and labels using layout nodes, so as to access aggregate values. if (typeof format !== "function") format = d3.format(format); const Tl = nodeLabel === undefined ? N : nodeLabel == null ? null : d3.map(nodes, nodeLabel); const Tt = nodeTitle == null ? null : d3.map(nodes, nodeTitle); const Lt = linkTitle == null ? null : d3.map(links, linkTitle); // A unique identifier for clip paths (to avoid conflicts). const uid = `O-${Math.random().toString(16).slice(2)}`; const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); const node = svg.append("g") .attr("stroke", nodeStroke) .attr("stroke-width", nodeStrokeWidth) .attr("stroke-opacity", nodeStrokeOpacity) .attr("stroke-linejoin", nodeStrokeLinejoin) .selectAll("rect") .data(nodes) .join("rect") .attr("x", d => d.x0) .attr("y", d => d.y0) .attr("height", d => d.y1 - d.y0) .attr("width", d => d.x1 - d.x0); if (G) node.attr("fill", ({index: i}) => color(G[i])); if (Tt) node.append("title").text(({index: i}) => Tt[i]); const link = svg.append("g") .attr("fill", "none") .attr("stroke-opacity", linkStrokeOpacity) .selectAll("g") .data(links) .join("g") .style("mix-blend-mode", linkMixBlendMode); if (linkColor === "source-target") link.append("linearGradient") .attr("id", d => `${uid}-link-${d.index}`) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", d => d.source.x1) .attr("x2", d => d.target.x0) .call(gradient => gradient.append("stop") .attr("offset", "0%") .attr("stop-color", ({source: {index: i}}) => color(G[i]))) .call(gradient => gradient.append("stop") .attr("offset", "100%") .attr("stop-color", ({target: {index: i}}) => color(G[i]))); link.append("path") .attr("d", linkPath) .attr("stroke", linkColor === "source-target" ? ({index: i}) => `url(#${uid}-link-${i})` : linkColor === "source" ? ({source: {index: i}}) => color(G[i]) : linkColor === "target" ? ({target: {index: i}}) => color(G[i]) : linkColor) .attr("stroke-width", ({width}) => Math.max(1, width)) .call(Lt ? path => path.append("title").text(({index: i}) => Lt[i]) : () => {}); if (Tl) svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .selectAll("text") .data(nodes) .join("text") .attr("x", d => d.x0 < width / 2 ? d.x1 + nodeLabelPadding : d.x0 - nodeLabelPadding) .attr("y", d => (d.y1 + d.y0) / 2) .attr("dy", "0.35em") .attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end") .text(({index: i}) => Tl[i]); function intern(value) { return value !== null && typeof value === "object" ? value.valueOf() : value; } return Object.assign(svg.node(), {scales: {color}}); }30:[{"id":"80c2461915983e5620b9d61b69fc25c16651d1a6cb06336c9f63efc273c30fc60da212f7eab82f0bd1f79c18f629833558dd760a008507a4d9aa4842c94617d7","href":"https://static.observableusercontent.com/files/80c2461915983e5620b9d61b69fc25c16651d1a6cb06336c9f63efc273c30fc60da212f7eab82f0bd1f79c18f629833558dd760a008507a4d9aa4842c94617d7","name":"teammovement_cleancomb2-5.csv","type":"text/csv","lastModified":1728349818267.117,"size":19614},{"id":"2558ba0b654522abf9f93e9cd22187cbbe8b04ca1114922f7ced3f07c24fcc884d62d1067d087960ab32c453816c9dcb5cc26a6702e5ff8417ad23818814b70c","href":"https://static.observableusercontent.com/files/2558ba0b654522abf9f93e9cd22187cbbe8b04ca1114922f7ced3f07c24fcc884d62d1067d087960ab32c453816c9dcb5cc26a6702e5ff8417ad23818814b70c","name":"playermoves_2024lists_clean-1.csv","type":"text/csv","lastModified":1728350389276.215,"size":94866},{"id":"de1a665069ec85b8942bdefa982affdea7da82111d5c6ce116d37b17470fc79bada6fc7fd01ae1e3c05ecf5db51ff198224b498747dc99bd58e90bf776b43644","href":"https://static.observableusercontent.com/files/de1a665069ec85b8942bdefa982affdea7da82111d5c6ce116d37b17470fc79bada6fc7fd01ae1e3c05ecf5db51ff198224b498747dc99bd58e90bf776b43644","name":"inelegant.jpeg","type":"image/jpeg","lastModified":1728352234158.706,"size":67740},{"id":"c7c4010f75c87294a827d9ead107ad26d8d4b7c00f97b9aa133db6d191dfc886ff6c65d1c21d666e42a7818c56af15ced4e52ee29c3aa72d5b9193f62b7587ba","href":"https://static.observableusercontent.com/files/c7c4010f75c87294a827d9ead107ad26d8d4b7c00f97b9aa133db6d191dfc886ff6c65d1c21d666e42a7818c56af15ced4e52ee29c3aa72d5b9193f62b7587ba","name":"playermoves_2024lists_clean@1.csv","type":"text/csv","lastModified":1728270425711.143,"size":94866},{"id":"a4422fac6f9bb288c58bc841c3f2fcb4dd7fca1d0ed7c07ed575601dfe70bcf0f52feddccb9f641f449b98ae34a242bd6db9f43b076c6c0389083ff0e8519179","href":"https://static.observableusercontent.com/files/a4422fac6f9bb288c58bc841c3f2fcb4dd7fca1d0ed7c07ed575601dfe70bcf0f52feddccb9f641f449b98ae34a242bd6db9f43b076c6c0389083ff0e8519179","name":"teams26_joined_via.csv","type":"text/csv","lastModified":1763275555498.646,"size":7353}] 2d:{"title":"AFL 2024 TEAM LISTS:","cells":[{"id":0,"value":"# AFL 2024 TEAM LISTS: \n## Sankey Diagram\n\nAn adaption of [Tanya Shapiro's NFL drafts](https://observablehq.com/@tashapiro/nfl-draft-sankey-diagram) adaption of [Mike Bostock's Sankey notebook](https://observablehq.com/@d3/sankey).\nThis Sankey diagram shows the passage of players from their entry into the AFL through to their current club, based on AFL team lists as of the end of the 2024 season (before any player movement, delistings or retirements).\n\nWhen showing by _Season Joined_, it displays the year and method through which players joined their current club. The year is based around the off-season, so Patrick Voss joining Fremantle as an SSP selection in February 2024 would come under 2023 - whether that's the best approach or not, I'm unsure.","pinned":false,"hidden":false,"mode":"md"},{"id":705,"value":"viewof team = Inputs.select(playermove.map(d => d.id), {sort: true, unique: true, \n label: \"Team\", value:\"Essendon\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":802,"value":"viewof alignment = Inputs.select(new Map([[\"Left\", \"left\"], [\"Right\", \"right\"], [\"Center\", \"center\"], [\"Justify\", \"justify\"]]), {label: \"Align:\", value:\"right\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":813,"value":"viewof colorby = Inputs.select(new Map([[\"Custom\", custcol], [\"Source\", \"source\"], [\"Target\", \"target\"],\n [\"Source-Target\", \"source-target\"]]), {label: \"Link colour:\", value:\"custcol\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":820,"value":"viewof custcol = Inputs.color({label: \"Select custom link color\", value: \"#aaaaaa\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":907,"value":"viewof sorttype = Inputs.radio(new Map([[\"Player Movement\", playermove], [\"Season Joined\", byseason]]), {value: playermove, label: \"Show by\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"chart = SankeyChart({\n links: sorttype == playermove ? playermove.filter(d => d.id === team) : byseason.filter(d => d.id)\n}, {\n nodeGroup: d => d.id, // take first word for color\n nodeAlign: alignment, \n linkColor: colorby, \n width,\n height: 800\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1062,"value":"chart1 = SankeyChart({\n links: l26\n}, {\n nodeGroup: d => d.id, // take first word for color\n nodeAlign: alignment, \n linkColor: colorby, \n width,\n height: 800\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1056,"value":"l26 = aq.from(lists26).rename({joined_via: 'source', team: 'target', tot_ct: 'value' }).derive({id: d => d.target}).objects()","pinned":true,"hidden":false,"mode":"ojs"},{"id":717,"value":"
\n
\n
\nData has been collated from [Draft Guru](https://www.draftguru.com.au/), various National Draft pages from Wikipedia, as well as using the R package [FitzRoy](https://jimmyday12.github.io/fitzRoy/) (in particular fetch_player_details for the official AFL player details). Thanks to the various people involved in making and maintaining those resources.\n","pinned":false,"hidden":false,"mode":"md"},{"id":1020,"value":"After that I took it into Rstudio and formatted it in an absolutely filthy manner to get the below.","pinned":false,"hidden":false,"mode":"md"},{"id":753,"value":"playermove = await FileAttachment(\"teammovement_cleancomb2-5.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":948,"value":"I added \"again\" as a quick fix for players who had moved clubs in the same manner a 2nd time to avoid circular references. \nCorey Wagner's National Draft -> SSP -> National Draft movement seems to have created a circular reference for Fremantle, so his first National Draft appearance has been removed. There was also a circular reference for Hawthorn, which I think was caused by Jack Gunston being traded 3 times - may need to add a \"yet again\".","pinned":false,"hidden":false,"mode":"md"},{"id":1010,"value":"FileAttachment(\"inelegant.jpeg\").image({width: 320, height: 243})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1054,"value":"lists26 = FileAttachment(\"teams26_joined_via.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":743,"value":"\n
\n
\n
\n## Modify Data (SQL)\nKeeping with the format of Tanya Shapiro's notebook that this is forked from, I've added a less wrangled version of the data below and used it for the Season Joined filtering of the sankey. You can fork this notebook and use that data to sort it as you see fit. ","pinned":false,"hidden":false,"mode":"md"},{"id":869,"value":"byseason","pinned":true,"hidden":false,"mode":"ojs"},{"id":842,"value":"(SELECT \n team_2024 as id,\n season as source,\n move_extend as target,\n COUNT(*) as value\nFROM playermovements\nWHERE player_event = player_total and team_2024 = ${team}\nGROUP BY team_2024, season, move_extend\nORDER BY season asc)\nUNION\n--\nSELECT\n team_2024 as id,\n move_extend as source,\n team_2024 as target,\n COUNT(*) as value\nFROM playermovements\nWHERE player_event = player_total and team_2024 = ${team}\nGROUP BY team_2024, move_extend\nORDER BY season asc","pinned":true,"hidden":false,"mode":"sql","output":"byseason","database":"var:playermovements"},{"id":986,"value":"playermovements = await FileAttachment(\"playermoves_2024lists_clean-1.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":723,"value":"## Mike Bostock's Sankey Diagram Function\nSee original notebook [here](https://observablehq.com/@d3/sankey).","pinned":false,"hidden":false,"mode":"md"},{"id":412,"value":"howto(\"SankeyChart\", {imports: {d3: \"d3\", d3Sankey: \"d3-sankey\"}})","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":663,"value":"d3-sankey is not part of core D3; it must be loaded separately. Here we’re using [require](/@observablehq/require) to load it, while also ensuring that its dependencies on d3-array and d3-shape resolve to the copy of D3 that we’re using elsewhere in this notebook. We don’t want to load multiple copies of these libraries!","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"d3Sankey = require.alias({\"d3-array\": d3, \"d3-shape\": d3, \"d3-sankey\": \"d3-sankey@0.12.3/dist/d3-sankey.min.js\"})(\"d3-sankey\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":410,"value":"import {howto} from \"@d3/example-components\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":731,"value":"