Our project addresses the very crux of this challenge which is to provide a design solution that easily points the users to significant changes in NO2 levels over space and time. We essentially developed a replica of EO Dashboard for air quality (NO2) and then included new features in it which makes it easy for users to understand where and when significant changes in NO2 levels are occurring.

In our first feature, we provided users the ability to select start and end dates and see changes in NO2 levels over time globally via map-based time-lapse animations. These animations in matter of seconds inform users of how NO2 levels are changing spatially for the timeline that the user chose. This feature thus empowers the users with a strong visual understanding of what they are specifically looking for.

Another major part of this first feature includes a graphical animation that shows changing trends in NO2 levels over time for cities covered by the EO Dashboard. This occurs simultaneously as the map-based animation for the same timeline that the user selects initially. Users do have the ability to close one of the windows down so that they can just focus on one of the animations. This feature puts all the key global cities on a graph together so that users can see NO2 change over the period of time that they wish to. This also provides insights into how different cities reacted to the pandemic and how their NO2 levels changed during lockdown periods.

Our second feature includes a section which shows the top 5 significant movers (positive and negative movers compared to 2015-19 baseline) for a specific date selected by users. This feature removes even the slightest need for user visual interpretability by showing descriptive information about cities which were top movers in terms of NO2 change for a particular date. This makes it very easy for users to explore and see where the highest and the most significant changes are occurring around the globe. This feature also expands a little upon the limited nine cities that are presently covered by the EO dashboard for air quality (NO2).

We have also changed the UX aspects of the dashboard a little to make it easy for users to navigate to city-level ESA TROPOMI graphs. Overall, our focus was to provide an easy way to integrate new features without changing the design and functionality of the present dashboard in a significant way. We hope that through this design solution we are able to help make the EO Dashboard more comprehensive.

Note: Animations and significant changes tables are currently only available for fixed dates since doing it for all the dates would require a heavy data workflow which would not work well with our front-end design solution. We are sure that the brilliant folks at ESA, NASA, and JAXA would be able to do it for all the dates by leveraging our design solution. 

Our small but mighty team of two members was incredibly excited to participate in this hackathon and contribute in any meaningful way possible. Going through the challenges we felt that this challenge provided us the most room for using our imagination and coming up with something that we can learn the most from. Before this challenge, both of us had never built any prototype or worked on any kind of design problems. We decided to approach this project by looking for resources that will help us answer the very fundamental questions of the challenge. Very early in the project, we decided that we definitely need to have a time-lapse component in our project, and we were able to find relevant time-lapses for this challenge using the EO Dashboard data and the Global Nitrogen Dioxide Monitoring initiative by Goddard Space Flight Center. Our team does not have a traditional background in building using HTML and JavaScript, so we decided to use a tool called Proto.io. This helped us build a replica of the dashboard and also include website-like functionality for e.g., interactions after clicking buttons, embedding HTML, setting up various states, etc. We had many issues with creating interactions on top of HTML blocks that we got from EO Dashboard (city-level ESA TROPOMI graphs and map product for ESA TROPOMI, NASA OMI and OMI difference). We solved this issue by learning how to create different states in the prototype and then creating links so that the transition between each other seamlessly. Our team also learned how to use video and audio editing software like VideoCutter, Kapwing, VoiceMaker, etc. We believe we were able to accomplish our mission of building a design solution and building new features that help address this particular challenge. We also consider all the learnings that we got from doing this project are part of our accomplishments. 

We used data directly obtained from the EO Dashboard for the following components of our project:

·       ESA TROPOMI map-based animation was made using snapshots from the EO Dashboard.

·       ESA TROPOMI graphical animation was made using CSV city-level data obtained from the EO Dashboard.

·       HTML code from the EO dashboard was used to embed city-level graphs.

·       HTML code from the EO dashboard was used to embed the three tabs for TROPOMI, NASA OMI, and NASA OMI Difference

section

·       Pictures of the title bar, bottom bar, and static map were obtained from EO Dashboard for making our dashboard look similar to the EO Dashboard.

We also used data specifically from NASA. Following are the details:

·       NASA OMI and OMI difference map-based animations were obtained from the Global Nitrogen Dioxide Monitoring initiative by Goddard Space Flight Center (https://so2.gsfc.nasa.gov/no2/no2_index.html)

·       NASA OMI graphical animation was made using city level CSV data from the Global Nitrogen Dioxide Monitoring initiative by Goddard Space Flight Center (https://so2.gsfc.nasa.gov/no2/no2_index.html)

·       Top mover’s data was also obtained from the same NASA source as above.

Demo video link: https://youtu.be/-jColU0nIMw

Project link (please consider trying the prototype yourself): https://pr.to/O5XSA2/

Project slides: https://docs.google.com/presentation/d/1cdBCcimot4FEDaDhIi-u29NjiXfP17FWKFW9eB9kwF0/edit?usp=sharing

Our project is built like a replica of the present EO dashboard and provides a detailed design solution on how the new features we proposed can be integrated into the present dashboard without making any major changes to how the dashboard currently works. As we have done for air quality similar design approaches can be used for other data indicators as well. We believe that from a design standpoint our solution is easy to integrate into the dashboard, but we will definitely need to learn (and we will be happy to) vuejs to provide a more cohesive solution if we get the opportunity to work with the EO Dash team. 

(1)  Earth Observing Dashboard. (n.d.). Retrieved June 27, 2021, from https://eodashboard.org/

(2)  “Global Nitrogen Dioxide Monitoring Home Page.” NASA, NASA, June 27, 2021, https://so2.gsfc.nasa.gov/no2/no2_index.html

(3)  <input type="date">. (n.d.). Mozilla.Org. Retrieved June 27, 2021, from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

#visualizing #time #design #EOdashboard #EOdashboardhackathon #earthsystem #airquality #harmonization #visualization #mockup

This project has been submitted for consideration during the Judging process.