Global Dev Stories

An interactive data storytelling dashboard that explores how countries develop across infrastructure, education, technology, health, gender inclusion, structural change, and business conditions.

Built with React and Vite, the app turns World Development Indicators into a narrative-driven experience with rich visualizations, country comparisons, and simple prediction modeling.

Highlights

• Multi-page storytelling dashboard with 7 themed development chapters
• Interactive country selection and year-range filtering
• Comparison charts across multiple countries and development indicators
• Story-driven visual sections using Recharts components
• Built-in prediction view using linear regression and confidence bounds
• Responsive layout with a custom sidebar and immersive visual design
• Dataset-driven experience powered by data.json generated from World Bank indicators

Tech Stack

• React 19
• Vite
• React Router DOM
• Recharts
• ESLint

What the dashboard does

• Presents a high-level overview of global development trends
• Breaks the analysis into narrative sections such as infrastructure, education, health, and technology
• Lets users filter by countries and time range for focused comparisons
• Visualizes relationships between indicators with charts such as line, area, bar, scatter, radar, lollipop, bump, and dumbbell charts
• Provides a prediction page that projects future indicator values through 2030 using linear regression

Data

The dashboard is based on World Development Indicators covering the period 2000 to 2024. The app loads its structured dataset from public/data.json, which is then used to drive all views and charts.

Included files in the project also contain the raw CSV sources used to prepare the dashboard dataset:

• WDI_Data_2000_2024.csv
• WDICSV.csv
• DSV_dashboard_data.csv

Project Structure

src/
	App.jsx               # Main app shell, state, routing, and data filtering
	main.jsx              # React entry point
	index.css             # Global styling
	components/
		Sidebar.jsx         # Navigation sidebar
		Charts.jsx          # Shared chart and card components
	pages/
		Overview.jsx        # Overview and story sections
		StoryPage.jsx       # Story chapter pages
		Predictions.jsx     # Linear regression forecast page
public/
	data.json             # Dashboard data source

Getting Started

npm install
npm run dev

Then open the local URL shown by Vite in your browser.

Available Scripts

• npm run dev - start the development server
• npm run build - create a production build
• npm run preview - preview the production build locally
• npm run lint - run ESLint checks

Notes

• The project is designed as a visual, presentation-friendly dashboard for a final data visualization project.
• The UI emphasizes storytelling over raw tables, helping users understand development patterns through charts and narratives.
• The prediction page is intentionally lightweight and should be treated as an exploratory forecast rather than a full econometric model.

License

Add your preferred license before publishing to GitHub if the repository will be shared publicly.