– the canvas with id velue fruitBasket, initially empty – script element that includes the wordcloud2.js component library The simplest webpage plus tag cloud that we can create is coded like this: The id of the target canvas is passed in the call to wordcloud2 for a specific tag cloud. Note: a page can contain multiple tag clouds, each in their own canvas element. It will paint the tag cloud on the canvas element. The component also requires a Canvas element in our web page.
This library can be imported into any web page with a simple script element.
My first step with the wordcloud2 component was simply downloading the source from GIT Hub. An interesting JavaScript trick with arrays is demonstrated along the way – a for each and a filter function, very similar to the new Java 8 SE Lambda expressions and Streams API. A little JSON manipulation is applied (to read and parse the country data from JSON document). The example I am using is a cloud with countries – the tag weight derived from the country’s population size.Ī second tag cloud is used for filtering: it shows continents and clicking a continent filters the countries cloud to display only countries in that continent. In this article I will show how to use the wordcloud2 component to integrate a tag cloud in a web page. It uses the HTML 5 Canvas tag for client side rendering the tag cloud. The component has no external dependencies and runs in all current browsers. The tags can react to hovering as well as clicking. I can style the tag cloud in various ways. This component fits the bill perfectly: it renders a tag cloud based on a simple JavaScript list of tags. In short a component that I can easily reuse in web applications – from rich client/thin server style to ADF and APEX.Ī little Googling brought me in contact with the wordcloud2 component, created by Tim Chien and available at. I wanted to find a simple to use component to present a tag cloud, independent of specific JavaScript libraries or server side frameworks. However, with recent browser evolution and the quick adoption of HTML 5, I was interest in the current state of affairs. Widgets for rendering tag clouds are omnipresent and have been so for many years. Data visualization is one of my areas of personal interest and the tag cloud is very much part of that. The use of color or font style – in addition to the size of the tags – allows the presentation of additional dimensions in the data.
By making the tags clickable, tag cloud can also be used to quickly navigate or drill down (filter). They very quickly convey an impression of the relative sizes of a substantial number of entities and they do so in an attractive, almost playful way. Tag Clouds are an interesting way to present information.
0 kommentar(er)
