31:T500,## Introduction Our project aims to visualize the extreme hot weather and temperature changes in China from 1951 to 2022. This summer, we’ve seen dramatic changes in average temperature in some of the major cities in southwest China like Chongqing, Chengdu, etc. These extreme weather events have led to power shortages, workers' heat deaths, and other compounding effects on the general public, especially the underserved workers' communities in China. Some media has visualized the temperature data over the last decade, but we haven’t seen a comprehensive data analysis dated back to as early as 1951. We extracted data from [National Centers For Environmental Information](https://www.ncei.noaa.gov/) and visualized the temperature changes in Chinese cities from 1951 to 2022. We hope to shed light on the increasing climate challenges China faced over the past seven decades, and how the worsening climate has led to the economic slowdown and affected migrant workers’ life. We hope this data project can help us identify some under-reported stories of climate resilience in China. For example, we identified Guangzhou, Hainan, Yunan, and Guangxi, four provinces that haven’t been heavily covered by the media, have shown increasing heat waves and climate challenges.32:T43d,map = { const width = 960 const height = 500 const projection = d3.geoMercator() //.fitSize([width, height], test) .center([108.8, 37.9]) .scale(630) const path = d3.geoPath().projection(projection) const colorScale = d3.scaleSequential([0, 100], d3.interpolateReds) const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "width: 100%; height: auto; height: intrinsic;") svg.selectAll('path') .data(mapData.features) .join('path') .attr("fill", "lightgrey") .attr("d", path) // svg.append("path") // .datum(test) // .attr("fill", "lightgrey") // .attr("d", path) svg.selectAll("circle") .data(data) .enter().append("circle") .attr("cx", d => projection([d.longitude, d.latitude])[0]) .attr("cy", d => projection([d.longitude, d.latitude])[1]) .attr("r", 5) .attr("fill", d => colorScale(d[year])) return svg.node() }33:Ta7f,chart = { const width = 200; const height = 120; const div = html`

` const svg = d3.select(div).selectAll("svg") .data(data) .enter().append("svg") .attr("width", width) .attr("height", height) .attr("class", (d, i) => `plot${i}`) const xScale = d3.scaleBand().domain(X).range([margin.left, width - margin.right]) //const yScale = d3.scaleLinear().domain([0, highestTemp(data)]).range([height - margin.bottom, margin.top]) const yScale = d3.scaleLinear().domain([0, 100]).range([height - margin.bottom, margin.top]) const xAxis = d3.axisBottom(xScale).tickValues(xScale.domain().filter((d,i) => !((i + 1) % 20))) const yAxis = d3.axisLeft(yScale).ticks(5) svg.append("rect") .attr("width", "100%") .attr("height", "100%") .attr("fill", d => d.slope > 0 ? "#ffeeed" : "#edeeff") svg.append("text") .attr("dx", width - 25) .attr("dy", 10) .style("text-anchor", "end") .style("font", "10px sans-serif") .text(d => d.City + ", " + d.Province) svg.append("g") .attr("class", "bars") .selectAll(".plot") .data((d, i) => { return Object.values(data[i]).slice(0, -8).map(item => [item, d.slope]) }) .enter().append("rect") .attr("x", (d, i) => { return xScale(X[i]) }) .attr("y", (d, i) => { return yScale(d[0]) }) .attr("height", (d, i) => i < 73 ? yScale(0) - yScale(d[0]) : 0) .attr("width", xScale.bandwidth()) .attr("fill", d => d[1] > 0.58 ? "#FF8000" : "lightgrey") .attr("opacity", 0.7) svg.append("line") .attr("x1", xScale("1951")) .attr("y1", (d, i) => { return yScale(d.slope * 1951 + d.intercept) }) .attr("x2", xScale("2022")) .attr("y2", (d, i) => { return yScale(d.slope * 2022 + d.intercept) }) .attr("stroke", d => d.slope > 0 ? "red" : "blue") .attr("stroke-width", 2) svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(yAxis) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .attr("x2", width - margin.left - margin.right) .attr("stroke-opacity", 0.1)) .call(g => g.append("text") .attr("x", -margin.left) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text("Frequency")) svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(xAxis) .call(g => g.append("text") .attr("x", width / 2) .attr("y", 30) .attr("fill", "currentColor") .attr("text-anchor", "middle") .text("Date")); return div; }34:T47c,## Chongqing is experiencing hotter summer since 2006 and hit the highest this year After exploratory data analysis, among the 188 cities in the database, we chose Chongqing as an emblematic case to show how climate change has affected the average temperature locally in China. Chongqing is the hottest city in China this year. The data visualization shows that the heatwave in 2022 is extremely higher than in previous years. The average temperatures from July 1 to August 31 (summer) have increased strikingly since 2006. [Local media coverage](https://chinadigitaltimes.net/chinese/686049.html) has shown an increasing number of Chinese workers, especially from migrant communities, have suffered from [the extreme heatwave in Chongqing and Sichuan provinces](https://www.sixthtone.com/news/1008183/china-sees-rising-extreme-weather-amid-global-warming%2C-report-says). [Power shortages](https://www.bloomberg.com/news/articles/2022-07-14/china-s-heatwave-turns-deadly-as-industrial-power-cuts-begin) and [deaths of heat stokes](https://www.wsws.org/en/articles/2022/10/18/vyzg-o18.html) have been the major threats to the local communities. 35:T864,// Copyright 2021, Observable Inc. // Released under the ISC license. // https://observablehq.com/@d3/color-legend // Modified by Shuai Hao function Swatches(color, { columns = null, format, unknown: formatUnknown, swatchSize = 15, swatchWidth = swatchSize, swatchHeight = swatchSize, marginLeft = 0 } = {}) { const id = `-swatches-${Math.random().toString(16).slice(2)}`; const unknown = formatUnknown == null ? undefined : color.unknown(); const unknowns = unknown == null || unknown === d3.scaleImplicit ? [] : [unknown]; const domain = color.domain().concat(unknowns); if (format === undefined) format = x => x === unknown ? formatUnknown : x; function entity(character) { return `&#${character.charCodeAt(0).toString()};`; } if (columns !== null) return htl.html`

