https://github.com/sssshefer/react-trees
Application to create tree structured data
https://github.com/sssshefer/react-trees
bfs-algorithm d3-visualization queue
Last synced: about 2 months ago
JSON representation
Application to create tree structured data
- Host: GitHub
- URL: https://github.com/sssshefer/react-trees
- Owner: sssshefer
- Created: 2024-06-02T18:52:38.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-08-28T15:28:59.000Z (8 months ago)
- Last Synced: 2025-01-12T10:48:26.103Z (4 months ago)
- Topics: bfs-algorithm, d3-visualization, queue
- Language: TypeScript
- Homepage: https://react-trees.sssshefer.com
- Size: 188 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 
Family Tree Visualization
This project is a React application that visualizes a family tree using the `react-d3-tree` library. Users can dynamically add new family members to the tree through a modal interface. The tree is rendered with D3 and allows interactive exploration of family relationships.
## Table of Contents
- [Features](#features)
- [Technologies Used](#technologies-used)
- [Installation](#installation)
- [How to Use Queue Data Structure in JavaScript](#how-to-use-queue-data-structure-in-javascript)
- [Understanding the Methods](#understanding-the-methods)
- [Breadth-First Search (BFS) in JavaScript](breadth-first-search-bfs)
## Features
- **Interactive Family Tree**: Visualize family relationships with an interactive tree structure.
- **Add Family Members**: Easily add new family members to the tree using a modal form.
- **Breadth-First Search**: Efficiently update the tree structure using the BFS algorithm to find the correct insertion point.
## Technologies Used
- **React**: For building the user interface.
- **react-d3-tree**: For rendering the tree structure.
- **Chakra UI**: For styling and modal components.
- **TypeScript**: For type checking and improved development experience.
## Installation
1. Clone the repository:
```sh
git clone https://github.com/sssshefer/react-trees.git
```
2. Install dependencies:
```sh
cd react-trees
npm install
```
3. Start the development server:
```sh
npm start
```
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
> [!CAUTION]
> Having the same name in a tree doesn't work well
## How to Use Queue Data Structure in JavaScript
A queue is a fundamental data structure in computer science that follows the First-In-First-Out (FIFO) principle. This means that the first element added to the queue will be the first one to be removed. Queues are used in various applications such as task scheduling, handling requests, and managing resources. In JavaScript, while there's no built-in queue data structure, we can easily implement one using arrays.
### Understanding the Methods
- **`push(element)`**: Adds an element to the end of the array. In our queue, this is used in the `enqueue` operation to add elements to the end.
- **`shift()`**: Removes the first element from the array and returns it. This is used in the `dequeue` operation to remove elements from the front of the queue.
- **`unshift(element)`**: Adds an element to the beginning of the array. Although not used in this queue implementation, it is worth mentioning as it can be useful in other scenarios where you need to add elements to the front.
- **`pop()`**: Removes the last element from the array and returns it. This is also not used in this queue implementation but is commonly used in stack data structures.
## Breadth-First Search (BFS)
Breadth-First Search (BFS) is a fundamental algorithm for traversing or searching tree or graph data structures. Starting at the root (or an arbitrary node in the case of a graph), BFS explores the neighbor nodes at the present depth prior to moving on to nodes at the next depth level. This algorithm is particularly useful for finding the shortest path in an unweighted graph.