viewof order = Inputs.radio(['Fréquence','Wracc'], {value: 'Fréquence', label: "Classer les séquences par :"})
data = await d3.csv(url_tableau_sequences, d3.autoType)
/*
{
// Charger les données
const limitedData = data3.slice(0, lim_echange);
const sequenceIndices = filteredSequences;
const otherKeys = ['num_echange', 'serveur', 'winner', 'set', 'score_joueur_A', 'score_joueur_B'];
// Filtrer les clés des colonnes à afficher, en incluant uniquement les 'seq{i}' nécessaires
const allKeys = Object.keys(limitedData[0]);
const keysToShow = allKeys.filter(key =>
key.startsWith("seq") && sequenceIndices.includes(parseInt(key.substring(3)))
);
// Création d'un élément conteneur pour le tableau
const container = d3.create("div").style("overflow", "auto");
// Créer un tableau HTML
const table = container.append("table").style("width", "100%");
const thead = table.append("thead");
const tbody = table.append("tbody");
// Déterminer les clés à utiliser basées sur nb_sequences
// const keys = Object.keys(limitedData[0]).slice(0, nb_sequences+6);
const keys = [...otherKeys, ...keysToShow];
const headers = [...keys]; // Ajouter une colonne pour le numéro de ligne
// Ajout d'autres clés si nécessaire
// const otherKeys = ['someOtherKey1', 'someOtherKey2']; // Remplacer par les clés réelles que vous voulez inclure
// const keys = [...otherKeys, ...keysToShow];
// Ajouter les en-têtes de colonne
thead.append("tr")
.selectAll("th")
.data(headers)
.enter()
.append("th")
.text(d => d);
// Ajouter les lignes de données
const rows = tbody.selectAll("tr")
.data(limitedData)
.enter()
.append("tr");
// Ajouter les cellules pour chaque ligne en se limitant aux clés sélectionnées
rows.selectAll("td.data3")
.data(row => keys.map(key => row[key])) // Prendre seulement les valeurs des clés sélectionnées
.enter()
.append("td")
.attr("class", "data3")
.text(d => d);
return container.node();
}
*/
csv_thomas_pipeline = d3.csv(url_csv_thomas, (d,i) => {
d = d3.autoType(d)
return d
})
csv_tableau_sequences = d3.csv(url_tableau_sequences, (d,i) => {
d = d3.autoType(d)
return d
});
csv_tableau_sequences.then(data => {
// Trier par WRACC décroissant
data.sort((a, b) => b.WRACC - a.WRACC);
let url_tableau_sequences_wracc = data;
});
flat_filtre = flat.filter(d => ["PRITHIKA-PAVADE_vs_SIBEL-ALTINKAYA","ALEXIS-LEBRUN_vs_BENDIKT-DUDA","ALEXIS-LEBRUN_vs_DARKO-JORGIC","FELIX-LEBRUN_vs_TOMOKAZU-HARIMOTO","ALEXIS-LEBRUN_vs_FAN-ZHENDONG","ALEXIS-LEBRUN_vs_TRULS-MOREGARDH","PRITHIKA-PAVADE_vs_LIU-HSING-YIN","ALEXIS-LEBRUN_vs_IVOR-BAN","ALEXIS-LEBRUN_vs_DIMITRIJ-OVTCHAROV","ECE-HARAC_vs_ARIANNA-BARANI","ALEXIS-LEBRUN_vs_MA-LONG","ALEXIS-LEBRUN_vs_HUGO-CALDERANO","GAIA-MONFARDINI_vs_OZGE-YILMAZ","PRITHIKA-PAVADE_vs_GIORGIA-PICCOLIN","JIA-NAN-YUAN_vs_DEBORA-VIVARELLI","JIA-NAN-YUAN_vs_NICOLE-ARLIA","HUGO-CALDERANO_vs_FELIX-LEBRUN","FELIX-LEBRUN_vs_HUGO-CALDERANO","FAN-ZHENDONG_vs_ALEXIS-LEBRUN","FAN-ZHENDONG_vs_FELIX-LEBRUN","FAN-ZHENDONG_vs_WANG-CHUQIN","LEE-SANG-SU_vs_FAN-ZHENDONG","ALEXIS-LEBRUN_vs_KRISTIAN-KARLSSON"].includes(d.game_name) && d.competition_name != "2022_macao_china" && d.competition_name != "2023_coupe_monde_mixte" && d.competition_name != "2023_xinxiang")//flat.filter(d => ["PAVADE-PRITHIKA_LUTZ-CAMILLE_vs_WEGRZYN-ANNA_WEGRZYN-KATARZYNA","WINTER-SABINE_MITTELHAM-NINA_vs_LIAN-NI-XIA_DE-NUTTE-SARAH","LEBRUN-ALEXIS_vs_MOREGARDH-TRULS","SHAO-JIENI_YU-FU_vs_HAEUN-YANG_JIHEE-JEON","GAIA-MONFARDINI_vs_OZGE-YILMAZ","PRITHIKA-PAVADE_vs_SIBEL-ALTINKAYA","YUAN-JIA-NAN_vs_NICOLE-ARLIA","PRITHIKA-PAVADE_vs_GIORGIA-PICCOLIN","ECE-HARAC_vs_ARIANNA_BARANI","JIA-NAN-YUAN_vs_DEBORA-VIVARELLI","GAIA-MONFARDINI_vs_OZGE-YILMAZ","ALEXIS-LEBRUN_vs_DARKO-JORGIC","LEBRUN-ALEXIS_vs_OVTCHAROV-DIMITRIJ","LEBRUN-ALEXIS_vs_DUDA-BENDIKT","ALEXIS-LEBRUN_vs_KRISTIAN-KARLSSON","LEBRUN-FELIX_PAVADE-PRITHIKA_vs_YIGENLER-ABDULLAH_YILMAZ-OZGE","LEBRUN-FELIX_PAVADE-PRITHIKA_vs_HARIMOTO-TOMOKAZU_HAYATA-HINA","LEBRUN-FELIX_PAVADE-PRITHIKA_vs_ROBLES-ALVARO_XIAO-MARIA","LEBRUN-FELIX_PAVADE-PRITHIKA_vs_GNANASEKARAN_BATRA","FAN-ZHENDONG_vs_WANG-CHUQIN","LEBRUN-FELIX_vs_HARIMOTO-TOMOKAZU"].includes(d.game_name))//,"ALEXIS-LEBRUN_vs_FAN-ZHENDONG","WINTER-SABINE_MITTELHAM-NINA_vs_LIAN-NI-XIA_DE-NUTTE-SARAH"
flat_double = flat.filter(d => d.game_name.split('_vs_')[0].split('_').length == 2 && d.game_name.split('_vs_').length == 2)
csv_score = d3.csv(url_csv_score, (d,i) => {
d = d3.autoType(d)
d.nom_jA = players[0]
d.nom_jB = players[1]
d.num_point = i+1
d.diff_jA = d.score_jA - d.score_jB
d.diff_jB = d.score_jB - d.score_jA
d.point_pour_jA = (d.point_pour == players[0])?1:0
d.point_pour_jB = (d.point_pour == players[1])?1:0
return d
})
file1 = (type_match == "Simples") ? 'evol_service_remise' : 'doubles_services-remises';
file2 = (type_match == "Simples") ? 'service_remise' : 'doubles_services-remises';
url_csv_thomas = url_pipeline + "Dossier_Thomas_Lou" + "/" + "csv_sequences_pour_notebook" + "/" + "service_remise" + "/" + file1 + "/" + "evol_service-remise_" + target + "_match_" + game + ".csv?test=test7"
url_tableau_sequences = url_pipeline + "Dossier_Thomas_Lou" + "/" + "csv_sequences_pour_notebook" + "/" + "service_remise" + "/" + file2 + "/" + "service-remise_" + target + "_match_" + game + ".csv?test=test2"
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
url_csv_score = url_pipeline + competition + "/" + game + "/" + "/" + game + "_evolution_score.csv?test=test3"
url_json_game = url_pipeline + competition + "/" + game + "/" + game + "_game.json?test=test0"
url_csv_evolution_score = url_pipeline + competition + "/" + game +"/" + game + "_evolution_score.csv?test=test2"
url_csv_annotation = url_pipeline + competition + "/" + game +"/" + game + "_annotation_enrichi.csv?test=test8"
url_video_interactif_thomas = url_pipeline + "/" + competition + "/" + game + "/clips/" + nom_clip_thomas + "/" + nom_clip_thomas + ".mp4"
url_video_interactif_thomas_bis = url_pipeline + "/" + competition + "/" + game + "/clips/" + nom_clip_thomas + "/" + nom_clip_thomas + ".mp4"
// Ajouter les temps de début et fin de chaque service dans le csv services à partir du csv enrichi, et délimiter la vidéo en fonction de ces frames là
// S'aider du notebook "Services"
/* url_video = url_pipeline + "/" + competition + "/" + game + "/clips/" + nom_clip_selection + "/" + nom_clip_selection + ".mp4#t=0,"+(((csv_annotation.filter(d => d.num_coup == 1 && d.num_point == counter)[0].fin-csv_annotation.filter(d => d.num_coup == 1 && d.num_point == counter)[0].debut)/30)+0.25) */
nom_clip_thomas = flat.filter(d=>d.competition_name == competition && d.game_name == game)[0]["game_clips"].filter(d=>d.name.includes('point_'+((debug_visu_thomas[1] == null)?0:((debug_visu_thomas[1]["datum"]["num_echange"]<=csv_thomas_pipeline.length)?debug_visu_thomas[1]["datum"]["num_echange"]:0))))[0]['name']
game_from_url = querystrings.get("game") || "NONE"
competition_from_url = querystrings.get("competition") || "NONE"
clip_from_url = querystrings.get("clip") || "NONE"
import {get_notebooks_tt, url_pipeline} from "@liris/tt"
import {flat, select_competitions, select_games, select_clips} from "@liris/selecteur-tt"
import {Select,checkbox} from "@observablehq/inputs"
import {coor_filet,coor_table,zone_table} from "@liris/tt-constantes"
import {TABLE,TABLE_LENGTH,TABLE_WIDTH} from "@liris/tt-constantes"
import {TABLE_MINUS_2,CENTER_LINE,WHITE_NET,BLACK_NET_LEFT,BLACK_NET_RIGTH} from "@liris/tt-constantes"
import { videoControls } from '@severo/detached-video-controls'
import {querystrings} from "@liris/selecteur"
import {evolution_score} from "@liris/tt-score"
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.
