Blog

For this final project, I eventually settled on visualizing the relationships between NBA teams, as expressed by the number of trades between team pairs. I chose a network graph for this visualization as it provided clear insight into particular links or lack thereof, as well as the magnitude of the connection. Originally, I wanted to capture each individual trade as part of my dataset, and I went as far as writing a Python script to scrape that data from Basketball Reference. However, while I was able to pull data from one page using this methodology, when I attempted to automate the process my access was denied by Cloudfare.

Because I was unable to access detailed trade data, I ended up adapting this matrix into the dataset used for my visualization. This matrix summarized all trades in the league's history for current teams, although it did not include which specific season they occurred in. To create node locations, I used this website to create a key for each team containing the latitude and longitude of the team’s home stadium. I also adapted fill and border colors for each team based on this website. The trade pairing data, team locations, and team colors were then combined in this Python script , with some manual adjustments made for clarity. This script also created a dataset summarizing the total trades to which each team was a party, which will be used to create and scale the team nodes.

After I created these datasets, I uploaded the results as json files to GitHub, where I could query them from Glitch without worrying about the recently observed upload errors. I then adapted some of the functions I wrote in Project 2 to the variables of the NBA trades dataset, rather than BLUEBike stations and rides. In order to pull the query from GitHub, I created the getTransactions and getTeams functions, which queried the linking transactions and the aggregate totals by team respectively.

Next, I created the Plot_Trades function, which accepted the transactions dataset and a Chosen_Team as its inputs. Unlike the Project 2 function this was adapted from, this funciton uses lines, rather than arcs, as the order of the pairing of the teams doesn't matter for this visualization. This function first plotted to the #transaction_layer g all transactions between all NBA teams. At this stage, all transactions are plotted in gray so as not to distract from the transactions of the selected team. The function then re-plotted all transactions for the selected team in that team's fill color over the other transactions to highlight their importance. A hover functionality was also added which both highlights that particular line in the chosen team's secondary color and displays a tooltip showing the total number of trades made by that team pairing. Finally, if you double click on that connecting line, a function was added which takes you to the Basketball Reference page detailing all of the trades between those two teams.

One challenge I faced at this stage was deciding whether to add the hover functionality to the trades of the non-chosen team. While I initially included this feature, I found it distracting when using the visualization, and found that it made it harder to view the trades of the chosen team. For that reason, I ended up eliminating this feature, meaning the background transaction plots have less utility other than appearance.

I next created the Plot_Teams function, which took the overall team summary data as its input to plot the team nodes. Node size in this case was scaled by the total number of trades that team had ever made. This function plotted the nodes to a separate g layer, so that when the transaction lines are raised they do not appear over the team nodes. This function includes a tooltip for each node on hover that indicates the total number of trades made throughout the league's existence by that team. If you click on a team node, the chosen team changes, and all transactions made by that team become highlighted instead of the previous chosen team. Finally, the team name is also added below each team node.

Visually, I tried to create a more minimal and simpler webpage than I had for previous projects this time around. This meant less HTML was required generally than in Project 2. Some of this change was because more of the interactivity was encoded in d3, and less in the webpage itself. For example, node selection occurrs in this project on click, rather than through a drop-down. However, another, more frustrating reason is that I was unable to include temporal data due to the limitations on obtaining data from Basketball Reference, meaning I was unable to include some features and ranges I otherwise would have liked to.

Another challenge I faced was figuring out what color to make the team name text. While I opted for a lighter theme visually this time around, black text alone was sometimes hard to read against transactions from teams with darker colors. The solution I chose was to add a white border to the text, which improved readability generally but was not a perfect solution to the problem.

Moving forward, there are a few features I would like to add. First, as discussed previously, I would like to add transaction by transaction level detail, in order for the visualization to be filtered to the season or range of season level. I would also like to add zoom functionality soon. I was unable to make this work on time with both levels of the visualization, but I do think that it would make using this chart more user friendly.