level2.js

console.log("Level 2 script is running");

function initializeLevel2() {
    document.getElementById("level2-container").innerHTML = "";

    const width2 = 1000, height2 = 600, margin2 = { top: 80, right: 80, bottom: 50, left: 100 };

    d3.select("#level2-container").append("h2")
        .text("Level 2: Daily Temperature Variations")
        .style("text-align", "center")
        .style("margin-bottom", "5px");

    // Create Toggle Button for Min/Max Temperature
    const toggleButton2 = d3.select("#level2-container").append("button")
        .text("Show: Min Temperature")
        .style("display", "block")
        .style("margin", "10px auto")
        .style("padding", "10px")
        .style("font-size", "14px")
        .style("cursor", "pointer");

    let tempType2 = "max"; // Default to Max Temperature

    // Create Legend SVG
    const legendSvg2 = d3.select("#level2-container").append("svg")
        .attr("width", 600)
        .attr("height", 50)
        .style("display", "block")
        .style("margin", "0 auto 10px");

    const svg2 = d3.select("#level2-container").append("svg")
        .attr("width", width2)
        .attr("height", height2);

    // Create Tooltip
    const tooltip2 = d3.select("body")
        .append("div")
        .attr("id", "tooltip2")
        .style("position", "absolute")
        .style("visibility", "hidden")
        .style("background", "rgba(0, 0, 0, 0.85)")
        .style("color", "white")
        .style("padding", "8px")
        .style("border-radius", "5px")
        .style("font-size", "12px")
        .style("box-shadow", "0px 0px 5px rgba(0,0,0,0.3)")
        .style("pointer-events", "none");

    d3.csv("temperature_daily.csv").then(data => {
        console.log("CSV Loaded Successfully!");

        // Data Processing
        data.forEach(d => {
            d.date = new Date(d.date);
            d.year = d.date.getFullYear();
            d.month = d.date.getMonth() + 1;
            d.day = d.date.getDate();
            d.maxTemp = +d.max_temperature;
            d.minTemp = +d.min_temperature;
        });

        // Filter last 10 years for visualization
        const last10Years = d3.max(data, d => d.year) - 9;
        data = data.filter(d => d.year >= last10Years);

        // Process Data into Year-Month structure
        function processData() {
            return d3.rollups(
                data,
                v => ({
                    daily: v.map(d => ({ day: d.day, max: d.maxTemp, min: d.minTemp })),
                    avgMax: d3.mean(v, d => d.maxTemp),
                    avgMin: d3.mean(v, d => d.minTemp)
                }),
                d => d.year,
                d => d.month
            ).flatMap(([year, months]) =>
                months.map(([month, temps]) => ({ year, month, ...temps }))
            );
        }

        let processedData2 = processData();

        // Scales
        const years2 = [...new Set(processedData2.map(d => d.year))].sort();
        const months2 = d3.range(1, 13);
        const xScale2 = d3.scaleBand().domain(years2).range([margin2.left, width2 - margin2.right]).padding(0.05);
        const yScale2 = d3.scaleBand().domain(months2).range([margin2.top, height2 - margin2.bottom]).padding(0.05);

        let colorScale2 = d3.scaleSequential(d3.interpolateYlOrRd)
            .domain(d3.extent(processedData2, d => d[tempType2 === "max" ? "avgMax" : "avgMin"]));

        function updateLegend2() {
            legendSvg2.selectAll("*").remove();

            const legendWidth = 500;
            const legendGradient = legendSvg2.append("defs").append("linearGradient")
                .attr("id", "legend-gradient2")
                .attr("x1", "0%").attr("x2", "100%");

            d3.range(0, 1.05, 0.1).forEach(t => {
                legendGradient.append("stop")
                    .attr("offset", `${t * 100}%`)
                    .attr("stop-color", colorScale2(colorScale2.domain()[0] + t * (colorScale2.domain()[1] - colorScale2.domain()[0])));
            });

            legendSvg2.append("rect")
                .attr("width", legendWidth)
                .attr("height", 10)
                .attr("x", (600 - legendWidth) / 2)
                .attr("y", 10)
                .style("fill", "url(#legend-gradient2)");

            legendSvg2.append("g")
                .attr("transform", `translate(${(600 - legendWidth) / 2}, 30)`)
                .call(d3.axisBottom(d3.scaleLinear().domain(colorScale2.domain()).range([0, legendWidth]))
                    .ticks(5).tickFormat(d => `${Math.round(d)}°C`));
        }
        updateLegend2();

        function drawHeatmap() {
            svg2.selectAll("*").remove();

            // Add X & Y Axis
            svg2.append("g")
                .attr("transform", `translate(0, ${margin2.top - 5})`)
                .call(d3.axisTop(xScale2).tickFormat(d3.format("d")));

            svg2.append("g")
                .attr("transform", `translate(${margin2.left}, 0)`)
                .call(d3.axisLeft(yScale2).tickFormat(d => 
                    ["January", "February", "March", "April", "May", "June", "July",
                    "August", "September", "October", "November", "December"][d - 1]
                ));

            const cells2 = svg2.selectAll(".cell")
                .data(processedData2)
                .join("g")
                .attr("class", "cell")
                .attr("transform", d => `translate(${xScale2(d.year)}, ${yScale2(d.month)})`);

            cells2.append("rect")
                .attr("width", xScale2.bandwidth())
                .attr("height", yScale2.bandwidth())
                .attr("fill", d => colorScale2(d[tempType2 === "max" ? "avgMax" : "avgMin"]))
                .attr("stroke", "white");

            // Mini Line Chart inside each cell
            const xMiniScale = d3.scaleLinear().domain([1, 31]).range([3, xScale2.bandwidth() - 3]);
            const yMiniScale = d3.scaleLinear()
                .domain(d3.extent(data, d => d.maxTemp))
                .range([yScale2.bandwidth() - 3, 3]);

            cells2.each(function(d) {
                const cell = d3.select(this);
                cell.append("path").datum(d.daily)
                    .attr("d", d3.line().x(d => xMiniScale(d.day)).y(d => yMiniScale(d.max)))
                    .attr("fill", "none").attr("stroke", "darkred").attr("stroke-width", 1.5);

                cell.append("path").datum(d.daily)
                    .attr("d", d3.line().x(d => xMiniScale(d.day)).y(d => yMiniScale(d.min)))
                    .attr("fill", "none").attr("stroke", "darkblue").attr("stroke-width", 1.5);
            });

            updateLegend2();
        }

        toggleButton2.on("click", function () {
            tempType2 = tempType2 === "max" ? "min" : "max";
            toggleButton2.text(`Show: ${tempType2 === "max" ? "Min" : "Max"} Temperature`);
            drawHeatmap();
        });

        drawHeatmap();
    });
}

initializeLevel2();