Skip to content

Milestone 3 #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
gruvw wants to merge 7 commits into
base: main
Choose a base branch
from
Draft

Milestone 3 #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
fde6e4b
feat(web): nav bar with screens selector pills
gruvw Apr 18, 2026
bd51848
feat(web): dual screens
gruvw Apr 19, 2026
f5487ef
feat(web): use new data CSVs
gruvw Apr 20, 2026
f51c15d
feat(web): get info from metada file in bubble map
gruvw Apr 20, 2026
3fa0462
feat(web): team and player stats update set up
gruvw Apr 21, 2026
a333b53
feat(web): bubble transition performance improve
gruvw Apr 21, 2026
f61c684
feat(web): team backgrounds url
gruvw Apr 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24,765 changes: 24,765 additions & 0 deletions src/data/player_seasons.csv
View file
Open in desktop

Large diffs are not rendered by default.

3,056 changes: 3,056 additions & 0 deletions src/data/players_metadata.csv
View file
Open in desktop

Large diffs are not rendered by default.

42 changes: 42 additions & 0 deletions src/data/team_metadata.csv
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
teamId,teamAbbrev,teamSlug,Color1,Color2,Color3,Color4,Color5,seasonFounded,seasonActiveTill
1610612737,ATL,atlanta-hawks,#C8102E,#FFC72C,#FFFFFF,#010101,#DBE2E9,1968,2100
1610612739,CLE,cleveland-cavaliers,#6F263D,#FFFFFF,#010101,#373A36,,1970,2100
1610612740,NOH,new-orleans-hornets,#00778B,#280071,#FFC72C,#FFFFFF,#010101,2002,2004
1610612740,NOK,oklahoma-city-hornets,#00778B,#280071,#FFC72C,#FFFFFF,,2005,2006
1610612740,NOH,new-orleans-hornets,#00778B,#280071,#FFC72C,#FFFFFF,#010101,2007,2012
1610612740,NOP,new-orleans-pelicans,#0C2340,#B9975B,#C8102E,#FFFFFF,,2013,2100
1610612741,CHI,chicago-bulls,#BA0C2F,#010101,#FFFFFF,,,1966,2100
1610612742,DAL,dallas-mavericks,#0050B5,#0C2340,#9EA2A2,#FFFFFF,,1980,2100
1610612743,DEN,denver-nuggets,#0C2340,#862633,#FFC72C,#FFFFFF,,1976,2100
1610612744,GSW,golden-state-warriors,#1D4289,#FFC72C,#FFFFFF,#010101,,1971,2100
1610612745,HOU,houston-rockets,#BA0C2F,#010101,#9EA2A2,#FFFFFF,,1971,2100
1610612746,SDC,san-diego-clippers,#002F6C,#D50032,#FFFFFF,,#010101,1978,1983
1610612746,LAC,los-angeles-clippers,#0C2340,#C8102E,#418FDE,#FFFFFF,,1984,2100
1610612747,LAL,los-angeles-lakers,#330072,#FFC72C,#FFFFFF,#010101,,1960,2100
1610612748,MIA,miami-heat,#010101,#862633,#FFA400,#FFFFFF,,1988,2100
1610612749,MIL,milwaukee-bucks,#2C5234,#DDCBA4,#FFFFFF,#010101,,1968,2100
1610612750,MIN,minnesota-timberwolves,#0C2340,#236192,#78BE21,#9EA2A2,#FFFFFF,1989,2100
1610612751,NJ,new-jersey-nets,#041E42,#BA0C2F,#605E5C,#8D9093,#FFFFFF,1977,2011
1610612751,BKN,brooklyn-nets,#000000,#FFFFFF,#707372,#DBE2E9,,2012,2100
1610612753,ORL,orlando-magic,#0050B5,#010101,#9EA2A2,#FFFFFF,,1989,2100
1610612754,IND,indiana-pacers,#0C2340,#FFCD00,#FFFFFF,#9EA2A2,,1976,2100
1610612755,PHI,philadelphia-76ers,#1D4289,#C8102E,#FFFFFF,#9EA2A2,,1963,2100
1610612756,PHX,phoenix-suns,#211747,#CB6015,#FFA400,#C7C9C7,,1968,2100
1610612757,POR,portland-trail-blazers,#010101,#C8102E,FFFFFF,,,1970,2100
1610612758,KC,kansas-city-kings,#002F6C,#BA0C2F,#FFFFFF,,,1975,1984
1610612758,SAC,sacramento-kings,#010101,#582C83,#707372,#FFFFFF,,1985,2100
1610612759,SAN,san-antonio-spurs,#010101,#9EA2A2,#FFFFFF,#272727,,1976,2100
1610612760,SEA,seattle-supersonics,#00573F,#F6BE00,#FFFFFF,#010101,,1967,2007
1610612760,OKC,oklahoma-city-thunder,#0072CE,#041E42,#F9423A,#FFB81C,,2008,2100
1610612761,TOR,toronto-raptors,#BA0C2F,#010101,#FFFFFF,#753BBD,,1995,2100
1610612762,UTA,utah-jazz,#0C2340,#2C5234,#FFA400,#330072,,1979,2100
1610612763,VAN,vancouver-grizzlies,#00B2A9,#010101,#C8102E,#8F654D,#FFFFFF,1995,2000
1610612763,MEM,memphis-grizzlies,#0C2340,#7D9CC0,#FFC72C,#FFFFFF,,2001,2100
1610612764,WAS,washington-bullets,#D50032,#003DA5,#FFFFFF,,,1974,1996
1610612764,WAS,washington-wizards,#C8102E,#0C2340,#9EA2A2,,,1997,2100
1610612765,DET,detroit-pistons,#1D4289,#C8102E,#FFFFFF,#B1B3B3,,1957,2100
1610612766,CHA,charlotte-hornets,#00778B,#211747,#FFFFFF,#888B8D,#2E1A47,1988,2001
1610612766,CHA,charlotte-bobcats,#0C2340,#418FDE,#E35205,#888B8D,#FFFFFF,2004,2013
1610612766,CHA,charlotte-hornets,#00778B,#211747,#FFFFFF,#888B8D,#2E1A47,2014,2100
1610612738,BOS,boston-celtics,#007A33,#FFFFFF,#010101,#896C4C,,1949,2100
1610612752,NYK,new-york-knicks,#1D4289,#FF8200,#9EA2A2,#FFFFFF,,1949,2100
3,947 changes: 1,943 additions & 2,004 deletions src/data/team_seasons.csv
View file
Open in desktop

