Giter Club home page Giter Club logo

sauravhathi / word-frequency-histogram Goto Github PK

View Code? Open in Web Editor NEW
0.0 2.0 0.0 440 KB

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

License: MIT License

JavaScript 9.31% TypeScript 89.88% CSS 0.81%
chartjs histogram tailwindcss word-frequency-count nextjs-histogram terriblytinytales sauravhathi

word-frequency-histogram's Introduction

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.

word-frequency-histogram's People

Contributors

sauravhathi avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.