ajayliu / notation-visualizer

An interactive website to visualize how Infix, Prefix (Polish), and Postfix (Reverse Polish) notation are converted and evaluated.

Notation Visualizer

Visualize how infix/prefix/postfix notation is evaluated with trees and stacks in an interactive website!
Website »

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
   • Development
   • Deployment
3. Contributing
4. License
5. Contact
6. Acknowledgements

About The Project

I learned about infix/prefix/postfix notation during my senior year of high school and I find it fascinating that you can evaluate them using both trees and stacks! It's a great way to learn about inorder/preorder/postorder traversal and basic computer science! This website contains two interactive visualizers: a Tree Visualizer and a Stack Visualizer.

I filmed an explainer video using this website:

Built With

• Next.js
• React
• TailwindCSS
• Netlify

Getting Started

Here is a guide if you want to clone this template and modify it for yourself, all the way to deployment.

Prerequisites

• yarn
• git

Installation

1. Clone the repo

   git clone https://github.com/AjayLiu/notation-visualizer.git

2. Install packages

   yarn

Development

To run the development server

yarn dev

Then head over to localhost:3000

Deployment

1. Publish the site on Netlify using continuous git integration. 🎉

Contributing

Issues

Feel free to submit issues and enhancement requests. Also, submit an issue before submitting pull requests. Look through existing issues and see if you want to help out!

Workflow

Please refer to each project's style and contribution guidelines for submitting patches and additions. In general, we follow the "fork-and-pull" Git workflow.

1. Fork the repo on GitHub
2. Clone the project to your own machine
3. Commit changes to your own branch
4. Push your work back up to your fork
5. Submit a Pull request so that we can review your changes

NOTE: Be sure to merge the latest from "upstream" before making a pull request!

License

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

Contact

Ajay Liu - [email protected]

Project Link: https://github.com/AjayLiu/notation-visualizer

Acknowledgements

• UCSB Professor Michael Costanzo's pseudocode for evaluating expressions and expression trees
• react-d3-tree
• sweetalert
• Netlify

notation-visualizer's Issues

[Help Wanted] [Easy] Add Postfix and Prefix expressions to "database"

This website has buttons where the user can generate random Postfix and Prefix expressions. So far, the "database" (which is stored in typescript objects) only contains 3 example expressions:

From randomPostorders.ts:

const randomPostorders: string[] = [
    "3 7 * 9 + 2 /",
    "3 16 8 / 2 * +",
    "7 1 2 + 3 - *",
];
export default randomPostorders;

Anyone who'd like to help contribute could create a fork, clone, and submit a pull request under this issue. Below are the two files to help add to:
https://github.com/AjayLiu/notation-visualizer/blob/main/src/data/randomPostorders.ts
https://github.com/AjayLiu/notation-visualizer/blob/main/src/data/randomPreorders.ts

Feel free to ask any questions here, looking forward to merging your pull request!

Note: Make sure the Postfix/Prefix expressions are space-separated, only have numeral operands, and only contain the following operators: +, -, *, /, ^.