Pure JS word cloud.

Developer
Stove
Size
3,163 Kb
Views
143,704
  1. Pure JS word cloud. Previews
  2. Pure JS word cloud. HTML Codes
  3. Pure JS word cloud. CSS Codes
  4. Pure JS word cloud. JS Codes

How do I make an pure js word cloud.?

Just a word cloud. No biggie. What is a pure js word cloud.? How do you make a pure js word cloud.? This script and codes were developed by Stove on 07 July 2022, Thursday.

Pure JS word cloud. Previews
IQ Test

Pure JS word cloud. - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure JS word cloud.</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="word-cloud"></div> <script src="js/index.js"></script>
</body>
</html>

Pure JS word cloud. - Script Codes CSS Codes

#word-cloud { height: 100vh; width: 100vw; margin: 0 auto;
}
body, html { margin: 0; padding: 0;
}

Pure JS word cloud. - Script Codes JS Codes

/* ======================= SETUP ======================= */
var config = { trace: true, spiralResolution: 1, //Lower = better resolution spiralLimit: 360 * 5, lineHeight: 0.8, xWordPadding: 0, yWordPadding: 3, font: "sans-serif"
}
var words = ["words", "are", "cool", "and", "so", "are", "you", "inconstituent", "funhouse!", "apart", "from", "Steve", "fish"].map(function(word) { return { word: word, freq: Math.floor(Math.random() * 50) + 10 }
})
words.sort(function(a, b) { return -1 * (a.freq - b.freq);
});
var cloud = document.getElementById("word-cloud");
cloud.style.position = "relative";
cloud.style.fontFamily = config.font;
var traceCanvas = document.createElement("canvas");
traceCanvas.width = cloud.offsetWidth;
traceCanvas.height = cloud.offsetHeight;
var traceCanvasCtx = traceCanvas.getContext("2d");
cloud.appendChild(traceCanvas);
var startPoint = { x: cloud.offsetWidth / 2, y: cloud.offsetHeight / 2
};
var wordsDown = [];
/* ======================= END SETUP ======================= */
/* ======================= PLACEMENT FUNCTIONS ======================= */
function createWordObject(word, freq) { var wordContainer = document.createElement("div"); wordContainer.style.position = "absolute"; wordContainer.style.fontSize = freq + "px"; wordContainer.style.lineHeight = config.lineHeight;
/* wordContainer.style.transform = "translateX(-50%) translateY(-50%)";*/ wordContainer.appendChild(document.createTextNode(word)); return wordContainer;
}
function placeWord(word, x, y) { cloud.appendChild(word); word.style.left = x - word.offsetWidth/2 + "px"; word.style.top = y - word.offsetHeight/2 + "px"; wordsDown.push(word.getBoundingClientRect());
}
function trace(x, y) {
// traceCanvasCtx.lineTo(x, y);
// traceCanvasCtx.stroke(); traceCanvasCtx.fillRect(x, y, 1, 1);
}
function spiral(i, callback) { angle = config.spiralResolution * i; x = (1 + angle) * Math.cos(angle); y = (1 + angle) * Math.sin(angle); return callback ? callback() : null;
}
function intersect(word, x, y) { cloud.appendChild(word); word.style.left = x - word.offsetWidth/2 + "px"; word.style.top = y - word.offsetHeight/2 + "px"; var currentWord = word.getBoundingClientRect(); cloud.removeChild(word); for(var i = 0; i < wordsDown.length; i+=1){ var comparisonWord = wordsDown[i]; if(!(currentWord.right + config.xWordPadding < comparisonWord.left - config.xWordPadding || currentWord.left - config.xWordPadding > comparisonWord.right + config.wXordPadding || currentWord.bottom + config.yWordPadding < comparisonWord.top - config.yWordPadding || currentWord.top - config.yWordPadding > comparisonWord.bottom + config.yWordPadding)){ return true; } } return false;
}
/* ======================= END PLACEMENT FUNCTIONS ======================= */
/* ======================= LETS GO! ======================= */
(function placeWords() { for (var i = 0; i < words.length; i += 1) { var word = createWordObject(words[i].word, words[i].freq); for (var j = 0; j < config.spiralLimit; j++) { //If the spiral function returns true, we've placed the word down and can break from the j loop if (spiral(j, function() { if (!intersect(word, startPoint.x + x, startPoint.y + y)) { placeWord(word, startPoint.x + x, startPoint.y + y); return true; } })) { break; } } }
})();
/* ======================= WHEW. THAT WAS FUN. We should do that again sometime ... ======================= */
/* ======================= Draw the placement spiral if trace lines is on ======================= */
(function traceSpiral() { traceCanvasCtx.beginPath(); if (config.trace) { var frame = 1; function animate() { spiral(frame, function() { trace(startPoint.x + x, startPoint.y + y); }); frame += 1; if (frame < config.spiralLimit) { window.requestAnimationFrame(animate); } } animate(); }
})();
Pure JS word cloud. - Script Codes
Pure JS word cloud. - Script Codes
Home Page Home
Developer Stove
Username stevn
Uploaded July 07, 2022
Rating 3
Size 3,163 Kb
Views 143,704
Do you need developer help for Pure JS word cloud.?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Stove (stevn) Script Codes
Name
Letter drawing in SCSS for pixel logos
Pure CSS Responsive tables
Sinusoidal goodness
Tippy-tappy-typer
A better loading spinner
FRAPS counter
Favourite interaction and animation
CSS3D cube demo
Colour interpolation
Google burger arrow
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!