Motivation

This web application is an interactive platform for both skeptics and believers alike to discover the data of UFO sightings. The motivation behind this visualization tool is to offer users an engaging way to explore and identify patterns in UFO sighting reports from across the globe. With the ongoing mystery surrounding unidentified flying objects and general public interest, this application aims to visualize this fascination through interactive maps, timelines, and charts, enabling users to discover connections and trends. 

Data

The dataset for the application is sourced from the National UFO Reporting Center, an organization dedicated to documenting and analyzing UFO sightings. With records dating back to the early 1900s, the data used in this application contains over 80,000 documented sightings, each with parameters such as date, location, shape of the object, and length of the encounter. For more information, visit the National UFO Reporting Center's official website.

Visualization Components

Each component within the web application is designed to offer unique insights into UFO sighting data, while also working together to provide an integrated experience. Here’s how interactivity is maintained across the various visualizations:

Interactive Updates

Each visualization—be it the map, timeline, or charts—responds dynamically to user selections. Brushing on one component will update others to reflect the chosen data subset. The bar chart and timeline chart have dynamic axis scales to better present the filtered data, whereas the other charts maintain a consistent scale for a static reference frame.

Filter Logic

Filters do not stack; a new action on one visualization will reset the previous filter across all visualizations. This decision was made to maintain clarity and prevent confusion that may arise from multiple overlapping filters, which provides a more user-friendly and manageable interaction within the given project time constraints.

Map - UFO Sighting Locations

Purpose and Data Attributes

The map visualization offers users a global perspective on UFO sighting locations. Utilizing latitude and longitude coordinates, each sighting is represented as a point on the map. This visualization enables users to discover geographical patterns and density of UFO activity by location.

Interaction and Functionality

• Map Brushing: A toggle allows users to activate a brushing mode, enabling them to draw a rectangle on the map. The toggle is green in brushing mode, otherwise it is red. This brushing action captures the longitude and latitude ranges of the selected area and filters out points outside this range, focusing on a specific region. Untoggling the brushing resets the map to show all points. The brushed area can also be removed by clicking within the brushable area of any other visualization or by clicking the 'Clear' buttons.

• Background Selection: Users can choose from various map backgrounds provided in the drop-down menu, including ESRI, Open Street Map, Topography, ESRI Ocean Base, and Stamen Terrain.

• Unmapped Sightings Counter: A feature that accounts for the lack of location data in the dataset. There is a maximum of one unmapped sighting because only a single entry within the data is missing location data. 

• Color Scheme: There are five different color schemes provided in the drop-down menu: single color, color by year, color by month, color by time of the day, and color by UFO shape. The color by month, color by time of the day, and color by UFO shape schemes are derived from the heatmap chart, radar chart, and pie chart respectively. Explanations for the color choices are in the justification section below.

• Details on Demand: Detailed information about each sighting, such as the date/time, coordinates, shape, encounter length, and a brief description, is revealed when a user hovers over a map point.

Timeline - UFO Sightings Over Time

Purpose and Data Attributes

The timeline visualization provides a historical view of UFO sightings over an extensive period. Placed on the x-axis, years show the distribution of sightings, while the y-axis measures the frequency of reports. This design allows users to see long-term trends and fluctuations in sighting occurrences.

Interaction and Functionality

• Timeline Brushing: Users can brush over the timeline to filter data by clicking and dragging over the desired range of years. The brushing is flexible, permitting multiple subsequent selections for refined filtering. The brushed area can be removed by clicking within the brushable area of any visualization or by clicking the 'Clear' buttons.

• Dynamic Axes: The axes dynamically adjust based on the brushed selection, with the x-axis showing the selected timeframe and the y-axis scaling to the peak number within that selection.

• Length and Binning: The timeline is designed to be sufficiently long, offering a broad historical context. Data is binned by year, balancing detail and readability to allow for easy interaction and trend spotting.

• Color Scheme: A neutral black color is used for the timeline. The explanation for this color choice is in the justification section below.

• Details on Demand: Hovering over a point on the timeline activates a tooltip that provides the year and the number of sightings.

Heatmap - Monthly Distribution of UFO Sightings Over Decades

Purpose and Data Attributes

The heatmap visualization tracks the frequency of UFO sightings across months and decades, providing insight into the cyclical and seasonal patterns of sightings. The x-axis categorizes the data by month to showcase potential seasonal trends, while the y-axis is organized by decade. Aggregating data by month and decade allows for a more efficient use of space, as opposed to aggregating by day and year. With a dataset that spans over a hundred years, it would be impractical to display each year separately. This approach also enhances users' ability to detect patterns as it simplifies the data into manageable chunks, where seasonal trends and long-term changes are more apparent. 

Interaction and Functionality

• Heatmap Brushing: Users can brush over the heatmap by clicking and dragging over cells to filter the data based on their interest in a particular time period. The brushed area can be removed by clicking within the brushable area of any visualization or by clicking the 'Clear' buttons.

• Static Axes: The heatmap does not change its axes when filtered, it maintains a consistent scale for comparison. The chosen timeframes remain in full view, which allows for direct analysis of the selected data.

• Color Scheme: Utilizes a distinct color for each month where a darker hue within each month indicates a higher frequency. The explanation for the color scheme is in the justification section below.

• Details on Demand: Hovering over a cell triggers a tooltip that provides more detailed information, including the specific month, decade, and the number of sightings.

Bar Chart - UFO Sighting Encounter Duration Distribution

Purpose and Data Attributes

The bar chart provides an analysis of the duration of UFO encounters, with the x-axis displaying the length of encounters in seconds and the y-axis indicating the number of sightings. This visualization allows users to determine the typical duration of sightings, which highlights how many were brief and how many were more prolonged encounters.

Bin Determination

Due to the prevalence of very short sightings, the bins of the bar chart were manually determined to ensure that these brief encounters are visually significant and not overshadowed by longer ones on the visualization. This strategy allows for an accurate and interpretable representation of all encounter lengths.

Interaction and Functionality

• Bar Chart Brushing: Users can interact with the chart by brushing over bars to select a range of encounter durations. The brushing is flexible, permitting multiple subsequent selections for refined filtering, and can be reset by clicking within any brushable area of the visualizations. It can also be reset by clicking the 'Clear' buttons.

• Dynamic Y-Axis: When a selection is made via brushing, the y-axis dynamically adjusts to the maximum number of sightings within that range.

• Color Scheme: A single blue color is used for the bars on the chart. The explanation for this color choice is in the justification section below.

• Details on Demand: Hovering over a bar activates a tooltip that provides the count of sightings within that particular duration bin and the range of seconds that bin represents.

Pie Chart - UFO Shape Frequency

Purpose and Data Attributes

The pie chart displays the frequency of reported UFO shapes, which allows users to understand which shapes are most commonly described in sightings. Each slice of the pie chart represents a different UFO shape category, providing a visual summary of all the shapes reported.

Interaction and Functionality

• Pie Chart Filtering: Users can select one or multiple UFO shapes from a scrollable list to filter the data. By holding down 'Ctrl' or 'Cmd' (depending on the operating system), users can make multiple selections. Clicking the 'Filter' button applies the selected criteria to the chart, and filters the other visualizations accordingly. The 'Clear' button resets the chart to its original state, showing all shapes, and resets the filtering on the other visualizations. It can also be reset by clicking within any brushable area of the other visualizations.

• Color Scheme: A distinct color for each UFO shape is utilized. The explanation for this color choice is in the justification section below.

• Details on Demand: Moving the cursor over any segment of the pie chart displays a tooltip that indicates the UFO shape and the number of occurrences of that particular shape.

Radar Chart - UFO Sightings Over 24 Hours

