An interactive, real-time analytics dashboard for NYC Taxi & Limousine Commission data, powered by Altinity.Cloud ClickHouse API Endpoints. This sample is a companion to the post Use Altinity.Cloud to Simplify Your App with ClickHouse® Endpoints on the Altinity blog.

This dashboard provides three interactive queries with dynamic visualizations:

• Interactive time window slider (adjustable start/end hours)
• Pie chart visualization showing percentage of rides during the time range you selected
• Real-time updates as you adjust the time range
• Displays total rides for the time range you selected

• Adjustable distance range slider (min/max miles)
• Bar chart showing average tip percentage by trip distance
• Insights into how tipping behavior varies with trip length
• Filterable by distance brackets

• Top N most popular pickup/dropoff location pairs for a given borough
• Adjustable borough name (Manhattan, Bronx, Brooklyn, Queens, Staten Island) and number of routes to display (5-25)
• Shows trip count, average fare, and average distance for each route
• Ranked list with smooth hover interactions

"Data Noir" Aesthetic:

• Dark gradient background (deep blues and blacks)
• Three distinct color schemes (cyan, gold, green) for each query
• Glassmorphism cards with backdrop blur
• IBM Plex Mono monospace font for technical feel
• Smooth CSS animations and transitions
• Custom-styled range sliders with glowing thumbs
• Noise texture overlay for depth

The app uses:

• React 18 with functional components and hooks
• Recharts for beautiful, responsive data visualizations
• Lucide React for crisp, modern icons
• Vite as the blazing-fast dev server and build tool
• Altinity Cloud API Endpoints for ClickHouse queries

The dashboard queries NYC Taxi & Limousine Commission trip data from August-October 2025:

• Trip data files: yellow_tripdata_2025-08.parquet, yellow_tripdata_2025-09.parquet, and yellow_tripdata_2025-10.parquet
  • Source: https://d37ci6vzurychx.cloudfront.net/trip-data/
• Data to map location IDs to specific boroughs: taxi_zones.csv
  • Source: https://d37ci6vzurychx.cloudfront.net/misc/

The Altinity Cloud API Endpoints feature lets you run SQL statements via a traditional REST request. This web app:

1. Constructs URLs based on values selected on the page
2. Fetches data from those URLs via your API endpoints
3. Parses JSON results
4. Updates visualizations in real-time

NOTE: This demo uses GET, but you can create endpoints that use the POST method as well.

See the setup instructions to get up and running quickly. For complete details on API Endpoints, see the Altinity.Cloud API Endpoints documentation.