Insights

Visualizing Real-time Data Driven Weather Infographic

5 min read • Michael Carroll on Mar 9, 2016

Over the last decade, we have realized how to make more informed decisions by harnessing the power of data. There is one noticeable trend in this entire buzz: infographics. Infographics are a way of presenting data in a visually engaging way. As the old adage goes, “A picture is worth a thousand words.” Infographics rely on this general fact to portray information in an instant visual representation that is worth many hours of data wrangling.

This blog post is an attempt to build a bare bones, data driven infographic to portray the weather conditions of a few cities across the world. The idea is to see if we can build a very basic infographic dashboard which is data driven and supports user interactivity.

Infographic Overview

This project relies on a few third party REST APIs to get the current weather conditions and some related parameters.

  1. Open Weather Map – provides most of the common weather information like temperature, windspeed, humidity, etc. for a location.
  2. Sunrise & Sunset – provides current sunrise and sunset time for a location.
  3. Google TimeZone – provides the time and time zone information for a location.

These APIs are accessed from a server application running on Node.js with Express.js . The client-side web interface for the infographic is based on Mapbox, for displaying the world map, and PubNub acts as the data transfer bridge between server and the client.

After initial loading, the infographic looks like this:

World Map With Weather

As can be seen, ten predefined cities from across the world have weather marker cards displayed against their name. These cards are updated once in 15 minutes to display the current weather conditions.

You can get the complete source code of this application on Github. Also, refer to the README file for setup instructions for hosting this infographic on your own server.

Weather Infographic Components

This infographic has a server component and a client component.

Weather Data Server

The server component is responsible for fetching the data from remote APIs periodically, storing them, and hosting the web page container for the infographic.

The server runs under Node.js environment and is dependent on a few Node modules, including the PubNub Javascript SDK. The package dependency can be obtained from the package.json definition:

{
 "name": "Weather_Now",
 "version": "0.0.1",
 "description": "Real-time Weather Information Aggregator",
 "main": "server.js",
 "scripts": {
   "start": "node server.js"
 },
 "dependencies": {
   "async": "^1.4.2",   
   "express": "~4.12.x",
   "pubnub": "~3.7.14",
   "superagent": "~1.3.0"   
 },
 "engines": {
   "node": "4.2.4"
 }
}

The application logic for server is contained in the file server.js.

After starting the server and initializing PubNub, the application starts a periodic fetch operation. The fetch() function is where the API requests happen.

This function uses an async mechanism to fetch data from all APIs and then combines them into a JSON object for every city.

Finally, the data is pushed to the client in a PubNub channel named wGet. This process repeats every 15 minutes.

Infographic Client

The client application is in the form of a HTML webpage and its associated CSS/JS file in the public directory. The Infographic is displayed on top of a MapBox interface. Apart from this, the HTML page uses JQuery for accessing the HTML elements, Mustache template library for HTML templating, and moment.js library for date & time calculations. The PubNub Javascript SDK is also included in the HTML for communicating with the server.

<head>
   <meta charset='utf-8'>
   <meta name='viewport' content='initial-scale=1.0, width=device-width' />
   <meta name='keywords' content='Weather-Now Real-time Weather Aggregator' />
   <link rel='stylesheet' type='text/css' href='css/style.css'>
   <script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
   <script src='https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.2.0/mustache.min.js'></script> 
   <script src='https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.js'></script>
   <script src='https://cdn.pubnub.com/pubnub-3.7.14.min.js'></script>
   <script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js'></script>
   <script src='https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.4.0/moment-timezone-with-data-2010-2020.min.js'></script>
   <link href='https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.css' rel='stylesheet' />
   <title>Weather-Infographic</title>
</head>

The client side application logic is contained in the app.js file. After loading, the client initializes a PubNub callback to listen for weather updates from the server on the channel named wnGet. During connect, it requests the server for the current weather information on another channel wnPutTime. This channel acts as a requesting channel for every new client to get the current weather data initially when it loads on the browser.

Afterwords, the client refreshes the view every second and displays a weather marker card for all the cities. Each marker card displays a symbolic view of the current weather condition.

weather marker card

There are four indicators in the marker card.

  1. Temperature Indicator : shows the approximate current temperature, in the form of blue to red gradient. Blue signifies cold and red signifies hot.
  2. Humidity Indicator : shows the current humidity in the form of a light blue strip on the right of the marker. The height of this strip approximates the humidity percentage.
  3. Weather Condition Indicator : shows the current weather with several icons. It can include a mix of sun, moon, clouds, rains and wind icons to indicate an overall assessment of the current weather.
  4. Day/Night Indicator : The background color of the marker card indicates whether it is currently day or night. Light yellow indicates day and light gray indicates night.

Weather Map Interaction

The user can click on any one of the markers of a city to display a popup. This popup window provides the exact measurements of the weather parameters along with the current local time of that city.

world map with card

The rendering of marker and popup is handled by the getMarker() and getPopup() functions respectively.

The getMarker function gets triggered for each city, every time the server sends the weather data. However, getPopup is triggered for a specific city, whenever the user clicks on the marker card of that city.

Wrapping Up

This demo is an attempt to build a basic, dynamic data driven concept. It can be enhanced further by bringing in historical weather data, analytics and pattern visualizations, which can make it a full blown and visually appealing infographic, suitable for interactive public displays. We look forward to your comments and suggestions to improve this concept. Stay tuned for more applications of PubNub on visualization.

0