${domain.map(value => { const label = `${format(value)}`; return htl.html`

${label}

`; })}

`; return htl.html`

${domain.map(value => htl.html`${format(value)}`)}

`; }36:T1146,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/calendar-view // Modified by Shuai Hao function Calendar(data, { x = ([x]) => x, // given d in data, returns the (temporal) x-value y = ([, y]) => y, // given d in data, returns the (quantitative) y-value title, // given d in data, returns the title text width = 928, // width of the chart, in pixels cellSize = 17, // width and height of an individual day, in pixels weekday = "monday", // either: weekday, sunday, or monday formatDay = i => "SMTWTFS"[i], // given a day number in [0, 6], the day-of-week label formatMonth = "%b", // format specifier string for months (above the chart) yFormat, // format specifier string for values (in the title) colors = d3.interpolatePiYG } = {}) { // Compute values. const X = d3.map(data, x); const Y = d3.map(data, y); const I = d3.range(X.length); const countDay = weekday === "sunday" ? i => i : i => (i + 6) % 7; const timeWeek = weekday === "sunday" ? d3.utcSunday : d3.utcMonday; const weekDays = weekday === "weekday" ? 5 : 7; const height = cellSize * (weekDays + 2); // Compute a color scale. This assumes a diverging color scheme where the pivot // is zero, and we want symmetric difference around zero. const max = d3.quantile(Y, 0.9975, Math.abs); const min = d3.quantile(Y, 0.0025, Math.abs); const color = d3.scaleSequential([+min, +max], colors).unknown("none"); // Construct formats. formatMonth = d3.utcFormat(formatMonth); // Compute titles. if (title === undefined) { const formatDate = d3.utcFormat("%B %-d, %Y"); const formatValue = color.tickFormat(100, yFormat); title = i => `${formatDate(X[i])}\n${formatValue(Y[i])}`; } else if (title !== null) { const T = d3.map(data, title); title = i => T[i]; } // Group the index by year, in reverse input order. (Assuming that the input is // chronological, this will show years in reverse chronological order.) const years = d3.groups(I, i => X[i].getUTCFullYear()); function pathMonth(t) { const d = Math.max(0, Math.min(weekDays, countDay(t.getUTCDay()))); const w = timeWeek.count(d3.utcYear(t), t); return `${d === 0 ? `M${w * cellSize},0` : d === weekDays ? `M${(w + 1) * cellSize},0` : `M${(w + 1) * cellSize},0V${d * cellSize}H${w * cellSize}`}V${weekDays * cellSize}`; } const svg = d3.create("svg") .attr("width", width) .attr("height", height * years.length / 4) .attr("viewBox", [0, 0, width, height * years.length / 4]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;") .attr("font-family", "sans-serif") .attr("font-size", 10); const year = svg.selectAll("g") .data(years) .join("g") .attr("transform", (d, i) => `translate(${40.5 + (d[0] - 3) % 4 * 230},${height * Math.floor(i / 4) + cellSize * 1.5})`); year.append("text") .attr("x", -5) .attr("y", -5) .attr("font-weight", "bold") .attr("text-anchor", "end") .text(([key]) => key); year.append("g") .attr("text-anchor", "end") .selectAll("text") .data(weekday === "weekday" ? d3.range(1, 6) : d3.range(7)) .join("text") .attr("x", -5) .attr("y", i => (countDay(i) + 0.5) * cellSize) .attr("dy", "0.31em") .text(formatDay); const cell = year.append("g") .selectAll("rect") .data(weekday === "weekday" ? ([, I]) => I.filter(i => ![0, 6].includes(X[i].getUTCDay())) : ([, I]) => I) .join("rect") .attr("width", cellSize - 1) .attr("height", cellSize - 1) .attr("x", i => (timeWeek.count(d3.utcYear(X[i]), X[i]) - 25) * cellSize + 0.5) .attr("y", i => countDay(X[i].getUTCDay()) * cellSize + 0.5) .attr("fill", i => color(Y[i])); if (title) cell.append("title") .text(title); const month = year.append("g") .selectAll("g") .data(([, I]) => d3.utcMonths(d3.utcMonth(X[I[0]]), X[I[I.length - 1]])) .join("g"); month.filter((d, i) => i).append("path") .attr("fill", "none") .attr("stroke", "#fff") .attr("stroke-width", 3) .attr("d", pathMonth); month.append("text") .attr("x", d => (timeWeek.count(d3.utcYear(d), timeWeek.ceil(d)) - 25) * cellSize + 2) .attr("y", -5) .text(formatMonth); return Object.assign(svg.node(), {scales: {color}}); }37:[{"id":"ed270edca951646136f5f2d3f4996fe46cd6d9fd09f999fc2d0d1efc4a2d1c7c4ef2cea50a0ba6539a4db1c11a09df7bd5c222cc6e7424e2493ffbf695055586","href":"https://static.observableusercontent.com/files/ed270edca951646136f5f2d3f4996fe46cd6d9fd09f999fc2d0d1efc4a2d1c7c4ef2cea50a0ba6539a4db1c11a09df7bd5c222cc6e7424e2493ffbf695055586","name":"chinatop95percentile_v6.csv","type":"text/csv","lastModified":1667498303204.33,"size":51841},{"id":"a092b4b8944ae91c6decef1a279b27b2c1f9f85569d3bd1696d6c51e825f9ba756030bac8d421cd3d4a29754434d728de104d4037111034d5a5774d754f9c92d","href":"https://static.observableusercontent.com/files/a092b4b8944ae91c6decef1a279b27b2c1f9f85569d3bd1696d6c51e825f9ba756030bac8d421cd3d4a29754434d728de104d4037111034d5a5774d754f9c92d","name":"GUANGZHOU_summer.csv","type":"text/csv","lastModified":1667415061726.447,"size":141797},{"id":"1b85df3a75ece86259e91cd38d9f6b93ee2ffb299c42e147ef02035f1d7f2bb8d41e7b1b76b97be185860023d0ec151d623af6d8d9f43426bce2d3df7fcbe294","href":"https://static.observableusercontent.com/files/1b85df3a75ece86259e91cd38d9f6b93ee2ffb299c42e147ef02035f1d7f2bb8d41e7b1b76b97be185860023d0ec151d623af6d8d9f43426bce2d3df7fcbe294","name":"CHONGQING_summer.csv","type":"text/csv","lastModified":1667415061866.607,"size":141333},{"id":"20c0599bea00eafcb2c0eaf8e7ceb46b3cb2651fbb643524c90f025b8c62fdf267fb14acd0b7c5138b8bfd24cb8905d616f5d44ef57e66358f4c0afb49b38862","href":"https://static.observableusercontent.com/files/20c0599bea00eafcb2c0eaf8e7ceb46b3cb2651fbb643524c90f025b8c62fdf267fb14acd0b7c5138b8bfd24cb8905d616f5d44ef57e66358f4c0afb49b38862","name":"chinatop95percentile_v6@1.csv","type":"text/csv","lastModified":1667524444845.223,"size":51832},{"id":"34492ebca01a8556c16a2a43388e74c6b183f0d882c5facb2e55992fb79b4b72142dfaa32388527ae9ed2f34d14449550f23175e912591da2df37731c97acb71","href":"https://static.observableusercontent.com/files/34492ebca01a8556c16a2a43388e74c6b183f0d882c5facb2e55992fb79b4b72142dfaa32388527ae9ed2f34d14449550f23175e912591da2df37731c97acb71","name":"chinatop95percentile_v6@2.csv","type":"text/csv","lastModified":1667524606776.374,"size":51827}] 2f:{"title":"Chinese Cities are Suffering from More Extreme Hot Days","cells":[{"id":0,"value":"# Chinese Cities are Suffering from More Extreme Hot Days","pinned":false,"hidden":false,"mode":"md"},{"id":693,"value":"by Jiahui Huang, Chuqin Jiang and Shuai Hao","pinned":false,"hidden":false,"mode":"md"},{"id":571,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":588,"value":"## More extreme hot days in recent years, especially from 2010\nIn this part, we map the number of top 5% hottest days in each weather station of that given year. The deeper the red is, the bigger the number is. \n\nAs you drag the bar from 1951 to 2022, more and more deep red dots appear on the map, especially in the southern part of China since 2010. In 2022, more central provinces see more deep red dots.","pinned":false,"hidden":false,"mode":"md"},{"id":303,"value":"viewof year = slider({\n min: d3.min(X.map(d => parseInt(d))), \n max: d3.max(X.map(d => parseInt(d))), \n step: 1, \n value: 2022, \n title: \"Years\", \n description: \"Select a year\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"Legend(d3.scaleSequential([0, 100], d3.interpolateReds), {\n title: \"Number of Hot Days over the 95th Percentile of the History\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":325,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":433,"value":"## Number of hottest days went up in 96% Chinese stations; the rest are due to missing data\nHere, we created small multiples for each weather station. Only 7 out of 188 stations see the drop of hottest days from 1951 to 2022, 3 of which are due to the missing data. We also highlighted the top 10 stations experiencing the most dramatic changes. Most of them are located in the southern provinces, including Guangdong, Hainan and Yunnan.","pinned":false,"hidden":false,"mode":"md"},{"id":514,"value":"Swatches(d3.scaleOrdinal([\"Number of Hot Days Going Down\", \"Number of Hot Days Going Up\"], [\"#edeeff\", \"#ffeeed\"]), {\n columns: \"250px\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":656,"value":"$34","pinned":false,"hidden":false,"mode":"md"},{"id":470,"value":"key = Legend(chart2.scales.color, {title: \"Summer Daily Temperature\", marginLeft: 40})","pinned":false,"hidden":false,"mode":"ojs"},{"id":455,"value":"chart2 = Calendar(chongqing, {\n x: d => d.Date,\n y: d => d[\"TAVG (Degrees Fahrenheit)\"],\n width,\n colors: d3.interpolateReds\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":496,"value":"## Guangzhou Weather in the Summer","pinned":false,"hidden":false,"mode":"md"},{"id":674,"value":"Guangzhou is the top major city in China which has seen the most striking increase of summer daily temperature from 1951 to 2022. We chose Guangzhou because it's an emblematic case representing how temperature has risen dramaticly in southern China. Since 2014, Guangzhou has more than 50 days of extreme heatwaves in the summer while before it was only around 10 days.","pinned":false,"hidden":false,"mode":"md"},{"id":492,"value":"key2 = Legend(chart2.scales.color, {title: \"Summer Daily Temperature\", marginLeft: 40})","pinned":false,"hidden":false,"mode":"ojs"},{"id":490,"value":"chart3 = Calendar(guangzhou, {\n x: d => d.Date,\n y: d => d[\"TAVG (Degrees Fahrenheit)\"],\n width,\n colors: d3.interpolateReds\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":686,"value":"We created this project to document and show the patterns of how China has gotten hotter by conducting an exploratory data analysis. From this, we’d love to see some potential data stories about climate resilience in China. ","pinned":false,"hidden":false,"mode":"md"},{"id":667,"value":"*Note: This database is as granular as the weather station level. Some cities may include more than one weather station based on the NCEI database. Weather stations with more than 20% of missing data were not included. The latest data was from Sept. 18, 2022.*\n","pinned":false,"hidden":false,"mode":"md"},{"id":21,"value":"## Data","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"data = FileAttachment(\"chinatop95percentile_v6@2.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":426,"value":"mapData = d3.json(\"https://haoshuai999.github.io/China_national_park/data/chinamap.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":437,"value":"chongqing = FileAttachment(\"CHONGQING_summer.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":439,"value":"guangzhou = FileAttachment(\"GUANGZHOU_summer.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"## Settings","pinned":false,"hidden":false,"mode":"md"},{"id":16,"value":"margin = ({ top: 20, right: 20, bottom: 33, left: 30 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"highestTemp = (data) => {\n let max = 0;\n X.forEach(column => {\n let tempMax = d3.max(data, d => d[column])\n if (tempMax > max) {\n max = tempMax\n }\n })\n\n return max;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":277,"value":"cityMax = data.map(d => d3.max(Object.values(d).slice(1, 73)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"X = data.columns.slice(1, 73)","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"Y = d3.map(data, d => d.City)","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"## Modules","pinned":false,"hidden":false,"mode":"md"},{"id":310,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":367,"value":"import {Legend} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":522,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":463,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}