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!

---

Dependancies

1. jQuery v3.7.1;
2. DataTables v.1.13.7;
3. chroma.js v2.4.2;
4. force-graph;
5. Pico.css.

---

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;
4. Legend Info Menu on the left can be hidden/shown by pressing the arrow;
5. 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;
6. Chatter Count and Link Count on the bottom left can hidden/shown by pressing the arrow;
7. Min Pingswill filter out the nodes and links that do not qualify. Always filters based on the current map type. Increasing the value can improve performance.
8. Search function searches the user with that twitch name. It will zoom into a found user and also scroll the Leaderboard to that user;
9. Performance Mode disables fancy style and improves performance (recommended for big maps);
10. Leaderboard can be hidden/shown by pressing the arrow;
11. Leaderboard Headers are clickable and determine the sorting;
12. 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 which uses Canvas rendering. We were looking at sigma.js 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-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 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 - creator of the website and it's main contributor.
CrippledByte - provider of chat logs.

---

Support

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