The IMDB dashboard is a data set of 1,000 most popular movies on IMDB in the time period between the years 2006 - 2016. The data set contains blockbuster movies such as The Guardians of galaxy Vol.1, La La Land, Fantastic Beasts and Where to Find Them, Deadpool and so much more!

The data fields included in this data set are: Title, Genre, Description, Director, Actors, Year, Runtime, Rating, Votes, Revenue, Metascrore.

• Movie fans
• Film critics
• Publications/Media outlets
• Curators
• Investors

• A user can check the ratings of their favorite movie.
• A user can check which genre makes the most revenue.
• A user can compare ratings/gross of movies.
• A user can track multiple data sources using the charts.
• It meets specific needs of users interested in certain aspects of blockbuster movies such as revenue, genre, rating, year of production.

• It provides a catalogue of movies between the period 2006 - 2016.
• The dashboard provides fans with ratings for movies.
• The dashboard serves as an information management tool that helps to visually track revenue of blockbuster movies.
• The dashboard informs the users the average runtime of movies they watch.

You can find the link to the wireframe here: Wireframe

I also got inspiraion for the dashboard from these websites:

• Canvasjs
• Keen
• CodeWall

• As as a movie fan, I want to know the revenue a movie generated.
• As as a movie fan, I would like to know the number of movies released per year.
• As a movie fan, I am interested in the average length of movie genre.

• As a film critic, I am interested in the average runtime of the movie.
• As a curator, I am intersted in the average movie genre rating.

• As an investor, I am interested in knowing which genre is most profitable.
• As an investor, I am interested in how many movies are produced each year.

The dataset used in this project is explained in the table below:

In the future:

• The nature of the database made it difficult to classify movies. Movies do not distinctly belong to one genre. A movie like "Guardian of Galaxy" isn't just Action; it is classified under other genres such as Adventure & Sci-Fi. This makes it very difficult when the developer is trying to get data about some movies in a particular genre. Perhaps movie boards can make movie classification more cleare for data users.

• Because of the scale of the project, I used a small database. For future references I would like to have information on plot, budget per movie and cost to make the movie, how many months for movie production, salary per actor, most watched movies.

• In future projects, I would like to create more graphs to visually track other indicators not shown in this dahboard.

First I had to test if the data downloaded (imdb.csv) from kaggle.com was okay. I opened the graph.js file to run some commands and thereafter, I inspected the developers tool of the index.html file to see if the Array appeared in the console. Fortunately, it did and the data is actually good to use.

I then edited the database as Javascript is key sensitive. Columns such as Revenue (Millions), Runtime (Minutes) was changed to Revenue and Runtime repectively.

I used the following webistes to validate both my HTML and CSS files respectively.

Also, I had to check if the filepath in the html file worked properly. In a particular instance my css stylesheet was not properly linked and all the changes I was making were not fully reflected on the html page. I had to write the correct file path for this to be corrected.

• HTML-Validator

The HTML validation service helps check the validity of Web documents. When I used this service, it showed me errors about the section headers which didn't have a corresponding heading tags.

• CSS-Validator

The CSS validation service helps check Cascading Style Sheets (CSS). When I used this service, it reported no error. The testing went well and I am fully confident in the style sheet.

• JSHint

I used JSHint to detect errors in my graph.js There were no errors found.

I also wrote failing tests or mockups in order to test my charts. This can be seen from my commits of several JS and HTML files that I created.

1. As as a movie fan, I want to know the average revenue a movie genre generated.

           a. When the movie fan arives on the dashboard, he/she can see several charts on the page.
         
           b. Within the page, the movie fan can scroll down to the stacked bar chart or the composite chart.
   

2. As as a movie fan, I would like to know the number of movies released per year.

            a. When the movie fan arives on the dashboard, he/she can see several charts on the page.
          
            b. The movie fan can then click on the year selector which provides the information.
   

3. As a movie fan, I am interested in the average length of movie genre.

            a. When the movie fan arives on the dashboard, he/she can see several charts on the page.
          
            b. Within the page, the movie fan can scroll down to the pie chart (Average runtime oer Genre).
   

4. As a film critic, I am interested in the average runtime of the movie.

            a. When the movie fan arives on the dashboard, he/she can see several charts on the page.
          
            b. Within the page, the film critic can scroll down to the pie chart (Average runtime oer Genre). 
   

5. As a curator, I am intersted in the average movie genre rating.

            a. When the curator arives on the dashboard, he/she can see several charts on the page.
          
            b. Within the page, the curator can scroll down to the pie chart (Average ratings per Genre).
   

6. As an investor, I am interested in knowing which genre is most profitable.

            a. When the investor arives on the dashboard, he/she can see several charts on the page.
          
            b. Within the page, the investor can scroll down to the stacked bar chart (Revenue by Year per Genre).
   

7. As an investor, I am interested in how many movies are produced each year.

            a. When the investor arives on the dashboard, he/she can see several charts on the page.
          
            b. The investor can then click on the year selector which provides the number of blockbuster movies produced each year.
   

1. Bar Chart

            a. Go to the Home Page from a desktop.
          
            b. Inspect all the years on the chart and ensure they are appearing correctly on the page.
          
            c. Move the cusor and hover over each bar and verify that the hover affects are working (i.e. the bars are responsive).
          
            d. Check that the labels of the bar chart and ensure that the labels are properly spaced. 
          
            e. Click on the bar chart and ensure it is responsive.
            
            f. Check the heading is bold and centrally alligned in the container.
            
            g. Check the padding of the Heading. 
            
            h. Repeat this same steps on a mobile view.
   

