Make the Twitch API speak with network graphs (Node.js, React, Mongodb, Vis.js)

Practical case of using network graphs

French version : Faites parler l'API Twitch grâce aux network graphs (Node.js, React, Mongodb, Vis.js)

The Twitch API allows you to develop applications using some of the data made available by the streaming platform. I suggest you use this powerful API to see the links between streamer communities.

A demo of the final project is available at splitviewer.com. The sources are accessible on my github repository.

The principle is as follows:

  • a streamer connects, the application is notified thanks to the twitch API.
  • at regular intervals, the streamer's viewers are recorded
  • when the streamer disconnects, the operation stops
  • every day, the application calculates for each streamer the percentages of viewers in common with the other streamers.

Example :

  • We record 4 viewers for Streamer1 : john, jessie, darkninja, bigdog
  • We register 6 viewers for Streamer2 : obiwan123, darkninja, kiwiki, john, lesly, littleloser
  • Streamer1 therefore has 2 viewers in common with Streamer2, ie 2/4 * 100 = 50% of its community also watches Streamer2.
  • Streamer2 therefore has 2 viewers in common with Streamer1, or 2/6 * 100 = 33% of its community also watches Streamer1.

This calculation is repeated on all the streamers. The results can be visualized in the form of network graphs. I used the vis.js library

Here is what we can achieve through the use of network graphs :

graph example