Monday, September 14, 2015

First web component published - upper88-wordcloud

Yesterday I published my first web component, It is a custom component called upper88-wordcloud. Very basic so far, you set the data using the attribute rows and optionally minimum and maximum font size using an options attribute.

An example:
Goldmedals from Track and Field World Championship 2015
Html for this:
<upper88-wordcloud options='{"maxFont":60}' rows='[["Kenya", 7], ["Jamaica", 7], ["United States", 6], ["Great Britain", 4], ["Ethiopia", 3], ["Poland", 3], ["Canada", 2], ["Germany", 2], ["Russia", 2], ["Cuba", 2]]'>
    </upper88-wordcloud%gt;

Size, background color etc are set using CSS.

For rendering the actual word cloud the component uses a library available on GitHub, wordcloud2.js by Tim Dream. A great library, and it supports rendering the wordcloud as a set of HTML span's, which feels like the best way to go for a custom element.

So far the component is very basic and doesn't expose much of the flexibility that the library has. There is definitely room for improvement.

No comments: