Movie Collaboration Graph

• 

  Home page of the Movie Collaboration Graph

• 

  Clicking on a node and checking for collaborations of nodes

• 

  Searching for specific actors via search bar

Inspiration

We were inspired by other network graphs showing connections between people, rappers, and research papers and wanted to do something similar with the movie industry and analyze trends.

What it does

Visualizes network graph depicting the connections between actors from around the top 1200-rated movies. Actors are connected if they've worked on a movie together. Actors with more connections are denoted by larger-sized and darker-colored nodes. Users can hover over nodes and visually see which actors they've worked with. By clicking on a node and hovering over another, the user can see specific movies that the two actors have collaborated on in the sidebar.

How we built it

We used node.js for data retrieval along with an external API in the form of themoviedb API for retrieving around the top 1200-rated movies. We retrieved the top 3 actors from each movie and if the actors exceeded a certain popularity threshold they were added as nodes to graph. Nodes were ensured to be unique and the Python NetworkX graph library was used for data parsing and graph construction. The Gephi software was used for improved graph visualization, node placement, and dynamic node sizing. Edges were drawn depending on if the actors were both part of one of the identified top-rated movies. Sigma.js was used for the web-based rendering of the actor-network graph. React methodology was then used for event handling of hovering and clicking events pertaining to nodes to then show the user important collaboration information. We added a search bar and developed collaboration details of nodes alongside the application logo.

Challenges we ran into

There were several challenges in terms of ramping up and learning the necessary technologies in a relatively short period of time. Further, there were challenges in finding effective ways to implement interaction and graph formation.

Accomplishments that we're proud of

We're proud of making a visually appealing graph that is functionally sound towards providing the user with important details on the collaboration of top actors.

What we learned

We learned how to develop comprehensive web-based graphs while managing time effectively in a high-pressure time-based environment.

What's next for Movie Collaboration Graph

We would like to expand towards incorporating directors, writers, and other roles in movie development.

Built With

• gephi
• networkx
• node.js
• react
• sigma.js