25:["$","title",null,{"children":"Ice melting in Antartica | ddleprat | Observable"}] 49:T644,The following dataset provides the number of melt days per year per surface of 25kmx25km. This dataset is available here : https://snow.univ-grenoble-alpes.fr/melting/. The data has been preprocessed to be converted to json format in order to display the two first figures below.

The first one represents a heatmap of the meltdays on the continent. This can be shown for one specific year or the sum since 1979 The second one represent the evolution of melt days of a given point across the years.
I expected to observe a significant diminution of ice and observe more and more melting days across the years due to climate change

The third figure represents ice thickness in Antartica from 1979 to 2024. The data doesn't provide any informations about time. It can be found here : https://earth.gsfc.nasa.gov/cryo/data/antarctic-sea-ice-thickness

The last figure is a plot representing the evolution of ice area across time. Depending on the selected year, it shows the evolution within a year or across every year since 1979. The data used can be found here :

I expected to observe a significant diminution of ice and observe more and more melting days across the years due to climate change. Howerver, what these figures show is that there is now significant diminution in ice area in Antartica. Plus, if we observe certain points on the continent, we don't observe a real tendency towards diminution.

All the preprocessing can be found at https://gitlab.ec-lyon.fr/ddelprat/ice-melting-antartica 4a:Te82,map_yearly_melt_days = { const discretisation = selected_year === "All"? 500:100; const width = 400, height = 300; // Create SVG container const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); // Projection for Antarctica (stereographic works well for polar regions) const projection = d3.geoStereographic() .center([0, -90]) // Center over Antarctica .scale(300) .translate([width / 2, height / 2]); // Create a path generator const path = d3.geoPath().projection(projection); const colorScale = d3.scaleSequential(d3.interpolateYlOrRd) .domain([1, 200]); // Start from 1 to avoid white at low values function getColor(d) { if (d.lon === selected_lon && d.lat === selected_lat) { return "green"; // Highlight the selected point in blue } return d.melt_days === 0 ? "#ffffff" : d3.interpolateYlOrRd(d.melt_days / discretisation); } function getSize(d) { if (d.lon === selected_lon && d.lat === selected_lat) { return 3; // Highlight the selected point in blue } return 1 } // Create circles svg.selectAll("circle") .data(selected_year === "All" ? data : yearly_melt[selected_year]) .enter().append("circle") .attr("cx", d => projection([d.lon, d.lat])[0]) .attr("cy", d => projection([d.lon, d.lat])[1]) .attr("r", d => getSize(d)) .attr("fill", d => getColor(d)) .attr("opacity", 0.8) // On mouseover, change color and size .on("mouseover", function(event, d) { d3.select(this) // `this` refers to the circle being hovered .raise() .transition() .duration(100) .attr("r", 5); // Increase radius on hover // Show tooltip if (d.melt_days > 0) { tooltip.style("display", "block") .html(`${d.melt_days}`); } }) // Mouse move event for tooltip positioning .on("mousemove", event => { tooltip.style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 10) + "px"); }) // On mouseout, revert to the original color and size .on("mouseout", function(event, d) { d3.select(this) // `this` refers to the circle being hovered .transition() .duration(100) .attr("fill", getColor(d)) // Revert to the original color based on data .attr("r", getSize(d)); // Revert to the original radius size tooltip.style("display", "none"); }) // On click, update selected lon/lat and bring the circle to the front .on("click", function(event, d) { mutable selected_lon = d.lon; mutable selected_lat = d.lat; d3.select(this) // `this` refers to the clicked circle .raise(); // Bring this circle to the front in the SVG container tooltip.style("display", "none"); }); const tooltip = d3.select("body") .append("div") .style("position", "absolute") .style("background", "white") .style("border", "1px solid black") .style("border-radius", "5px") .style("padding", "5px") .style("font-size", "12px") .style("pointer-events", "none") .style("display", "none"); svg.append("path") .datum(boundaries) .attr("d", path) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 1); // Add title svg.append("text") .attr("x", width / 2) .attr("y", 20) // Adjust this value to position the title properly .attr("text-anchor", "middle") // Center the text .style("font-size", "16px") .style("font-weight", "bold") .text(selected_year=="All"?"Number of melt days (1979-2024)": ("Number of melt days in "+ selected_year)); return svg.node(); } 4b:Tcf1,ice_thickness_map = { const width = 400, height = 300; // Create SVG container const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); // Projection for Antarctica (stereographic works well for polar regions) const projection = d3.geoStereographic() .center([0, -90]) // Center over Antarctica .scale(300) .translate([width / 2, height / 2]); // Create a path generator const path = d3.geoPath().projection(projection); const colorScale = d3.scaleSequential(d3.interpolateYlOrRd) .domain([1, 200]); // Start from 1 to avoid white at low values function getColor(d) { if (d.lon === selected_lon && d.lat === selected_lat) { return "green"; // Highlight the selected point in green } if (d.thickness === "-999.0"){ return "#D3D3D3" } return d.thickness <= 0. ? "#ffffff" : d3.interpolateYlOrRd(d.thickness); } function getSize(d) { if (d.lon === selected_lon && d.lat === selected_lat) { return 3; // Highlight the selected point with larger size } return 1; } // Create circles svg.selectAll("circle") .data(ice_thickness) .enter().append("circle") .attr("cx", d => projection([d.lon, d.lat])[0]) .attr("cy", d => projection([d.lon, d.lat])[1]) .attr("r", d => getSize(d)) .attr("fill", d => getColor(d)) .attr("opacity", 0.8) // On mouseover, change color and size .on("mouseover", function(event, d) { if (d.thickness === "-999.0") { tooltip.style("display", "block") .html(`No data`); } else { d3.select(this) // `this` refers to the circle being hovered .raise() // Bring the hovered circle to the front if (d.thickness > 0) { tooltip.style("display", "block") .html(`${Number(d.thickness).toFixed(2)} m`); } } }) // Mouse move event for tooltip positioning .on("mousemove", event => { tooltip.style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 10) + "px"); }) // On mouseout, revert to the original color and size .on("mouseout", function(event, d) { d3.select(this) // `this` refers to the circle being hovered .attr("fill", getColor(d)) // Revert to the original color based on data .attr("r", getSize(d)); // Revert to the original radius size tooltip.style("display", "none"); }) // Tooltip container const tooltip = d3.select("body") .append("div") .style("position", "absolute") .style("background", "white") .style("border", "1px solid black") .style("border-radius", "5px") .style("padding", "5px") .style("font-size", "12px") .style("pointer-events", "none") .style("display", "none"); // Draw the map boundary path svg.append("path") .datum(boundaries) .attr("d", path) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 1); // Add title svg.append("text") .attr("x", width / 2) .attr("y", 20) // Adjust this value to position the title properly .attr("text-anchor", "middle") // Center the text .style("font-size", "16px") .style("font-weight", "bold") .text("Ice thickness mean (1979-2024)"); return svg.node(); }; 4c:T418,sea_ice_plot = Plot.plot({ title: "Evolution of sea ice area " + (selected_year==="All" ? "1979-2024" : ("in " + selected_year)), marks: [ Plot.line(sea_ice_display, { x: "time", y: "ice area", stroke: "blue", legend: true, strokeWidth: 2 }) ], y: { label: "Ice area (10⁶ km²)", format: ".0f" }, x: { label: selected_year==="All" ? "Year" : "Month", tickFormat: d => { if (selected_year === "All") { // Use getFullYear() on the Date object. const year = d.getFullYear(); // Display only every 20th year, for example: return year % 5 === 0 ? year.toString() : ""; } else { // If not "All", show the month. d.getMonth() returns 0-based month, // so adjust if needed and map it to your display_months array. const month = d.getMonth() + 1; // 0 = Jan, 1 = Feb, etc. // Ensure your display_months is zero-indexed (e.g., ["Jan", "Feb", ...]). return display_months[month] || ""; } } } });4d:[{"id":"e11f7a5ca985a142f747fce721c0d9346f508e5c48c6daaaa90b35afc90d591e31ad2c7a988c1903518e3f39a3bf5dc6bdb59c6f85175fc38a1eca362277a7a1","href":"https://static.observableusercontent.com/files/e11f7a5ca985a142f747fce721c0d9346f508e5c48c6daaaa90b35afc90d591e31ad2c7a988c1903518e3f39a3bf5dc6bdb59c6f85175fc38a1eca362277a7a1","name":"mean_ice_thickness2@1.csv","type":"text/csv","lastModified":1740063576112.25,"size":3361588},{"id":"d49c76449728ff61c314991623bb352c781ba05564daff49b764228194b79148784141483f3dc3f8fce39bbc9e9d1ec1e1874702fe504a80f93c61dac7cef656","href":"https://static.observableusercontent.com/files/d49c76449728ff61c314991623bb352c781ba05564daff49b764228194b79148784141483f3dc3f8fce39bbc9e9d1ec1e1874702fe504a80f93c61dac7cef656","name":"mean_ice_thickness@2.csv","type":"text/csv","lastModified":1740063761127.687,"size":3581638},{"id":"61d382a5f37ea5287fe948c12920e742321e90379218eed1289be0e7f58fdad2d98244d62a73d56517d0ccf579084cf6c66664eb0f9b0e7ed5b9886aec94e8c3","href":"https://static.observableusercontent.com/files/61d382a5f37ea5287fe948c12920e742321e90379218eed1289be0e7f58fdad2d98244d62a73d56517d0ccf579084cf6c66664eb0f9b0e7ed5b9886aec94e8c3","name":"s_icearea@4.mon.csv","type":"text/csv","lastModified":1739777549570.648,"size":9628},{"id":"2b04d78aa5db08e051ab03e182eb00554a0c2a75b21f4bdc895c05d695fa795e8ecf381e0ff0b5d829414ca9450709a7f2d2b35ca52f505e756a16a838a8b3d6","href":"https://static.observableusercontent.com/files/2b04d78aa5db08e051ab03e182eb00554a0c2a75b21f4bdc895c05d695fa795e8ecf381e0ff0b5d829414ca9450709a7f2d2b35ca52f505e756a16a838a8b3d6","name":"melt_data_light.json","type":"application/json","lastModified":1739783907254.266,"size":522910},{"id":"de19f9d40b22995c273da788830c9385e8facefcb6129c1aed713d17577217f968cc288bacbd97c78cbf76d2468c7f3df6d94413ce6d076f705b99fadfab7644","href":"https://static.observableusercontent.com/files/de19f9d40b22995c273da788830c9385e8facefcb6129c1aed713d17577217f968cc288bacbd97c78cbf76d2468c7f3df6d94413ce6d076f705b99fadfab7644","name":"melt_data_year_light.json","type":"application/json","lastModified":1739784219633.405,"size":12020663},{"id":"589ada9c2e1350b2601d10710217308bffaa12984928134e1e113eca6cca428a9d08b3ea5f53141eef1b846f0e07c5b1352cefc8160308c01af0978648c765fd","href":"https://static.observableusercontent.com/files/589ada9c2e1350b2601d10710217308bffaa12984928134e1e113eca6cca428a9d08b3ea5f53141eef1b846f0e07c5b1352cefc8160308c01af0978648c765fd","name":"geoBoundaries-ATA-ADM0.geojson","type":"application/geo+json","lastModified":1739181882666.567,"size":118651},{"id":"372cc7ef303c61872388c9cd42e6ad20df778dee64eb757b644b2c85ae38080d79a7eedd013b3c1e94fd828ab6e47b97604623c0ed072173b0371f695f701e5e","href":"https://static.observableusercontent.com/files/372cc7ef303c61872388c9cd42e6ad20df778dee64eb757b644b2c85ae38080d79a7eedd013b3c1e94fd828ab6e47b97604623c0ed072173b0371f695f701e5e","name":"croquis.jpeg","type":"image/jpeg","lastModified":1740380754804.53,"size":1171178}] 29:{"id":"253b6e5d2a9f5732","slug":null,"title":"Ice melting in Antartica","thumbnail":"4ff4269e073896a0df80d463ab7670f1b8dad731f14006fe8a1904f933559906","access_level":"public","create_time":"$D2025-02-09T20:47:25.611Z","update_time":"$D2025-03-16T21:10:15.154Z","view_time":null,"first_public_time":"$D2025-02-17T10:12:51.196Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"8860a07fe3362f20","login":"ddleprat","name":"ddleprat","avatar_url":"https://avatars-next.observableusercontent.com/2f6af6638a27102be72a0ee1faff9927ed6ac1e2df196314e873d64cfce0ca41","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":681,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cb338d58be0a2168","login":"damien-delprat","name":"Damien Delprat","avatar_url":"https://avatars-next.observableusercontent.com/3d55d6a90fb7c3f0a0f1009883e4d7fcda61f12ecd78db6c987a75bdfece085c","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"cb338d58be0a2168","login":"damien-delprat","name":"Damien Delprat","avatar_url":"https://avatars-next.observableusercontent.com/3d55d6a90fb7c3f0a0f1009883e4d7fcda61f12ecd78db6c987a75bdfece085c","tier":null,"role":"editor"},{"type":"team","id":"8860a07fe3362f20","login":"ddleprat","name":"ddleprat","avatar_url":"https://avatars-next.observableusercontent.com/2f6af6638a27102be72a0ee1faff9927ed6ac1e2df196314e873d64cfce0ca41","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Ice melting in Antartica","cells":[{"id":412,"value":"