Purpose and Data Attributes

The radar chart provides a detailed view of UFO sightings over a 24-hour period, with each hour represented as a point on the circular axis. This visualization helps users identify any temporal patterns in sightings, such as peak hours for UFO activity. The radar chart's circular format is well-suited for displaying finer increments of time, allowing for a more detailed analysis of hourly sighting trends over a 24-hour period.

Interaction and Functionality

• Radar Chart Filtering: Users can set a filter for a specific time range by entering numerical values into the 'Start Hour' and 'End Hour' input fields and then clicking the 'Filter' button. This action updates the radar chart to focus on sightings within that timeframe and updates the other visualizations according to the filtered selection. The 'Clear' button resets the chart to its original state and resets the filtering on all the visualizations. It can also be reset by clicking within any brushable area of the visualizations.

• Color Scheme: The colors on the radar chart are selected to visually represent different times of the day. The explanation for this color choice is in the justification section below.

• Details on Demand: Hovering over an hour's line on the radar chart displays a tooltip showing the hour and the frequency of sightings. A red dot also appears at the point of intersection of the area and the radar line, which marks the selected hour for easier correlation.

Interactive Search

Purpose and Data Attributes

The interactive search feature is designed to explore the textual descriptions of UFO sightings. It allows users to delve into the narratives for specific terms like 'flashing', 'bright', or 'airplane', and filter all of the visualizations based on the searched term.

Interaction and Functionality

Users can type a word or phrase into the search box and click the 'Search' button to filter the sightings. The application will then update all of the visualizations to reflect only the data that include the searched term. The 'Clear' button serves to quickly reset all visualizations to their original state, removing any filters applied by the search function. All visualizations can also be reset by clicking within any brushable area of the visualizations.

Enabled Discoveries

Spatial Distribution

The map visualization reveals a high density of sightings in certain regions, particularly in North America and Western Europe. This could indicate a higher volume of UFO reports in more populated or technologically advanced areas where there is greater access to reporting tools such as the internet and media.

Temporal Trends

The timeline suggests an overall increase in the number of UFO sightings over the years. The upward trend starts in 1995 and peaks in 2012, which might correlate with a growing public interest in UFOs or improved methods of documentation and reporting over time.

Seasonal Patterns

The heatmap shows us that there's a decadal and monthly variation in sightings. Certain months within some decades appear to have a higher frequency of sightings, especially in June and after the year 2000, which might be associated with astronomical events, weather conditions, or cultural phenomena. 

Encounter Duration

The bar chart indicates that most reported encounters are brief, with a large number of sightings lasting less than a minute. This could reflect the fleeting nature of the events being reported or the observer’s limited window of opportunity to witness the event. Based on the bar chart, there are the most UFO sightings with durations between 300-359 seconds.

UFO Shapes

The pie chart illustrates a variety of reported UFO shapes, with certain shapes being reported more frequently than others. Most notably the 'light' UFO shape is the most frequent. This diversity of shapes could suggest a range of phenomena being interpreted as UFOs or a variety of objects or entities being observed.

Time of Day Analysis

The radar chart suggests there are specific times during the day when sightings are more commonly reported. For example, there is a large volume of sightings at night- especially at 9:00 pm.

Process

Libraries Used

Leaflet.js: primarily used for mapping functionalities. It renders an interactive world map where UFO sightings are marked based on their geographic coordinates, enabling users to pan and zoom for a detailed look at specific areas.

D3: handles the complex data-driven visualizations besides the map. It dynamically creates and updates the timeline, bar chart, pie chart, radar chart, and heatmap according to the dataset, allowing for interactive filtering and detailed display of the UFO sightings data.

Code Structure

JavaScript Components

The main.js file serves as the central hub of the program, it handles the initialization and coordination of interactions between different visualizations. It's where the data is loaded and parsed to be passed on to other components.

