BRI vs Non-BRI Development Dashboard

Live demo: https://com-480-data-visualization.github.io/DVX/

Screencast: https://drive.google.com/file/d/1u2UHO5cosHpBoiP0CPryIV2T1jyUtohb/view

Overview

This project is an interactive data story about the Belt and Road Initiative (BRI), launched in 2013. It asks whether BRI countries follow development trajectories that differ from non-BRI countries across multiple socio-economic dimensions, rather than relying on a single headline indicator.

The dashboard is designed for students, researchers, and general readers who want a spatial and longitudinal view of global development. It combines a global map, time-series comparison, a country-level snapshot view, and a post-2013 change summary into one scrolling narrative.

Intended Use

The site is meant to be explored interactively.

You can use it to:

• compare BRI and non-BRI countries across time
• inspect a country's classification and development profile from the world map
• examine long-run trends for selected indicators and regions
• study cross-country variation in a single year with the scatterplot snapshot
• summarize how regional averages changed after the 2013 BRI announcement

The interface is intentionally descriptive rather than causally prescriptive, and is intended to support exploratory analysis and discussions such as for classroom purposes.

Technical Setup

The project is a static front-end application built with:

• HTML5 for the page structure
• CSS Grid and responsive CSS for the layout
• D3.js for all data loading, scales, axes, map rendering, and chart interactions
• vanilla JavaScript for navigation, filtering, and dashboard logic

The main entry point is index.html. The interactive logic is split between js/script.js, which handles page behavior, and js/vis.js, which renders the visualizations.

There is no build step and no package manager configuration in this repository. The site can be deployed directly as static files, which is why it works well with GitHub Pages.

How To Run Locally

Because the dashboard loads CSV and GeoJSON files with D3, it should be served over HTTP rather than opened directly from the file system.

One simple option is to start a local web server from the project root:

python -m http.server 8000

Then open:

http://localhost:8000/

Any equivalent static server will also work.

Project Structure

• index.html: main landing page and scrolling narrative
• css/: shared styling, plot styling, and responsive rules
• js/script.js: navigation behavior, sticky header, and dashboard controls
• js/vis.js: map, radar chart, line chart, snapshot scatterplot, and change chart logic
• data/: cleaned and imputed datasets, metadata, and the world map GeoJSON
• img/: logo and hero imagery
• milestone1/: exploratory analysis notebook and archived data used during development
• milestone2/: earlier static version of the website

Data Pipeline

The main analytical dataset is data/Final_Imputed_Panel_Data.csv. It contains country-year observations from 2000 onward and is used throughout the dashboard for the radar chart, time trends, snapshot scatterplot, and change chart.

Supporting files include:

• data/bri_country_status.csv for BRI, non-BRI, and China classification used by the world map
• data/world.geojson for country boundaries
• data/Mapping_Dictionary.csv for indicator name alignment
• data/WDI_Dataset.csv and related WDI exports for the original World Bank source data

The data were cleaned and harmonized to make cross-country comparison possible. In the final dashboard, the visual story relies on a common set of normalized or comparable indicators, while preserving the original country-year structure.

Main Visual Modules

The final page follows a top-to-bottom narrative with four core modules:

1. Geographic Overview: a choropleth world map that classifies countries by BRI participation, with a linked radar profile for the selected country.
2. Time Trends Across Countries: a line chart comparing aggregated BRI, non-BRI, and China series, with reference markers for 2013 and 2019.
3. Development Snapshot: a scatterplot showing country-level heterogeneity for a chosen year, with GDP per capita and internet usage as the main axes.
4. Change Since the BRI Launch: a horizontal bar chart summarizing regional change between 2013 and a selected end year.

Notes For Maintainers

• Keep the live site structure aligned with index.html and the scripts in js/ if you add or remove sections.
• If you update the datasets, keep the column names compatible with the parsing code in js/vis.js.
• The map and charts depend on the files in data/, so renaming or moving them requires updating the paths in the JavaScript code.

License And Attribution

The dashboard is part of the COM-480 data visualization project. The visualization and data processing were created for academic presentation and evaluation purposes. Please retain attribution to the project when reusing the material.

Created by Team DVX: Changlan Chen (406114), Yizhi Zhao (405689), and Kaile Chu (389972).