Shift Express 31

Shift Express 31 - Visualizing the Transportation Shift in Germany
An interactive data visualization website developed with Next.js, React, and D3.js

About

This website was developed as a semester project for the course Information Visualization at LMU Munich and revolves around the topic of transportation, specifically the usage of cars and public transport, between the years 2013 and 2022.

Visit the site: https://shift-express-31.vercel.app/

The interactive visualizations and charts are divided in three key findings, guiding the user through the data:

• Transportation Shift: Comparison of cars and public transport between 2013 and 2019
• Covid Impact: Deep Dive into the effects of tghe pandemic between 2019 and 2022
• Cars in Germany: Analysis of car ownership and usage in Germany from 2013 to 2022

The data has been retrieved and consolidated from the Federal Statistical Office of Germany and one of the leading Insuarnce Platforms in Germany.

Intro Section

Data Visualizations

Team Section

Challenges & Solutions

1. Consolidating Complex Datasets

• Challenge: Merging diverse public transport and car usage datasets into a cohesive format
• Solution: Consolidated raw statistics and transformed them into optimized JSON structures
• Result: Ensured rapid data fetching and seamless rendering for complex D3 visualizations

2. Guiding Data Exploration

• Challenge: Preventing user overload when presenting massive amounts of geographical data
• Solution: Structured the app into key findings with synchronized maps, charts, and timelines
• Result: Enabled intuitive deep dives where users can explore and compare states easily

3. Designing for Accessibility

• Challenge: Creating complex visual charts that remain legible and interactive for all users
• Solution: Implemented color-blind safe schemes, precise tooltips, and animated transitions
• Result: Delivered an inclusive, interactive dashboard that clarifies dense data metrics
  
  

Prerequisites

Before you begin, ensure you have met the following requirements:

• You have installed Node.js version 20 or above (https://nodejs.org/)
• You have installed Git (https://git-scm.com/)
  
  

Installation

1. Clone the repository (can also use git-client):

git clone https://github.com/LukPle/ShiftExpress31.git
cd ShiftExpress31

2. Install npm packages:

npm install 

List of the most essential dependencies:

• Joy UI
• d3.js
• Material Icons

3. Run the development server:

npm run dev

Open http://localhost:3000 with your browser to see the result.