2c:null 2d:["$","title",null,{"children":"A look at the 2022/2023 Big South Men's Basketball conference | Dynamic Data Visualization 373 | Observable"}] 32:T439,{ let last_game = big_south_games.slice(-1)[0]; return md`The data represents all ${ big_south_games.length } conference games played through ${last_game.name1.replace( /_/g, " " )} vs ${last_game.name2.replace(/_/g, " ")} played on ${d3.utcFormat( "%A, %B %d, %Y" )(last_game.date)}. The column variables are: - \`date\`: The date the game was played - \`team1\`: Massey's identifier for the first team (the winning team, if there is one) - \`home1\`: A Boolean flag that's - \`1\` if the game is a home game for \`team1\`, - \`-1\` if the game is an away game for \`team\`, or - \`0\` if the game is at a neutral site. - \`score1:\` The number of points scored by \`team1\` - \`team2\`, \`home2\`, and \`score2\`: same but for the second team - \`name1\` and \`name2\`: Team names as they appear in Massey's team file - \`idx1\` and \`idx2\`: Positions of the teams in an alphabetically sorted list of the Big South teams Note that the first seven columns are exactly those in Massey's data. I added the last four columns for convenience. `; }33:T731,{ let n = 8; let w = width < 600 ? width : 600; let h = w; let svg = d3.create("svg").attr("width", w).attr("height", h); let s = 1.4; // Halfway across the square container let x_scale = d3.scaleLinear().domain([-s, s]).range([0, w]); let y_scale = d3.scaleLinear().domain([s, -s]).range([0, h]); let r_scale = d3 .scaleLinear() .domain([0, s]) .range([0, w / 2]); // Set up the nodes: A collection of points // equi-distributed around a circle. let nodes = d3.range(n).map((i) => ({ x: x_scale(Math.cos((2 * i * Math.PI) / n)), y: y_scale(Math.sin((2 * i * Math.PI) / n)) })); // Set up the links in two parts: // Each node should be linked to its neighbors let links1 = d3 .range(n) .map((i) => ({ source: nodes[i], target: nodes[(i + 1) % n] })); // And each node is connected to its neighbor's neighbor's neighbor. let links2 = d3 .range(n) .map((i) => ({ source: nodes[i], target: nodes[(i + 3) % n] })); let links = links1.concat(links2); // Uncomment to see what the links look like as objects // return links; // Draw the links let link = svg .append("g") .attr("stroke-width", 1) .attr("stroke", "black") .attr("class", "links") .selectAll("line") .data(links) .join("line") .attr("source", (d) => d.source) .attr("target", (d) => d.target) .attr("x1", (d) => d.source.x) .attr("x2", (d) => d.target.x) .attr("y1", (d) => d.source.y) .attr("y2", (d) => d.target.y); // Draw the nodes let node = svg .append("g") .attr("fill", "black") .attr("stroke-width", 3) .attr("stroke", "white") .attr("class", "nodes") .selectAll("circle") .data(nodes) .join("circle") .attr("r", 5) .attr("cx", (d) => d.x) .attr("cy", (d) => d.y); return svg.node(); }34:T813,## Ranking for fun and profit Next time, we'll talk a bit about how we might use the score matrix to rank the teams and even assess the probability that one team might defeat another team if they played again - in a tournament, for example. In fact, one of my major motivations for exploring this topic right now is the approach of the NCAA Basketball tournament and [this year's Kaggle competition](https://www.kaggle.com/competitions/march-machine-learning-mania-2023/). I've competed in 10 of these things (including the Men's and Women's brackets) since 2015. [Here's a record of my attempts](https://www.kaggle.com/mcmcclur/competitions). One of the best parts of all this is the actual visualization of a tournament, I've written a couple of notebooks to help visualize a full 64 team NCAA tournament: - [All 59 tournaments with 64 or more teams](https://observablehq.com/@mcmcclur/ncaa-brackets) and - [Kaggle competition visualizer](https://observablehq.com/@mcmcclur/visualize-your-kaggle-brackets-for-march-madness) We'll spend some time next week trying implement the visualization of smaller tournaments. ## Comments on layouts In this notebook, we've seen two examples of fairly sophisticated layout tools and referenced another: - [d3-force](https://github.com/d3/d3-force) for force-directed layout of graphs - [d3-chord](https://github.com/d3/d3-chord) for the chord diagram, and - [d3-hierarchy](https://github.com/d3/d3-hierarchy) for laying out a tournament. All these follow a common theme in that they accept some type of data and they then return geometric information on how we might lay down the components of a visualization of that data. We've seen a simpler example of this theme before in [d3.bin](https://github.com/d3/d3-array#bins), which accepts numerical data, places the items in bins, and returns the structure of those bins. Once we have the structure of the layout in hand, we have quite a bit of flexibility in terms of how we actually build the visualization, though D3 also provides tools for building that portion too.35:T4ea,## Assignment I've got a [CSV file that you can download from my webpage](https://marksmath.org/data/BigTen2002.csv) that contains all the results from the 2002 Big Ten football season. The first few rows look something like so:

Date	Winner	Loser	WinPts	LosePts
Sep 28 2002	Iowa	Penn_State	42	35
Sep 28 2002	Michigan	Illinois	45	28
Sep 28 2002	Michigan_State	Northwestern	39	24
Sep 28 2002	Ohio_State	Indiana	45	17

Your mission is to build a directed graph using Graphviz that illustrates the wins and losses from that data. Note that: - Each pair of teams play each other at most once in Big Ten play. Thus, a directed arrow from Team A to Team B indicates that Team A beat Team B. In particular, there's no need to label the edges. - Nodes are implied by their existence in an edge; thus, there's really no need to specify the nodes.36:[{"id":"a8dcc0fbc1aca5b250b072b67eae3132d60e32d7f6a1a04a69dc82c1f6e68c42c9d6d487472a6ced5144cad390c87d82a239a5dcad0007bcedeaec125a01a296","href":"https://static.observableusercontent.com/files/a8dcc0fbc1aca5b250b072b67eae3132d60e32d7f6a1a04a69dc82c1f6e68c42c9d6d487472a6ced5144cad390c87d82a239a5dcad0007bcedeaec125a01a296","name":"big_south_games@1.csv","type":"text/csv","lastModified":1676847525726.887,"size":4641}] 30:{"id":"1483890c307873b9","slug":null,"title":"A look at the 2022/2023 Big South Men's Basketball conference","thumbnail":"cdea5d7cddd735a080a6b9f0d7427781310d160f177fe392e5d92e9f58656dd6","access_level":"public","create_time":"$D2023-02-19T22:58:45.726Z","update_time":"$D2023-09-07T15:53:54.785Z","view_time":null,"first_public_time":"$D2023-09-07T00:22:03.727Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"a07c87acf1b22f86","login":"ddv373","name":"Dynamic Data Visualization 373","avatar_url":"https://avatars-next.observableusercontent.com/aa07fb823a47852e43ceca20a9030290c7b3befd6ad2b87a17c17f4b47176d35","tier":"pro_2024"},"version":555,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c3301e515dd08a41","login":"mcmcclur","name":"Mark McClure","avatar_url":"https://avatars-next.observableusercontent.com/e615e819ce83d43faef607e48c53c5ff63943aa0ba9f5848499bd02fef7396f4","tier":null}],"members":[{"type":"individual","id":"c3301e515dd08a41","login":"mcmcclur","name":"Mark McClure","avatar_url":"https://avatars-next.observableusercontent.com/e615e819ce83d43faef607e48c53c5ff63943aa0ba9f5848499bd02fef7396f4","tier":null,"role":"editor"},{"type":"team","id":"a07c87acf1b22f86","login":"ddv373","name":"Dynamic Data Visualization 373","avatar_url":"https://avatars-next.observableusercontent.com/aa07fb823a47852e43ceca20a9030290c7b3befd6ad2b87a17c17f4b47176d35","tier":"pro_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"A look at the 2022/2023 Big South Men's Basketball conference","cells":[{"id":0,"value":"# A look at the 2022/2023 Big South Men's Basketball conference\n## As an introduction to network graphs\n\nUNCA Asheville's sports teams plays in the [Big South conference](https://bigsouthsports.com/). UNCA's Men's Basketball team is having a great season this year so let's take a look at some data visualizations arising there and, more generally, in the context of sports.\n\nNote that the data powering this notebook comes from [Massey Ratings](https://masseyratings.com/) as processed by [this notebook](https://observablehq.com/d/9522e50adc64436f).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":118,"value":"## The data\n\nLet's take a look at the raw data that we've got:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":106,"value":"Inputs.table(big_south_games)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"I suppose the first, most basic thing we might be interested in is a ranking of the teams by record:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":177,"value":"{\n let losses_by_team = d3.rollup(\n big_south_games,\n (a) => a.length,\n (o) => o.name2\n );\n let wins_by_team = d3.rollup(\n big_south_games,\n (a) => a.length,\n (o) => o.name1\n );\n let table = d3.create(\"table\").style(\"width\", \"240px\");\n let head = table.append(\"tr\");\n head.append(\"th\").text(\"Team\");\n head.append(\"th\").style(\"text-align\", \"center\").text(\"Record\");\n d3.sort(teams, (team) => -wins_by_team.get(team)).forEach(function (team) {\n let row = table.append(\"tr\");\n row.append(\"td\").text(team.replace(/_/g, \" \"));\n row\n .append(\"td\")\n .style(\"text-align\", \"center\")\n .text(`${wins_by_team.get(team)}-${losses_by_team.get(team)}`);\n });\n return table.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"Of course, this is ***Dynamic* Data Visualization** so we'll want to do better than that!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":550,"value":"## Graphs and relationships\n\nOne key aspect of conference play that our table of ranking by records is missing is the *relationships* between the teams - i.e. who played who, how many times, and what was the score? A common way to visualize relationships between items in a collection is called a *network graph* or *graph*. Conceptually, a graph is simply a collection of dots (technically called *nodes* or *vertices*) and lines (technically called *edges*) that connect the nodes.\n\nHere's an example with 8 nodes connected by 16 edges and a lot of symmetry:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":271,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"The general problem of vertex placement for networks is actually quite challenging. D3 provides an entire module called [d3-force](https://github.com/d3/d3-force) that implements a force directed approach. Here it is applied to the previous graph:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":233,"value":"viewof forces","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"viewof again","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"simulation","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":469,"value":"Force-directed layout using `d3-force` is a huge topic that we needn't get into right now. For those interested, [here's the implementation](https://observablehq.com/@ddv373/d3-force-to-desired-position#simulation).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":341,"value":"## Graphviz\n\nThere's an open source program called *Graphviz* that generates nice images of network graphs from a fairly basic description of the nodes and edges. Thus, graphviz can take a simple text description like this:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":348,"value":"dot_source = `digraph {\n rankdir = LR\n D; A; B; C\n A -> B \n B -> C\n C -> A [label=\"Hi there!\"]\n D -> A\n}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"And turn it into an image like this:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":350,"value":"{\n let div = d3.create(\"div\");\n d3.graphviz(div.node()).renderDot(dot_source);\n return div.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"While written in C, Graphviz has been ported to Javascript so we can use here in Observable.\n\n### Automating edge generation\n\nLet's see if we can use our Big South game data to generate a list of nodes and edges for Graphviz. I guess the nodes should be just the teams and those team names appear in the the game data. Of course, each team plays in a lot of games; we want a list of the *unique* teams. I'm using library called [Lodash](https://lodash.com/) (`_`) for this:\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":382,"value":"teams = _.uniq(big_south_games.map((o) => [o.name1, o.name2]).flat())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"Well the order is apparently random. Let's sort them by number of wins:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":379,"value":"nodes = {\n let wins_by_id = d3.rollup(\n big_south_games,\n (a) => a.length,\n (o) => o.name1\n );\n return d3.sort(teams, (s) => -wins_by_id.get(s));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"Now, we'd like the edges to have the form\n\n name1 -> name2 [label = \\${n}]\n\nwhere `n` indicates the number of times that `team1` beat `team2`. Here's one way to accomplish this using `d3.rollup`:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":427,"value":"edges = Array.from(\n d3\n .rollup(\n big_south_games,\n (a) => `${a[0].name1} -> ${a[0].name2} [label = ${a.length}]`,\n (o) => o.team1,\n (o) => o.team2\n )\n .values()\n)\n .map((map) => Array.from(map.values()))\n .flat()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":457,"value":"While I like `d3.rollup`, it's probably worth mentioning that you can get exactly the same result in purely procedural style:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":447,"value":"{\n let edges = [];\n for (let i = 0; i < teams.length; i++) {\n for (let j = 0; j < teams.length; j++) {\n let i_over_j = big_south_games.filter((o) => o.idx1 == i && o.idx2 == j);\n if (i_over_j.length > 0) {\n let team1 = i_over_j[0].name1;\n let team2 = i_over_j[0].name2;\n edges.push(`${team1} -> ${team2} [label = ${i_over_j.length}]`);\n }\n }\n }\n return edges;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":"Either way you do it, you can use the the `nodes` and `edges` to generate source code for Graphviz:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":434,"value":"big_south_dot = `digraph{\n size=\"${width / 100}\"\n ${nodes};\n ${edges.join(\";\\n \")}\n }`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"And here's the visualization that Graphviz produces from that source:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":43,"value":"{\n let div = d3.create(\"div\");\n d3.graphviz(div.node()).renderDot(big_south_dot);\n div.selectAll(\"title\").remove();\n div.selectAll(\"text\").style(\"pointer-events\", \"none\");\n return div.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"### The score matrix and chord diagram\n\nAnother way to describe the relationships between the teams is with a *score matrix*. If we've got ${tex`n`} teams, then the score matrix is ${tex`n\\times n`}. The entry in row ${tex`i`} and column ${tex`j`} indicates how many points team ${tex`i`} scored against ${tex`j`}. Here's the score matrix for the Big South:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":407,"value":"M = {\n let M = [];\n for (let i = 0; i < teams.length; i++) {\n let row = [];\n for (let j = 0; j < teams.length; j++) {\n let points_i_over_j = d3.sum(\n big_south_games.filter((o) => o.idx1 == i && o.idx2 == j),\n (o) => o.score1\n );\n row.push(points_i_over_j);\n }\n M.push(row);\n }\n return tex.block`${math.parse(math.matrix(M).format()).toTex()}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"There's a great tool to visualize a score matrix called a *chord diagram*. Here's a chord diagram for the 2022/2023 Men's Big South Basketball season as of Sunday, February 19 with two games left in the season. The beginning and ending width of an arc connecting team A and team B indicate how many points the teams scored in the games the teams played. You can hover over one of those ribbons or a team logo to get a bit more information about the games played between the teams. You could find, for example, that UNC Asheville is leading the conference at 14-2. All the arcs emanating from UNC Asheville are blue, since they've scored at least as many points as all of their opponents.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":508,"value":"big_south_chord_diagram","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":536,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":518,"value":"## Data and imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"big_south_games = FileAttachment(\"big_south_games@1.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"tippy_style","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":514,"value":"import { big_south_chord_diagram, tippy_style } from \"cbbe8ab362fb60e2\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"import {\n viewof forces,\n viewof again,\n simulation\n} from \"@ddv373/d3-force-to-desired-position\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"d3 = require(\"d3@7\", \"d3-graphviz@2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"math = require(\"mathjs\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 31:"$30:body"