alexh0810/data-visualization-app

Data Visualization App with TypeScript, Next.js, ShadUCN.

★ 1Forks 0TypeScriptGitHub ↗Compare

Project website ↗

README

Data Visualization App

A web application built with Next.js that visualizes time-series data from CSV files. It allows users to view the data in bar and line charts, filter by date range, and toggle data normalization. The app also features color-coded indicators for data values based on yearly averages.

Features

  • Interactive Charts: View data in bar or line chart formats.
  • Date Filtering: Filter data by a custom date range using a date picker.
  • Data Normalization: Toggle between raw and normalized data.
  • Color Indicators: Data values are color-coded (green or red) based on yearly averages.
  • CSV Data Loading: Load and process time-series data from CSV files.

Technologies Used

  • Next.js: React framework for building server-side rendered (SSR) web applications.
  • Tailwind CSS: Utility-first CSS framework for styling.
  • Chart.js: Library for creating dynamic, animated charts.
  • Shadcn/UI: Component library for building reusable UI elements.
  • React: Front-end JavaScript library for building user interfaces.
  • TypeScript: Superset of JavaScript that adds static types for better tooling and debugging.

Getting Started

  1. Clone the repository:

    git clone
    cd data-viz-app
  2. Install dependencies:

    npm install
  3. Run the development server:

    npm run dev
  4. Open your browser and navigate to http://localhost:3000

Contributors

alexh0810

Issues