Project launched: WEF Inclusive Growth Report 2015
This week, the World Economic Forum launched “The Inclusive Growth and Development Report 2015” with combined forces of 9elements and the help of our friends.
The report, which covers 112 economies, seeks to improve our understanding of how countries can use a diverse spectrum of policy incentives and institutional mechanisms to make economic growth more socially inclusive without dampening incentives to work, save and invest.
The Stack
9elements has done many data visualization projects in the past. For the OECD Data Portal, we’ve mainly used D3 and d3.chart. D3 is a great library for smaller or isolated visuals, but when the project grew larger and the code started to become difficult to maintain, incorporating mobile support on top was manageable but a daunting task. To avoid these sorts of problems in the future, we’ve decided to switch to a better front-end development stack.
For the main visuals we’ve chosen to render SVG with React.js. We love React.js for its fresh approach to write reusable web components and its blazing fast virtual DOM. The build system was based on Gulp.js for automation and Webpack for transpiling and packaging. We’ve used Babel to write ECMAScript 6 ECMAScript 2015 and compile to JavaScript that even older browsers understand. We’ve made heavy use of the new module syntax and ECMAScript 2015 classes to structure our code.
Not only did we want HTML components with React, but we also intended to incorporate the component approach with CSS: All CSS was developed using the BEM methodology and we’ve created some nice React and SASS helpers that speeded up our progress while keeping the CSS maintainable and sane.
Being able to export individual visualizations as PDF files was a fundamental requirement in this project. After all, we have to conclude that using React had the big advantage of being able to render all the visuals on the server and simply convert the HTML/CSS into PDF files using PrinceXML. With D3 that requirement would have become a nightmare and on top of that we would have had to use a very fragile stack with many components (like PhantomJS).
Bottom Line
With regard to the front-end stack we would definitely recommend using React.js with Webpack and Babel, especially with mobile usage in mind. If you like our work and have a project in mind feel free to contact us.
