finalProject/index.html at main · IrisC113/finalProject · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html>
<head>
    <title>D3 Interactive Heatmap</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
</head>
<body>
    <div class="container">
        <h2>Global Temperature Change Heat Map (2015-2030)</h2>
        <p style="color: gray; font-size: 14px; margin-top: -10px;">
            Data loading is currently slow, please wait a moment. We will work to improve this in the future.
        </p>

        <div class="slider-box">
            <label for="time-slider">Current time：</label>
            <span id="current-time-display">2015-01-16 12:00:00</span>
            <input type="range" id="time-slider" min="0" max="X" value="0" style="width: 100%;">
        </div>

        <div id="map-container">
            </div>

    </div>

    <!-- Writeup Section -->
    <div class="writeup-section">
        <h3><strong>What have we done so far?</strong></h3>
        <p>
            So far, we have implemented a fully functional interactive web-based visualization that displays global temperature data from 2015 to 2030.
            The specific work completed is as follows:
        </p>
        <ul>
            <li>Load temperature datasets directly from ZIP files using the JSZip library.</li>
            <li>Create a D3-based scatter plot <strong>heatmap</strong> that projects temperature points onto a global isometric columnar projection map, and uses Inferno sequential color levels to represent temperature intensity.</li>
            <li>Add an <strong>interaction</strong> of a time slider, allowing users to explore changes in global temperature patterns at different points in time.</li>
        </ul>
        <p>
            The webpage dynamically updates the current timestamp as the user drags the slider, providing a clean and interactive environment for them to study temperature changes in the selected year.
        </p>

        <h3><strong>What will be the most challenging part of your project to design and why?</strong></h3>
        <p>
            Due to the massive amount of data, the most challenging aspect of the project is likely to be simultaneously improving performance and visual accuracy.
            Real-time rendering of temperature points at each time step leads to slow loading and reduced responsiveness.
            And adding features such as interpolated heatmaps, geographic overlays or smoother animations requires more complex calculations.
            Furthermore, optimizing the loading process of ZIP files or migrating to a more efficient data format is also a challenge.
            Ensuring that the final visualization is both scientifically accurate and fast enough to run smoothly in a browser will be one of the most difficult aspects of the project.
        </p>
    </div>

    <script src="heatmap.js"></script>
</body>
</html>