The visualization scripts (timeline.js, barchart.js, leafletMap.js, piechart.js, heatmapChart.js, and radarChart.js) each define a JavaScript class responsible for creating and updating their specific visualization. These classes contain all the methods needed for setting up SVG elements, binding data, and rendering the visuals based on user interaction.

For interactive search queries, main.js processes the input and filters the data to update all of the visualizations.

Each visualization script interacts with the DOM and the dataset to reflect real-time changes based on user interactions, such as filtering and searching.

CSS Stylesheet / Index.html

The style.css file contains custom styles that define the overall look and layout of the application, including titles and tooltips.

The index.html file sets up a straightforward framework for the application, arranging div elements for each data visualization—map, timeline, pie chart, bar chart, heatmap, and radar chart. It includes an interactive search section and placeholders for user interaction controls. The document references the visualization JavaScript files for functionality and CSS files for styling.

Application Download and Instructions

The code for the application can be accessed on a public GitHub repository.

Instructions to download and run the application locally can be found in the README.md.

Live Application

The application is deployed online using Netlify and can be accessed here: https://data-vis-project-2.netlify.app/

Individual Member Contributions

Myself (Emma Gardner)

• Project Management: Created the Trello board and populated it with manageable tasks, including due dates, that were eventually assigned to members of the project.

• Initial Sketching: Responsible for the initial sketching of the overall layout, setting the design direction for the visualization interface.

• Timeline Creation: Designed and developed the timeline, illustrating sightings over the years.

• Brushing/Selection Functionality: Implemented the brushing/selection capabilities across multiple visualizations, including the pie chart, heatmap, timeline, bar chart, and radar chart. This functionality allows users to filter and focus on specific data segments.

• Interactive Search: Developed the interactive search feature, enabling users to filter sightings based on keywords found in the data descriptions.

• Code Integration: Worked on combining brushing and updating mechanisms to ensure a seamless user experience when interacting with different visualizations.

• Deployment: Deployed the code, ensuring that the application was live and functioning as intended.

• Bug Testing: Generally tested the application throughout the development progress to patch any bugs in the code.

• Documentation Proofreading: Ensured the final documentation was cohesive and free of any textual errors before submission.

Molly Vongsakhamphouy

• Interaction Cartoon Creation: Created the initial sketches for visualizing the brushing interaction and interactive search features.

• Heatmap Chart Creation: Designed and developed the "Cycles Throughout the Year" heatmap, enabling the analysis of temporal patterns in the data.

• Radar Chart Creation: Designed and developed the "Time of Day" radar chart, illustrating sightings over a 24-hour period.

• Demonstration Video: Recorded the demo video, showcasing the application's features and user interface.

• README File: Updated the README file, outlining the process of running the program on a local machine or viewing it online.

• Documentation: Compiled detailed documentation for the project, encompassing all aspects from initial setup to final deployment with accompanying visuals.

Emily Bever

• Bar Chart Development: Created the "Encounter Length" bar chart, which portrays sighting durations.

• Map Development: Laid out the foundational base map features and all additional elements.

• Map Brushing: Implemented brushing capability on the map data points by adding a toggle feature.

• Map Color By Options Implementation: Developed the "Color By..." feature for the map, which allows the data to be visualized in various color schemes- including a legend for the map.

• Map Background Feature: Added the map background drop-down, providing users with the ability to customize their map viewing experience.

• Documentation Proofreading: Ensured the final documentation was cohesive and free of any textual errors before submission.

Emily Turcotte

• Pie Chart Development: Designed and developed the pie chart to display the distribution of UFO shapes within the sightings, assigning distinct colors to each shape category for clear, discrete visual differentiation.

• Histogram Creation and Exploration: Designed and developed a histogram, which was originally going to be used to illustrate encounter lengths. It was later determined that a bar chart would be a more effective visualization, so this visualization did not end up in the final project.

• App Design Unification: Focused on adjusting the final layout of the application, whilst making sure all components still function as intended.