Git Product home page Git Product logo

jqcloud's Introduction

jQCloud: beautiful word clouds with jQuery

jQCloud is a jQuery plugin that builds neat and pure HTML + CSS word clouds and tag clouds that are actually shaped like a cloud (otherwise, why would we call them ‘word clouds’?).

You can see a demo here

Installation

Installing jQCloud is extremely simple:

  1. Make sure to import the jQuery library in your project.
  2. Download the jQCloud files. Place jqcloud-0.1.6.js (or the minified version jqcloud-0.1.6.min.js) and jqcloud.css somewhere in your project and import both of them in your HTML code.

You can easily substitute jqcloud.css with a custom CSS stylesheet following the guidelines explained later.

Usage

Once you imported the .js and .css files, drawing a cloud is as simple as this:

<!DOCTYPE html>
<html>
  <head>
    <title>jQCloud Example</title>
    <link rel="stylesheet" type="text/css" href="jqcloud.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript" src="jqcloud-0.1.6.js"></script>
    <script type="text/javascript">
      /*!
       * Create an array of objects to be passed to jQCloud, each representing a word in the cloud and specifying
       * the following mandatory attributes:
       *
       * text: a string containing the word(s)
       * weight: a number (integer or float) defining the relative importance of the word
       *         (such as the number of occurrencies, etc.). The range of values is arbitrary, as they will
       *         be linearly mapped to a discrete scale from 1 to 10.
       *
       * You can also specify the following optional attributes:
       *
       * url: a URL to which the word will be linked. It will be used as the href attribute of an HTML anchor.
       * title: an HTML title for the <span> that will contain the word(s)
       */
      var word_list = [
          {text: "Lorem", weight: 15},
          {text: "Ipsum", weight: 9, url: "http://jquery.com/", title: "jQuery Rocks!"},
          {text: "Dolor", weight: 6},
          {text: "Sit", weight: 7},
          {text: "Amet", weight: 5}
          // ...other words
      ];
      $(document).ready(function() {
        // Call jQCloud on a jQuery object passing the word list as the first argument. Chainability of methods is maintained.
        $("#example").jQCloud(word_list);
      });
    </script>
  </head>
  <body>
    <!-- You must explicitly specify the dimensions of the container element -->
    <div id="example" style="width: 550px; height: 350px; position: relative;"></div>
  </body>
</html>

Note:

Since drawing the cloud is rather computationally intensive, cloud rendering isn’t instantaneous. If you want to make sure that some code executes after the cloud is rendered, you can pass to jQCloud a callback function:

$("#example").jQCloud(word_list, function(){
  // This code executes after the cloud is fully rendered
});

Custom CSS guidelines

The word cloud produced by jQCloud is made of pure HTML, so you can style it using CSS. When you call $(“#example”).jQCloud(…), the containing element is given a CSS class of “jqcloud”, allowing for easy CSS targeting. The included CSS file jqcloud.css is intended as an example and as a base on which to develop your own custom style, defining dimensions and appearance of words in the cloud. When writing your custom CSS, just follow these guidelines:

  • Always specify the dimensions of the container element (div.jqcloud in jqcloud.css).
  • The CSS attribute ‘position’ of the container element must be explicitly declared and different from ‘static’.
  • Specifying the style of the words (color, font, dimension, etc.) is super easy: words are wrapped in <span> tags with ten levels of importance corresponding to the following classes (in descending order of importance): w10, w9, w8, w7, w6, w5, w4, w3, w2, w1.

Examples

Just have a look at the examples directory provided in the project or see a demo here.

If you happen to use jQCloud in your projects, you can make me know (just contact me on my website) and I can add a link to your website in a ‘gallery’ section, so that other people can take inspiration from it.

Changelog

0.1.6 JavaScript-friendly URL encode ‘url’ option; Typecast ‘weight’ option to float (thanks to nudesign)

0.1.5 Apply CSS style to a “jqcloud” class, automatically added (previously an id was used. Again, thanks to seanahrens)

0.1.4 Fix bug with multiple clouds on the same page (kudos to seanahrens)

0.1.3 Added possibility to pass a callback function and to specify a custom HTML title attribute for each word in the cloud

0.1.0 → 0.1.2 I just started this tiny project, only minor improvements and optimization happened

jqcloud's People

Contributors

lucaong avatar seanahrens avatar rbrancher avatar

Watchers

Lucas Húngaro avatar Stefano Diem Benatti avatar Lucas Renan avatar  avatar Rodrigo Pestana avatar James Cloos avatar Ian Rodriguez avatar  avatar  avatar georges boris avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.