Skip to content
Snippets Groups Projects
Commit 46aa762b authored by Leander's avatar Leander
Browse files

feat: use updated data, better color selection, style improvements

parent d713242d
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
index.html
+ 0
− 4
View file @ 46aa762b
......@@ -33,10 +33,6 @@
<select id="color-by-setting" name="color-by-setting">
<option value="default" selected>---</option>
<option value="team">Team</option>
<option value="nation">Nation</option>
<option value="pos">Position</option>
<option value="league">Liga</option>
</select>
</div>
<div class="group-by">
......
src/countries.ts
+ 4
− 0
View file @ 46aa762b
......@@ -592,5 +592,9 @@ export const countries = [
{
"code": "BFA",
"name": "Burkina Faso",
},
{
"code": "GAM",
"name": "Gambia",
}
]
\ No newline at end of file
src/main.ts
+ 9
− 2
View file @ 46aa762b
......@@ -4,7 +4,7 @@ import BubbleChart, {BubbleChartConfigParam} from "@/charts/bubbleChart.ts";
import Search from "@/search.ts";
import {countries} from "@/countries.ts";
import {numericColumns, Player} from "@/player.ts";
import {getPositionName, positions} from "@/positions.ts";
import {getPositionName} from "@/positions.ts";
// const radarChartWrapper = document.querySelector('#radar-chart-wrapper') as HTMLDivElement;
const bubbleChartWrapper = document.querySelector('#bubble-chart-wrapper') as HTMLDivElement;
......@@ -31,7 +31,12 @@ groupBySetting.oninput = (event) => {
}
const colorBySetting = document.querySelector('#color-by-setting') as HTMLInputElement
for (const column of Object.keys(numericColumns)) {
const option = document.createElement('option')
option.value = column
option.text = numericColumns[column as keyof typeof numericColumns]
colorBySetting.appendChild(option)
}
colorBySetting.oninput = (event) => {
if (bubbleChart) {
bubbleChart.updateVisConfig({colorAccessor: (d: any) => d[event.target?.value]} as BubbleChartConfigParam)
......@@ -78,6 +83,7 @@ dsv(';', 'data/output.csv').then(data => {
zoomSlider.value = event.transform.k.toString()
},
renderTooltip: (dataPoint: any, tooltip: d3.Selection<d3.BaseType, unknown, HTMLElement, any>) => {
const age = dataPoint['age'].split('-')
tooltip.html(`
<table>
<tr><th>Name</th><td>${dataPoint['player']}</td></tr>
......@@ -85,6 +91,7 @@ dsv(';', 'data/output.csv').then(data => {
<tr><th>Position</th><td>${dataPoint['pos']}</td></tr>
<tr><th>Nationalität</th><td>${dataPoint['nation']}</td></tr>
<tr><th>Team</th><td>${dataPoint['team']}</td></tr>
<tr><th>Alter</th><td>${age[0]}${age[1] ? ' - ' + age[1] + ' Tage' : ''}</td></tr>
</table>
`)
}
......
src/player.ts
+ 203
− 103
View file @ 46aa762b
/*
"league": "ARG-Primera-Division",
"season": "2324",
"team": "Arg Juniors",
"player": "Alan Rodríguez",
"nation": "",
"pos": "",
"age": "",
"born": "",
"Playing Time": "",
"Performance": "",
"Expected_0": "",
"Progression": "",
"Per 90 Minutes": "",
"Standard": "0",
"Expected_1": "-1.7",
"Total": "1355",
"Short": "84.1",
"Medium": "77.6",
"Long": "43.3",
"Ast": "0",
"xAG": "0.8",
"Expected": "",
"KP": "11",
"1/3": "27",
"PPA": "8",
"CrsPA": "2",
"PrgP": "44",
"SCA": "2.16",
"GCA": "0.23",
"Tackles": "25",
"Blocks": "7",
"Int": "11",
"Tkl+Int": "47",
"Clr": "7",
"Err": "0",
"Touches": "677",
"Penalty Kicks":
*/
export type Player = { //create type based on comment above
"league": string,
"season": string,
"team": string,
"player": string,
"nation": string,
"pos": string,
"age": string,
"born": string,
"Playing Time": number,
"Performance": number,
"Expected_0": number,
"Progression": number,
"Per 90 Minutes": number,
"Standard": number,
"Expected_1": number,
"Total": number,
"Short": number,
"Medium": number,
"Long": number,
"Ast": number,
"xAG": number,
"Expected": number,
"KP": number,
"1/3": number,
"PPA": number,
"CrsPA": number,
"PrgP": number,
"SCA": number,
"GCA": number,
"Tackles": number,
"Blocks": number,
"Int": number,
"Tkl+Int": number,
"Clr": number,
"Err": number,
"Touches": number,
"Penalty Kicks": number,
export type Player = {
league: string,
season: string,
team: string,
player: string,
nation: string,
pos: string,
age: string,
born: string,
'Playing Time _ MP': number,
'Playing Time _ Starts': number,
'Playing Time _ Min': number,
'Playing Time _ 90s': number,
'Performance _ Gls': number,
'Performance _ Ast': number,
'Performance _ G+A': number,
'Performance _ G-PK': number,
'Performance _ PK': number,
'Performance _ PKatt': number,
'Performance _ CrdY': number,
'Performance _ CrdR': number,
'Expected_0 _ xG': number,
'Expected_0 _ npxG': number,
'Expected_0 _ xAG': number,
'Expected_0 _ npxG+xAG': number,
'Progression _ PrgC': number,
'Progression _ PrgP': number,
'Progression _ PrgR': number,
'Per 90 Minutes _ Gls': number,
'Per 90 Minutes _ Ast': number,
'Per 90 Minutes _ G+A': number,
'Per 90 Minutes _ G-PK': number,
'Per 90 Minutes _ G+A-PK': number,
'Per 90 Minutes _ xG': number,
'Per 90 Minutes _ xAG': number,
'Per 90 Minutes _ xG+xAG': number,
'Per 90 Minutes _ npxG': number,
'Per 90 Minutes _ npxG+xAG': number,
'Standard _ Gls': number,
'Standard _ Sh': number,
'Standard _ SoT': number,
'Standard _ SoT%': number,
'Standard _ Sh/90': number,
'Standard _ SoT/90': number,
'Standard _ G/Sh': number,
'Standard _ G/SoT': number,
'Standard _ Dist': number,
'Standard _ FK': number,
'Standard _ PK': number,
'Standard _ PKatt': number,
'Expected_1 _ xG': number,
'Expected_1 _ npxG': number,
'Expected_1 _ npxG/Sh': number,
'Expected_1 _ G-xG': number,
'Expected_1 _ np:G-xG': number,
'Total _ Cmp': number,
'Total _ Att': number,
'Total _ Cmp%': number,
'Total _ TotDist': number,
'Total _ PrgDist': number,
'Short _ Cmp': number,
'Short _ Att': number,
'Short _ Cmp%': number,
'Medium _ Cmp': number,
'Medium _ Att': number,
'Medium _ Cmp%': number,
'Long _ Cmp': number,
'Long _ Att': number,
'Long _ Cmp%': number,
'Ast': number,
'xAG': number,
'Expected _ xA': number,
'Expected _ A-xAG': number,
'KP': number,
'1/3': number,
'PPA': number,
'CrsPA': number,
'PrgP': number,
'SCA _ SCA': number,
'SCA _ SCA90': number,
'GCA _ GCA': number,
'GCA _ GCA90': number,
'Tackles _ Tkl': number,
'Tackles _ TklW': number,
'Blocks _ Blocks': number,
'Blocks _ Sh': number,
'Blocks _ Pass': number,
'Int': number,
'Tkl+Int': number,
'Clr': number,
'Err': number,
'Touches _ Touches': number,
'Performance _ GA': number,
'Performance _ GA90': number,
'Performance _ SoTA': number,
'Performance _ Saves': number,
'Performance _ Save%': number,
'Performance _ CS': number,
'Performance _ CS%': number,
'Penalty Kicks _ PKA': number,
'Penalty Kicks _ PKsv': number,
'Penalty Kicks _ PKm': number,
'Penalty Kicks _ Save%': number,
'Expected _ PSxG': number,
'Expected _ PSxG/SoT': number,
'Expected _ PSxG+/-': number,
'Expected _ /90': number,
}
export const numericColumns = {
"Playing Time": "Spielzeit",
'Progression': 'Progression',
'Per 90 Minutes': 'Pro 90 Minuten',
'Standard': 'Standard',
'Expected_1': 'Erwartet',
'Total': 'Gesamt',
'Short': 'Kurze Pässe',
'Medium': 'Mittellange Pässe',
'Long': 'Lange Pässe',
'Ast': 'Vorlagen',
'xAG': 'erwartete Assists',
'KP': 'KP',
'1/3': 'Pässe ins letzte Drittel',
'PPA': 'PPA',
'CrsPA': 'CrsPA',
'PrgP': 'PrgP',
'SCA': 'Schusserzeugende Aktionen',
'GCA': 'Torerzeugende Aktionen',
'Tackles': 'Tackles',
'Blocks': 'Blocks',
'Playing Time _ MP': 'Spiele',
'Playing Time _ Starts': 'Startelf-Einsätze',
'Playing Time _ Min': 'Minuten',
'Playing Time _ 90s': '90 Minuten durchgespielt',
'Performance _ Gls': 'Tore',
'Performance _ Ast': 'Assists',
'Performance _ G+A': 'Tore + Assists',
'Performance _ G-PK': 'Tore (ohne Elfmeter)',
'Performance _ PK': 'Elfmeter',
'Performance _ PKatt': 'Elfmeter-Versuche',
'Performance _ CrdY': 'Gelbe Karten',
'Performance _ CrdR': 'Rote Karten',
'Expected_0 _ xG': 'Erwartete Tore (xG)',
'Expected_0 _ npxG': 'Erwartete Tore (npxG)',
'Expected_0 _ xAG': 'Erwartete Assists (xAG)',
'Expected_0 _ npxG+xAG': 'Erwartete Tore + Assists (npxG+xAG)',
'Progression _ PrgC': 'Carries',
'Progression _ PrgP': 'Progressive Pässe',
'Progression _ PrgR': 'Progressive Läufe',
'Per 90 Minutes _ Gls': 'Tore pro 90 Minuten',
'Per 90 Minutes _ Ast': 'Assists pro 90 Minuten',
'Per 90 Minutes _ G+A': 'Tore + Assists pro 90 Minuten',
'Per 90 Minutes _ G-PK': 'Tore (ohne Elfmeter) pro 90 Minuten',
'Per 90 Minutes _ G+A-PK': 'Tore + Assists (ohne Elfmeter) pro 90 Minuten',
'Per 90 Minutes _ xG': 'Erwartete Tore (xG) pro 90 Minuten',
'Per 90 Minutes _ xAG': 'Erwartete Assists (xAG) pro 90 Minuten',
'Per 90 Minutes _ xG+xAG': 'Erwartete Tore + Assists (xG+xAG) pro 90 Minuten',
'Per 90 Minutes _ npxG': 'Erwartete Tore (npxG) pro 90 Minuten',
'Per 90 Minutes _ npxG+xAG': 'Erwartete Tore + Assists (npxG+xAG) pro 90 Minuten',
'Standard _ Gls': 'Tore',
'Standard _ Sh': 'Schüsse',
'Standard _ SoT': 'Schüsse aufs Tor',
'Standard _ SoT%': 'Schussgenauigkeit',
'Standard _ Sh/90': 'Schüsse pro 90 Minuten',
'Standard _ SoT/90': 'Schüsse aufs Tor pro 90 Minuten',
'Standard _ G/Sh': 'Tore pro Schuss',
'Standard _ G/SoT': 'Tore pro Schuss aufs Tor',
'Standard _ Dist': 'Distanz',
'Standard _ FK': 'Freistöße',
'Standard _ PK': 'Elfmeter',
'Standard _ PKatt': 'Elfmeter-Versuche',
'Expected_1 _ xG': 'Erwartete Tore (xG)',
'Expected_1 _ npxG': 'Erwartete Tore (npxG)',
'Expected_1 _ npxG/Sh': 'Erwartete Tore (npxG) pro Schuss',
'Expected_1 _ G-xG': 'Tore - Erwartete Tore (xG)',
'Expected_1 _ np:G-xG': 'Tore - Erwartete Tore (npxG)',
'Total _ Cmp': 'Pässe',
'Total _ Att': 'Pässe versucht',
'Total _ Cmp%': 'Passquote',
'Total _ TotDist': 'Pass-Distanz',
'Total _ PrgDist': 'Progressive Pass-Distanz',
'Short _ Cmp': 'Kurze Pässe',
'Short _ Att': 'Kurze Pässe versucht',
'Short _ Cmp%': 'Kurze Passquote',
'Medium _ Cmp': 'Mittlere Pässe',
'Medium _ Att': 'Mittlere Pässe versucht',
'Medium _ Cmp%': 'Mittlere Passquote',
'Long _ Cmp': 'Lange Pässe',
'Long _ Att': 'Lange Pässe versucht',
'Long _ Cmp%': 'Lange Passquote',
'Ast': 'Assists',
'xAG': 'Erwartete Assists (xAG)',
'Expected _ xA': 'Erwartete Assists (xA)',
'Expected _ A-xAG': 'Erwartete Assists (xA) - Erwartete Assists (xAG)',
'KP': 'Key Passes',
'1/3': 'Angriffsdrittel-Pässe',
'PPA': 'Pässe, die zu einem Schuss führen',
'CrsPA': 'Flanken, die zu einem Schuss führen',
'PrgP': 'Progressive Pässe',
'SCA _ SCA': 'Schussbeteiligungen',
'SCA _ SCA90': 'Schussbeteiligungen pro 90 Minuten',
'GCA _ GCA': 'Torbeteiligungen',
'GCA _ GCA90': 'Torbeteiligungen pro 90 Minuten',
'Tackles _ Tkl': 'Tackles',
'Tackles _ TklW': 'Gewonnene Tackles',
'Blocks _ Blocks': 'Blocks',
'Blocks _ Sh': 'Blocks gegen Schüsse',
'Blocks _ Pass': 'Blocks gegen Pässe',
'Int': 'Interceptions',
'Tkl+Int': 'Tackles + Interceptions',
'Clr': 'Klärungen',
'Err': 'defensive Fehler',
'Touches': 'Ballberührungen',
'Penalty Kicks': 'Elfmeter'
'Clr': 'Klärungsversuche',
'Err': 'Fehler',
'Touches _ Touches': 'Ballberührungen',
'Performance _ GA': 'Gegentore',
'Performance _ GA90': 'Gegentore pro 90 Minuten',
'Performance _ SoTA': 'Schüsse aufs Tor gegen',
'Performance _ Saves': 'Paraden',
'Performance _ Save%': 'Paradenquote',
'Performance _ CS': 'Zu-Null-Spiele',
'Performance _ CS%': 'Zu-Null-Quote',
'Penalty Kicks _ PKA': 'Elfmeter-Angebot',
'Penalty Kicks _ PKsv': 'Elfmeter gehalten',
'Penalty Kicks _ PKm': 'Elfmeter verursacht',
'Penalty Kicks _ Save%': 'Elfmeter-Paradenquote',
'Expected _ PSxG': 'Erwartete Punkte (xG)',
'Expected _ PSxG/SoT': 'Erwartete Punkte (xG) pro Schuss aufs Tor',
'Expected _ PSxG+/-': 'Erwartete Punkte (xG) +/-',
'Expected _ /90': 'Erwartete Punkte (xG) pro 90 Minuten',
}
src/styles/index.scss
+ 5
− 0
View file @ 46aa762b
......@@ -142,6 +142,11 @@ select, input[type="text"] {
@media (max-width: 1536px) {
#app {
flex-direction: column;
.left .bubble-chart-settings {
position: static;
width: fit-content;
margin: 0 0 0 auto;
}
}
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment