YouBike Route Explorer: Exploring the Future of Urban Mobility in Taipei

YouBike, Taiwan's leading public bicycle system, offers 24/7 point-to-point rental and return services, transforming the way residents and visitors navigate urban spaces. With the introduction of YouBike 2.0, featuring a new design for both bikes and stations, the system no longer relies on external electricity, making it more flexible and easier to deploy across the city. This project, YouBike Route Explorer, delves into the deployment strategy of YouBike 2.0 in Taipei City, empowers you to explore usage patterns, popular routes, and how these trends reflect the evolving needs of urban commuters. By "seeing" the data with this exploratory data visualization tool, we can uncover insights that could drive more efficient, accessible, and sustainable transportation solutions.

see also: YouBikeEDA for dataset preparation

Live Demo

Try the live demo!

Developing

1. Under the project root, make sure you're running node 20 or run nvm use if you have nvm installed.

2. This project utilizes Mapbox's service and needs a token in .env to work:

   echo VITE_MAPBOX_TOKEN={your_mapbox_token} > .env

3. Optionally, if you want to use another map style:

   # default: mapbox://styles/mapbox/dark-v9
   echo VITE_MAPBOX_MAPSTYLE={style_url} >> .env

4. Install dependencies with npm install (or pnpm install or yarn)

5. Start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

Building

To create a production version of your app:

npm run build

You can preview the production build with npm run preview.

Build & Run with Docker

1. Build image

   docker build --build-arg VITE_MAPBOX_TOKEN={your_mapbox_token} -t="youbike_routes" .

   Available build args

   • VITE_MAPBOX_TOKEN: Mapbox token (required)
   • VITE_MAPBOX_MAPSTYLE: Mapbox map style (default: mapbox://styles/mapbox/dark-v9)

2. Run the built image

   # run container and redirect host port 3000 to container port 3000
   docker run --name youbike -d -p 3000:3000 youbike_routes

3. Visit to play the demo localhost:3000

4. Stop & remove the image

   docker stop youbike
   docker rm youbike
   docker rmi youbike_routes

To-do List

• prepare dataset and parquet files
• setup project structure
• import dataset
• add map
• add stations
• add routes
• add h3 cells
• add interactivity
• improve reactivity
• add UI panels
• add insight charts
• deploy demo site
• add more insights, e.g. route distance
• test adapter-node
• add filters for insights, e.g. route distance
• add supplementary datasets

Credits

• Multilevel Agglomerative Edge Bundling in JavaScript
• k-d Tree JavaScript Library
• shadcn-svelte

Data sources

• 臺北市YouBike見車率統計
• 臺北市YouBike起訖站點統計
• 臺北市YouBike區域互補站點