Skip to content

Instantly share code, notes, and snippets.

@karim23657

karim23657/Word Frequency Analyzer-bar chart.html

Created May 17, 2023 06:16
Show Gist options
  • Save karim23657/3ceb9f573fc0d20686b348f8240915c3 to your computer and use it in GitHub Desktop.
Save karim23657/3ceb9f573fc0d20686b348f8240915c3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Word Frequency Analyzer-bar chart.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>body {
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
}
#text-input {
width: 100%;
height: 200px;
margin-bottom: 20px;
padding: 10px;
box-sizing: border-box;
border: 1px solid black;
}
#chart-container {
width: 100%;
height: 300px;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.bar {
width: calc(100% / var(--num-bars) - 10px);
height: var(--bar-height);
background-color: blue;
margin-bottom: 10px;
}
</style>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Word Frequency Analysis</title>
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
}
#text-input {
width: 100%;
height: 200px;
margin-bottom: 20px;
padding: 10px;
box-sizing: border-box;
border: 1px solid black;
}
#chart-container {
width: 100%;
height: 300px;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.bar {
width: calc(100% / var(--num-bars) - 10px);
height: var(--bar-height);
background-color: blue;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>Word Frequency Analysis</h1>
display the top 10 most frequent words<br>
<label for="text-input">Enter your text:</label>
<textarea id="text-input">ویراستار به طور پیش فرض این کارها را انجام می‌دهد:
۱. نویسه‌های عربی را به فارسی تبدیل می‌کند. مثلا کاف و یای عربی.
۲. نویسه‌های انگلیسی رایج در تایپ فارسی را به معادل صحیح فارسی آن تبدیل می‌کند، مثلا تبدیل کامای انگلیسی به ویرگول (،)، یا نقطه ویرگول به جای semicolon (؛) و یا استفاده از «گیومه‌های فارسی» </textarea>
<button id="analyze-button">Analyze</button>
<div id="chart-container"></div>
<a id="download-link" href="#">Download Results as JSON</a>
</body>
</html>
<script>
// Get DOM elements
const textInput = document.getElementById('text-input');
const analyzeButton = document.getElementById('analyze-button');
const chartContainer = document.getElementById('chart-container');
const downloadLink = document.getElementById('download-link');
// Add event listener to "Analyze" button
analyzeButton.addEventListener('click', () => {
const text = textInput.value;//.toLowerCase().replace(/[^a-z ]/g, ''); // remove non-alphabetic characters and convert to lowercase
const words = text.split(' ');
const frequencies = {};
words.forEach(word => {
if (frequencies[word]) {
frequencies[word]++;
} else {
frequencies[word] = 1;
}
});
const sortedFrequencies = Object.entries(frequencies).sort((a, b) => b[1] - a[1]); // sort by frequency in descending order
// Update chart
chartContainer.innerHTML = '';
sortedFrequencies.slice(0, 10).forEach(([word, frequency], index) => {
const bar = document.createElement('div');
bar.classList.add('bar');
bar.style.setProperty('--num-bars', 10);
bar.style.setProperty('--bar-height', `${frequency / sortedFrequencies[0][1] * 100}%`);
const label = document.createElement('div');
label.textContent = word;
if (index === 0) {
label.style.textAlign = 'left';
} else if (index === sortedFrequencies.length - 1) {
label.style.textAlign = 'right';
} else {
label.style.textAlign = 'center';
}
bar.appendChild(label);
chartContainer.appendChild(bar);
});
// Update download link
const data = JSON.stringify(sortedFrequencies);
downloadLink.href = `data:text/plain;charset=utf-8,${encodeURIComponent(data)}`;
downloadLink.download = 'word-frequencies.json';
});
</script></body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment