Public
Edited
Sep 12, 2023
_data = [
{
year: new Date('2023'),
top10Count: 5,
teams: ['CDM', 'HB', 'OLu', 'Laguna', 'MD']
},
{
year: new Date('2022'),
top10Count: 6,
teams: ['CDM', 'HB', 'Laguna', 'MD', 'JSerra', 'Loyola']
},
{
year: new Date('2021'),
top10Count: 5,
teams: ['HB', 'MD', 'Laguna', 'JSerra', 'Loyola']
},
{
year: new Date('2020'),
teams: []
},
{
year: new Date('2019'),
top10Count: 7,
teams: ['HB', 'MD', 'Loyola', 'SMCHS', 'PV', 'SC', 'Laguna', 'OLu']
},
{
year: new Date('2018'),
top10Count: 8,
teams: ['Loyola', 'MD', 'SC', 'DH', 'Woodbridge', 'SMCHS', 'Laguna']
},
{
year: new Date('2017'),
top10Count: 8,
teams: ['Loyola', 'Laguna', 'OLu', 'Agoura', 'OC', 'SMCHS', 'MD']
}
]
colors = function () {
return {
hb: 'https://www.totalwaterpolo.com/wp-content/uploads/2014/10/HBOilersLogo.png',
loyola: 'https://static.hudl.com/users/prod/3046815_a73bd2b215884b87b022e256bd999187.jpg',
olu: 'https://image.maxpreps.io/school-mascot/0/9/8/098e1491-1717-4088-b7a0-55e47c8e1d17.gif?version=637969279200000000&width=1024&height=1024',
md: 'https://static.hudl.com/users/prod/13169961_1a6483c7f87f4752888342466135e0cd.jpg',
agoura: 'https://static.wixstatic.com/media/9af4c0_0b59382dff664f3b895797db63e41874~mv2.png/v1/fill/w_420,h_436,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/9af4c0_0b59382dff664f3b895797db63e41874~mv2.png',
oc: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS4aBKHa07ADJpetDl0YZq6MRufqZZSBk3s-ws7seSfMNJhWavBtovtYJRgJm3QFaKG9KY&usqp=CAU',
smchs: 'https://upload.wikimedia.org/wikipedia/en/7/77/SM_20_years_logo.jpg',
sc: 'https://image.maxpreps.io/school-mascot/e/9/2/e920cde1-f829-4482-87c4-916697aa30a1.gif?version=637799209200000000&width=1024&height=1024',
woodbridge: 'https://i0.wp.com/www.woodbridgewarriors.org/wp-content/uploads/2018/05/standard-w.jpg?fit=300%2C300&ssl=1&resize=300%2C300',
laguna: 'https://cdn1.sportngin.com/attachments/photo/d9b2-165868014/Circle-Wave-Fill-72DPI-240x240_large.png',
pv: 'https://static.hudl.com/users/prod/16979467_ee1bfde4f4a84f8e8519998e961a61a4.jpg',
jserra: 'https://image.maxpreps.io/school-mascot/a/3/a/a3a4b4d3-bce3-47b1-a57b-30226feba5e1.gif?version=636093614400000000&width=1024&height=1024',
cdm: 'https://rytesport.com/cdn/shop/products/CDMTowel_2048x.PNG?v=1568934407',
dh: 'https://image.maxpreps.io/school-mascot/4/f/9/4f923cde-a88e-4070-9c01-692ecc35d3dd.gif?version=635675433000000000&width=1024&height=1024'
}
}
data = function () {
const d = _data.map(datum => ({
...datum,
teams: datum.teams.sort()
}))
const ret = [];
for (let i = 0; i < d.length; i++) {
const year = d[i]
if (year.year === '2020') ret.push({
year: year.year,
team: '',
color: 'black'
})
else {
for (let j = 0; j < year.teams.length; j++) {
ret.push({
year: year.year,
team: year.teams[j].toLowerCase(),
color: colors()[year.teams[j].toLowerCase()]
})
}
}
}
return ret
}
Plot.plot({
marginLeft: 60,
marginRight: 60,
label: null,
inset: 20,
height: 380,
width: 350,
x: {label: "Top 10 Teams Entered"},
y: {padding: 0},
marks: [
Plot.image(
data(),
Plot.dodgeY({
x: "year",
r: 20, // clip to a circle
preserveAspectRatio: "xMidYMin slice", // try not to clip heads
src: "color",
title: "Name"
})
)
]
})
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
