Project description

Our project is focused on delivering a primer on China’s Belt and Road Initiative to as wide an audience as possible, but specifically targeting a younger demographic between the ages of 18 to 35. Our company’s mission is to enhance Asia’s voice in the global narrative, and we felt obliged to correct some existing perceptions or coverage of the Belt and Road Initiative. We used our self-collected data to show nuance and context where applicable.

The Belt and Road Initiative is likely to affect millions of people, if it has not already done so. We believe it is important for everyone to have a basic understanding of what is happening to be future ready.

In the process of collecting information for this story, we did collect a lot more data than we ultimately used in the story. We are brainstorming ways to monetise this information with individuals or businesses interested in learning about the Belt and Road Initiative in greater detail.

What makes this project innovative?

Our goal for this story was to simplify and concisely cover a complicated topic so that laypersons can understand what the BRI entails. We broke the story up into chapters, each of which was framed with a question, so that at any point of the story the reader is able to keep track and understand what is happening. Maps played a central role in our story, and we constantly switched between differing datasets. We combined traditional scrollytelling formats with maps, which was very technically challenging to accomplish.

What was the impact of your project? How did you measure it?

We are a small editorial outfit and we’re in the early stages of growing our readership. This project, “Understanding the Belt and Road”, was our first attempt at a user-centric data immersive storytelling experience. We had no expectations for the story when we published it. Since then, we have been very heartened by the results. Firstly, the story had over 120 shares from our post on Facebook alone, and likely another hundred in subsequent sharing as we had more than 150 interactions on shares. Below are some metrics that showed the level of engagement of our story with our target audience on desktop and mobile. Desktop Avg. read time: 4.5 minutes, Audience breakdown: Ages 18-34 (55%), avg. read time between 4 to 6 minutes. Mobile Avg. read time: 4 minutes, Audience breakdown: Ages 18-34 (35%), avg. read time between 3 to 5 minutes. More importantly, we received a good amount of genuine engagement with the story across all of our social media platforms, from Facebook, Instagram, and Twitter. The story was particularly well received by academics, who subsequently shared it on Facebook and Twitter. Notably, our story was picked up and reposted by the web version of Geographical (official magazine of the Royal Geographical Society, link here: Ho Ching, the CEO of Temasek Holdings and wife to the Prime Minister of Singapore, also shared our story on her Facebook page. We were also invited to speak about the story on three occasions, first at a class at Yale University through Skype, a Business and Human Rights Law class at Singapore Management University, and at the Data Vis Meetup Group in Singapore. The Meetup event ( had substantial sign-ups, and about 40 people turned up at the talk, with many people asking us questions about our editorial and development process for this story.

Source and methodology

We pooled our information from a huge variety of news sources, and they are too varied and multiple to describe here. They were mainly from China's national news outlets, such as or, or from other national papers where the relevant projects were happening. We also made sure to verify these sources and check if other pages were also reporting on the same projects. We also read published research, such as journal articles, books written by experts on the topic, reports by banks and consultancy firms, and many articles on the topic by other established newspapers, such as Reuters, the New York Times, and the South China Morning Post. Where applicable, we have cited the sources directly on the story, particularly where key facts and figures are mentioned. We also included references for key resources at the end of our story. News on specific projects are kept by us internally, and can be verified upon request. The information was collected in Google Sheets, and exported in .csv format. Where applicable, we matched them with polygons sourced from Natural Earth or

Technologies Used

The BRI story was fundamentally a Single Page Application. It was built using VueJS, a modern javascript framework. The building blocks of the app was divided into 3 main segments—he data, the components and the storytelling. Firstly, the datasets are generated using ArcGIS which will output them in GeoJSON format. After collecting and preparing all the data, we then read them inside our VueJs application. Our toolbox included Vuex, Mapbox, D3.js and other utility libraries such as Lodash. Vuex was a state management library provided by VueJs that we use to manage the state of our app. Next, Mapbox and D3.js served as an integral part of our app that took care of the map and data visualisations respectively. We used Mapbox studio to proof data compatibility, to streamline the style specifications and to control the map position and camera view/transition. Lastly, the BRI story was narrated through a scrolly-telling format. The story progressed as the reader scrolled and interacted with the app. We used scrollama.js to detect the intersection of elements. Under the hood, scrollama used a relatively new browser API - IntersectionObserver Web API combined with css position values. This allowed a smoother experience compared to other libraries that use an outdated and heavier scroll-events to manage detection. We used Figma, a collaborative user interaction design tool to storyboard the sequence of the story and built a rudimentary prototype.

Project members

Isabella Chua, Dylan Ng, Joceline Kuswanto



Click Follow to keep up with the evolution of this project:
you will receive a notification anytime the project leader updates the project page.