2b:null 2c:["$","title",null,{"children":"Artic Sea Ice Age Radial Chart | David Chung | Observable"}] 31:T15e7,radial_chart = { const width = 640; const height = width; const margin = 10; const innerRadius = width / 5; const outerRadius = width / 2 - margin; const data = monthly_min_max; const year = date.getFullYear(); const month = date.getMonth(); const currentItem = getMonthlyData(year, month).sort((a, b) => a.date - b.date); const currentDistribution = calculatePercentages(getDistribution(year, month)); const currentMinMax = d3.extent(currentItem, d => d.extent); const x = d3.scaleUtc() .domain([new Date("2000-01-01"), new Date("2000-01-31")]) .range([0, 2 * Math.PI]); const y = d3.scaleRadial() .domain([d3.min(data, d => 0), d3.max(data, d => d.max)]) .range([0, outerRadius]); const line = d3.lineRadial() .curve(d3.curveLinearClosed) .angle(d => x(new Date(d.date))); const area = d3.areaRadial() .curve(d3.curveLinearClosed) .angle(function(d) { return x(new Date(d.date)); }); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("style", "font: 10px sans-serif;") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round"); // Area distribution. Each one will be a percentage of something. We should order from oldest to youngest. // extent * distribution = // offset inner radius = prev + offset const iceAgeScale = d3.scaleSequential(d3.interpolateYlGnBu).domain([0, 4]).nice(); let offset = 0; for (let i = 0; i < 5; i++) { const currentPercentage = parseFloat(currentDistribution[4-i]) / 100; const currentAmount = currentPercentage * currentItem[0].extent; svg.append("path") .attr("fill", function(d){ return iceAgeScale(4-i); }) .attr("fill-opacity", 0.5) .attr("d", area .innerRadius(d => y(offset)) .outerRadius(d => y(currentAmount + offset)) (currentItem)); offset += currentAmount; } svg.append("path") .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .attr("d", line .radius(d => y(d.extent)) (currentItem)); for (const tracker of min_max) { svg.append("path") .attr("fill", "none") .attr("stroke", "grey") .attr("stroke-width", 1.5) .attr("d", line .radius(d => y(d.extent)) (tracker.data)); } if (min_max.length == 0) { min_max[0] = { extent: currentMinMax[0], data: currentItem }; min_max[1] = { extent: currentMinMax[1], data: currentItem }; } else if (min_max[0].extent < currentMinMax[0]) { min_max[0] = { extent: currentMinMax[0], data: currentItem };; } else if (min_max[1].extent > currentMinMax[1]) { min_max[1] = { extent: currentMinMax[0], data: currentItem };; } if (year % 10 == 0 && month == 1) { averages.push(min_max[0]); averages.push(min_max[1]); min_max.splice(0,2); } let i = 0; for (const tracker of averages) { svg.append("path") .attr("fill", "none") .attr("stroke", "black") .attr("stroke-opacity", function(d) { return Math.sqrt(i / (averages.length - 1)); }) .attr("stroke-width", 1.5) .attr("d", line .radius(d => y(d.extent)) (tracker.data)); i = i + 1; } svg.append("g") .selectAll() .data(x.ticks()) .join("g") .each((d, i) => d.id = DOM.uid("cell")) .call(g => g.append("path") .attr("stroke", "#000") .attr("stroke-opacity", 0.2) .attr("d", d => ` M${d3.pointRadial(x(d), 0)} L${d3.pointRadial(x(d), outerRadius)} `)) .call(g => g.append("path") .attr("id", d => d.id.id) .datum(d => [d, d3.utcMonth.offset(d, 1)]) .attr("fill", "none") .attr("d", ([a, b]) => ` M${d3.pointRadial(x(a), 0)} A${innerRadius},${innerRadius} 0,0,1 ${d3.pointRadial(x(b), 0)} `)) svg.append("g") .attr("text-anchor", "middle") .selectAll() .data(y.ticks().reverse()) .join("g") .call(g => g.append("circle") .attr("fill", "none") .attr("stroke", "currentColor") .attr("stroke-opacity", 0.2) .attr("r", y)) .call(g => g.append("text") .attr("y", d => -y(d)) .attr("dy", "0.35em") .attr("stroke", "#fff") .attr("stroke-width", 5) .attr("fill", "currentColor") .attr("paint-order", "stroke") .text((x, i) => `${x.toFixed(0)}${i ? "" : ""}`) .clone(true) .attr("y", d => y(d))); const n = 722; const m = 722; const contour_width = 500; const contours = d3.contours().size([n, m]); const color = d3.scaleSequential(d3.interpolateYlGnBu).domain([1, 5]).nice(); const path = d3.geoPath().projection(d3.geoIdentity().scale(contour_width / n)); const ice_data = getContour(year, month); // we can swap this out with contours later for speed efficency. svg.append("g") .attr("class", "arctic-ice-cap") .attr("transform", "rotate(180, 0, 0) translate(-225,-225)") .selectAll() .data(ice_data) .join("path") .attr("d", function(d) { return path(d); }) .attr("fill", function(d,i) { return color(i); }) .attr("stroke", function(d,i) { if (i < 2) { return "black"; } return "none"; }); return svg.node(); }32:T521,function expandDailyDataToMonthly(data) { const dataByYear = d3.group(data, d => d.year); const monthlyExpandedData = Array.from(dataByYear, ([year, values]) => { const valuesForYear = dataByYear.get(year); console.log(valuesForYear); const monthlyMins = d3.rollup(valuesForYear, v => d3.min(v, d => d.extent), d => d.date.getMonth()); const monthlyMaxs = d3.rollup(valuesForYear, v => d3.max(v, d => d.extent), d => d.date.getMonth()); const monthlyAverages = d3.rollup(valuesForYear, v => d3.mean(v, d => d.extent), d => d.date.getMonth()); const result = []; const startDate = new Date(year, 0, 1); let endDate = new Date(year, 11, 1); let currentMonthStart = startDate; while (currentMonthStart <= endDate) { let currentMonthEnd = new Date(year, currentMonthStart.getMonth() + 1, 0); result.push({ date: new Date(currentMonthStart), year: year, month: currentMonthStart.getMonth(), min: monthlyMins.get(currentMonthStart.getMonth()), max: monthlyMaxs.get(currentMonthStart.getMonth()), avg: monthlyAverages.get(currentMonthStart.getMonth()) }); currentMonthStart.setMonth(currentMonthStart.getMonth() + 1); } return result; }); return monthlyExpandedData.flat(); }33:T45f,monthly_dates = groupedByMonth.map((monthGroup) => { const year = monthGroup[0]; if (year <= 2022 && year >= 1984) { const months = monthGroup[1]; for (const month in months) { months[month] = [parseInt(month), generateDatesWithAverage(months[month], year, month)]; } function calculateAverage(monthData) { const totalExtent = monthData.reduce((sum, entry) => sum + entry.extent, 0); return totalExtent / monthData.length; } function generateDatesWithAverage(monthData, year, month) { const average = calculateAverage(monthData[1]); const result = []; for (let day = 1; day <= 31; day++) { result.push({ date: new Date(2000, 0, day).toISOString(), extent: average, year: year, month: month, }); } return result; } // Replace existing data with the generated dates and averages // monthGroup[1] = generateDatesWithAverage(monthGroup[1], year, month); } return monthGroup; }).filter(function(d) { return d[0] >= 1984 && d[0] <= 2022; });34:[{"id":"acfceaa9d21c07ad0a7a96e9f48a699faa4efea1bb00aaa8794f871b2d259dd68f311e738646c234e54a01200793d8c3018f88610affbd2b190c52d518c15d9d","href":"https://static.observableusercontent.com/files/acfceaa9d21c07ad0a7a96e9f48a699faa4efea1bb00aaa8794f871b2d259dd68f311e738646c234e54a01200793d8c3018f88610affbd2b190c52d518c15d9d","name":"value_counts.json","type":"application/json","lastModified":1710103996591.516,"size":13307},{"id":"5f1b8a588fe8999b5b69def480bdc299c7e323fb7f89fefc500362a60de46dc7ab5f996edea4ff66fd3b3b47afe6ce0383949b8f602cbfc8936547e64bad0ed3","href":"https://static.observableusercontent.com/files/5f1b8a588fe8999b5b69def480bdc299c7e323fb7f89fefc500362a60de46dc7ab5f996edea4ff66fd3b3b47afe6ce0383949b8f602cbfc8936547e64bad0ed3","name":"1980_contours@2.zip","type":"application/zip","lastModified":1710112491044.733,"size":9158436},{"id":"59fe17a430df85c60403b51496b927f5895d0067456cf282d337f9392528a57ccc25c118358a59e5d69bf04b17887b3899eb4771657eeb8b4429306d3e440179","href":"https://static.observableusercontent.com/files/59fe17a430df85c60403b51496b927f5895d0067456cf282d337f9392528a57ccc25c118358a59e5d69bf04b17887b3899eb4771657eeb8b4429306d3e440179","name":"2010_contours@1.zip","type":"application/zip","lastModified":1710112944460.504,"size":8813721},{"id":"39b098b84fe754b891c73da734ded28a459c64819f7ef07c00f7d94662d74e30f975743afa2da4eac5af24d33efb022eda37a9ce720975186f7202f43a2adee4","href":"https://static.observableusercontent.com/files/39b098b84fe754b891c73da734ded28a459c64819f7ef07c00f7d94662d74e30f975743afa2da4eac5af24d33efb022eda37a9ce720975186f7202f43a2adee4","name":"1990_contours@1.zip","type":"application/zip","lastModified":1710112918703.658,"size":14709556},{"id":"8d7c7ba2902e20e0d9ee3d65e9cc7e8b3108b0b9f0357a974c00a068a5a04508732c03d85ea630afb55efbff1966a298fce5129898ab2f48e604057b31583fce","href":"https://static.observableusercontent.com/files/8d7c7ba2902e20e0d9ee3d65e9cc7e8b3108b0b9f0357a974c00a068a5a04508732c03d85ea630afb55efbff1966a298fce5129898ab2f48e604057b31583fce","name":"2000_contours@1.zip","type":"application/zip","lastModified":1710112935632.134,"size":13878224},{"id":"0f23d4da4f212c4f32ef16ea8e9f7831b60efa54815c0628b8643ce0cd2ae773b06c0f40e30d6d9dbf94a9dd9492a7e7ae4f84b13db40d3fd2e429545d506299","href":"https://static.observableusercontent.com/files/0f23d4da4f212c4f32ef16ea8e9f7831b60efa54815c0628b8643ce0cd2ae773b06c0f40e30d6d9dbf94a9dd9492a7e7ae4f84b13db40d3fd2e429545d506299","name":"2020_contours@1.zip","type":"application/zip","lastModified":1710112948507.517,"size":2037861},{"id":"e78ff1f5adc7ddc031f35fe178973122941cdd798e5fc4e9044139612876b2ed520debab3d13993dedf167f840af221dbd8e02325b57b5c183fae3179266bc38","href":"https://static.observableusercontent.com/files/e78ff1f5adc7ddc031f35fe178973122941cdd798e5fc4e9044139612876b2ed520debab3d13993dedf167f840af221dbd8e02325b57b5c183fae3179266bc38","name":"N_seaice_extent_daily_v3@1.0.csv","type":"text/csv","lastModified":1709411050267.446,"size":1738104}] 2f:{"id":"19b1c60b657b421f","slug":null,"title":"Artic Sea Ice Age Radial Chart","thumbnail":"dcaffecdb73713318cf9f0d56eb96ad7f7b98e36f1bd1a82e42991363a2c0951","access_level":"public","create_time":"$D2024-03-02T20:22:24.401Z","update_time":"$D2024-08-21T18:20:39.349Z","view_time":null,"first_public_time":"$D2024-03-10T20:22:45.900Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"c6c194ae539fe1b6","login":"davidmchung123","name":"David Chung","avatar_url":"https://avatars-next.observableusercontent.com/7a790a48b01de24d496bc40861e79d0fa2453f577c980a3b466fff235ddb1361","tier":"starter_2024"},"version":1746,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9d2e4251d43434ca","login":"davidmchung123","name":"David Chung","avatar_url":"https://avatars-next.observableusercontent.com/7a790a48b01de24d496bc40861e79d0fa2453f577c980a3b466fff235ddb1361","tier":null}],"members":[{"type":"individual","id":"9d2e4251d43434ca","login":"davidmchung123","name":"David Chung","avatar_url":"https://avatars-next.observableusercontent.com/7a790a48b01de24d496bc40861e79d0fa2453f577c980a3b466fff235ddb1361","tier":null,"role":"editor"},{"type":"team","id":"c6c194ae539fe1b6","login":"davidmchung123","name":"David Chung","avatar_url":"https://avatars-next.observableusercontent.com/7a790a48b01de24d496bc40861e79d0fa2453f577c980a3b466fff235ddb1361","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Artic Sea Ice Age Radial Chart","cells":[{"id":0,"value":"# Artic Sea Ice Age Radial Chart\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":458,"value":"Basis. https://nsidc.org/data/soac/sea-ice-age. This is around 50mb... I can't figure out a better way to do this. This is an improvement but I think we need the decade averages. Hmm... This doesn't do a very good job of showing comparison we should add an additional visualization for that.\nWell we've tried monthly averages and decade maxs and mins. Maybe we should do average max's and mins for a decade.\n\nTODO: Color Scale Adjustment\n- Multiple Charts at different time periods.\n- Annotations for Decade Minimums and maybe maxs?\n- Legend and Color Scale for Decades?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":697,"value":"viewof date = Scrubber(dates, {\n delay: 125,\n autoplay: false,\n loop: false,\n format: date => date.toLocaleString(\"en\", {month: \"long\", year: \"numeric\"})\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1705,"value":"Legend(d3.scaleSequential(d3.interpolateYlGnBu).domain([1, 5]).nice(), {\n title: \"Ice Age (Years)\" \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1533,"value":"mutable averages = [];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1495,"value":"mutable min_max = [];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":700,"value":"dates = monthly_min_max.map(function(d) { \nif (d.date.getFullYear() >= 1984 && d.date.getFullYear() <= 2022) {\n return d.date;\n }\n}).filter((d) => d != undefined);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1564,"value":"function calculatePercentages(array) {\n const totalSum = array.reduce((sum, value) => sum + value, 0);\n\n return array.map((value) => (value / totalSum) * 100).map(percentage => percentage.toFixed(2)); // Round to two decimal places\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1642,"value":"\nfunction getMonthName(monthIndex) {\n const months = [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\"];\n if (monthIndex >= 0 && monthIndex <= 11) {\n return months[monthIndex];\n } else {\n return \"Invalid month index\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":767,"value":"monthly_min_max = expandDailyDataToMonthly(monthly_daily_extent).filter(function(d) {\n return d.avg !== undefined && d.year >= 1980;\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":726,"value":"function getMonthlyData(year, month) {\n return monthly_dates.find(function(d) {\n return d[0] == year;\n })[1].find(function(d) {\n return d[0] == month;\n })[1];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1200,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":507,"value":"groupedByMonth = d3.groups(monthly_daily_extent, \n d => d.year, // Group by year first\n d => d.month // Then group by month within each year\n );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1169,"value":"function getContour(year, month) {\n // Linear Search: Simplest approach, inefficient for large datasets\n for (let i = 0; i < contours.length; i++) {\n if (contours[i].year === year && contours[i].month === month) {\n return contours[i].contours; // Return the 'contours' array\n }\n }\n\n // If no match is found:\n return null; // Or throw an error if you prefer stricter handling\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1486,"value":"function getDistribution(year, month) {\n if (year < 1984 || year > 2022 || month < 0 || month > 11) {\n return null; // Return null for invalid input\n }\n\n const yearIndex = year - 1984; // Calculate the index based on the offset\n const monthIndex = month;\n\n return distribution[yearIndex][monthIndex];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"monthly_daily_extent = d3.groups(n_seaice_extent_daily_v310, function(d) { \n return new Date(d.Year, d.Month - 1, d.Day);\n}).map(group => { \n return {\n date: new Date(2000, group[0].getMonth(), group[0].getDate()), // Set date to 2000-month-day \n extent: group[1].map(d => d.Extent)[0],\n year: group[0].getFullYear(), // Extract the year\n month: group[0].getMonth() // Extract the year \n };\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1430,"value":"contours = {\n const contourList = [contours_1980, contours_1990, contours_2000, contours_2010, contours_2020];\n const data = [];\n\n for (const year in contourList) {\n const fileData = await processData(contourList[year]);\n data.push(fileData.flat()); \n }\n return data.flat();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1484,"value":"distribution = FileAttachment(\"value_counts.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1450,"value":"contours_2020 = FileAttachment(\"2020_contours@1.zip\").zip()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1449,"value":"contours_2010 = FileAttachment(\"2010_contours@1.zip\").zip()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1448,"value":"contours_2000 = FileAttachment(\"2000_contours@1.zip\").zip()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1447,"value":"contours_1990 = FileAttachment(\"1990_contours@1.zip\").zip()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1426,"value":"contours_1980 = FileAttachment(\"1980_contours@2.zip\").zip();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":896,"value":"async function processData(file) { \n const data = [];\n function extractYearFromFilename(filename) {\n // Example if filenames are like \"data_1983.json\":\n return filename.match(/(\\d{4})_/)[1]; \n }\n\n \n for (const filename of file.filenames) {\n const decade = extractYearFromFilename(filename); // Implement this function\n const fileData = await file.file(filename).json();\n data.push(fileData.flat()); \n }\n\n return data;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"n_seaice_extent_daily_v310 = await FileAttachment(\"N_seaice_extent_daily_v3@1.0.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"n_seaice_extent_daily_v310","database":"$undefined"},{"id":704,"value":"import {Scrubber} from \"@mbostock/scrubber\"\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1702,"value":"import {Legend} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"