VRChat Friend Network

A web-based application that visualizes your VRChat friends network using interactive D3.js graphs. Easily scan your VRChat photos, generate metadata, and explore connections between players through an intuitive and dynamic interface.

You can only use photos taken while VRCX is running.

Also, Only photos taken with the screenshot helper enabled in VRCX can be used.

---

• Features
• Prerequisites
• Installation
• Setup
• Usage
• Dependencies
• Changelog
• License

Features

• Interactive Network Graph: Visualize connections between VRChat players with dynamic force-directed graphs.
• Search Functionality: Easily search for players by name and highlight their connections.
• Responsive Design: Accessible and functional across various screen sizes.
• Share and Download You can download image by SVG or share to the twitter via tmpfiles
• Date Range-based Data Filter You can filter your pictures by date range using a slider bar.

Prerequisites

Before you begin, ensure you have met the following requirements:

• Node.js: Install Node.js (v14 or later) from Node.js official website.
• npm: Node.js installation includes npm. Verify installation by running:

  node -v
  npm -v

Installation

1. Clone the Repository:

   git clone https://github.com/refiaa/VRChatFriendShipVisualizer.git

2. Navigate to the Project Directory:

   cd VRChatFriendShipVisualizer

3. Install Dependencies:

   npm install

Setup

1. Prepare VRChat Images:

   • To use VRChat's default image storage folder, leave it as is. If you wish to use a different folder, please enter the corresponding path.

Usage

1. Start the Development Server:

   npm run dev

2. Access the Application:

   • Open your web browser and navigate to localhost (port:3000) to view the VRChat Friend Network Visualization.
   • Place your VRChat photos inside the ./img folder or Paste the directory path of your VRChat Pictures and click update directory. Ensure that the images are in a supported format.
   • And use Update Visualization to show Friend Network from your pictures.

Dependencies

The project relies on the following major dependencies:

• D3.js: A JavaScript library for producing dynamic, interactive data visualizations in web browsers.
  • CDN Link: Included via

    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>

• Node.js & Express: Backend server to handle API requests and serve the frontend.
  • Note: Ensure your package.json includes necessary scripts and dependencies for running the server.

Changelog

See CHANGELOG for a list of notable changes and updates.

License

This project is licensed under the MIT License.