Introduction

This bar graph is intended to represent SFU’s research revenue over time in a dynamic, snappy and beautiful way.

It is coded such that, depending on what data is fed into, it will automatically represent those years without needing to edit the code. The overall design is intended to match SFU branding and deliver a fresh interactive experience when visualizing SFU’s impressive research performance over the years.

D3.js Visualization

Role

Using D3.js and the in-built stack-bar functions I developed the visualization myself.

Through each iteration I would improve upon various aspects such as the mouse-events, the visual styling and last but not least, the animation.

Project Outcomes

I learned a lot about D3.js and the best practices for approaching a data visualization project.

The setup of the margins and dimensions are often understated in online examples and crucial to clean and clearly structured code. Other things I picked up were asynchronous functions (Promises), how to use D3 ‘tweens’ and how to create well timed yet sophisticated animations.

As for the back-end, I learned a lot about data cleaning and preparation through the use of Python and the Pandas package.