2. Genre Selector

            a. Go to the Home Page from a desktop.
          
            b. Inspect all the Genres in the dropdown menu and ensure they are appearing correctly on the page.
          
            c. Move the cusor and hover over each bar and verify that the hover affects are working (i.e. the bars are responsive).
          
            d. Check that the description of each genre is correct. 
          
            e. Click on any genre and ensure it is responsive.
            
            f. Check the heading is bold and centrally alligned in the container.
            
            g. Check the padding of the Heading. 
            
            h. Repeat this same steps on a mobile view.
   

3. Year Selector

            a. Go to the Home Page from a desktop.
          
            b. Inspect all the Years in the dropdown menu and ensure they are appearing correctly on the page.
          
            c. Move the cusor and hover over each bar and verify that the hover affects are working (i.e. the bars are responsive).
          
            d. Check that the description of each year is correct. 
          
            e. Click on any year and ensure it is responsive.
            
            f. Check the heading is bold and centrally alligned in the container.
            
            g. Check the padding of the Heading. 
            
            h. Repeat this same steps on a mobile view.
   

4. Stacked Bar Chart

            a. Scroll down to the Stacked Bar Chart.
          
            b. Inspect all the years on the chart and ensure they are appearing correctly on the page.
            
            c. Inspect the legend and hover over each of the genres to see it is responsive. 
          
            d. Move the cusor and hover over each bar and verify that the hover affects are working (i.e. the bars are responsive).
          
            e. Check that the labels of the bar chart and ensure that the labels are properly spaced. 
          
            f. Click on the stacked bar chart and ensure it is responsive.
            
            g. Check the heading is bold and centrally alligned in the container.
            
            h. Check the padding of the Heading. 
            
            i. Repeat this same steps on a mobile view.
   

5. Pie Chart (Average Ratings per Genre)

            a. Scroll down to the Pie Chart (Average Ratings per Genre).
          
            b. Inspect all the pies on the chart and ensure they are appearing correctly on the page.
            
            c. Move the cusor and hover over each pie and verify that the hover affects are working (i.e. the pies are responsive).
          
            d. Click on the pie chart and ensure it is responsive.
            
            e. Check the heading is bold and centrally alligned in the container.
        
            f. Check the padding of the Heading. 
            
            g. Repeat this same steps on a mobile view.
   

6. Composite Chart

            a. Scroll down to the Composite Chart (line chart).
          
            b. Inspect all the years on the chart and ensure they are appearing correctly on the page.
            
            c. Inspect the legend and hover over each of the genres to see it is responsive. 
          
            d. Move the cusor and hover over each line and verify that the hover affects are working (i.e. the lines are responsive).
          
            e. Check that the labels of the bar chart and ensure that the labels are properly spaced. 
          
            f. Click on the composite chart and ensure it is responsive.
            
            g. Check the heading is bold and centrally alligned in the container.
            
            h. Check the padding of the Heading. 
            
            i. Repeat this same steps on a mobile view.
   

7. Pie Chart (Average Runtime Per Genre)

            a. Scroll down to the Pie Chart (Average Runtime Per Genre).
          
            b. Inspect all the pies on the chart and ensure they are appearing correctly on the page.
            
            c. Move the cusor and hover over each pie and verify that the hover affects are working (i.e. the pies are responsive).
          
            d. Click on the pie chart and ensure it is responsive.
            
            e. Check the heading is bold and centrally alligned in the container.
        
            f. Check the padding of the Heading. 
            
            g. Repeat this same steps on a mobile view.
   

The dashboard worked perfectly on other screen sizes and there was no issue with responsiveness.

1. The labels for the charts are always overlapping the chart itself. I adjusted it in the css file.
2. When reduced to mobile view the responsiveness a times doesn't work until when refreshed. I do not know what causes this to happen.
3. When I test the stacked chart alone, data is available for all the years on the x-axis. but when I add other charts and run the crossfilter, some years are missing. I have tried adjusting this but to no avail. My mentor thinks it is because some data are missing.
4. When I reduced the resolution to mobile view, the graphs are not fully responsive. I carried out several tests but I found out it is a common problem with d3.js on mobile.
5. The numbers that appear when you hover through the REVENUE BY YEAR PER GENRE & TOTAL RATINGS PER GENRE are not approximated to the nearest whole number. In future updates, this would be addressed.
6. The TOTAL RATINGS PER GENRE pie chart works perectly but it ould be more interesting to know the average runtime per genre. In future updates this would be addressed.

1. Log into GitHub.
2. Select the repository related to this project: ayotundeakinsola/second-milestone-project.
3. In the menu click on settings and scroll down to the GitHub Pages section.
4. From the "Source" dropdown menu, select "Master Branch" and click "Save"
5. A pop-up message "Your site is ready to be published at https://ayotundeakinsola.github.io/second-milestone-project/" will appear under Github Pages
6. The page will automatically refresh and the website is now deployed.
7. Once your website launches you can retest it to ensure that all the sections on the pages are working as stated in the testing section

1. On GitHub, navigate to the main page of the repository.
2. Under the repository name, click Clone or download.
3. In the Clone with HTTPs section, click to copy the clone URL for the repository.
4. Open Git Bash.
5. Type git clone, and then paste the URL you copied in Step 2.
6. Press Enter. Your local clone will be created.

• The background image for the dashboard was gotten from: pixabay

• The dataset is gotten from Kaggle website: Kaggle

I would first like to thank the Lord almighty for giving me the grace to finish this project.

Secondly I would like to thank my fiancée for her contributions. She advised me on the background image and also position of the charts

Thirdly, I would like to thank my parents for their support.

Next, special thanks to Haley in the tutor team for guiding me through this project. Many Thanks.