https://github.com/reachvivek/d3-angular-dashboard

Visual Dashboard built in Angular, offering an array of dynamic D3 Charts and Graphs with integrated filtering capabilities, serving as an ideal starting point for diverse projects.
https://github.com/reachvivek/d3-angular-dashboard

advanced-pie-chart angular d3 dashboard filter line-chart ngx-charts primeng stacked-bar-chart ui

Last synced: 24 days ago
JSON representation

Visual Dashboard built in Angular, offering an array of dynamic D3 Charts and Graphs with integrated filtering capabilities, serving as an ideal starting point for diverse projects.

• Host: GitHub
• URL: https://github.com/reachvivek/d3-angular-dashboard
• Owner: reachvivek
• Created: 2024-03-18T06:33:15.000Z (8 months ago)
• Default Branch: prod
• Last Pushed: 2024-03-20T18:59:38.000Z (8 months ago)
• Last Synced: 2024-10-05T10:58:28.268Z (about 1 month ago)
• Topics: advanced-pie-chart, angular, d3, dashboard, filter, line-chart, ngx-charts, primeng, stacked-bar-chart, ui
• Language: TypeScript
• Homepage: https://d3-angular-dashboard-git-prod-reachvivek.vercel.app
• Size: 171 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Dynamic Visual Dashboard in Angular (17.0) with D3 Charts (NGX-CHARTS)

Welcome to my Angular-based Visual Dashboard repository! This project provides a dynamic and interactive dashboard featuring a variety of D3 Charts and Graphs, perfect for showcasing data in a visually appealing manner.

## Features:

- Multiple D3 Charts and Graphs: Line charts, bar charts, pie charts, and more, all powered by the flexibility and elegance of D3.js.

- Interactive Filtering: Seamlessly filter through data sets with user-friendly filter options integrated directly into the dashboard interface.

- Angular Framework: Utilizes the Angular framework for building robust, single-page applications with ease.

- Easy Installation: Get started quickly with npm, Angular CLI, and straightforward installation instructions.

## Installation:

If you're new to Angular development, follow these steps to install the project on your system:

1. **Install Node.js and npm:**

   If you haven't already, make sure you have Node.js and npm installed on your system. You can download and install them from [here](https://nodejs.org/).

2. **Install Angular CLI:**

   Angular CLI simplifies Angular application development by providing a powerful toolset for creating, building, testing, and deploying Angular projects. Install it globally by running the following command:

   ```bash

   npm install -g @angular/cli

   ```

3. **Clone this repository:**

   git clone https://github.com/reachvivek/D3-Angular-Dashboard.git

4. **Navigate to the directory:**

   cd visual-dashboard

5. **Install dependencies:**

   npm install

6. **Run the application:**

   ng serve

7. **Open your browser:**

   Navigate to http://localhost:4200/ to view the Visual Dashboard in action!

## Getting Started:

Once you've installed the project and launched it locally, feel free to explore the dashboard and experiment with the different charts and filtering options. The codebase is well-documented and structured, making it easy to customize and extend to suit your specific needs.

## Contributions:

I welcome contributions from the community! Whether it's bug fixes, feature enhancements, or new chart implementations, feel free to fork this repository, make your changes, and submit a pull request. Together, let's make this Visual Dashboard even more powerful and versatile.