2b:null 2c:["$","title",null,{"children":"Code for visualization #3a of the EXHAUSTION research project | Tom Gabriel Johansen | Observable"}] 31:T512,{ // Canvas Definition const canvas = DOM.canvas(1580, 1540); // Setting the cnavas size canvas.style.backgroundColor = "white"; // Ensure the canvas has a background canvas.style.zIndex = "1000"; // Ensure the canvas is on top of other elements // X-axis Scale Definition const xScale = d3 .scaleLinear() .domain([2020, 2095]) .range([0, 1580 - 1580 / filteredData.length]); // Adjust the range to remove margin // Drawing on the Canvas const ctx = canvas.getContext("2d"); // Calculate the exact width of each column const columnWidth = 1580 / filteredData.length; // Clear the canvas ctx.clearRect(0, 0, canvas.width, canvas.height); filteredData.forEach((d) => { const baseX = xScale(d.Period); // Multiply the Excess value by 5 for the five-year interval for (let i = 0; i < d.Excess * 5; i++) { const x = Math.floor(baseX + Math.random() * columnWidth); // Random x strictly within the column, rounded to whole number const y = Math.floor(Math.random() * 1540); // Random y within the canvas height, rounded to whole number ctx.fillStyle = "#CC8500"; ctx.fillRect(x, y, 1, 1); // Draw a single pixel } }); // Force a canvas refresh canvas.getContext("2d").drawImage(canvas, 0, 0); return canvas; }32:T4ed,{ // Canvas Definition const canvas = DOM.canvas(1580, 1540); canvas.style.backgroundColor = "white"; // Ensure the canvas has a background canvas.style.zIndex = "1000"; // Ensure the canvas is on top of other elements // Y-axis Scale Definition const yScale = d3 .scaleLinear() .domain([2020, 2095]) .range([0, 1540 - 1540 / filteredData.length]); // Adjust the range to remove margin // Drawing on the Canvas const ctx = canvas.getContext("2d"); // Calculate the exact height of each row const rowHeight = 1540 / filteredData.length; // Clear the canvas ctx.clearRect(0, 0, canvas.width, canvas.height); filteredData.forEach((d) => { const baseY = yScale(d.Period); // Multiply the Excess value by 5 for the five-year interval for (let i = 0; i < d.Excess * 5; i++) { const y = Math.floor(baseY + Math.random() * rowHeight); // Random y strictly within the row, rounded to whole number const x = Math.floor(Math.random() * 1580); // Random x within the canvas width, rounded to whole number ctx.fillStyle = "#CC8500"; ctx.fillRect(x, y, 1, 1); // Draw a single pixel } }); // Force a canvas refresh canvas.getContext("2d").drawImage(canvas, 0, 0); return canvas; }33:[{"id":"97303b2b63f6d2a0866a5ed80892f25f87ca9855887fed30f5e0e6fdbfa6697f343f98bfe9933e3b646b8189faedeeeeafbf0caea0c5231bc12448fd20b63d9e","href":"https://static.observableusercontent.com/files/97303b2b63f6d2a0866a5ed80892f25f87ca9855887fed30f5e0e6fdbfa6697f343f98bfe9933e3b646b8189faedeeeeafbf0caea0c5231bc12448fd20b63d9e","name":"ORG_SSP3@1.png","type":"image/png","lastModified":1704361465061.204,"size":1500578},{"id":"6a643a2d6c706f3e3a3084e68ecb6fc8cf5569062696777ec7cb0f0238abb7b7e060a73688e019a057fd2ea90fa39cd497c578c75a11b7a2df8b733ab405af71","href":"https://static.observableusercontent.com/files/6a643a2d6c706f3e3a3084e68ecb6fc8cf5569062696777ec7cb0f0238abb7b7e060a73688e019a057fd2ea90fa39cd497c578c75a11b7a2df8b733ab405af71","name":"data for Observable4 (1).csv","type":"text/csv","lastModified":1696800047591.208,"size":11877},{"id":"6ec75eeb4143a1f519a256f10c5a2ae002d62694a2c96a5121923f9e2a414902caf2d9ea5983608a96002b45505ce90f9618f210cc1ad9097b9bbb7559664d85","href":"https://static.observableusercontent.com/files/6ec75eeb4143a1f519a256f10c5a2ae002d62694a2c96a5121923f9e2a414902caf2d9ea5983608a96002b45505ce90f9618f210cc1ad9097b9bbb7559664d85","name":"ORG_SSP1@1.png","type":"image/png","lastModified":1704361465776.647,"size":2614086}] 2f:{"id":"3cf853e4ed367c0f","slug":"code-for-visualization-3a-of-the-exhaustion-research-proje","title":"Code for visualization #3a of the EXHAUSTION research project","thumbnail":"cb418e6855574ae62f45815c5d7e940a512862a79c1836bdfde8d9aeb153ee3e","access_level":"public","create_time":"$D2023-10-08T21:19:42.031Z","update_time":"$D2026-06-11T08:00:18.688Z","view_time":null,"first_public_time":"$D2024-01-04T09:30:02.553Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"591f433691d99a87","login":"tomgabjo","name":"Tom Gabriel Johansen","avatar_url":"https://avatars-next.observableusercontent.com/dfff90935e4f79c60b8f7b6dda68f0cf89a029836b2af20a63d484f7969d1713","tier":"starter_2024"},"version":237,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9f856250d3bdf78c","login":"tomgabjo","name":"Tom Gabriel Johansen","avatar_url":"https://avatars-next.observableusercontent.com/dfff90935e4f79c60b8f7b6dda68f0cf89a029836b2af20a63d484f7969d1713","tier":null}],"members":[{"type":"individual","id":"9f856250d3bdf78c","login":"tomgabjo","name":"Tom Gabriel Johansen","avatar_url":"https://avatars-next.observableusercontent.com/dfff90935e4f79c60b8f7b6dda68f0cf89a029836b2af20a63d484f7969d1713","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Code for visualization #3a of the EXHAUSTION research project","cells":[{"id":0,"value":"# Code for visualization #3a of the EXHAUSTION research project\nEXHAUSTION is a research consortium working to design strategies to reduce health impact from heat waves and air pollution in Europe. EXHAUSTION is a EU-funded H2020 project.\nMore info about this Horizon2020 research project can be found here: https://www.exhaustion.eu/ or on X here: @ExhaustionH2020\n\nThis notebook is established by the design team from Infodesignlab who is partner in EXHAUSTION research project to code the visualization #3a.\n\nThis notepad has been used to visualize the increase in heat-related mortality that is due to increasing ambient temperatures and more days of extreme heat resulting from a warming climate.\n\nThe visualization of deaths from a warming climate in Europe is only part of the final visualizations. The final static visualization is also added to this notebook for more accurate context.\n\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":230,"value":"org_ssp11 = FileAttachment(\"ORG_SSP1@1.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":231,"value":"org_ssp31 = FileAttachment(\"ORG_SSP3@1.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3,"value":"null","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"data = await FileAttachment(\"data for Observable4 (1).csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"filteredData = data.filter(\n (d) =>\n d.Period !== 2015 &&\n d.SSP === 3 && // Can be changed to see SSP1 and SSP2. Value 1 or 3\n d[\"Temperature Range\"] === \"tot\" &&\n d[\"Sub-scenario\"] === \"full-demo\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":174,"value":"## Horizontal viz\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":23,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":148,"value":"## Vertical visualization for web and social media","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":145,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":76,"value":"viewof pixelColor = html`\n

\n Enter HEX value: \n \n \n

\n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":78,"value":"{\n // Calculate the number of dots for each 'Period'\n const dotCounts = filteredData.map((d) => ({\n Period: d.Period,\n Dots: d.Excess * 5\n }));\n\n // Calculate the total number of dots\n const totalDots = dotCounts.reduce((acc, curr) => acc + curr.Dots, 0);\n\n // Create a table to display the counts\n const table = html`\n \n \n \n \n \n \n \n ${dotCounts.map(\n (d) => html`\n \n \n \n \n `\n )}\n \n \n \n \n \n

Period	Dots
${d.Period}	${d.Dots}
Total	${totalDots}

`;\n\n return table;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"