wordcloud2.js icon indicating copy to clipboard operation
wordcloud2.js copied to clipboard

It is possible to add emojis to the wordcloud?

Open maripop opened this issue 7 years ago • 3 comments

Hello!

First, thank you so much for the job!

I'd need to make a wordcloud with emojis or mixing words and emojis. The emojis size would depend of its weight (same behavior as words).

So I was wondering if your library have something done for this needs. I have a twitter emoji id, a src url or an img dom element.

Thank you!! Best! María

maripop avatar Jul 04 '18 08:07 maripop

The library currently does not accept images. If Emoji are @font-face web font it should be able to render without problems.

timdream avatar Jul 04 '18 08:07 timdream

Ok, thank you!!

maripop avatar Jul 04 '18 08:07 maripop

@maripop what is possible is to replace the innerText from span elements (if you don't select a canvas, span elements will be created).

You just need to calculate some widths properly but you can listen on the wordcloudstop event and replace the content of the spans. In the library there is a check if the data is an array or an object with word, weight and attributes. These attributes can for example have your content you want to place (emojis) as data-attribute.

...
this.element = document.getElementById('some_id');
this.element.addEventListener('wordcloudstop', replaceHTML.bind(this));
WordCloud(this.element, {list: [
  {attributes: { 'data-html' : '<i class="fab fa-php"></i>'}, weight: 3, word: "php" },
  {attributes: { 'data-html' : '<i class="fab fa-js"></i>'}, weight: 10, word:  "js"},
  {attributes: { 'data-html' : '<i class="fab fa-docker"></i>'}, weight: 8, word:  "docker"},
]};

...
replaceHTML() {
  let spans = this.element.children;
  for (let span of spans) {
    span.innerHTML = span.getAttribute("data-html");
  }
}

It is just an approach, where i replaced the words with any HTML content. The width calculation of each element is still done by the given word and the other font options but i hope you can start with that.

alabama avatar Aug 09 '18 15:08 alabama

Old issue handled by workarround

maripop avatar Feb 19 '24 09:02 maripop