May 16

Data Visualizations – Making Weather Interactive

Each day, we process terabytes of data for use with our Aeris Weather API and Aeris Maps Platform and are always looking for improved ways to visualize all the data. D3.js is one of the most popular data visalization libraries for the web. By combining D3.js with other open-source libraries such as Crossfilter and DC.js, as well as our own Aeris Weather API, some great weather data visualizations are possible.

Interactive Storm Reports

Last month there were just under 11,000 storm reports across the US, which includes data on tornadoes, hail size, snowfall, rainfall and more. Visualizing such a large amount of data in a clean and understandable way can be a challenge, yet it’s the perfect opportunity for an interactive data visualization.

Interactive Storm Reports Data Visualizations

Interactive Storm Reports Data Visualizations

Our interactive storm reports page allows viewing reports across a date range and selecting an area on the maps and charts to filter the data set.  This type of visualization can be quite useful in reviewing not only the types of severe weather and storm damage, but also the progression of the damage across a specific time period.

Creating Interactive Data Visualizations

To create the storm reports visualization, you’ll need access to our Aeris Weather API for the data and will be utilizing the following open-source Javascript libraries:

  • D3.js: A javascript library that can render interactive charts and graphics based on data.
  • Crossfilter.js: A javascript library for processing large datasets, providing fast interaction between coordinated views.
  • DC.js: A javascript wrapper for plotting graphs, that acts as the glue between D3.js and Crossfilter.

To demonstrate how easily interactive data visualizations can be created, we’ll step through a simple example whose source is also available on Github.

Simple Storm Reports Data Visualizations

Step 1: Setup an Aeris API app/namespace

If you have have not done so already, sign up for a free Aeris API Developer account. Once signed up and logged in to your account, select “Apps” from the account dashboard. From here you can register a new app/namespace, which for this example we just use an asterisk (*) as a wildcard namespace during development.  Copy the provided client_id and client_secret and paste these values into lines 6 and 7 of the stormreportcharts.js:

Step 2: Initialize the charts

Next initialize the charts using the DC.js library, which makes setting up and configuring charts very simple:

Step 3: Fetch the storm reports

We will be fetching the storm reports from the Aeris API via the search action, requesting up to 1000 storm reports from the past week, sorted newest to oldest. The source URL:

https://api.aerisapi.com/stormreports/search?query=country:us&from=-7days&to=now&limit=1000&sort=dt&client_id=XXXXX&client_secret=YYYYY

In the above example URL:

  • stormreports/search – This is the Aeris stormreports endpoint and search action
  • query=country:us – Find all storm reports within the US
  • from=-7days – Fetch storm reports for up to the last 7 days
  • to=now – Fetch storm reports up to the current time.
  • limit=1000 – Limit the maximum storm reports returned to 1000.
  • sort=dt – Sort the storm reports by date/time descending.

Next, we will utilize D3’s queue() function which allows asynchronous loading of both the map outline data and the storm reports information from the Aeris API.  Once both datasets have been loaded, the createCharts function will be called to process the data and render the charts:

Step 4: Data transformation

Once we have the storm reports data, we step through and transform the elements to be used with the charts, specifically formatting the category name and converting the timestamp to a Date object:

Step 5: Ingest the data through Crossfilter

Next, pass the data to Crossfilter to create data dimensions and data groups. Crossfilter acts as a two-way data pipeline so that when you make a selection, or filter on the data in one dimension/group, it is automatically applied to all other groups and charts. This creates a live, interconnected ‘on the fly’ update to all of the visualizations on the page:

Step 6: Create the charts

Now that we have our storm reports processed in Crossfilter, we can set up the charts using DC.js.  For each chart, we provide the necessary configuration properties, such as data dimension, group, axes, width, height, etc:

Step 7: Render the charts

Finally we can tell DC.js to render the charts:

That’s it! Now you have interactive charts that can be filtered and interacted with while automatically updating all of the other charts accordingly.

Expanding on this example, you can customize the charts further using CSS and the available properties within DC.js. Additionally, DC.js offers many other chart types beyond those used in the example.

Seeing is Believing

As you move forward with interactive data visualizations, you will find that many of the other datasets, or combinations of datasets, available within our Aeris API are perfect candidates for visualization.

For example, our Active Storm Cells visualization utilizes the stormcells endpoint of the Aeris API. Using the visualization techniques demonstrated in the examples above, you can quickly view which states have the most activity, whether there are any tornadic systems, or the various hail sizes and their storm cell locations.

Visualization can make otherwise ordinary information such as temperature and wind observations, earthquakes, record highs and lows, and observation/summaries really come alive.

Sign up for a free Aeris API Developer account and begin creating your interactive data visualizations today!

Leave a Reply

Your email address will not be published. Required fields are marked *