La version française suit.
This Exploring Canada’s Energy Future interactive online tool is part of the National Energy Board’s (NEB) Data Visualization Initiative (DVI) . The DVI is a three-year initiative to transform how the NEB structures and shares data. The objective is to enable evidence-based decision making and remove barriers to understanding Canada’s energy and pipeline systems through the use of user-friendly interactive visualizations. This visualization is based on our flagship publication – Canada’s Energy Future. You can explore Canada’s energy future right from your own computer. In the months and years to come we will use this innovative format to share our pipeline safety data, energy data series, energy infrastructure information, and a host of other topical data.
If you want to use the data for research and undertake your own review, all the data is downloadable and shareable. The chart images are also downloadable, and if you are interested in the source code for the visualizations, it is available on the government’s Open Government portal: open.canada.ca.
We hope we are hitting the mark. Your feedback is essential.
Email us with your comments and ideas: energyindesign@neb-one.gc.ca. We look forward to hearing from you.
Abha Bhargava (Director), Matthew Hansen (Market Analyst), Bryce van Sluys (Market Analyst), Chris Doleman (Market Analyst), Michael Nadew (Market Analyst)
Annette Hester (Concept and Coordination); Katherine Murphy (Project Manager); Faiza Hussain (Administrative support); Stephen Chow (Data Coordination); Garth Rowe (Web Lead); Jim Chisholm (Information Management and Technology)
Lead Design Research: Sheelagh Carpendale and Wesley Willett, iLab, University of Calgary.
Design: Lindsay MacDonald, Charles Perin, Jo Vermeulen, Doris Kosminsky, Søren Knudsen, Lien Quach, Peter Buk, Shreya Chopra, Katrina Tabuli and Claudia Maurer
Lead Technical: Vizworx
Technical: Stephanie Sachrajda, Patrick King, Alaa Azazi, Abhishek Sharma, Ben Cousins and Claudio EsperançaMap showing provinces and territories reporting 2009 swine flu (H1N1) cases in Canada by Fonadier is licensed under CC BY 3.0 / Re-colored and rotated from original.
The repository includes all the code needed to run the Energy Futures Visualizations as a single page browser application. The app consists of four visualizations, driven by four sets of data on energy production and consumption in Canada.
Unlike the first version of the app, this version cannot be served as a set of flat files, it requires a running node server to supply data and do other work.
All of the project materials are licensed under the Open Government License - Canada.
You can download and run the application code to see how it was built and explore the data on your own computer. (If you only want to explore the visualizations, you may want to view the app on the NEB's website.)
You need Node.js, NPM and Git installed, and basic familiarity with a command line interface for your operating system (CMD or PowerShell on Windows, Terminal on OSX, Konsole or equivalent on GNU/Linux).
On Windows:
- Download the latest stable installer for Node and NPM on Windows.
- Download the latest Git for Windows installer.
- Optional Download Tortoise Git, a GUI for Git with Windows Explorer integration.
On other platforms: look for Node.js, NPM, and Git in your platform's package manager (such as homebrew on OSX, DPKG with Aptitude / apt-get on GNU/Linux).
The energy futures Github repository includes the publicly released source code and assets.
In one folder, run:
git clone https://github.com/NEBGitHub/energy-futures-visualization.git
In the energy-futures-visualization folder:
npm install- Fetch all of the Javascript dependenciesnpm run start- Run the development servernpm run watch- Transpile the app's code and dependencies, and watch for changes
The start and watch commands both need to run at the same time. You'll need two separate shell windows to do so. With both commands running, visit http://localhost:3000/dvs to see the app in action.
You can run the tests with npm run test.
For more information about the the app and this repository, see the included file documentation.md.
The app is written almost entirely in Coffeescript, a language that translates into Javascript while adding syntax improvements and eliminating whole categories of Javascript bugs.
Our build system is driven by Browserify, which is built on the NPM implementation of CommonJS. A basic understanding of the NPM package system is necessary to understand how our code is modularized, and how we're working with dependencies installed via NPM.
To create the visualizations we used D3, a Javascript library for manipulating documents based on data. We recommend that you familiarize yourself with D3 Selections and data joins.
We're the development team with VizworX who put this project together for the NEB. We aren't able to provide extensive support for this project, but you're welcome to reach out with questions and thoughts!
- Patrick King - patrick.king@vizworx.com
- Alaa Azazi - alaa.azazi@vizworx.com
- Ben Cousins - ben.cousins@vizworx.com
- Stephanie Sachrajda
- This application was not designed to work resolutions much smaller than 1024*768, it won't look very good on your smartphone. We have attempted to apply responsive design principles throughout, but mobiles were out of scope.
L’outil interactif Explorer l’avenir énergétique du Canada fait partie de l’initiative de visualisation de données de l’Office national de l’énergie. Échelonnée sur trois ans, cette dernière vise à transformer la manière dont l’Office structure et diffuse ses données. L’objectif est de soutenir un processus décisionnel fondé sur la preuve et d’éliminer les obstacles à la compréhension des réseaux énergétiques et pipeliniers canadiens grâce à des visualisations interactives faciles à utiliser. L’outil repose sur la publication phare de l’Office, Avenir énergétique du Canada; il vous permet d’explorer l’avenir énergétique du Canada à partir de votre propre ordinateur. Au cours des mois et des années à venir, l’Office utilisera ce format novateur pour diffuser ses données sur la sécurité des pipelines et sur l’énergie, l’information qu’il possède sur l’infrastructure énergétique et une foule d’autres renseignements spécialisés.
Si vous souhaitez utiliser les données pour vos recherches ou pour en faire votre propre analyse, vous pouvez les télécharger et les partager. Les graphiques peuvent aussi être téléchargés. Quant au code source des visualisations, il est accessible sur le portail du « gouvernement ouvert » à l’adresse ouvert.canada.ca.
Nous espérons avoir atteint notre objectif. Votre rétroaction est essentielle.
Vous pouvez nous la faire parvenir, ainsi que vos suggestions, à l’adresse conceptionenergie@neb-one.gc.ca. Votre opinion compte.
Abha Bhargava (directrice) et Matthew Hansen, Bryce van Sluys, Chris Doleman et Michael Nadew (analystes de marchés)
Annette Hester (conception et coordination); Katherine Murphy (gestionnaire de projet); Faiza Hussain (Soutien administratif); Stephen Chow (coordination des données); Garth Rowe (responsable du Web); Jim Chisholm (gestion de l’information et technologie)
Recherche conceptuelle sous la direction de Sheelagh Carpendale et Wesley Willett, iLab, Université de Calgary
Conception : Lindsay MacDonald, Charles Perin, Jo Vermeulen, Doris Kosminsky, Søren Knudsen, Lien Quach, Peter Buk, Shreya Chopra, Katrina Tabuli et Claudia Maurer
Chef technique à VizworX
Aspect technique : Stephanie Sachrajda, Patrick King, Alaa Azazi, Abhishek Sharma, Ben Cousins et Claudio EsperançaLa carte montre les provinces et territoires selon les signalements de cas de grippe A (H1N1). Elle a été créée par Fonadier et porte la licence CC BY 3.0. L’original a été recoloré et pivoté.
Le référentiel renferme le code nécessaire à l’exécution des visualisations d’Avenir énergétique dans un navigateur basé sur le concept SPA (single page application). L’application comporte quatre visualisations, alimentées par quatre ensembles de données portant sur la production et la consommation d’énergie au Canada.
Contrairement à la première version de l’application, ce programme ne peut pas être exécuté comme un ensemble de fichiers non hiérarchiques; il requiert un serveur node.js en cours d’exécution pour fournir les données et accomplir d’autres tâches.
Toutes les composantes du projet sont visées par la [licence du gouvernement ouvert – Canada] (http://ouvert.canada.ca/fr/licence-du-gouvernement-ouvert-canada).
Vous pouvez télécharger et exécuter le code d’application pour voir comment il a été établi, et examiner les données sur votre propre ordinateur. (Si vous voulez simplement examiner les visualisations, vous pouvez voir l’application sur le site Web de l’Office.)
Node.js, NPM et Git doivent être installés sur votre ordinateur, et vous devez avoir une connaissance élémentaire d’une interface de ligne de commande pour votre système d’exploitation (CMD ou PowerShell dans Windows, Terminal dans OSX, Konsole ou l’équivalent dans GNU/Linux).
Dans Windows :
- Téléchargez la plus récente version stable du programme d’installation pour Node et NPM pour Windows.
- Téléchargez la plus récente version du programme d’installation Git pour Windows.
- Facultatif Téléchargez Tortoise Git, une interface utilisateur graphique (GUI) pour Git permettant l’intégration à l’Explorateur Windows.
Autres plateformes : recherchez Node.js, NPM et Git dans le gestionnaire de progiciel de votre plate-forme (Homebrew dans OSX, dpkg avec Aptitude, apt-get dans GNU/Linux).
Le référentiel Github sur l’avenir énergétique renferme le code source et les actifs qui sont déjà du domaine public.
Dans un dossier, exécutez :
git clone https://github.com/NEBGitHub/energy-futures-visualization.git
Dans le dossier visualisation-avenir-energetique :
npm install– Extraire toutes les dépendances de Javascriptnpm run start– Exécuter le serveur de développementnpm run watch– Transpiler le code de l’application et les dépendances, et vérifier s’il y a des changements
Les instructions start et watch doivent être exécutées en même temps. Pour ce faire, il faut deux fenêtres pour ligne de commande distinctes. Pendant l’exécution des deux instructions, visitez le site http://localhost:3000/dvs pour voir l’application à l’œuvre.
Vous pouvez exécuter les tests grâce à l’instruction npm run test.
Pour plus d’information sur l’application et le référentiel, consultez le fichier documentation.md ci-inclus.
L’application a été écrite presque entièrement en Coffeescript, un langage qui traduit en Javascript en apportant des améliorations à la syntaxe et en éliminant des catégories entières de bogues de Javascript.
Notre système de génération est piloté par Browserify, qui repose sur la mise en œuvre de NPM CommonJS. Il faut avoir une connaissance de base du système intégré NPM pour comprendre la façon dont notre code est modularisé et se servir des dépendances installées par l’entremise de NPM.
Pour générer les visualisations, nous avons utilisé D3, une bibliothèque Javascript permettant de manipuler des documents à partir de données. Nous vous recommandons de vous familiariser avec D3 Selections et data joins.
L’équipe de développement de VizworX a réalisé ce projet pour le compte de l’Office. Nous ne sommes pas en mesure d’assurer un soutien complet pour ce projet, mais vos questions et vos suggestions sont les bienvenues!
- Patrick King, patrick.king@vizworx.com
- Alaa Azazi, alaa.azazi@vizworx.com
- Ben Cousins, ben.cousins@vizworx.com
- Stephanie Sachrajda
- Cette application n’est pas conçue pour des résolutions d’écran inférieures à 1024*768; le résultat ne sera pas très intéressant sur un téléphone intelligent. Nous nous sommes efforcés d’appliquer des principes de conception adaptés partout, mais les appareils mobiles ne faisaient pas partie du mandat.