fghiasi / histogram Goto Github PK

This is a minimalistic and extensible Canvas API that renders a Histogram. It is written in JavaScript without dependency on third-party libraries.

• Acceptable input format must be comma-delimited list of values.
• The histogram is accurate no more than 2 decimal on x-axis.
• It accepts positive and negative floating points as input up to any decimal points.
• The histogram generates dynamic numbers of bars based on The Rice Rule is presented as a simple alternative to Sturges' rule.
• The Rice Rule dictates the number of bars to be floor(2 * cubic root of number of data points).
• It is responsive on smaller or larger screens.

• To play around with the Histogram, open the index.html file on your browser: This will take you to an URL that looks like this on your browser and the home page with randomly generated histogram is shown as follows:

  https://localhost:PORT/src/index.html
  

• 
  
  
• To reset the Histogram click in reset and the histogram will be reset.
  
  
• 
  
  
• Enter your desired comma-delimited list of values in the input box and select Show button.
  
  
• 
  
  
• See the result:
  
  
• 
  
  
• To update the current histogram, enter your desired comma-delimited list of values in the input box and select Update button.
  
  
• 
  
  
• see the result:
  
  
• 
  
  

This shows the folder structure of the default template.

histogram
├── src                   # primary app folder
│   ├── index.html        # html file to that has the display layouts
│   ├── style.css         # css file that has the style for html tags
│   └── script.js         # Histogram class that has show + update + reset functionalities.
└── images                # all the images shown in the README file that shows use cases.

• It was a long time since I coded JavaScript, so I spent a couple of days finishing JavaScript Tutorial beginner, and Intermediate sections.
• Then I spent a day finishing Canvas Tutorial
• First problem I encounter was to have a dynamic number of bars based on the given input so this wiki helped Histogram Algorithm.
• I used Map data structure to compute the frequencies of input.
• I used fillRect rather than line stokes to have consistency for computing offsets.

• JavaScript Tutorial
• Canvas Tutorial
• Histogram Algorithm
• Inspiring YouTube Videos