File size: 2,167 Bytes
934d8c3
35e5b82
1e6e2b3
35e5b82
 
 
 
 
 
 
 
 
 
1e6e2b3
35e5b82
1e6e2b3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
35e5b82
 
1e6e2b3
 
35e5b82
 
1e6e2b3
 
 
35e5b82
 
1e6e2b3
35e5b82
 
 
1e6e2b3
35e5b82
 
 
 
 
 
 
 
 
 
 
1e6e2b3
 
 
 
 
 
 
 
 
35e5b82
 
 
1e6e2b3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
# 🤗 Daily Papers Atlas

The atlas visualization demo of the daily papers listed in [Hugging Face Daily Papers](https://huggingface.co/papers). 

## Features

- Interactive graph visualization of papers and authors
- Search functionality to find specific nodes
- Color coding by node attributes
- Group filtering
- Node details panel
- Responsive zoom and navigation

## Project Structure

- `data/` - Contains all data files and conversion scripts
  - `graph.graphml` - Source GraphML file
  - `graph.json` - Intermediate JSON format
  - `sigma_graph.json` - SigmaJS-compatible JSON
  - `paper_atlas_data.json` - Additional data
  - `paper_atlas_data.json.gz` - Compressed data
  - `graphml_to_json.py` - GraphML to JSON converter
  - `json_converter.js` - JSON format converter
  - `check_json.py` - JSON validation script
- `js/` - JavaScript files
- `css/` - CSS stylesheets
- `config.json` - Application configuration
- `index.html` - Main application page
- `app.py` - Simple web server

## Setup and Running the Application

### Data Conversion

If you need to convert a GraphML file to JSON:

```bash
# Convert GraphML to JSON
python data/graphml_to_json.py data/graph.graphml data/paper_atlas_data.json data/paper_atlas_data.json.gz
```

To convert the intermediate JSON to SigmaJS format:

```bash
# Convert to SigmaJS format
node data/json_converter.js
```

### Running the Application

Start the local web server:

```bash
# Start the web server
python app.py
```

Then open your browser to http://localhost:7860

## Technology Stack

- Python for server and data processing
- SigmaJS for graph visualization
- jQuery for DOM manipulation
- Pako.js for client-side decompression
- HTML/CSS for the interface

## Data Format

The data is exported from [Gephi](https://gephi.org/) in the GraphML/JSON format.

## Configuration

The `config.json` file controls various aspects of the visualization:
- Data source path
- Node colors and sizes
- UI text and labels
- Sigma.js visualization settings

## Credits

This visualization is inspired by the work described in ["Charting and Navigating Hugging Face's Model Atlas"](https://arxiv.org/abs/2503.10633).