29:null 2a:["$","title",null,{"children":"Arctic sea ice data | Tom Pearson | Observable"}] 2f:T60e,iceAreaLineChart = { const width = 500; const height = 500; const margin = { top:20, left:20, bottom:20, right:20 }; const plotHeight = height - (margin.top + margin.bottom); const plotWidth = width - (margin.bottom + margin.top); const svg = d3.create("svg") .attr("width", 500) .attr("height", 500); const xScale = d3.scaleTime() .domain([new Date(1978, 10),new Date(2023,1)]) .range([0,plotWidth]); const yScale = d3.scaleLinear() .domain([0,16]) .range([plotHeight,0]); const xAxis = d3.axisBottom(xScale); const yAxis = d3.axisLeft(yScale); const areaLine = d3.line() .x(d => xScale(new Date(d.date))) .y(d => yScale(Number(d.area))); const extentLine = d3.line() .x(d => xScale(new Date(d.date))) .y(d => yScale(Number(d.extent))); const plot = svg .append("g") plot.append("path") .attr("transform", `translate(${margin.left},${margin.top})`) .attr("stroke", "#33f") .attr("stroke-width", 1.5) .attr("fill", "none") .attr("d", areaLine(arcticExtentData)); plot.append("path") .attr("transform", `translate(${margin.left},${margin.top})`) .attr("stroke", "#F33") .attr("stroke-width", 1.5) .attr("fill", "none") .attr("d", extentLine(arcticExtentData)); svg.append("g") .attr("transform", `translate(${margin.left},${margin.top+plotHeight})`) .call(xAxis); svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`) .call(yAxis); return svg.node(); }30:T605,averageIceAreaLineChart = { const width = 500; const height = 500; const margin = { top:20, left:30, bottom:20, right:20 }; const plotHeight = height - (margin.top + margin.bottom); const plotWidth = width - (margin.bottom + margin.top); const svg = d3.create("svg") .attr("width", 500) .attr("height", 500); const xScale = d3.scaleTime() .domain([new Date(1978, 0),new Date(2023, 1)]) .range([0, plotWidth]); const yScale = d3.scaleLinear() .domain([8,12.5]) .range([plotHeight,0]); const xAxis = d3.axisBottom(xScale); const yAxis = d3.axisLeft(yScale); const areaLine = d3.line() .x(d => xScale(d.year)) .y(d => yScale(d.meanArea)); const extentLine = d3.line() .x(d => xScale(d.year)) .y(d => yScale(d.meanExtent)); const plot = svg .append("g") plot.append("path") .attr("transform", `translate(${margin.left}, ${margin.top})`) .attr("stroke", "#33f") .attr("stroke-width", 1.5) .attr("fill", "none") .attr("d", extentLine(annualMeanArcticIceArea)); plot.append("path") .attr("transform", `translate(${margin.left}, ${margin.top})`) .attr("stroke", "#f33") .attr("stroke-width", 1.5) .attr("fill", "none") .attr("d", areaLine(annualMeanArcticIceArea)); svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top+plotHeight})`) .call(xAxis); svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`) .call(yAxis); return svg.node(); }31:T699,yearlyCycleChart = { const width = 500; const height = 500; const margin = { top:20, left:30, bottom:20, right:20 }; const plotHeight = height - (margin.top + margin.bottom); const plotWidth = width - (margin.bottom + margin.top); const svg = d3.create("svg") .attr("width", 500) .attr("height", 500); const xScale = d3.scaleLinear() .domain([0, 11]) .range([0, plotWidth]); const yScale = d3.scaleLinear() .domain([0, 16]) .range([plotHeight,0]); const xAxis = d3.axisBottom(xScale); const yAxis = d3.axisLeft(yScale); const areaLine = d3.line() .x(d => xScale(d.month)) .y(d => yScale(d.area)); const extentLine = d3.line() .x(d => xScale(d.month)) .y(d => yScale(d.extent)); const plot = svg .append("g") annualMeanArcticIceArea.forEach((row,i) =>{ let oppacity = 1/(annualMeanArcticIceArea.length * 2) * i plot.append("path") .attr("transform", `translate(${margin.left}, ${margin.top})`) .attr("stroke", "#33f") .attr("stroke-opacity", oppacity) .attr("stroke-width", 1.5) .attr("fill", "none") .attr("d", extentLine(row.values)); plot.append("path") .attr("transform", `translate(${margin.left}, ${margin.top})`) .attr("stroke", "#f33") .attr("stroke-opacity", oppacity) .attr("stroke-width", 1.5) .attr("fill", "none") .attr("d", areaLine(row.values)); }) svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top+plotHeight})`) .call(xAxis); svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`) .call(yAxis); return svg.node(); }32:T5b9,seaIceAreasChart = { const width = 500; const height = 1900; const margin = { top:20, left:80, bottom:20, right:30 }; const plotHeight = height - (margin.top + margin.bottom); const plotWidth = width - (margin.right + margin.left); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", `0 0 ${width} ${height}`); const monthScale = d3.scaleLinear() .domain([0,11]) .range([0, plotWidth]); const yearScale = d3.scaleLinear() .domain([1977,2022]) .range([0, plotHeight]); const areaScale = d3.scaleSqrt() .domain([0, 17]) .range([0, 15]); const plot = svg .append('g') .attr('transform',`translate(${margin.left}, ${margin.top})`) const yearAxis = svg .append('g') .attr('transform',`translate(${margin.left-25}, ${margin.top})`); annualMeanArcticIceArea.forEach(yearData=>{ yearAxis.append('text') .attr('y', yearScale(yearData.year.getFullYear())) .attr('text-anchor','end') .attr('alignment-baseline','central') .attr('font-family','sans-serif') .text(yearData.year.getFullYear()); yearData.values.forEach(data=>{ plot.append('circle') .attr('cx', monthScale(data.month)) .attr('cy', yearScale(data.year)) .attr('r', areaScale(Number(data.area))) .attr('fill','#aaa') .attr('stroke','black'); }) }) return svg.node(); }33:[] 2d:{"id":"c2ba744ebdddc60b","slug":null,"title":"Arctic sea ice data","thumbnail":"d07b0285b3d49d1decfd1c568e02bd04d79d7fd2f0b6224f801ed1ce19183496","access_level":"public","create_time":"$D2022-10-14T09:03:53.114Z","update_time":"$D2022-10-14T15:37:56.686Z","view_time":null,"first_public_time":"$D2023-02-16T14:12:37.191Z","fork":{"id":"bd116742b1f91cf4","slug":"simple-d3","title":"Simple D3","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":3,"starred":false,"owner":{"type":"team","id":"45d8dac961c18abd","login":"tomgp","name":"Tom Pearson","avatar_url":"https://avatars-next.observableusercontent.com/26cbbccc572a8a25c540387278c92aae1c68384373da7f85ef1cd717c7fbf381","tier":"starter_2024"},"version":395,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"08c8ac6bee0bc7e8","login":"tomgp","name":"Tom Pearson","avatar_url":"https://avatars-next.observableusercontent.com/26cbbccc572a8a25c540387278c92aae1c68384373da7f85ef1cd717c7fbf381","tier":null}],"members":[{"type":"individual","id":"08c8ac6bee0bc7e8","login":"tomgp","name":"Tom Pearson","avatar_url":"https://avatars-next.observableusercontent.com/26cbbccc572a8a25c540387278c92aae1c68384373da7f85ef1cd717c7fbf381","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Arctic sea ice data","cells":[{"id":0,"value":"# Arctic sea ice data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":168,"value":"First, ice extent/ area, we can clearly see yearly fluctuations, in fact they tend to dominate the plot...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":192,"value":"## Monthly sea ice area (million km^2) from 1979 to now...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":273,"value":"Area\nExtent millions km²","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":14,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":195,"value":"one approach to make the chart more helpful might be to just show yearly averages...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":226,"value":"## Yearly mean sea ice area","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":261,"value":"Area\nExtent millions km²","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":198,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":244,"value":"NOTE: At the time I'm writing this 2022 data is incomplete so mean calculations will be a bit out of whack, this should fix itself eventually","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":284,"value":"## Yearly cycles of sea ice","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":304,"value":"Area\nExtent millions km².
Greater opacity = more recent","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":290,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":311,"value":"## Sea ice values by area","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":313,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":277,"value":"Notes:\n - [The difference between sea ice extent and sea ice area](https://blogs.egu.eu/divisions/cr/2020/04/10/did-you-know-the-difference-between-sea-ice-area-and-sea-ice-extent/)\n - [How do we measure sea ice?](https://blogs.egu.eu/divisions/cr/2017/10/27/image-of-the-week-of-comparing-oranges-and-apples-in-the-sea-ice-context/)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":282,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":92,"value":"arcticExtentData = {\n let minArea = 100;\n let minExtent = 100;\n let monthlyMinArea = [100,100,100,100,100,100,100,100,100,100,100,100];\n let monthlyMinExtent = [100,100,100,100,100,100,100,100,100,100,100,100];\n \n const list = d3.csvParse(extentCSV)\n .filter(d=>(Number(d.area)>0))\n .map(d=>{\n d.date = new Date(...d.date.split('-'));\n d.area = Number(d.area);\n d.extent = Number(d.extent);\n return d;\n })\n .sort(dateSort)\n .map((d,i)=>{\n minArea = Math.min(minArea, d.area);\n minExtent = Math.min(minArea, d.area);\n d.newMinAreaRecord = (minArea == d.area)&&i>12;\n d.newMinExtentRecord = (minArea == d.area)&&i>12;\n if(d.newMinAreaRecord){\n console.log(\"new\", minArea, i, d.date)\n }\n \n d.newMonthlyMinRecord \n return d;\n });\n return list; \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":200,"value":"annualMeanArcticIceArea = {\n const years = {};\n \n arcticExtentData.forEach(record=>{\n let year = record.date.getFullYear();\n let month = record.date.getMonth();\n if( !years[year] ){\n years[year] = [];\n }\n console.log('y', year);\n years[year].push( {\n area: Number(record.area),\n extent: Number(record.extent),\n year,\n month\n });\n });\n\n return Object.entries(years).map(([year, values]) => ({ \n year:new Date(year),\n meanArea: d3.mean(values, d=>d.area),\n meanExtent: d3.mean(values, d=>d.extent),\n values\n }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":140,"value":"dateSort = (a,b)=>{\n return (a.date > b.date) ? 1 : -1;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":86,"value":"extentCSV = fetch(\"https://raw.githubusercontent.com/tomgp/sea-ice-volume/main/processed/north-extent.csv\").then((response) => response.text())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":100,"value":"volumeCSV = fetch(\"https://raw.githubusercontent.com/tomgp/sea-ice-volume/main/processed/north-volume.csv\").then((response) => response.text())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2e:"$2d:body"