40:null 41:["$","title",null,{"children":"TP - Sea Ice Extent | Jean-Baptiste Arbaut's Workspace | Observable"}] 47: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/*48: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).49:[{"id":"4f601018d4db470acb6418c464b988f7e95a895cf47f4ed1b19c6b2677daced2332cff805c39b73eb63a6f2855a80f2be3dec85250b9d7386d1f82227cb9ff0d","href":"https://static.observableusercontent.com/files/4f601018d4db470acb6418c464b988f7e95a895cf47f4ed1b19c6b2677daced2332cff805c39b73eb63a6f2855a80f2be3dec85250b9d7386d1f82227cb9ff0d","name":"Sea_Ice_Index_5_Day_Extent.json","type":"application/json","lastModified":1694605093088.505,"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":1694605093088.505,"size":660502}] 45:{"id":"ab099c9450eecf3f","slug":null,"title":"TP - Sea Ice Extent","thumbnail":"cbf285bb728a94a3d6db0d2485a025c013136b2cb957310f597bf01433e7fd8f","access_level":"public","create_time":"$D2023-09-13T11:38:13.088Z","update_time":"$D2023-09-13T13:48:29.613Z","view_time":null,"first_public_time":"$D2023-10-24T08:23:21.042Z","has_unpublished_edits":null,"fork":{"id":"b00d3c0a950e6b75","slug":"tp-sea-ice-extent","title":"TP - Sea Ice Extent","owner":{"id":"daf0693188c7d3b6","login":"sd-progwebdataviz","name":"BUT SD - Cours Programmation Web Dataviz"}},"stars":0,"starred":false,"owner":{"type":"team","id":"9c1988ea8630cae5","login":"jean-baptiste-arbaut-ws","name":"Jean-Baptiste Arbaut's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/19220edebb45ce4958aa8dbc84a4101c75beca26357819776db7de929ff4ffd1","tier":"starter_2024","bio":"","following":false},"version":594,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b29a681da3ab0294","login":"jean-baptiste-arbaut","name":"Jean-Baptiste","avatar_url":"https://avatars-next.observableusercontent.com/26706a849f6d4075427b1853171e3eb755cf4a6ee70f9fdc1f26b6ac49b4015e","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"b29a681da3ab0294","login":"jean-baptiste-arbaut","name":"Jean-Baptiste","avatar_url":"https://avatars-next.observableusercontent.com/26706a849f6d4075427b1853171e3eb755cf4a6ee70f9fdc1f26b6ac49b4015e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"TP - Sea Ice Extent","cells":[{"id":0,"value":"# TP - Sea Ice Extent","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":493,"value":"

Support de cours pour les étudiants 2023-2024 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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":200,"value":"$47","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"$48","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":41,"value":"// Données pour le premier graphique\ndata1 = FileAttachment(\"Sea_Ice_Index_5_Day_Extent.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"// Données pour le second graphique\ndata2 = FileAttachment(\"Sea_Ice_Index_SH_5_Day_Anomaly@2.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"Plusieurs points d'attention avant de vous lancer :\n- 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,\n- 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.\n\n**✏️ À vous de jouer ! Forkez ce notebook, enlevez les blocs de texte inutiles avec les consignes, et reproduisez ces deux graphiques.**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":529,"value":"# Rapport","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":533,"value":"{\n for (const i of data1) {\n i.date = new Date(i.date);\n }\n \n for (const i of data2) {\n i.date = new Date(i.date);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"data3 = data1.map((d) => ({\n date : d.date,\n value_sh : d.value_sh,\n value_nh : d.value_nh,\n total : +(d.value_sh + d.value_nh).toFixed(2)\n}));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":553,"value":"function intrayear(date) {\n date = new Date(date);\n date.setUTCFullYear(2000);\n return date;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"Plot.plot({\n className: \"plot\",\n x : {transform: intrayear, tickFormat: \"%b\"},\n y : {label : \"Extend (million square kilometers\", labelAnchor : \"center\"},\n title : \"Global Sea Ice\",\n caption : 'NOTE: Trends/Variability in Artic & Antartic sea ice are affected by very different atmospheric/ oceanic process and opposite seasonnality!',\n color : {scheme : 'Blues'},\n marks: [\n Plot.ruleX([0]),\n Plot.ruleY([14]),\n Plot.lineY(data3, {x: \"date\", y: \"total\",\n stroke : d => d.date.getFullYear(),\n strokeOpacity : 0.4,\n z : (d) => d.date.getFullYear(),\n strokeWidth : 1.5\n }),\n Plot.lineY(data3.filter(d => d.date.getFullYear() === 2023), \n {x: \"date\", y: \"total\",\n stroke : 'red',\n z : (d) => d.date.getFullYear(),\n strokeWidth : 4}),\n Plot.lineY(data3.filter(d => d.date.getFullYear() === 2016), \n {x: \"date\", y: \"total\",\n stroke : 'yellow',\n z : (d) => d.date.getFullYear(),\n strokeWidth : 4})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 46:"$45:body"