Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/bhavya-dang/d3movie

A simple movie app that uses D3.js to visualize movie data.
https://github.com/bhavya-dang/d3movie

d3js hacktoberfest react tailwindcss

Last synced: 30 days ago
JSON representation

A simple movie app that uses D3.js to visualize movie data.

Awesome Lists containing this project

README

        

![logo](/public/assets/banner.png)

# D3Movie

A simple movie app that uses D3.js to visualize movie data.

> This app is still in development.
> Live demo is [_here_](https://d3movie.vercel.app/)

## Objective

The objective of the app was to help users with their academic and market research by providing them with a simple and easy to use tool to visualize movie data. Some users prefer visual cues to decide between what to watch and what not to watch. This app helps them with just that only. With just a glance, a user can decide whether a movie is worth watching or not by looking at the ratings and the box office revenue and also compare it with other movies.

## Tech Stack

- React.js (frontend)
- TailwindCSS and Daisy UI (design)
- D3.js (data visualization)

## Directory Structure

```
movie-app-with-d3
├── index.html
├── package.json
├── postcss.config.js
├── public
| └── assets
| ├── 404_new.svg
| ├── banner.png
| ├── icon-gray.svg
| ├── icon-white.svg
├── README.md
├── src
| ├── App.jsx
| ├── components
| | ├── ChartModal.jsx
| | ├── Error.jsx
| | ├── Movie.jsx
| | ├── MovieCard.jsx
| | ├── Search.jsx
| | ├── Trending.jsx
| | ├── TrendingCard.jsx
| | └── TrendingMovies.jsx
| ├── functions.js
| ├── index.css
| └── main.jsx
└── tailwind.config.js
```

## Features

✅ Search for movies

✅ Trending movies with functional pagination

✅ Individual movie page with more details

✅ Similar movies recommendations

✅ Data visualization for easy comparison and analysis

✅ Simple and friendly UI

## Todo

- [x] Add error handlers, 404 page and toast message
- [x] Add theme switcher
- [ ] Finish responsive design
- [x] Finish styling for light theme
- [x] Add more visualizations (metascore, imdb rating, etc.)
- [x] Add bar chart for box office revenue
- [x] Add trending page with pagination
- [x] Add tooltip for bar chart

## References

[IMDB Website](https://imdb.com/)

[daisyUI](https://daisyui.com/)