Bringing Data to Life: Real-time Visualizations

3 min read Joe Hanson on Dec 2, 2014
Try PubNub Today

Free up to 1MM monthly messages. No credit card required.

Subscribe to our newsletter

By submitting this form, you are agreeing to our Terms and Conditions and Privacy Policy.

Real-time visualizations are changing the way we transfer, process, and publish data. Here's a general overview and some use cases.

For a long, long time, our data has been static. Data is updated when we ask it to be, whether it’s querying and inputing new data, refreshing a page, or drawing a new bar graph.

But that was yesterday.

Today, with the emergence of data streaming, we now have real-time data functionality at our fingertips. Our data is now alive.  Data is streamed, processed, and visualized as it happens. Line charts and bar graphs update themselves. Immersive, interactive visualizations creatively display fresh data as it streams. When it comes to how we display our real-time data, the sky’s the limit.

What is a real-time visualization?

A real-time visualization is the processing and publishing (visually) of any type of data is it changes, in real time. Some examples:

  • Line chart that draws itself
  • Bar graphs changing heights
  • Bubble chart with varying sized bubbles
  • 3D Earth with lines showing messages being sent
  • Heat maps based on twitter traffic
  • Changing lights based on voting

The video above has a good number of examples in action, so check it out!


How do we build real-time visualizations?

At its core, a real-time visualization is made up of two components: a stream of data and a user interface.

  • Stream of Data

A stream of data is a constant flow of data where data packets is sent whenever that data is updated. This could be weather forecasts, stock prices, revenue, or Tweets, pretty much any data group that changes over time. Because a stream of data is active, it needs to have persistence, an open connection that allows data to be transferred freely.

If you want a tutorial on how to turn a source of data into a stream, we’ve got a good one here.

  • User Interface

A real-time visualization requires a flexible, interactive user interface where changes are easily displayed based on changes sent from the stream of data.

What technologies do we use?

To build a user interface that reflects changes to a stream of data, you can use one of the many programming libraries out there. Two well known JavaScript libraries that can be used for data visualizations are D3js and WebGL.

D3js (Data-Driven Documents) uses digital data to drive the creation and control of graphical forms entirely in a web browser, which goes hand in hand with real-time visualizations. It enables you to make beautiful and easy to understand data visualizations.

WebGL brings 3D to the browser, which means we can build some amazing visualizations outside the two dimensional realm. When we bring WebGL to the cloud, we can then stream data to a WebGL application to create some pretty interesting in-browser 3D visualizations.

If you want to see some examples, check out our list of D3js and WebGL visualization tutorials.

What’s the value?

Old data is bad data. And for a business, up to date data is essential. Visualizing that data and making it easy and clear to understand is key for business decisions and makes monitoring that data more streamlined. An operations team can monitor their systems or networks and spot trends or issues. A financial team can have accurate, up to the millisecond financial data.

But it doesn’t just stop with strictly business. From a marketing standpoint, you can display trends, social mentions, etc, and display them for anyone to see. For second-screen and entertainment experiences, you can display poll and trivia scores as more players interact.

Real-time visualizations have even found their way into art, where two visualization artists created a data-driven performance where a series of questions were asked to an audience, and based on their responses, a projection on a public facade changed. Read more about the artists and their project United Colors of Dissent here.

real-time visualization real life

Data-driven performance United Colors of Dissent creates a real-time visualization based on audience answers, and visualizes results on public facades.

Immediate data visualization is changing the way we look at data. Current data is smart data, and the how he process and visualize data is getting smarter.

More from PubNub

Top Trends to Engage Your App Users
InsightsSep 27, 20224 min read

Top Trends to Engage Your App Users

Take a look at the top trends that are the most effective in attracting customers and reducing churn, and how you can incorporate...

PubNub Staff

PubNub Staff

Comparing Game Engines: Unity vs Unreal vs the Rest
Real-Time Gaming BlogSep 21, 20225 min read

Comparing Game Engines: Unity vs Unreal vs the Rest

Comparing the major game engines: Unity vs Unreal Engine vs Corona SDK vs GameMaker Studio, including the benefits and cons of...

PubNub Staff

PubNub Staff

Python Socket Programming: Client, Server and Peer Libraries
BuildSep 21, 20226 min read

Python Socket Programming: Client, Server and Peer Libraries

Sockets (aka socket programming) enable programs to send and receive data, bi-directionally, at any given moment. This tutorial...

PubNub Staff

PubNub Staff