40:null 41:["$","title",null,{"children":"Assignment 2: Level 1 | Tanay's workspace | Observable"}] 47:T14aa,viewof heatmap = { const { years, months, aggregated } = processedData; const margin = { top: 50, right: 20, bottom: 5, left: 80 }; const cellPadding = 5; const cellSize = 30; const width = years.length * (cellSize + cellPadding) + margin.left + margin.right; const height = months.length * (cellSize + cellPadding) + margin.top + margin.bottom; // Set default temperature view let currentView = "maxTemp"; // Define the color scale const colorScale = d3.scaleSequential(d3.interpolateYlOrRd).domain([10, 40]); // SVG container const svg = d3.create("svg") .attr("width", width) .attr("height", height); // xScale, yScale const xScale = d3.scaleBand() .domain(years) .range([margin.left, width - margin.right]) .padding(0.1); const yScale = d3.scaleBand() .domain(months) .range([margin.top, height - margin.bottom]) .padding(0.1); // x-axis svg.append("g") .attr("transform", `translate(0, ${margin.top - cellPadding})`) .call(d3.axisTop(xScale)); // y-axis svg.append("g") .attr("transform", `translate(${margin.left - cellPadding},0)`) .call(d3.axisLeft(yScale) .tickFormat(d => d3.timeFormat("%B")(new Date(2000, +d - 1))) ); // Tooltip const tooltip = document.createElement("div"); tooltip.className = "tooltip"; Object.assign(tooltip.style, { position: "absolute", backgroundColor: "#fff", border: "1px solid #ccc", borderRadius: "5px", padding: "10px", fontFamily: "sans-serif", fontSize: "12px", pointerEvents: "none", display: "none", }); document.body.appendChild(tooltip); // Prepare the data so each cell only stores (year, month). const cellsData = years.flatMap(year => months.map(month => ({ year, month })) ); // Draw heatmap cells const cells = svg.append("g") .selectAll(".cell") .data(cellsData) .join("rect") .attr("class", "cell") .attr("x", d => xScale(d.year)) .attr("y", d => yScale(d.month)) .attr("width", xScale.bandwidth()) .attr("height", yScale.bandwidth()) .attr("fill", d => { const temp = aggregated.get(d.year)?.get(d.month)?.[currentView]; return temp !== null && temp !== undefined ? colorScale(temp) : "#ccc"; }) .on("mouseover", (event, d) => { tooltip.style.display = "block"; tooltip.style.left = `${event.pageX}px`; tooltip.style.top = `${event.pageY}px`; // Fetch the correct temp based on currentView const temp = aggregated.get(d.year)?.get(d.month)?.[currentView]; tooltip.innerHTML = ` Year: ${d.year}
Month: ${d3.timeFormat("%B")(new Date(2000, d.month - 1))}
${currentView === 'maxTemp' ? 'Max' : 'Min'} Temp: ${temp !== null && temp !== undefined ? `${temp} °C` : 'N/A'} `; }) .on("mouseout", () => { tooltip.style.display = "none"; }); // Title const titleDiv = html`

Hong Kong monthly ${currentView === 'maxTemp' ? 'maximum' : 'minimum'} temperatures during 1997-2017

`; // Radio buttons const radioContainer = html`

Maximum Minimum

`; // *** UNCOMMENT / ADD EVENT LISTENERS *** radioContainer.querySelectorAll('input[name="temperatureMetric"]').forEach(radio => { radio.addEventListener('change', event => { currentView = event.target.value; // Update fill colors cells.transition() .duration(500) .attr("fill", d => { const temp = aggregated.get(d.year)?.get(d.month)?.[currentView]; return temp !== null && temp !== undefined ? colorScale(temp) : "#ccc"; }); // Update the mouseover to display correct values cells.on("mouseover", (event, d) => { tooltip.style.display = "block"; tooltip.style.left = `${event.pageX}px`; tooltip.style.top = `${event.pageY}px`; const temp = aggregated.get(d.year)?.get(d.month)?.[currentView]; tooltip.innerHTML = ` Year: ${d.year}
Month: ${d3.timeFormat("%B")(new Date(2000, d.month - 1))}
${currentView === 'maxTemp' ? 'Max' : 'Min'} Temp: ${temp !== null && temp !== undefined ? `${temp} °C` : 'N/A'} `; }); // Update title titleDiv.innerHTML = `

Hong Kong monthly ${currentView === 'maxTemp' ? 'maximum' : 'minimum'} temperatures during 1997-2017

`; }); }); // Return combined elements return html`${titleDiv}${radioContainer}${svg.node()}`; }48:Ta50,// Creating legend for the heatmap legend = { const legendWidth = 400; // Width of the legend bar const legendHeight = 100; // Height of the legend container const gradientHeight = 10; // Height of the gradient bar const minTemp = 3; // Minimum temperature const maxTemp = 40; // Maximum temperature // Creating an SVG container for the legend const svg = d3.create("svg") .attr("width", legendWidth) .attr("height", legendHeight); // Defining linear gradient for the legend const defs = svg.append("defs"); const gradientId = "legendGradient"; const linearGradient = defs.append("linearGradient") .attr("id", gradientId) .attr("x1", "0%") .attr("x2", "100%") .attr("y1", "0%") .attr("y2", "0%"); linearGradient.selectAll("stop") .data(d3.range(0, 1.01, 0.1).map(d => ({ offset: `${d * 100}%`, color: d3.interpolateYlOrRd(d) }))) .enter() .append("stop") .attr("offset", d => d.offset) .attr("stop-color", d => d.color); // Drawing the gradient bar svg.append("rect") .attr("x", 0) .attr("y", legendHeight / 2 - gradientHeight / 2) .attr("width", legendWidth) .attr("height", gradientHeight) .style("fill", `url(#${gradientId})`); // Addign labels for min and max temperature values svg.append("text") .attr("x", 0) .attr("y", legendHeight / 2 + gradientHeight + 15) .style("font-family", "sans-serif") .style("font-size", "12px") // .style("text-anchor", "start") .text(`${minTemp}°C`); svg.append("text") .attr("x", legendWidth) .attr("y", legendHeight / 2 + gradientHeight + 15) .style("font-family", "sans-serif") .style("font-size", "12px") .style("text-anchor", "end") .text(`${maxTemp}°C`); // Adding ticks along the gradient bar const tickValues = d3.range(minTemp, maxTemp + 1, (maxTemp - minTemp) / 5); svg.selectAll(".tick") .data(tickValues) .enter() .append("text") .attr("x", d => (d - minTemp) / (maxTemp - minTemp) * legendWidth) .attr("y", legendHeight / 2 + gradientHeight + 15) .style("font-family", "sans-serif") .style("font-size", "12px") // .style("text-anchor", "middle") .text(d => `${Math.round(d)}°C`); // Adding title below the gradient bar svg.append("text") .attr("x", legendWidth / 2) // Centered horizontally .attr("y", legendHeight - 5) // Positioned below the gradient bar .style("font-family", "sans-serif") .style("font-size", "14px") .style("text-anchor", "middle") // Centered text alignment .text(`Temperature (°C) Range`); return svg.node(); } 49:[{"id":"b14b4f364b839e451743331d515692dfc66046924d40e4bff6502f032bd591975811b46cb81d1e7e540231b79a2fa0f4299b0e339e0358f08bef900595e74b15","href":"https://static.observableusercontent.com/files/b14b4f364b839e451743331d515692dfc66046924d40e4bff6502f032bd591975811b46cb81d1e7e540231b79a2fa0f4299b0e339e0358f08bef900595e74b15","name":"temperature_daily.csv","type":"text/csv","lastModified":1742337673818.559,"size":127952}] 45:{"id":"ed4cf2f624cad356","slug":null,"title":"Assignment 2: Level 1","thumbnail":"95a52094d0513e6cdd310407e88b639989c24489b60c6238c0d90a0799eac49f","access_level":"unlisted","create_time":"$D2025-03-18T22:40:20.712Z","update_time":"$D2025-03-19T04:20:14.039Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"66eae46a019def0e","login":"tanays-workspace","name":"Tanay's workspace","avatar_url":"https://avatars-next.observableusercontent.com/4eb3ae9539ed0727e9e309886f552297c7a22cc5cdcd99c2ca6f4c563469b6cf","tier":"starter_2024","bio":"","following":false},"version":159,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ab5c5a8ada72524b","login":"tanay-mahesh-mehendale","name":"Tanay Mahesh Mehendale","avatar_url":"https://avatars-next.observableusercontent.com/1a0773f3e5a0ff954360d10e36ffb53d32769ec603f05c938411db8b5d10a544","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"ab5c5a8ada72524b","login":"tanay-mahesh-mehendale","name":"Tanay Mahesh Mehendale","avatar_url":"https://avatars-next.observableusercontent.com/1a0773f3e5a0ff954360d10e36ffb53d32769ec603f05c938411db8b5d10a544","tier":null,"role":"editor"},{"type":"team","id":"66eae46a019def0e","login":"tanays-workspace","name":"Tanay's workspace","avatar_url":"https://avatars-next.observableusercontent.com/4eb3ae9539ed0727e9e309886f552297c7a22cc5cdcd99c2ca6f4c563469b6cf","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":"Assignment 2: Level 1","cells":[{"id":0,"value":"# Assignment 2: Level 1\n## Year/Month Heatmap\nAuthor: Tanay Mehendale","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3@7\") // Import the D3 package","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"data = FileAttachment(\"temperature_daily.csv\").csv() //CSV file is uploaded in Observable as an attachment and passed into dataframe","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"// Here we process the data using multiple transformations\n// we use the d3.rollup() to aggregate the data and calculate maximum and minimum temperatures per year and month\nprocessedData = {\n const aggregated = d3.rollup(\n data,\n v => ({\n maxTemp: d3.max(v, d => +d.max_temperature),\n minTemp: d3.min(v, d => +d.min_temperature)\n }),\n d => d.date.split(\"-\")[0], // Year\n d => d.date.split(\"-\")[1] // Month\n );\n\n return {\n years: Array.from(aggregated.keys()),\n months: [\"01\", \"02\", \"03\", \"04\", \"05\", \"06\", \"07\", \"08\", \"09\", \"10\", \"11\", \"12\"],\n aggregated\n };\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$47","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"$48","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"finalOutput = {\n const container = html`

`;\n \n // Insert the heatmap\n container.appendChild(viewof heatmap);\n \n // Append the heatmap (with legend) in the same container.\n container.appendChild(legend);\n \n return container;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 46:"$45:body"