https://github.com/code-flu/angular-bar-chart-race
Angular application that creates animated bar chart races using the D3.js library
https://github.com/code-flu/angular-bar-chart-race
angular angular15 barchartrace typescript
Last synced: 10 months ago
JSON representation
Angular application that creates animated bar chart races using the D3.js library
- Host: GitHub
- URL: https://github.com/code-flu/angular-bar-chart-race
- Owner: code-flu
- License: mit
- Created: 2023-06-30T09:52:31.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-09T12:27:12.000Z (over 1 year ago)
- Last Synced: 2025-01-13T15:07:24.354Z (12 months ago)
- Topics: angular, angular15, barchartrace, typescript
- Language: TypeScript
- Homepage: https://www.codeflu.com
- Size: 1.11 MB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
https://github.com/code-flu/angular-bar-char-race/assets/104217888/6f1c44d0-6412-4438-9571-8dcfe9d48ca8
# Angular Bar Chart Race
Angular application that implements a bar chart race using the D3.js library. The bar chart race is a dynamic visualization that displays the change in rankings of a set of categories over time through animated bars.
### Key Features:
- Dynamic bar chart race visualization using D3.js in an Angular application.
- Load custom data or utilize sample data to create the race.
- Smooth and animated transitions between data updates.
- Customizable settings for bar colors, labels, duration, and other visual aspects.
- Responsive design to adapt to different screen sizes.
## How to run on local machine
1. Clone the repository: `git clone https://github.com/code-flu/angular-bar-chart-race.git`
2. Navigate to the project directory: `cd angular-bar-chart-race`
3. Install project dependencies : `npm install`
4. Start the server: `ng serve`
> [LIVE DEMO](https://stackblitz.com/edit/angular-bar-chart-race?file=src%2Fmain.ts)
#### Watch the YouTube videos created using this repository
- [Most Nuclear Weapons Countries (1945-2022)
](https://youtu.be/-udMpfZG_QU)
- [Top Causes of Global Deaths (1990-2019)](https://youtu.be/IFSfC_jDk9k)
### Reference
https://observablehq.com/@d3/bar-chart-race-explained