2b:null 2c:["$","title",null,{"children":"TP - Sea Ice Extent | BUT SD - Cours Programmation Web Dataviz | Observable"}] 31:T508,Ces derniers mois, vous avez peut-être pu voir des visualisations telles que celles ci-dessous sur les réseaux sociaux ([exemple 1](https://fediscience.org/@ZLabe/110998537666750751), [exemple 2](https://www.reddit.com/r/dataisbeautiful/comments/15khok1/oc_chart_showing_the_antarctic_seaice_extent/), [exemple 3](https://twitter.com/EliotJacobson/status/1674736887322533888/), etc.)

*Sources: https://zacklabe.com/global-sea-ice-extent-conc/ et https://www.reddit.com/r/dataisbeautiful/comments/15khok1/oc_chart_showing_the_antarctic_seaice_extent/*32:T4d6,Dans ce TP vous allez reproduire chacune de ces deux visualisations avec Plot, en personnalisant le style de vos graphiques afin qu'ils ressemblent à ceux présentés en exemple ici (voir résultats possibles présentés au tableau). La page décrivant les données est la suivante : https://nsidc.org/data/seaice_index et les données peuvent être téléchargées directement depuis l'URL suivante : https://noaadata.apps.nsidc.org/NOAA/G02135/seaice_analysis/Sea_Ice_Index_Daily_Extent_G02135_v3.0.xlsx. Elles arrivent toutefois sous forme d'un fichier au format `xslx` organisé d'une manière peu pratique pour être exploité directement sur le Web. Pour vous faciliter la tâche, j'ai extrait les données des feuilles `NH-5-Day-Extent` (*5-day average sea ice extent for the northern hemisphere*) et `SH-5-Day-Extent` (*5-day average sea ice extent for the southern hemisphere*) pour les grouper dans un fichier JSON nommé `Sea_Ice_Index_5_Day_Extent.json`. J'ai également extrait les données de la feuille `SH-5-Day-Anomaly` dans le fichier JSON `Sea_Ice_Index_SH_5_Day_Anomaly.json`. Cette préparation des données à eu lieu le 04/09/2023 et les deux fichiers sont attachés à ce notebook (*Files* en haut à droite).33:T4ba,Plusieurs points d'attention avant de vous lancer : - il va être nécessaire d'appliquer un traitement préalable au jeu de données `data1` et `data2` pour convertir le champ `date` en objet JavaScript `Date` en appelant `new Date(*votre valeur*)` et, seulement pour `data1`, pour calculer la somme de l'étendue de glace totale, - lors de la création de chacun des graphiques, il faudra utiliser une [transformation pour l'axe](https://observablehq.com/plot/features/scales#scale-transforms) X (sinon votre axe ira de la première date à la dernière date du jeu de données, pas de Janvier à Décembre - avant de vous lancer, réfléchissez à quelle transformation il faudrait appliquer aux données de l'axe X, les dates, pour obtenir un axe allant de Janvier à Décembre) - nous discuterons ce point à l'oral au début du TP. Par ailleurs il s'agit d'un TP nécessitant un niveau avancé : veillez à bien réfléchir en amont à différents aspects (quelle préparation des données, quels éléments graphiques vous souhaitez utiliser, etc.). **✏️ À vous de jouer ! Forkez ce notebook, enlevez les blocs de texte inutiles avec les consignes, et essayez de reproduire ces deux graphiques.**34:[{"id":"4f601018d4db470acb6418c464b988f7e95a895cf47f4ed1b19c6b2677daced2332cff805c39b73eb63a6f2855a80f2be3dec85250b9d7386d1f82227cb9ff0d","href":"https://static.observableusercontent.com/files/4f601018d4db470acb6418c464b988f7e95a895cf47f4ed1b19c6b2677daced2332cff805c39b73eb63a6f2855a80f2be3dec85250b9d7386d1f82227cb9ff0d","name":"Sea_Ice_Index_5_Day_Extent.json","type":"application/json","lastModified":1693833829911.999,"size":1030138},{"id":"d236a67f1f28a74f6d6c18bd2798d0513b4b918d9640d19f6cfbd50273a38f1e4ceb91eec979affc8f5dba5c1a70213a8c0f8afeb5d511bdb4ad72eb364c55b8","href":"https://static.observableusercontent.com/files/d236a67f1f28a74f6d6c18bd2798d0513b4b918d9640d19f6cfbd50273a38f1e4ceb91eec979affc8f5dba5c1a70213a8c0f8afeb5d511bdb4ad72eb364c55b8","name":"Sea_Ice_Index_SH_5_Day_Anomaly@2.json","type":"application/json","lastModified":1693855052039.664,"size":660502}] 2f:{"id":"b00d3c0a950e6b75","slug":"tp-sea-ice-extent","title":"TP - Sea Ice Extent","thumbnail":"36a31652cd79978b53d03650b45d13d8f32850e8eece9d5ed45bfaad73028a8b","access_level":"public","create_time":"$D2023-09-04T09:38:17.594Z","update_time":"$D2026-09-09T14:04:22.287Z","view_time":null,"first_public_time":"$D2023-09-13T09:12:26.824Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"daf0693188c7d3b6","login":"sd-progwebdataviz","name":"BUT SD - Cours Programmation Web Dataviz","avatar_url":"https://avatars-next.observableusercontent.com/9abf99c7291a1bcb0c0549771e1476593088700d797bd36ff146f1e5ff3035e7","tier":"starter_2024"},"version":538,"publish_version":538,"role":null,"authored":false,"authors":[{"type":"individual","id":"8e230b124d25dec4","login":"mthh","name":"Matthieu Viry","avatar_url":"https://avatars-next.observableusercontent.com/911bd8720f0dbfd44850e291921253c0242ac77c4537d932fde7db5c82ebb267","tier":null}],"members":[{"type":"individual","id":"8e230b124d25dec4","login":"mthh","name":"Matthieu Viry","avatar_url":"https://avatars-next.observableusercontent.com/911bd8720f0dbfd44850e291921253c0242ac77c4537d932fde7db5c82ebb267","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":8,"collection":{"id":"c3e3e267a1ef9194","slug":"exercices","title":"TP / Exercices","owner":{"id":"daf0693188c7d3b6","login":"sd-progwebdataviz","name":"BUT SD - Cours Programmation Web Dataviz"}},"type":"notebook","body":{"title":"TP - Sea Ice Extent","cells":[{"id":0,"value":"# TP - Sea Ice Extent","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":493,"value":"

Support de cours pour les étudiants 2026-2027 de 3ème année du BUT Science des données de l'IUT2 (Université Grenoble Alpes).

\n\nIntervenant : Matthieu Viry

\nVoir l'ensemble de notebooks ici.\n\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":200,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":35,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":41,"value":"// Données pour le premier graphique\nconst data1 = FileAttachment(\"Sea_Ice_Index_5_Day_Extent.json\").json()","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":289,"value":"// Données pour le second graphique\nconst data2 = FileAttachment(\"Sea_Ice_Index_SH_5_Day_Anomaly@2.json\").json()","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":169,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":524,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"2","titling":"auto"}} 30:"$2f:body"