Nicole Zhang, Riva Zhang Group 20 A2: Interactive Visualization | For better viewing, visit this link: https://docs.google.com/document/d/1EC1vczbulcLYfdyGDvecBEsgh7RwwCCyo3ZHy0FvjeA/edit?usp=sharing | Demo link: https://youtu.be/wzTe-f3L-R8

1. Introduction The dataset we chose to visualize was the daily weather measurements in the United States in 2017. Visualization of daily weather may allow patterns to emerge that can be used for public safety or awareness, agriculture and food production, energy and infrastructure management, and more. We chose to focus on average snow depth, precipitation, maximum temperature, and minimum temperature of each state/territory because it could help identify areas at risk of disasters like storms, floods, or avalanches and areas with hazardous travel conditions for planes and vehicles. Heavy precipitation and snow depth could also impact energy consumption and demand, which is an important consideration for building infrastructure and energy generation. Max and min temperatures provide valuable insights into temperature extremes, which can indicate potential heatwaves, cold snaps, and other climate anomalies. This data is necessary because it can help optimize agricultural practices, as well as identify potential risks to public safety.

2. Rationale We chose to center our visualization around a map of the United States. Our design decisions include: Using a map of the US This visualization allows the audience to easily contextualize weather patterns across the country, as it directly links the data to geographic locations. By placing weather data on a map, we make it easier for the audience to see how different regions are affected by various weather conditions. A dropdown feature for easy data filtering – Category 1 Specifically This dropdown filters the data by the categories listed above—snow depth, precipitation, max temperature, and min temperature. Having this filter allows the audience to selectively view specific weather data without overwhelming them with information. It enables users to focus on one aspect of the weather (e.g., maximum temperature) depending on their interest or analysis needs. This makes the visualization more interactive and adaptable to different user preferences. Color hues Having the range of colors from coldest to hottest temperature allows the audience to quickly identify temperature variations across the map. This color gradient intuitively communicates the intensity of temperatures, making it easier to distinguish between cold and hot states at a glance. The progression from cooler colors to warmer colors also aligns with common cultural associations, enhancing the overall readability and accessibility of the visualization. Details on Demand showing the numerical data – Category 2 Specifically Having the ability to show the quantifiable numbers for each category allows the audience to access specific data points, enhancing the overall understanding of the weather patterns. When hovering over a region or selecting a particular area on the map, users can view the exact numerical values for variables like maximum temperature, minimum temperature, snow depth, or precipitation. This provides a more detailed level of insight, allowing users to compare exact figures and make more informed analyses. It also ensures transparency in the data, as users can verify and cross-check the information behind the visual representation Some alternatives we considered were using a bar graph to model the data. However, this quickly becomes overwhelming because there are many states and US territories, making it difficult to display all the information in a clear and concise way. These large amounts of bars would clutter the visualization and make it hard for users to identify meaningful patterns or trends. Additionally, comparing data across multiple states in a bar graph could become tedious and less intuitive. Thus, we decided that using a map would be a more effective representation of the data since it allows the audience to easily view weather patterns in these states/territories without being overwhelmed.

3. References We used the Daily Weather in the U.S. for 2017 dataset as our primary data source, which provided the necessary weather measurements (maximum and minimum temperature, snow depth, and precipitation) for our analysis. We used the following lab resources for our visualization: Lab 4-5: These labs provided the foundational code for building an interactive visualization, including key features such as the dropdown filter and detail-on-demand. Lab 4-5 helped us structure the user interface and interaction techniques, enabling users to filter and interact with the weather data smoothly. Lab 11: This lab contributed the map implementation, which was crucial for displaying the weather data geographically. It provided guidance on linking data to specific regions (states and territories) and applying color encoding based on different weather conditions (such as temperature and precipitation). The map was essential for representing spatial patterns in the data and allowing users to explore weather conditions across the United States. We used the following data resources for the visualization: Building a custom sequential color scale: https://d3-graph-gallery.com/graph/custom_color.html Sequential color scales: https://d3js.org/d3-scale/sequential Color interpolation: https://d3js.org/d3-interpolate/color Color legend: https://observablehq.com/@d3/color-legend

4. Process Overview We dedicated approximately 10 hours to coding the project itself and an additional 2 hours reviewing and adapting relevant labs and documentation, particularly Lab 11. The work was evenly split, and we used Git to manage and push our edits collaboratively. Riva was responsible for implementing the visualization space, including the map and color scheme, while Nicole handled data filtering, the legend, and transitions. We worked together on details-on-demand functionality, ensuring that relevant data was displayed for each category. For this write up, we both wrote our portion of what we did. The aspects that took the most time were formatting the colors and the legend for the visualization. Merging the US map and weather data was a bit of a challenge, such as establishing a mapping between the full names of the states and their abbreviations, and especially getting the colors to correctly depict the temperatures, precipitation, and snow depth. At first, it would only choose one of the state’s data and present it on the map, which would not have been accurate (we saw that Alaska was marginally warmer than New York!). Another challenge was creating a mapping between the states’ full names and abbreviations. Thus, to resolve this, we had to develop a method to compute state-level averages for each category. Formatting the legend also proved challenging, as it required extensive reference to documentation and label adjustments. Additionally, we had to manually add tick marks to enhance clarity.

5. AI Usage We used ChatGPT to generate a function that calculates the average across each category of data, such as the average maximum and the average minimum temperatures, average snow depth, and average precipitation PER state. We also used ChatGPT to debug our JavaScript code by asking it specific questions about errors and implementation challenges. This helped us troubleshoot issues more efficiently and refine our approach to the visualization.