This project is a powerful data storytelling website built to visualize and analyze Consumer Price Index (CPI) data across 17 major cities in Pakistan (2023-2025). The platform uses detailed price similarity networks to precisely identify economic hubs and analyze deep market integration.
- Interactive Visualizations: Dynamic charts using Plotly to dissect and explore large CPI datasets.
- Economic Network Graphing: Mathematical modeling using NetworkX to map correlations and price similarities between cities.
- Clean Animations: Framer Motion components providing a professional, polished feel.
- Automated Data Processing: Custom Python scripts to efficiently extract, process, and generate static JSON endpoints.
- Framework: Next.js 15 (App Router)
- Language: TypeScript & Python
- Styling: Tailwind CSS
- Visualization: Plotly.js (
react-plotly.js) & Framer Motion - Data Engineering: Python (NetworkX, Pandas, NumPy)
web/: Next.js frontend application.src/app/: Core App router pages.src/components/: Reusable, interactive UI/visualization elements.public/data/: Static JSON data injected directly from the analysis engine.
Code/: Advanced Python scripts parsing and generating network analysis maps.
- Node.js 18+
- Python 3.8+ (for data regeneration)
- Navigate to the
webdirectory:cd web - Install frontend dependencies:
npm install
- Run the development server:
npm run dev
- Access the dashboard cleanly at http://localhost:3000.
If modifying analysis logic or extending the dataset range:
- Navigate to the script directory:
cd "Code/Graphs Generator/DataCodefiles"
- Run the export script:
python3 export_data.py
- Muhammad Dyen Asif: Lead Developer & Analyst