---
author: ''
category: ''
date: 2012/12/27 22:31:23
description: ''
link: ''
priority: ''
slug: nikola-feature-by-request-tag-cloud
tags: python, nikola
title: 'Nikola Feature-by-request: tag cloud!'
type: text
updated: 2012/12/27 22:31:23
url_type: ''
---
I asked for feature requests for `Nikola <http://nikola.ralsina.me>`_ my static site generator. 
I got some. One was from long-time user Kay Hayen, so I just couldn't say no.

He asked for tag clouds. Look:

.. raw:: html

  <script src="/assets/js/jquery.tagcanvas.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        jQuery.getJSON('/assets/js/tag_cloud_data.json', function(data) {
            var items = [];

            $.each(data, function(key, val) {
                items.push('<li><a href="' + val[1] +'" '+'data-weight="'+val[0]+'"'+'>' + key + '</a></li>');
            });

            $('<div/>', {
                'id': 'tags',
                html: '<ul>' + items.join('') + '</ul>'
            }).appendTo('body');
            if(!$('#myCanvas').tagcanvas({
                textColour: '#ff0000',
                outlineColour: '#ff00ff',
                reverse: true,
                depth: 0.8,
                maxSpeed: 0.05,
                weight: true,
                weightFrom: "data-weight",
                weightSizeMin: 12,
                weightSizeMax: 25
            },'tags')) {
            // something went wrong, hide the canvas container
            $('#myCanvasContainer').hide();
            }});});
    </script>
  </head>
    <div id="myCanvasContainer">
      <canvas width="500" height="500" id="myCanvas">
        <p>Anything in here will be replaced on browsers that support the canvas element</p>
      </canvas>
    </div>

Cute, isn't it? And it's real, actual tag data from this very site. With links!

How it's done:

Nikola generates a JSON file that has the cloud data (tag name, size, link), and
that's processed by JQuery and `tagCanvas <http://www.goat1000.com/tagcanvas.php>`_
and ... well, it works.

You have to add ``jquery.tagcanvas.min.js`` somewhere and embed a whole pile of raw HTML
`(see here for details) </weblog/posts/nikola-feature-by-request-tag-cloud.txt>`_ but hey, it works.

Hope you are happy, Kay, you made me code **javascript**, dude ;-)

It's probably rather "easy" to make it use any of `these <http://www.websanova.com/tutorials/jquery/10-awesome-jquery-tag-cloud-plugins#.UNzlX1Lzu3c>`_ instead of tagCanvas
if anyone is so inclined.