imports exports
data visualization

imports exports data Visualization

A few years ago, the national energy board came out with an initiative to make their data more transparent. So they released a bunch of spreadsheets, thousands of columns of energy data to the public and they found out that people had no interest in reading them.

The NEB got together with the University of Calgary’s data visualization department to design custom visualizations for their energy data.

The imports & exports visualization is the third visualization that the University of Calgary and VizworX did for the NEB.

This project was completed in June of 2018 and updates its data quarterly. It has been released to the public in English and French and uses Google analytics to track user events. It is also keyboard accessible and accessible for those with impaired hearing.

project overview

Imports & Exports looks at imports and exports of energy products into Canada, mostly from the United States. It uses map pieces, arrows, bar charts, and stacked bar charts to display the data. It is a very complex visualization that focuses on electricity, crude oil, natural gas, natural gas liquids and refined petroleum products. The data can be sorted by most imports or exports which can also be filtered. Depending on the price or value the energy product is measured in, this also changes the way the data is calculated. The user can play through the timeline and filter down the dates to see how it fluctuates. Some of the data is not visible so confidential points are identified to the user. This visualization’s data can be downloaded and its code is all open source on the NEB GitHub. A screenshot of the visualization can also be taken.


React, Redux, Reselect, React Portal, Immutable, Javascript, HTML, CSS, Sass, SVG, Bitly