2f:T616,# [NLP Word Cloud](https://observablehq.com/@randomfractals/nlp-word-cloud) [View Enabled](https://observablehq.com/@observablehq/views) * Displaying text words with http://compromise.cool NLP library and [d3 Word Cloud Layout](https://www.jasondavies.com/wordcloud/) * This forked version of the [original notebook](https://observablehq.com/@randomfractals/nlp-word-cloud) created by [Taras Novak (@randomfractals)](https://observablehq.com/@randomfractals) is enhanced with a [***view***](https://observablehq.com/@observablehq/views) that programmatically exposes a user-selected word from the word cloud. ## Usage: * Click on a word in the word cloud to select it. The word cloud gives a visual cue that the word is selected by dimming (via the [***opacity***](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/opacity) attribute) all un-selected words. * Clicking the same word again acts as a toggle; deselecting it. * Clicking a new, dimmed-out world also deselects a previously selected word and assigns the view's value to as a function of newly clicked-on word. * The ***viewof*** associated with the **wordCloud** returns an object for the selected word. Either: * {word: ***word***, count: ***count***} or * { } * A [regular expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions) using the [word boundary metacharacter ***\\b***](https://www.regular-expressions.info/wordboundaries.html) is used to highlight the selected word in a ***div*** that contains the original text. 30:T499,highlightedText = { const lines = divText.getElementsByTagName("div"); // Reset div text for (let i = 0; i < lines.length; i++) { lines[i].innerHTML = lines[i].innerHTML.replace( //gi, "" ); lines[i].innerHTML = lines[i].innerHTML.replace(/<\/span>/gi, ""); } if (wordCloud.word) { // \\b explained: https://www.regular-expressions.info/wordboundaries.html const escapedWord = wordCloud.word.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); const regex = new RegExp("\\b" + escapedWord + "\\b", "gi"); for (let i = 0; i < lines.length; i++) { lines[i].innerHTML = lines[i].innerHTML.replace(regex, function (match) { return '' + match + ""; }); } // for // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView divText.querySelector("div > div > span").scrollIntoView(); viewof wordCloud.scrollIntoView(); // } else { divText.scrollTop = 0; } return wordCloud.word ? md`"${wordCloud.word}" is the highlighted text in the div.` : md`No selection made in word cloud.`; }31:T1eeb,text = html`

Look, I was gonna go easy on you and not to hurt your feelings
But I'm only going to get this one chance
Something's wrong, I can feel it (Six minutes, Slim Shady, you're on)
Just a feeling I've got, like something's about to happen, but I don't know what
If that means, what I think it means, we're in trouble, big trouble,
And if he is as bananas as you say, I'm not taking any chances
You were just what the doctor ordered

I'm beginning to feel like a Rap God, Rap God
All my people from the front to the back nod, back nod
Now who thinks their arms are long enough to slap box, slap box?
They said I rap like a robot, so call me Rapbot

