Keanu Reeves best movies using https://jurgenarias.github.io/movies/
I was looking for a website where I could search for the best movies of any actor /actress but I couldn’t find any in particular that offered what I wanted. I had to google an actor/actress, then find his movies, then find the rating for each individual movie, and then compare them. It wasn’t efficient… so I decided to create a website for it.
I found IMDB movie data on kaggle. The CSV contains approximately 85,000 movies and more than 175,000 cast members. The CSV includes everything you need, from the name of the movie, the name of the actors, their rating on IMDB and much more. A simple filter by string content with the actors column sorted by rating would produce the desired result. The fun part was making a website out of it…
Next, I’ll go over creating html and JavaScript. necessary for the website to work.
To build the website, I used Visual Studio Code (any software will do the job though). As soon as you write! + tab the basic html template will appear:
Document
The first step was to add the bootstrap link to visually improve the website and making it easier to use. This step is completely optional, but without it, the website would look like it was created in the 90s.
In order to use Bootstrap, I added this to the header:
… and voila! I can use bootstrap now.
I divided the into two sections: input and output. Below is the input part:
! Search Movies!
Enter the name of an actor/actress to see their best movies!
s for container, row and col-md-12 are just a bootstrap structure to have the content aligned in a container, I then created a title using
and a subtitle using
.
Then comes the important part I used a with id (note that ids and classes are important for referencing the javascript file or bootstrap style) Inside the form I have an with class for bootstrap , id for JavaScript and a placeholder to display on the website Finally, I have a
Here is the output part:
#
Movie
Classification
Year
Description
Created a
with some padding (to make it look better). Next, I created the
which is where the column titles are created. After this step, I needed one row for all the titles, hence the
and then all the
for each of the columns. I then closed
and started
, which is where the output will appear. Finally, I’m just closing the 3
‘s of the container, row, and col-md-12 from before.
The skeleton of the website is complete! From this point, the website should look like this:
Compare it to how it looks without bootstrap:
This marks the end of the html part of the website. Of course, at this stage, the website does nothing at all. You still need a JavaScript file to become useful.
I used JavaScript to load the CSV, get user input, filter the CSV, and display the results.
A . The js file is needed. I named it app.js and saved it in a folder next to the html and CSV file.
I used D3, which is an incredibly useful JavaScript library for manipulating data-driven documents. I needed to add the script to the header of the html to use D3:
It all depends on the data from the CSV, so the first thing to do is use D3 to read the CSV and then apply a function:
d3.csv(“movies.csv”).then(function (data ) {var movies = data ;var button = d3.select(“#button”);var form = d3.select(“#form”);button.on(“click”, runEnter);form.on(“submit”, runEnter);
I created 3 variables: movies that referenced the CSV, button that referenced the button in the html, and form that referenced the form in the html. Using button.on(“click”, runEnter) and form.on(“submit”, runEnter), allows the user to press the button on our website or press the return key and the javascript will execute the runEnter function.
Now we can define our runEnter function which I am explaining in more detail as it is the most important part:
// Defining the function runEnter() function { // This line of code selects the
of the html and deletes it. If not used, the results will appear above the previous result.d3.select(“tbody”).html(“”) // This code is needed to prevent the page from reloading.d3.event.preventDefault() ; // This code will get user input of what the user will write in the html since we give it the id “user input”. It will get the value and store it in our inputValue variablevar inputValue = d3.select(“#user-input”).property(“value”);// This code will filter the movies by looking at the actors column. It will store the values when there is a match between the string of text the user entered and the text in our CSV actor column data.var filteredMovies = movies.filter(movies => movies.actors.includes(inputValue));/ / This was the easiest approach I found to sort the results by a different column in descending order. I had to include a new script in my head to use _.sortBy This is the script: var output = _.sortBy(filteredMovies, ‘avg_vote’).reverse()// Once I had all the values in my output variable, all I needed to do was do loop through them and add them to the table one by one. This was done using d3, where I inserted the value for each of the columns I wanted using the html needed to wrap each row of the table.for (var i = 0; i < filteredMovies.length; i++) { d3.select( “ tbody”).insert(“tr”).html(“
” + [i+1] + ”
” +”
” + (output[i][‘original_title’]) + ””+“
” + ”
” + (out[i][‘avg_vote’])+”
” +”
” + (out[i ] [‘year’])+”
” +”
” + (output[i][‘description’])+”</td” ) }};});
That’s it all for the coding part! To make the website work, all that remains is to include the script in the html of the website (I added it in the header):
You can add a lot of styling using css or by downloading templates and adding your code to make your website look the way you want.
