Geek Culture
Published in

Geek Culture

Make the Twitch API Speaks With Network Graphs (Node.js, React, Mongodb, Vis.js)

Practical case of using network graphs

Photo by JJ Ying on Unsplash

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 :

Originally published at https://romainamichaud.com.

--

--

--

A new tech publication by Start it up (https://medium.com/swlh).

Recommended from Medium

coding questions

10 Reason why Large Organizations are Using React Native for App Development?

Optional in Swift— Learning the Why

Using BEM (if You Truly Must)

File management tool using Golang

Build your own operating system-part06

System architecture of Mindsync.ai platform.

How should we keep our logs?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Amichaud Romain

Amichaud Romain

French independant developer.

More from Medium

How to use Redux-Toolkit. A Step-by-Step Guide.

How to load custom model in React with Three.js ( A Functional Approach )

AsyncLocalStorage on NodeJS

Build a ⌘K Search Modal (Part 1)