Large diffs are not rendered by default.

128 changes: 91 additions & 37 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>HoopViz</title>
<meta name="description" content="Explore and compare NBA teams and players performance through interactive data visualizations. HoopViz displays basketball statistics using dynamic bubble charts and emphasises historical trends.">

<link rel="icon" href="https://cdn-icons-png.flaticon.com/512/889/889455.png">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0">
Expand All @@ -15,7 +16,93 @@
</head>

<body>
<section id="teams">
<nav>
<h1>HoopViz 🏀</h1>
<div class="screen-selector" id="screen-select">
<span class="selected" data-target-id="teams">Teams</span>
<span data-target-id="players">Players</span>
</div>
<a class="github" href="https://github.com/com-480-data-visualization/HoopViz" target="_blank" rel="noopener noreferrer">
<img src="https://cdn.simpleicons.org/github/white" alt="GitHub Repository" width="32" height="32">
</a>
</nav>
<main id="screens">
<section id="teams" class="selected">
<div class="stacked overlay">
<div class="axis y">
<span>Loading...</span>
<span class="arrow-head"></span>
</div>
<div class="selector y">
</div>
<div class="axis x">
<span>Loading...</span>
<span class="arrow-head"></span>
</div>
<div class="selector x">
</div>
<div class="axis size">
<span>Loading...</span>
</div>
<div class="selector size">
</div>
</div>

<div class="stacked viewport">
<div class="bubbles-container">
<a class="bubble measure-bubble"></a>
</div>
</div>

<div class="stacked stats">
<div class="stats-area">
<span class="stats-close material-symbols-outlined">close</span>
<h1 class="name"></h1>
<h2 class="year"></h2>
<p class="content"></p>
<svg id="team-chart" width="500" height="150" style="border: 1px solid #ccc"></svg>
</div>
</div>
</section>

<section id="players">
<div class="stacked overlay">
<div class="axis y">
<span>Loading...</span>
<span class="arrow-head"></span>
</div>
<div class="selector y">
</div>
<div class="axis x">
<span>Loading...</span>
<span class="arrow-head"></span>
</div>
<div class="selector x">
</div>
<div class="axis size">
<span>Loading...</span>
</div>
<div class="selector size">
</div>
</div>

<div class="stacked viewport">
<div class="bubbles-container">
<a class="bubble measure-bubble"></a>
</div>
</div>

<div class="stacked stats">
<div class="stats-area">
<span class="stats-close material-symbols-outlined">close</span>
<h1 class="name"></h1>
<h2 class="year"></h2>
<p class="content"></p>
<svg id="player-chart" width="500" height="150" style="border: 1px solid #ccc"></svg>
</div>
</div>
</section>

<div class="stacked overlay">
<div class="slider-area">
<span class="material-symbols-outlined slider-controller">keyboard_arrow_left</span>
Expand All @@ -26,45 +113,12 @@
</div>
<span class="slider-controller material-symbols-outlined">keyboard_arrow_right</span>
</div>
<div class="axis y">
<span>Loading...</span>
<span class="arrow-head"></span>
</div>
<div class="selector y">
</div>
<div class="axis x">
<span>Loading...</span>
<span class="arrow-head"></span>
</div>
<div class="selector x">
</div>
<div class="axis size">
<span>Loading...</span>
</div>
<div class="selector size">
</div>
</div>

<div class="stacked viewport">
<div class="bubbles-container">
<a class="bubble measure-bubble"></a>
</div>
</div>

<div class="stacked stats">
<div class="stats-area">
<span class="stats-close material-symbols-outlined">close</span>
<h1 class="name"></h1>
<h2 class="year"></h2>
</div>
<div id="disclaimer">
This project is not affiliated with, maintained by, or endorsed by the National Basketball Association (NBA).
</div>
</section>

<div id="disclaimer">
This project is not affiliated with, maintained by, or endorsed by the National Basketball Association (NBA).
</div>
</main>
</body>

<!-- TODO top bar with hoopviz name and link to github -->

</html>
Loading