Relaunching the World Bank Open Data platform with React and Node.js

Last Thursday, the World Bank’s data team announced the forthcoming all-new data.worldbank.org website. The new site will be part of the World Bank’s long-term commitment towards opening their data to the world. There are many improvements over the previous site, including more interactive data visualizations for charts and maps, a user-friendly search bar to traverse multiple datasets, and adding support for mobile browsing using responsive design. Wiredcraft is proud to work in collaboration with the World Bank’s data team in developing this new site.

The site runs on a Node.js backend and we’ve diverged from the age-old technique of having separate page loads for every site action, rebuilding the site with a modern single-page app approach. This means we only load data to change the graphs and components that need updating. When a user searches for and selects an indicator, country, or topic, we don’t need to request an entirely new page; we’re generating a chart in the same page with new data loading in place. Even though the site is essentially a single page app, for the sake of maximizing SEO, we change the URL on the fly for each new chart update or site action.

To maintain a good SEO ranking and increase the initial page-load speed, we do server-side rendering (for some JS-driven sites, the site is crawled before the JS has rendered the DOM; server-side rendering remediates this problem). The data flows in from the World Bank’s Open Data API and we wrap that API with FalcorJS and use a Redis cache to enhance the site’s performance.

In the backend, we use FalcorJS to traverse the data, which is a service for making data fetching and transfer more declarative rather than imperative. The Falcor server is well-suited for interpreting complex requests and returning relevant data. We thought long and hard about trying this new technology for such a big project, but it turns out we love Falcor because it saves time and headaches for developers and users alike. Falcor batches multiple sequential requests into one in order to reduce the request count, which has resulted in noticeable mobile performance improvements.

Falcor passes the data to the single page app using AJAX and we use the D3 library to create the charts for the given dataset. It’s a comprehensive chart library focused on displaying large data sets efficiently and has good support for displaying data on mobile devices. D3 also allows a lot of customisation, so it’s not so much plug-and-play, but it is definitely more powerful than many of the alternatives.

All the main pages are responsive and available to fit various mobile devices’ browsers, as well as larger desktop screens. The site also now supports the latest versions of Chrome, Safari, Firefox, and IE9+. We’re also using our open source egg SASS/Bourbon library to enable advanced widgets on the front page like video embeds and the preview mini-chart.

This upcoming site plays to the strengths of Node.js, Falcor and D3 in order to deliver highly relevant data visualizations from the World Bank’s Open Data API. We hope you like it and would love your feedback. Hit us up on Twitter or via email and share your thoughts with us!