Atlas of interactions

The BSky Atlas is a visualization of graph data.

• Where to get graph data? Previously, Atlas by Jaz https://github.com/ericvolp12/bsky-graph graph data (graph.json) was built by the Graph Builder in bsky-experiments.

This fork of Atlas still supports same graph.json format, although it also needs conf.json to work. conf.json structure is described in AtlasSettings interface in /exporter/src/common/model.ts

To generate graph.json you'll first need to get some data and then process it. We're using our own indexer of Bsky data: https://github.com/uabluerail/indexer. graph.json can be generated using any Graph DB. We recommend using Neo4j.

Exporter

The exporter directory contains a TypeScript file that grabs the current snapshot of the Atlas Graph from http://localhost:6060/graph.

This endpoint is supported by the graph-builder container and provides a .txt dump of the current state of the social graph from memory.

This file can grow to be quite large (10s of MBs easily) and will only continue to grow, so we don't store it in that format.

The exporter filters the incoming data, drops low-weight edges and nodes, then creats a layout as follows:

1. Place all nodes in a giant circle
2. Identify layouts that need to be rendered from current conf.json.
3. Run ForceAtlas2 on each layout with the settings specific to that layout (iteration count, gravity, rotation angle etc.).
4. Get representatives from conf.json file and apply to each rendered layout.

After these steps, we export each graph in Graphology's JSON format to exporter/out/[layout_name]_layout.json

Running the Exporter

Run yarn install with node 18+ to grab dependencies.

Assuming you have a graph.json and conf.json in the root folder, you may run yarn start inside the exporter directory to grab a snapshot, run the simulations, and build the graph.

Visualization

The visualization is the primary part of this project and is powered by Vite, React, and SigmaJS/Graphology.

The components that make up the visualization are in the src/components folder and are a bit messy at the moment.

• src/components/Graph.tsx includes the graph rendering logic.
• src/components/*.tsx includes various components, MootList, LayoutMenu etc.
• CustomSearch.tsx is a forked verison of the Search component provided by React-Sigma with lots of custom styling and functionality for better UX.

Running the Visualization

TBD: add sample graph.json and conf.json

(not available yet:) This project ships with the sample graph snapshot, so you can visualize one of the versions of the graph right now!

Ensure you're using node 18+ and install dependencies with: yarn install

Start the development server and make it accessible to hosts on your network with: yarn dev --host

Build the static JS site with yarn build and you can serve the contents of the dist folder from any static file host.