sauravhathi / word-frequency-histogram

This project is a Next.js application that fetches contents of a text file from https://www.terriblytinytales.com/test.txt, parses content to find frequency of occurrence of each word, and plots a histogram on frontend using Next.js and React Chart.js 2 library.

Home Page:https://word-frequency-histogram.vercel.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Word Frequency Histogram

This project is a Next.js application that fetches contents of a text file from https://www.terriblytinytales.com/test.txt, parses content to find frequency of occurrence of each word, and plots a histogram on frontend using Next.js and React Chart.js 2 library.

Demo ✈️

A live demo of application can be found at https://word-frequency-histogram.vercel.app/.

Screenshots

image

image

Features

  • On first load, application displays a Get Data button.
  • Pressing Enter or clicking on Get Data button triggers a fetch request to retrieve text content from https://www.terriblytinytales.com/test.txt.
  • text content is then parsed, and frequency of occurrence of each word, regardless of case, is calculated.
  • Before counting frequency, any punctuation marks including ., ,, !, ?, ;, :, (, ), ", ', and - are removed from each word.
  • Top 20 words with highest occurrence frequency are displayed in a histogram.
  • X-axis represents top 20 words, and Y-axis represents number of times each word occurred in file. histogram is generated using React Chart.js 2 library.

Libraries and Plugins Used

  • Next.js 🚀
  • React ⚛️
  • React Chart.js 2 📊

Installation

  1. Clone repository from GitHub:

    git clone https://github.com/sauravhathi/word-frequency-histogram.git
  2. Navigate to project directory:

    cd word-frequency-histogram
  3. Install dependencies:

    npm install
    
    # or
    
    yarn

Usage

  1. Run development server:

    npm run dev
    
    # or
    
    yarn dev
  2. Open your browser and navigate to http://localhost:3000.

  3. Click on Get Data button to fetch text content and generate histogram.

Contributing

Contributions are welcome! If you find any issues or have suggestions for improvements, please feel free to submit a pull request or open an issue on GitHub repository.

To contribute to this project, follow these steps:

  1. Fork repository on GitHub.

  2. Clone your forked repository to your local machine:

    git clone <repository>
  3. Create a new branch for your feature or bug fix:

    git checkout -b <branch-name>
  4. Make your changes and commit them with descriptive commit messages:

    git commit -m "<commit-message>"
  5. Push your changes to your forked repository:

    git push origin <branch-name>
  6. Open a pull request on original repository and describe changes you made.

  7. Wait for feedback and discussion on your pull request. Make any necessary changes based on feedback.

  8. Once your pull request is approved, it will be merged into main repository.

License

This project is licensed under MIT License.

You are free to modify and use code in this project for personal or commercial purposes.

About

This project is a Next.js application that fetches contents of a text file from https://www.terriblytinytales.com/test.txt, parses content to find frequency of occurrence of each word, and plots a histogram on frontend using Next.js and React Chart.js 2 library.

https://word-frequency-histogram.vercel.app

License:MIT License


Languages

Language:TypeScript 89.9%Language:JavaScript 9.3%Language:CSS 0.8%