Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/greencomfytea/twitch-community-map

A visualization of specific twitch channel communities based on @ ping sent and received in chat.
https://github.com/greencomfytea/twitch-community-map

chat community graph links map nodes pretty twitch twitch-chat twitch-community visualisation visualization

Last synced: 4 months ago
JSON representation

A visualization of specific twitch channel communities based on @ ping sent and received in chat.

Awesome Lists containing this project

README 

          





	
Twitch Community Map


	
A visualization of specific twitch channel communities based on @ ping sent and received in chat.


	
Chrome is highly recommended! Firefox has awful Canvas performance!





	

		Contributors

	

	

		Issues

	

	

		Issues Closed

	

	

		Pull Requests

	

	

		Pull Requests Closed

	

	


	

		License

	

	

		Maintenance

	

	


	

		jQuery Dependency

	

	

		DataTables Dependency

	

	

		chroma.js Dependency

	

	


	

		force-graph Dependency

	

	

		Pico.css Dependency

	

	


	


	

		Commits

	

	

		Last Commit

	

	


	

		Commit Activity (Year)

	

	

		Commit Activity (Month)

	

	

		Commit Activity (Week)

	

	


	


	

		Repo Size

	

	

		Line Count

	

	

		COCOMO

	

	

		Goto Counter

	

	


	

		Sponsors

	

	

		Watchers

	

	

		Forks

	

	

		Stars

	

	

		Hits

	

	


	


	

		Website

	

	

		Followers

	

	

		Twitter

	

	

		Twitch

	

	


	

		Author

	

	

		Author

	

	

		Open Source

	

	

		Written in

	






	

		

	





	

		

	






***

# Dependancies

1. **[jQuery v3.7.1](https://jquery.com)**;

2. **[DataTables v.1.13.7](https://datatables.net)**;

3. **[chroma.js v2.4.2](https://gka.github.io/chroma.js)**;

4. **[force-graph](https://github.com/vasturiano/force-graph)**;

5. **[Pico.css](https://picocss.com)**.



***

# How to Use:

**Due to performance issues on Firefox, currently Chrome is recommended!**



1. Map can be zoomed in, zoomed out and panned. Nodes can be dragged;

2. Selecting `Streamer`, `Year`, `Timeframe` and `Map Type` allows to load new maps;

3. Hovering a node will show a tooltip with `Username`, `User Type`, `Pings Received` and `Pings Sent` information;

5. `Legend Info Menu` on the left can be hidden/shown by pressing the arrow;

6.  In `Legend Info Menu` on the left pressing on `User Type` `Circle` or `Text` will zoom into a next user of that type and also scroll the `Leaderboard` to that user;

7. `Chatter Count` and `Link Count` on the bottom left can hidden/shown by pressing the arrow;

8. `Min Pings`will filter out the nodes and links that do not qualify. Always filters based on the current map type. Increasing the value can improve performance.

9. `Search` function searches the user with that twitch name. It will zoom into a found user and also scroll the `Leaderboard` to that user;

10. `Performance Mode` disables fancy style and improves performance (recommended for big maps);

11. `Leaderboard` can be hidden/shown by pressing the arrow;

12. `Leaderboard` Headers are clickable and determine the sorting;

13. Pressing a user on `Leadeboard` will zoom into that user. 



***

# Contribution

If you wish to contribute to the project, feel free to make a pull request!



Currently the project is based on **[force-graph](https://github.com/vasturiano/force-graph)** which uses **Canvas** rendering. We were looking at **[sigma.js](https://sigmajs.org/)** for **WebGL** rendering but a complete lack of documentation was a deal breaker. If anyone were to implement it without losing existing functionality we would very grateful.



Moreover, **Firefox** Canvas support is almost **10 times worse** than the one in **Chrome**. Performance improvements would be much appreciated as well!



For those who want to add new maps for more streamers and/or timeframes, pull requests must follow a specific folder structure and json format (without `[ ]`).

```

root/

	data/

		[STREAMER_NAME]/

			[YEAR]/

				[TIMEFRAME]/

					[STREAMER_NAME]_[YEAR]_[TIMEFRAME]_pingsSent.json

					[STREAMER_NAME]_[YEAR]_[TIMEFRAME]_pingsReceived.json

```

**`[YEAR]`**: must be a numeric value;  

**`[TIMEFRAME]`**: must be a numeric value of a month (ex.:`01`, `02`, ... `12`) or a `year` keyword;  



Each `[TIMEFRAME]` must contain 2 json files named as displayed above, with 1 exception:

 - If `[TIMEFRAME]` is `year` than `[TIMEFRAME]` is dropped:

 ```

			[STREAMER_NAME]_[YEAR]_pingsSent.json

			[STREAMER_NAME]_[YEAR]_pingsReceived.json

 ```



The content of json files can be in 2 formats:

 1. **Default json**. Will use force physics simulation to generated a node layout on each map load client-side (can be undesirable for big maps);

 2. **[Gephi](https://gephi.org/)-exported json**. Includes a pregenerated in Gephi layout in a form of added `x` and `y` fields. Force physics is disabled.



#### First Format:

```

{

	"nodes": [

		{

			"name": "",

			"displayName": "",

			"userType": "", 

			"pingsReceived": 0,

			"pingsSent": 0

		},

		{...},

		{...},

		{...},

		...

	],

	"links": [

		{

			"source": "",

			"target": "",

			"userType": "",

			"weight": 0,

		},

		{...},

		{...},

		{...},

		...

	]

}

```

#### Second Format:

```

{

	"attributes": {

		...

	},

	"options": {

		...

	},

	"nodes": [

		{

			"key": "",

			"attributes": {

				"label": "",

				"usertype": "", 

				"pingsreceived": 0,

				"pingssent": 0,

				"x": 0,

				"y": 0

			}

		}

		{...},

		{...},

		{...},

		...

	],

	"links": [

		{

			"source: "",

			"target: "",

			"attributes: {

				"usertype": "",

				"weight": 0,

			}

		}

		{...},

		{...},

		{...},

		...

	]

}

```



**Node:**  

  

`name`/`key`: [Unique] Twitch Username in lower case, corresponds to `link` -> `source` and `target` fields;  

`displayName`/`label`: [Optional] Twitch Display Name;  

`userType`/`usertype`:	must be one of the following, determines the colors:  

 - `Streamer`

 - `Staff`

 - `Moderator`

 - `VIP`

 - `Artist`

 - `Partner`

 - `Subscriber`

 - `Viewer`



`pingsReceived`/`pingsreceived`: how many times a user has been pinged by others, determines the size of a node;  

`pingsSent`/`pingssent`: how many times a user pinged others, determines the size of a node.  



> [!NOTE]  

> `pingsReceived` and `pingsSent` must be present in both json files. The reason is that both values are displayed on the leaderboard and in the tooltip, regardless of which map is loaded. 



**Link:**  

  

`source`:  Twitch Username in lower case, corresponds with `node` -> `name` field;  

`target`:  Twitch Username in lower case, corresponds with `node` -> `name` field;  

`userType`/`usertype`:  must match  `userType` of `source` or `target` node `userType` (the type of higher priority must be used), must be one of the following, determines the color:

 - `Streamer`

 - `Staff`

 - `Moderator`

 - `VIP`

 - `Artist`

 - `Partner`

 - `Subscriber`

 - `Viewer`



`weight`: pings exchanged between 2 users (`source` and `target`), determines the line width.



> [!NOTE]  

> All links are undirected, means that these 2 links:  

> `source: "user1", target: "user2"`  

> `source: "user2", target: "user1"`  

> are the same and must be combined into 1 object. Having both will result in drawing same link line twice, which is undesirable performance-wise.



P.S. I might add a web tool later for semi-automatic chat log parsing (from gempir's justlog) into the 1st format.



# Gephi Layout

I generated `HAchubby` map layouts in [Gephi](https://gephi.org/) using the following settings:



*For ~1000 nodes, adjust for smaller/bigger maps proportionally;



**Node Size:**

	- `Type`: Ranking

 	- `Min Size`: 5

  	- `Max Size`: 250

   	- `Spline`: 3rd Shape, Control Point at Y = 0.8, X = 0



**Label Size (adjust the slider below the viewport too):**

	- `Type`: Ranking

 	- `Min Size`: 1

  	- `Max Size`: 4

   	- `Spline`: 3rd Shape, Control Point at Y = 0.8, X = 0



1. **Random Layout**

	- `Space Size`: 2500.0*

2. **Yifan Hu**

	- `Optimal Distance`: 500.0*

	- `Relative Strength`: 0.1

	- `Initial Step Size`: 5.0

	- `Step Ratio`: 0.5*

 	- `Adaptive Cooling`: On

	- `Quadtree Max Level`: 16

	- `Theta`: 0.2

3. **ForceAtlas 2**

	- `Tolerance(speed)`: 1.0

	- `Approximate Repulsion`: Yes

	- `Approximation`: 0.8

	- `Scaling`: 50.0*

	- `Stronger Gravity`: No

	-  `Gravity`: 1.0

	- `Dissuade Hubs`: No

	- `LinLog Mode`: No

	- `Prevent Overlap`: Yes

	- `Edge Weight Influence`: 1.0

	- `Normalize Edge Weights`: No

	- `Inverted Edge Weights`: No

4. **ForceAtlas 2**

	- `Inverted Edge Weights`: Yes

5. **ForceAtlas 2**

	- `Normalize Edge Weights`: Yes

6. **ForceAtlas 2**

	- `LinLog Mode`: Yes

7. **ForceAtlas 2**

	- `Dissuade Hubs`: Yes

8. **ForceAtlas 2**

	- `Dissuade Hubs`: No

9. **ForceAtlas 2**

	- `LinLog Mode`: No

10. **ForceAtlas 2**

	- `Normalize Edge Weights`: No

11. **ForceAtlas 2**

	- `Inverted Edge Weights`: No

12. **Yifan Hu**

	- Same settings as before;

13. **Noverlap**

	- `Speed`: 10.0*

	- `Ratio: 0.9

	- `Margin: 5.0

14. **Label Adjust**

	- `Speed`: 5.0*

	- `Include Node Size`: On



***

# Credits

**[GreenComfyTea](https://github.com/GreenComfyTea)** - creator of the website and it's main contributor.  

**[CrippledByte](https://github.com/CrippledByte)** - provider of chat logs. 



***

# Support



You can support me by donating! I would appreciate it! But anyway, thank you for using this mod!



 

  Donate





  Buy me a tea