-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
162 lines (158 loc) · 10.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>FRC Data Visualization</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
<section>
<h1 class="hero-title">The <a class = 'highlight'>Geography</a> of <a class = 'highlight'>FRC</a> Teams</h1>
<h2 class="hero-author">By So Hirota</h2>
<p class="intro-text">
FRC (FIRST Robotics Competition) is an annual high school robotics competition that thousands of teams
across the globe participate in. As an FRC participant and alum, I was always curious what determined if a team was "strong". In this data visualization,
we'll explore this question from the 🔎 lens of geography 🕵️.
</p>
</section>
<!-- chart 1 -->
<section>
<h1 class="section-title">"Strong Teams" By US Region: Midwest Dominance❓</h1>
<p class="section-text">
Let's start with a simple bar chart. I'll define
a "strong team" as a <a class = 'highlight'>US based team that has won at least one regional,
district, championship division, or championship event between 1998 to 2023</a>.
I'm using <a href = 'https://www.tampaairport.com/sites/default/master/files/landing-pages/images/census-regions-graphic.png'>this</a> as a reference for US regional boundaries.
</p>
</section>
<div class="chart-holder">
<div id="barchart-container"></div>
</div>
<p class="section-text">
Okay, that's a bar graph. But let's sort it to make it easier to interpret!
</p>
<section>
<div class = 'button-container'>
<button id = 'sort-q1' class = 'next_to_each_other'>Sort!</button>
</div>
</section>
<p class = 'section-text'>
That's better! We can see that the <a class = 'highlight'>Midwest has the most "strong teams"</a>, followed
by Northeast, South, then West (California noo 😐). But could this be because the
Midwest simply has more teams? Click "Normalize!" to <a class = 'highlight'>normalize by the number of teams in each region</a> that have competed at least once.
</p>
<section>
<div class = 'button-container'>
<button id = 'normalize-q1' class = 'next_to_each_other'>Normalize!</button>
</div>
</section>
<p class = 'section-text'>
After normalization, this <a class = 'highlight'>bar chart represents the proportion of strong teams in that region.</a>
Now we see that the <a class = 'highlight'>Northeast region is stronger than the Midwest</a>. The South and the West
also switched places (go Californiaaa 🫡)! It is interesting to observe that between the Northeast
and the South, there is a <a class = 'highlight'>10% difference in proportion</a> of "strong teams".
</p>
<!-- chart 2 -->
<section>
<h1 class="section-title">"Strong Teams" by State: Michigan For the Win🫅</h1>
<p class="section-text">
So we got an interesting result that the Midwest and the Northeast are generally
the "strongest" when it comes to FRC. Regions are pretty broad though, so let's examine <a class = 'highlight'>the number of strong teams
by each state</a> to get more granularity. For this, I'll use a "choropleth" visualization. 🗺️
</p>
<p class = 'section-text'>
<br>
Try hovering over a state you're interested in. It'll show you the number of strong teams
in that state and in that region. The <a class = 'blue1'>bluer</a> <a class = 'blue2'>the</a> <a class = 'blue3'>state</a>
<a class = 'blue4'>is</a>, the higher the number of "strong teams".
</p>
</section>
<div class="chart-holder">
<div id="choropleth-container"></div>
</div>
<p class="section-text">
Looking at this map, one thing strikes me; <a class = 'highlight'>Michigan is really strong, with 310 teams!</a>
This is more than double as many of California, which is in second place.
<a class = 'highlight'>Major population centers (ie California, New York, Texas) seem to have lots of strong teams</a>
as well, so Michigan is a very obvious outlier here. I recently learned that <a class = 'highlight'>Michigan is where FRC started</a>, so this makes sense!💡
</p>
<!-- chart 3 -->
<section>
<h1 class="section-title">Alliances and Geography: A Tale of Southern Betrayal 🥷</h1>
<p class="section-text">
Let's now shift our focus to alliances. Specifically, let's explore if <a class = 'highlight'>teams have a preference for teams
from the same region when selecting alliances</a> in championship divisions (Newton, Curie, etc).<br>
This is a <a class = 'highlight'>force-directed network graph</a>. It's "force-directed" because each link (alliance relationship) acts like a spring,
forcing the nodes (teams) to spread out organically.
</p>
</section>
<div class="chart-holder">
<div id="nodelink-container"></div>
</div>
<p class="section-text">
This looks cool, but there's too much going on (and laggy, I know)! <a class = 'highlight'>Click the buttons
below to isolate the regions.</a> <a class = 'red'>Intra-regional alliances</a> will be <a class = 'red'>highlighted red</a>,
while <a class = 'blue'>inter-regional alliances</a> will be <a class = 'blue'>highlighted blue</a>.<br>
<a class = 'note'>Note: Intra-regional = within the same region</a>
</p>
<section>
<div class = 'button-container'>
<button id = 'west-q3' class = 'next_to_each_other'>West</button>
<button id = 'northeast-q3' class = 'next_to_each_other'>Northeast</button>
<button id = 'south-q3' class = 'next_to_each_other'>South</button>
<button id = 'midwest-q3' class = 'next_to_each_other'>Midwest</button>
<button id = 'reset-q3' class = 'next_to_each_other'>Reset</button>
</div>
</section>
<p class = 'section-text'>
If you're interested in searching for a specific team, check out the search box below too!
</p>
<section>
<div>
<input type="text" class="text-input" placeholder="FRC Team #">
<button id = 'search_q3' class = 'next_to_each_other'>Search!</button>
</div>
</section>
<p class = "section-text">
We can now see the association within Southern teams are weak; that is, <a class = 'highlight'>not many southern teams have chose to
be on the same alliance as other southern teams</a>. We can see this because southern teams do not have many red connections, but do have many blue ones.
Conversely, <a class = 'highlight'>Midwest has a lot of intra-regional alliances</a>, as seen by the large number of red connections. This might
be due to the fact there are more Midwest teams, but it could also mean that Midwest teams usually prefer to team
up with Midwest teams. Perhaps, <a class = 'highlight'>if given an option to team up with a team from the same region, teams will prefer to do so?</a>
</p>
<section>
<h1 class = 'section-title'>Sidenote: How does this all work? 🧙♀️ (It's not magic)</h1>
<h2 class = 'section-subtitle'>The Code 💻</h2>
<p class = 'section-text'>
I used <a class = 'highlight'>pure javascript</a> (no frameworks) alongside <a class = 'highlight'>a powerful library called <a href = 'https://d3js.org/'>d3.js</a></a>. D3
(Data Driven Documents) is what allows the <a class = 'highlight'>smooth transition with beautiful animations</a>. It also <a class = 'highlight'>handles dynamic scaling</a>, like
when you clicked "Normalize" in the first viz. All the <a class = 'highlight'>nitty gritty simulation stuff for the node-link
diagram</a> is handsomely handled by D3 as well.
</p>
<h2 class = 'section-subtitle'>The Data 📊</h2>
<p class = 'section-text'>
I used the <a href = 'https://frc-api-docs.firstinspires.org/?version=216cd832-1976-40b0-855b-3a4d92166c08'>FRC API</a>
as well as <a href = 'https://www.thebluealliance.com/apidocs'>The Blue Alliance API</a> to pull pertinent FRC data. Both are free to access
with no rate limits. I <a class = 'highlight'>interfaced with the API using Python in a Jupyter notebook</a>. I used Python for cleaning and formatting
the data as well. After that, I used <a class = 'highlight'>D3's built in rollup (group by operation) and filter function</a> to perform various aggregations
from within the JS scripts.<br><br>
</p>
<p class= 'section-text'>
All of my javascript code is hosted <a href = 'https://github.com/soh09/frc-dataviz'>here on Github</a>.
</p>
</section>
<section >
<h1 class="section-title">Lastly...🔭</h1>
<p class = 'section-text'>
I hope you enjoyed these visualizations! If you discover any bugs, want to provide suggestions, or just want to get in touch, my email
is hirotaso92602 at gmail dot com. Thanks!<br>読んでくれてありがとう！😇<br><br>
</p>
</section>
<script src="scripts/barchart.js"></script>
<script src="scripts/choropleth.js"></script>
<script src="scripts/nodelink.js"></script>
</body>
</html>