https://github.com/unit2795/radial-demonstrator

Polar grid diagramming tool example
https://github.com/unit2795/radial-demonstrator

Last synced: over 1 year ago
JSON representation

Polar grid diagramming tool example

• Host: GitHub
• URL: https://github.com/unit2795/radial-demonstrator
• Owner: Unit2795
• Created: 2024-12-14T04:02:41.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-01-13T04:08:46.000Z (over 1 year ago)
• Last Synced: 2025-01-22T18:13:59.656Z (over 1 year ago)
• Language: TypeScript
• Homepage:
• Size: 276 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Radial Demonstrator

# Synopsis

Demonstrates a rudimentary radial graph diagramming tool that allows connections between different sectors of a radial diagram to be plotted. Utilizes a 2D SVG based rendering approach.

![Example](docs/example.png)

## Motivation

Demonstrate a performant means of drawing an interactive polar grid using SVG. Includes irregularly shaped cells toward the middle of the diagram.

## How To Use

- Hover over a sector to highlight it

- Click on a sector to select it

- Click on another sector to connect the two with a line

## Try It Out

Visit the [deployed GitHub Pages site](https://unit2795.github.io/component-collection/?path=/story/radial-grid--default) to try out the live demo

## Installation and Development

- Run `pnpm `install` in the root directory to install dependencies

- Run `pnpm run dev` to start the development server and visit http://localhost:5173/

- Run `pnpm run build` to build the project, open the `dist/index.html` file in your browser to view the production build

## Key Technologies

- React

- TypeScript

- SVG

- Vite