Skip to content

Commit

Permalink
Sports gymnastics 2024 (#204)
Browse files Browse the repository at this point in the history 
* Add url checking file for gymnastics

* Fix covid model

* Add Gymnastics Line Chart Files

* Add data 2004-2009

No data available for 2002 & 2003 so I chose not to include data from 2000 or 2001

* Add gymnastics floor request files

* Update linechart (sports edits in)

* Gymnastics request update

---------

Co-authored-by: Cassidy Sadowski <cassidysadowski@icloud.com>
  • Loading branch information
@cjunwon @cassidysadowski
cjunwon and cassidysadowski authored Apr 23, 2024
1 parent 3c802b4 commit cac1b6c
Show file tree
Hide file tree
Showing 2 changed files with 297 additions and 0 deletions.
80 changes: 80 additions & 0 deletions collaborations/sports-gymnastics-2024/gymnastics-scores.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- SET UP FOR AN HTML FILE -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UCLA Gymnastics scores</title>
<!-- chart js imports -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js" integrity="sha512-QSkVNOCYLtj73J4hbmVoOV6KVZuMluZlioC+trLpewV8qMjsWqlIQvkn1KGX2StWvPMdWGBqim1xlC8krl1EKQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src = 'gymnastics-scores.js' defer></script>
<!-- font imports -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif&display=swap" rel="stylesheet">
<style>
div{
font-family: 'PT Sans',serif; /*default font, change if requested*/
}
.header{
font-size: 20px;
text-align: center;
align-content: center;
}
.explainer{
font-size: 16px;
padding-left: 10px;
padding-right: 10px;
}
.chart{
margin: 1%;
margin-top: -1%;
}
hr{
border: white solid 1px;
}
.byLine{
font-size: 10px;
text-align: center;
}
.viz_box{
border: 2px white solid
}
@media only screen and (max-width: 800px) {
.chart{
display: 'block';
width: 98% !important;
float: left;
height: 400px;
}
}
@media only screen and (min-width: 800px) {
.chart{
display: 'block';
width: 98% !important; /*CHANGE THIS IF THERE IS MORE THAN ONE CHART */
float: left;
height: 500px;
}
.viz_box{
width: 100%;
height: 100%;
}}
</style>

</head>
<body>
<div class = 'viz_box'>
<div class='header'>UCLA gymnastics' floor performance through the years</div>
<hr>
<div class = 'explainer'>UCLA gymnastics has a history of high floor scores throughout the 21st century. Explore how the Bruins' showings on floor compared to other apparatuses in addition to their national ranking each season.</div>
<hr>
<div class = 'chartContainer'>
<div class = 'chart'><canvas id = 'gymnastics-line-chart'></canvas></div>
</div>
<div class='byLine'>
<hr>
Source: UCLA Athletics<br> Graphic reporting by Cassidy Sadowski, Data contributor, and Junwon Choi, Data editor. Interactive by Cassidy Sadowski, Data contributor.</div>
</div>
</body>
</html>
217 changes: 217 additions & 0 deletions collaborations/sports-gymnastics-2024/gymnastics-scores.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,217 @@
// Chart.defaults.font.family = 'Noto Serif, serif' //FONT FOR CHART CHANGE IF NEEDED
Chart.defaults.font.family = 'PT Sans'; //FONT FOR CHART CHANGE IF NEEDED
const labels = [
'2004',
'2005',
'2006',
'2007',
'2008',
'2009',
'2010',
'2011',
'2012',
'2013',
'2014',
'2015',
'2016',
'2017',
'2018',
'2019',
'2020',
'2021',
'2022',
'2023',
]; //THIS SHOULD BE A LIST OF WHAT YOU WANT ON THE X-AXIS
const colors = ['#FF9442', '#BCEBF5', '#BF79F5', '#68BCFF']; //CHANGE THESE TO WHAT MATCHES THE SUBJECT
const rankarray = [
1,
4,
17,
4,
7,
7,
1,
2,
3,
4,
8,
11,
5,
4,
1,
3,
3,
12,
12,
5,
];
const data = {
labels: labels,
//DATA SETS IN A LIST. EACH OBJECT IN LIST IS A CATEGORY OF DATA CHANGE THESE OUT WITH YOUR DATA
//IF YOU HAVE MORE DATA TO DISPLAY ADD ADDITIONAL {...}
datasets: [
{
label: 'Floor',
data: [
49.354,
48.968,
48.82,
48.944,
48.823,
49.119,
49.158,
49.118,
49.254,
49.296,
49.304,
49.188,
49.372,
49.209,
49.463,
49.585,
49.54,
49.302,
49.354,
49.579,
], //DATA HERE
backgroundColor: colors[0],
borderColor: colors[0],
borderWidth: 5,
},
{
label: 'Vault',
data: [
49.23,
49.173,
49.114,
49.234,
49.223,
49.35,
49.313,
49.238,
49.439,
49.284,
49.24,
49.298,
49.08,
49.197,
49.283,
49.293,
49.28,
49.25,
49.188,
49.313,
], //VALUE FOR EACH POINT
backgroundColor: colors[1],
borderColor: colors[1],
borderWidth: 1,
},
{
label: 'Bars',
data: [
49.22,
48.959,
48.859,
49.172,
49.138,
49.112,
49.277,
49.143,
49.191,
49.204,
49.188,
49.096,
49.092,
49.398,
49.378,
49.457,
49.398,
49.223,
49.081,
49.487,
], //DATA HERE
backgroundColor: colors[2],
borderColor: colors[2],
borderWidth: 1,
},
{
label: 'Beam',
data: [
49.416,
48.948,
48.632,
48.769,
48.936,
48.896,
48.963,
48.818,
49.127,
49.116,
49.048,
49.213,
49.205,
49.354,
49.479,
49.436,
49.05,
48.982,
49.256,
49.396,
], //DATA HERE
backgroundColor: colors[3],
borderColor: colors[3],
borderWidth: 1,
},
],
};

//OPTIONS FOR THE DISPLAY OF THE CHART, FOR MORE OPTIONS GO TO CHART.JS
const options = {
scales: {
y: {
beginAtZero: false,
title: {
display: true,
text: 'Average event score',
},
},
x: {
beginAtZero: false,
title: {
display: true,
text: 'Season',
},
},
},
hover: {
mode: 'index',
intersect: false,
},
plugins: {
title: {
display: true,
text: 'Average Score per Event per Year',
},
},
plugins: {
tooltip: {
callbacks: {
afterTitle: function(context) {
console.log(context[0].label);
return `National Rank: ${rankarray[context[0].dataIndex]}`;
},
},
},
},
maintainAspectRatio: false,
};
//THIS CODE MAKES THE CHART, MAKE SURE THE CTX VARIABLE DOES NOT MATCH ANY OTHER CTX VARIABLE
//CHANGE ID-HERE TO WHATEVER YOU MADE YOUR ID IN THE HTML FILE, CHOOSE SOMETHING DESCRIPTIVE
const ctxLINE = document.getElementById('gymnastics-line-chart');
//THE CHART VARIABLE NEEDS TO HAVE A UNIQUE NAME RENAME IT SOMETHING DESCRIPTIVE
//MAKE SURE ctxBAR MATCHES THE CONST VARIABLE YOU JUST SET
const chart = new Chart(ctxLINE, {
type: 'line',
data: data,
options: options,
});

0 comments on commit cac1b6c

Please sign in to comment.