Ice melting in Antartica

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":664,"value":"Ice melting is one of the most direct impacts of climate change. Therefore, tracking data on ice melting in Antarctica helps scientists better understand its consequences. Visualizing this data allows for assessing the rate of ice loss, predicting future changes in sea levels, and informing policymakers on strategies to mitigate the effects of climate change. This project aims to visualize how ice melting is affecting Antarctica using scientific data from various sources.\n

\nMy first idea was to display the figures shown in the draft below :\n\n\n

A heatmap representing ice thickness on the continent
A plot representing the evolution of ice area over the year
A map representing the amount of melted ice over the continent
A plot representing the ice area during a selected year. This selected year could interact with other maps as well

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":654,"value":"croquis = FileAttachment(\"croquis.jpeg\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":672,"value":"$49","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":659,"value":"Select year:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":157,"value":"viewof selected_year = Inputs.select(new Set(sea_ice.map(d => d.year)).add(\"All\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"display = {\n // Create a grid container with 2 columns and 2 rows.\n const view = html`\n

\n `;\n \n // Wrap each plot in a div with a defined size.\n const mapContainer = html`

${map_yearly_melt_days}

`;\n const map2Container = html`

${ice_thickness_map}

`;\n const meltDaysPlot = html`

${melt_days_plot}

`;\n const seaIceContainer = html`

${sea_ice_plot}

`;\n\n \n // Append the plots to the grid container.\n view.appendChild(mapContainer);\n view.appendChild(meltDaysPlot);\n view.appendChild(map2Container);\n view.appendChild(seaIceContainer);\n \n return view;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"d3_geo = require(\"d3-geo-projection\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"d3_path = require(\"d3-geo-path\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"data = FileAttachment(\"melt_data_light.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"yearly_melt = FileAttachment(\"melt_data_year_light.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"ice_thickness = FileAttachment(\"mean_ice_thickness@2.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"mutable selected_lon = null;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"mutable selected_lat = null;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"meltDaysPerYear = Object.keys(yearly_melt)\n .sort((a, b) => a - b) // sort years numerically\n .map(year => {\n // find the record for the given lon/lat in the current year's array\n const record = yearly_melt[year].find(\n ({ lon, lat }) => lat === selected_lat && lon === selected_lon\n );\n // If not found, you could return null or any default value\n return { \n year: Number(year), // Convert year from string to number\n melt_days: record ? record.melt_days : 0 // Return 0 if not found\n };\n });","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"boundaries = FileAttachment(\"geoBoundaries-ATA-ADM0.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"sea_ice = FileAttachment(\"s_icearea@4.mon.csv\").csv()\n.then(data => {\n return data.map((d, i) => {\n let r = d\n r.index = i\n r[\"ice area\"] = Number(d[\"ice area\"])\n r[\"year\"] = d[\"Date\"].split(\"-\")[0]\n r[\"month\"] = display_months[d[\"Date\"].split(\"-\")[1]]\n r[\"time\"] = parseDate(d[\"Date\"])\n return r\n })\n})\n// TODO","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"parseDate = d3.timeParse(\"%Y-%m-%d\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"sea_ice_display = sea_ice\n.filter(d => {\n if(selected_year != \"All\"){\n return d.year == selected_year\n }\n return true\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"melt_days_plot = Plot.plot({\n title: selected_lat === null?\"Mean number of melt days over the years\":\"Number of melt days over the years\",\n marks: [\n Plot.line(meltDaysPerYear, {\n x: \"year\",\n y: \"melt_days\",\n stroke: \"green\",\n legend: true,\n strokeWidth: 2\n })\n ], \n y: {\n // domain: [0, Math.max(100, Math.max(meltDaysPerYear.map(d => d.melt_days)))], // Set Y axis domain with max melt_days\n domain: [0, 100],\n label: \"Melt Days\",\n format: \".0f\"\n },\n x: {\n label: \"Year\",\n tickFormat: d3.format(\"d\")\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"display_months = ({\n \"1\": \"Jan\",\n \"2\": \"Feb\",\n \"3\": \"Mar\",\n \"4\": \"Apr\",\n \"5\": \"May\",\n \"6\": \"Jun\",\n \"7\": \"Jul\",\n \"8\": \"Aug\",\n \"9\": \"Sep\",\n \"10\": \"Oct\",\n \"11\": \"Nov\",\n \"12\": \"Dec\"\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 24:null