Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/louis3797/wikipedia-graph

Graphically display the connections between different Wikipedia articles
https://github.com/louis3797/wikipedia-graph

force-directed-graphs react react-three-fiber reactjs three-js threejs typescript wikipedia wikipedia-api wikipedia-scraper

Last synced: about 6 hours ago
JSON representation

Graphically display the connections between different Wikipedia articles

Awesome Lists containing this project

README

        

3D Wikipedia Graph




Visualize connections between wikipedia pages as froce directed graph



contributors


last update


forks


stars


open issues


license




View Demo
·
Documentation
·
Report Bug
·
Request Feature



![screenshot](assets/screenshot2.png)

# Table of Contents

- [Table of Contents](#table-of-contents)
- [About the Project](#about-the-project)
- [Features](#features)
- [Tech Stack](#tech-stack)
- [Getting Started](#getting-started)
- [Prerequisites](#prerequisites)
- [Installation](#installation)
- [Run Locally](#run-locally)
- [License](#license)
- [Contact](#contact)

## About the Project


screenshot

With this tool you can visualize the connections between Wikipedia pages. You can also specify how deep the search should go and how many connections should be taken per page. The result are incredibly nice looking graphs, as seen in the images above. Note that the program starts to slow down when the graph reaches a certain size, since the whole thing runs in the browser.

### Features

- Force Directed Graph
- 3D
- Zoom on Node when clicked
- Postprocessing
- Adjustable Depth
- Adjustable Connections per Vertex

### Tech Stack

- [Typescript](https://www.typescriptlang.org/)
- [React.js](https://reactjs.org/)
- [Three.js](https://threejs.org/)
- [React Three Fiber](https://docs.pmnd.rs/react-three-fiber/getting-started/introduction)
- [React Force Graph](https://github.com/vasturiano/react-force-graph)
- [Leva](https://github.com/pmndrs/leva)

## Getting Started

### Prerequisites

This project uses Yarn as package manager

```bash
npm install --global yarn
```

### Installation

Install wikipedia-graph with yarn

```bash
yarn install wikipedia-graph
cd my-project
```

### Run Locally

Clone the project

```bash
git clone https://github.com/Louis3797/wikipedia-graph.git
```

Go to the project directory

```bash
cd my-project
```

Install dependencies

```bash
yarn install
```

Start the server

```bash
yarn start
```

## License

Distributed under the MIT License. See LICENSE.txt for more information.

## Contact

Project Link: [https://github.com/Louis3797/wikipedia-graph](https://github.com/Louis3797/wikipedia-graph)