But for me to rap like a computer must be in my genes
I got a laptop in my back pocket
My pen'll go off when I half-c*** it
Got a fat knot from that rap profit
Made a living and a killing off it
Ever since Bill Clinton was still in office
With Monica Lewinsky feeling on his nut-sack
I'm an MC still as honest
But as rude and indecent as all hell syllables, killaholic (Kill 'em all with)
This slickety, gibbedy, hibbedy hip hop
You don't really wanna get into a pissing match with this rappidy rap
Packing a Mac in the back of the Ac, pack backpack rap, yep, yackidy-yac
The exact same time I attempt these lyrical acrobat stunts while I'm practicing
That I'll still be able to break a motherf***in' table
Over the back of a couple of faggots and crack it in half
Only realized it was ironic I was signed to Aftermath after the fact
How could I not blow? All I do is drop F-bombs, feel my wrath of attack
Rappers are having a rough time period, here's a Maxipad
It's actually disastrously bad
For the wack while I'm masterfully constructing this masterpiece as

I'm beginning to feel like a Rap God, Rap God
All my people from the front to the back nod, back nod
Now who thinks their arms are long enough to slap box, slap box?
Let me show you maintaining this s*** ain't that hard, that hard

Everybody want the key and the secret to rap immortality like I have got
Well, to be truthful the blueprint's simply rage and youthful exuberance
Everybody loves to root for a nuisance
Hit the earth like an asteroid, did nothing but shoot for the moon since
MC's get taken to school with this music
Cause I use it as a vehicle to bust a rhyme
Now I lead a new school full of students
Me? I'm a product of Rakim, Lakim Shabazz, 2Pac N-
-W.A, Cube, hey, Doc, Ren, Yella, Eazy, thank you, they got Slim
Inspired enough to one day grow up, blow up and be in a position
To meet Run DMC and induct them into the motherf***in' Rock n'
Roll Hall of Fame
Even though I walk in the church and burst in a ball of flames
Only Hall of Fame I be inducted in is the alcohol of fame
On the wall of shame
You fags think it's all a game 'til I walk a flock of flames
Off of planking, tell me what in the f*** are you thinking?
Little gay looking boy
So gay I can barely say it with a straight face looking boy
You witnessing a massacre
Like you watching a church gathering take place looking boy
Oy vey, that boy's gay, that's all they say looking boy
You get a thumbs up, pat on the back
And a way to go from your label everyday looking boy
Hey, looking boy, what you say looking boy?
I got a "hell yeah" from Dre looking boy
I'mma work for everything I have
Never ask nobody for s***, get outta my face looking boy
Basically boy you're never gonna be capable
To keep up with the same pace looking boy

'Cause I'm beginning to feel like a Rap God, Rap God
All my people from the front to the back nod, back nod
The way I'm racing around the track, call me Nascar, Nascar
Dale Earnhardt of the trailer park, the White Trash God
Kneel before General Zod this planet's Krypton, no Asgard, Asgard

So you be Thor and I'll be Odin, you rodent, I'm omnipotent
Let off then I'm reloading immediately with these bombs I'm totin'
And I should not be woken
I'm the walking dead, but I'm just a talking head, a zombie floating
But I got your mom deep throating
I'm out my ramen noodle, we have nothing in common, poodle
I'm a doberman, pinch yourself in the arm and pay homage, pupil
It's me, my honesty's brutal
But it's honestly futile if I don't utilize what I do though
For good at least once in a while
So I wanna make sure somewhere in this chicken scratch I scribble and doodle
Enough rhymes to maybe to try and help get some people through tough times
But I gotta keep a few punchlines just in case cause even you unsigned
Rappers are hungry looking at me like it's lunchtime
I know there was a time where once I
Was king of the underground, but I still rap like I'm on my Pharoahe Monch grind
So I crunch rhymes, but sometimes when you combine
Appeal with the skin color of mine
You get too big and here they come trying to,
Censor you like that one line I said on "I'm Back" from the Marshall Mathers LP
One where I tried to say I take seven kids from Columbine
Put 'em all in a line, add an AK-47, a revolver and a nine
See if I get away with it now that I ain't as big as I was, but I've
Morphed into an immortal coming through the portal
You're stuck in a time warp from 2004 though
And I don't know what the f*** that you rhyme for
You're pointless as Rapunzel with f***ing cornrows
You're like normal, f*** being normal
And I just bought a new Raygun from the future
To just come and shoot ya like when Fabolous made Ray J mad
'Cause Fab said he looked like a fag at Maywhether’s pad
Singin' to a man while they played piano
Man, oh man, that was a 24/7 special on the cable channel
So Ray J went straight to the radio station the very next day
"Hey, Fab, I'mma kill you"
Lyrics coming at you at supersonic speed, (JJ Fad)
Uh, sama lamaa duma lamaa you a**uming I'm a human
What I gotta do to get it through to you I'm superhuman
Innovative and I'm made of rubber
So that anything you saying ricocheting off of me and it'll glue to you
I'm never stating, more than never demonstrating
How to give a motherf***in' audience a feeling like it's levitating
Never fading, and I know that the haters are forever waiting
For the day that they can say I fell off, they'd be celebrating
Cause I know the way to get 'em motivated
I make elevating music, you make elevator music
Oh, he's too mainstream
Well, that's what they do when they get jealous, they confuse it
It's not hip hop, it's pop, cause I found a hella way to fuse it
With rock, shock rap with Doc
Throw on Lose Yourself and make 'em lose it
I don't know how to make songs like that
I don't know what words to use
Let me know when it occurs to you
While I’m ripping any one of these verses diverse as you
It’s curtains, I’m inadvertently hurtin' you
How many verses I gotta murder to,
Prove that if you're half as nice at songs you can sacrifice virgins too uh!
School flunkie, pill junky
But look at the accolades the skills brung me
Full of myself, but still hungry
I bully myself cause I make me do what I put my mind to
And I'm a million leagues above you, ill when I speak in tongues
But it's still tongue in cheek, f*** you
I'm drunk so Satan take the f***ing wheel, I'm asleep in the front seat
Bumping Heavy D and the Boys, still chunky, but funky
But in my head there's something I can feel tugging and struggling
Angels fight with devils, here's what they want from me
They asking me to eliminate some of the women hate
But if you take into consideration the bitter hatred that I had
Then you may be a little patient and more sympathetic to the situation
And understand the discrimination
But f*** it, life's handing you lemons, make lemonade then
But if I can't batter the women how the f*** am I supposed to bake them a cake then?
Don't mistake it for Satan
It's a fatal mistake if you think I need to be overseas
And take a vacation to trip a broad
And make her fall on her face and don't be a retard
Be a king? Think not, why be a king when you can be a God?

`32:Tcfa,function createWordCloudSvg(words) { var layout = d3cloud() .size([width, (width * 9) / 16]) .words(words) .padding(cloudConfig.padding * cloudScale) .rotate(rotateWord) .font(baseFont) .fontSize(fontSize) .on("word", addWord); const svg = DOM.svg(layout.size()[0], layout.size()[1]); // width, height const group = d3.select(svg).append("g"); //.attr("transform", "translate(" + layout.size()[0] / 2 + "," + layout.size()[1] / 2 + ")") const opacity = 0.2; // Value used to dim-out words not selected // New logic to select a word by first dimming all the words and then un-dimming the selected text element const selectWord = (selText) => { if (selText) { group.selectAll("text").style("opacity", opacity); // first dim all words/text elements d3.select(selText).style("opacity", 1); // then undim clicked on word/text element // implement view protocol as per https://observablehq.com/@mootari/what-has-viewof-ever-done-for-us const title = d3.select(selText).select("title").text(); //parse out word and count from the title var regex = /^(.*) $(\d+)$$/; var match = regex.exec(title); } // Assign svg's value property and dispatch event svg.value = selText ? { word: match[1], count: parseInt(match[2]) } : {}; svg.dispatchEvent(new Event("input", { bubbles: true })); }; function addWord(word) { const text = group.append("text"); text .style("font-size", "2px") .style("font-family", word.font) .style("fill", wordColors(Math.random())) .style("cursor", "pointer") .attr("text-anchor", "middle") .attr("transform", `translate(${[word.x, word.y]})rotate(${word.rotate})`) .text(word.text) //.transition() //.duration(1500) //.ease(d3.easeLinear) .style("font-size", `${word.size}px`) .style("opacity", 1); text.append("title").text(`${word.text} (${word.count})`); // toolitp // Click event handler text.on("click", function () { // Check if any text elements in the group have been made opaque const hasOpacity = !group .selectAll("text") .filter(function () { // Remember: arrow functions can't reference it's own 'this' return d3.select(this).style("opacity") == opacity; }) .empty(); if (hasOpacity) { // If wordcloud was previously clicked... const previouslySelectedWord = group .selectAll("text") // Reference to previously selected word, if any .filter(function () { // Remember: arrow functions can't reference it's own 'this' return d3.select(this).style("opacity") == 1; }) .node(); //Should only be one previously selected // Make all words visible again // Possible toggle effect if user clicks on a word that has been previously selected group.selectAll("text").style("opacity", 1); // Behave like toggle if user clicked the same word previously selected selectWord(this !== previouslySelectedWord ? this : false); } // hasOpacity else { selectWord(this); } }); } // addWord layout.start(); selectWord(false); // Initialize view with empty object return svg; }33:[] 2d:{"title":"NLP Word Cloud View Enabled","cells":[{"id":0,"value":"$2f","pinned":false,"hidden":false,"mode":"md"},{"id":60,"value":"viewof wordCloud = createWordCloudSvg(words)","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"download = downloadWordCloudSvg(\"word-cloud\", viewof wordCloud)","pinned":false,"hidden":false,"mode":"ojs"},{"id":359,"value":"$${ wordCloud.word ? `## The word ***${wordCloud.word}*** selected in the word cloud is highlighted in this text:` : ``}","pinned":false,"hidden":false,"mode":"md"},{"id":204,"value":"divText = {\n const lines = text.value.split(\"\\n\");\n const div = document.createElement(\"div\");\n div.id = \"highLighted\";\n div.style.width = `${width}px`;\n div.style.height = \"400px\";\n div.style.overflowY = \"scroll\";\n for (let i = 0; i < lines.length; i++) {\n const line = document.createElement(\"div\");\n line.textContent = lines[i] == \"\" ? \"\\u00A0\" : lines[i];\n div.appendChild(line);\n }\n\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":321,"value":"## Notebook Objects","pinned":false,"hidden":false,"mode":"md"},{"id":177,"value":"// Object returned with viewof\nwordCloud","pinned":true,"hidden":false,"mode":"ojs"},{"id":386,"value":"### Text highlighting code:","pinned":false,"hidden":false,"mode":"md"},{"id":227,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"### Original text ([Eminem's Rap God](https://youtu.be/XbGs_qK2PQA)) used in generating the word cloud:","pinned":false,"hidden":false,"mode":"md"},{"id":215,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"function downloadWordCloudSvg(fileName, svg) {\n return html `${DOM.download(serialize(svg), `${fileName}.svg`, \"Save SVG\")}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":512,"value":"// Slightly re-worked logic to for un-normalized text\n// See the following for details on the transformations normalization does:\n// https://observablehq.com/@spencermountain/compromise-normalization?collection=@spencermountain/nlp-compromise\nwords = countTerms(doc.match(\"#Noun\"), 50) // sort by frequency\n .concat(countTerms(doc.match(\"#Verb\"), 50))\n .concat(countTerms(doc.match(\"#Adverb\")))\n .concat(countTerms(doc.match(\"#Adjective\")))\n .sort((a, b) => b.freq - a.freq);\n\n/* Orignal Code:\n\nwords = toWords(doc.nouns().out('topk').slice(0,50)) // sort by frequency\n .concat(toWords(doc.verbs().out('topk').slice(0,50)))\n .concat(toWords(doc.adverbs().out('topk')))\n .concat(toWords(doc.adjectives().out('topk')))\n .sort((a,b) => b.freq - a.freq)\n\n\n*/\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"// Since the word cloud is going to be used as a highlighter for the original text, the normalize method will not be used.\n// See the following for details on the transformations normalization does:\n// https://observablehq.com/@spencermountain/compromise-normalization?collection=@spencermountain/nlp-compromise\ndoc = nlp(text.value) /*.normalize({\n whitespace: true, // remove hyphens, newlines, and force one space between words\n punctuation: true, // remove commas, semicolons - but keep sentence-ending punctuation\n case: true, // keep only first-word, and 'entity' titlecasing\n numbers: true, // 'one' → '1'\n plurals: true, // 'eyes' → 'eye'\n verbs: true // 'swtiched' → 'switch'\n})*/","pinned":false,"hidden":false,"mode":"ojs"},{"id":549,"value":"nlp(text.value).terms()","pinned":true,"hidden":false,"mode":"ojs"},{"id":431,"value":"{\n const doc = nlp(text.value);\n\n const words = toWords(doc.nouns().out(\"topk\").slice(0, 50)) // sort by frequency\n .concat(toWords(doc.verbs().out(\"topk\").slice(0, 50)))\n .concat(toWords(doc.adverbs().out(\"topk\")))\n .concat(toWords(doc.adjectives().out(\"topk\")))\n .sort((a, b) => b.freq - a.freq);\n\n return words;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"wordColors = d3.scaleSequential(d3.interpolateRainbow)","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"function toWords (terms) {\n return terms.map(term => ({\n text: term.normal,\n count: term.count,\n freq: term.percent/100\n }));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":509,"value":"// Reworking of the toWords function that accepts tags instead of the .out(topk) which normalizes the text\nfunction countTerms(terms, topN) {\n const counts = d3.rollups(\n terms.out(\"tags\").filter((d) => d != \"\"),\n (v) => v.length,\n (d) => d.text.toLowerCase().replaceAll(\",\", \"\")\n );\n\n const total = d3.sum(counts, (d) => d[1]);\n\n const result = counts.map((d) => {\n return {\n text: d[0],\n count: d[1],\n freq: (d[1] / total).toFixed(2)\n };\n });\n\n result.sort((a, b) => b.count - a.count);\n\n if (topN) {\n return result.slice(0, topN);\n }\n\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"cloudConfig = ({\n minFontSize: 10,\n maxFontSize: 80,\n height: width/2,\n padding: 1,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"mutable cloudScale = 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"rotateWord = function () { \n return ~~(Math.random() * 4) * 45 - 45; \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"fontFamilies = ['Corben', 'Pacifico', 'impact']","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"baseFont = function (d) {\n return fontFamilies[~~(Math.random() * fontFamilies.length)]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"frequencyToSize = function (frequency) {\n return Math.sqrt(frequency);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"fontSize = {\n let totalArea = 0;\n let minSize = frequencyToSize(words[words.length-1].freq);\n let maxSize = frequencyToSize(words[0].freq);\n for (let w of words) {\n let size = frequencyToSize(w.freq);\n let fontSize = cloudConfig.minFontSize + \n (cloudConfig.maxFontSize - cloudConfig.minFontSize) * ((size-minSize) / (maxSize-minSize));\n totalArea += (w.text.length * 0.6 + cloudConfig.padding * 2) * fontSize * (fontSize + cloudConfig.padding * 2);\n }\n let s = Math.sqrt(width * cloudConfig.height/totalArea);\n mutable cloudScale = s;\n return function (w) {\n return s * (cloudConfig.minFontSize + \n (cloudConfig.maxFontSize - cloudConfig.minFontSize) * ((frequencyToSize(w.freq) - minSize) / (maxSize - minSize))\n );\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"styles = html `

Styles

\n\n
\n

Pacifico

Corben

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"imports = md `## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"nlp = require(\"compromise@11.14.3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"d3cloud = require('d3-cloud')","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"import {rasterize, serialize} from '@mbostock/saving-svg'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}