How to use d3 word cloud in Drupal? I am using D3 word Cloud locally on my computer. It works fine. It gets the data from the database and displays it as word cloud on webpage. I want to place the output from it in Drupal website. How do I place it as a block?
EDIT: I have 2 JavaScript file, a JSON file and a HTML file. All these files I want to include. I just realised that the HTML file has this code,
&lt;!DOCTYPE html&gt;
&lt;meta charset=&quot;utf-8&quot;&gt;
&lt;body&gt;
&lt;script src=&quot;../lib/d3/d3.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../d3.layout.cloud.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
  var fill = d3.scale.category20();

  d3.layout.cloud().size([800, 300])
      .words([&quot;This&quot;, &quot;is&quot;, &quot;some&quot;, &quot;random&quot;, &quot;text&quot;].map(function(d) {
        return {text: d, size: 10 + Math.random() * 90};
      }))
      .padding(5)
      .rotate(function() { return ~~(Math.random() * 2) * 90; })
      .font(&quot;Impact&quot;)
      .fontSize(function(d) { return d.size; })
      .on(&quot;end&quot;, draw)
      .start()
      ;

  function draw(words) {
    d3.select(&quot;body&quot;).append(&quot;svg&quot;)
        .attr(&quot;width&quot;, 800)
        .attr(&quot;height&quot;, 300)
      .append(&quot;g&quot;)
        .attr(&quot;transform&quot;, &quot;translate(150,150)&quot;)
      .selectAll(&quot;text&quot;)
        .data(words)
      .enter().append(&quot;text&quot;)
        .style(&quot;font-size&quot;, function(d) { return d.size + &quot;px&quot;; })
        .style(&quot;font-family&quot;, &quot;Impact&quot;)
        .style(&quot;fill&quot;, function(d, i) { return fill(i); })
        .attr(&quot;text-anchor&quot;, &quot;middle&quot;)
        .attr(&quot;transform&quot;, function(d) {
          return &quot;translate(&quot; + [d.x, d.y] + &quot;)rotate(&quot; + d.rotate + &quot;)&quot;;
        })
        .text(function(d) { return d.text; })
        .on(&quot;click&quot;, function(d) {
          var string_url = &quot;http://etraining-dev/search/node/&quot; + d.text;
          window.location = string_url;

  });;
  }
&lt;/script&gt;

which is just script. I am not sure how to include these files and make it work. Can anyone help?
Thanks.
Background
D3.js is a JavaScript library for manipulating documents based on data. I will need to add the d3 javascript library to the page, as well as the D3 word Cloud script. I then need some way of inserting the HTML5 canvas element in my content so that it can be manipulated by d3.
Option 1 - simple

Generate a block using a custom module

Making a simple block module with drupal is really easy. The examples project includes a block_example, this is a good starting point. The following is roughly what your module (d3wordcloud.module) should look like:


  
  d3wordcloud
  
  
  d3wordcloud.info
  d3wordcloud.module
  
  


d3wordcloud.info:

name = "D3 Word Cloud"
description = "Provides a block with awesome word cloud generated by D3."
package = custom
core = 7.x
dependencies[] = block


d3wordcloud.module:

/**
 * Implements hook_block_info().
 *
 * This hook declares what blocks are provided by the module.
 */
function d3wordcloud_block_info() {
  $blocks['word_cloud'] = array(
    // info: The name of the block.
    'info' =&gt; t('Display a pretty word cloud generated by D3'),
    'status' =&gt; TRUE,
  );
  return $blocks;
}

/**
 * Implements hook_block_view().
 *
 * This hook generates the contents of the blocks
 */
function d3wordcloud_block_view($delta = '') {
  //The $delta parameter tells us which block is being requested.
  switch ($delta) {
    case 'word_cloud':
      $block['subject'] = t("wordcloud");
      $block['content'] = '&lt;div id="d3-wordcloud"&gt;&lt;/div&gt;';
      break;
  }
  return $block;
}


Within the code that generates the block you can use drupal_add_js to include both the D3 js and the word cloud js. If you then copy the script you have in your html into a .js file as well you can put a drupal_add_js in for that as well. Wrap everything but the draw function as follows

jQuery(document).ready(function($) {
  // code that initialises drawing
});

function draw() {...


More drupal javascript
 info here

The actual block content then just has to return a placeholder for your wordcloud, eg &lt;div id="d3-wordcloud"&gt;&lt;/div&gt;. Your script looks like it draws straight into the body tag, so replace d3.select("body") with d3.select("#d3-wordcloud") so that the cloud ends up in your block.

Option 2 - bit more drupally and extensible?


Install the D3 module, which supplies d3 via the libraries api
Create custom module (using parts of the d3_example module as a template):


expose the D3 word cloud project as a library
make use of the word cloud in your block



Option 3 - re-usable module

As option 2 but also create a fork or patch for the tagcloud module which uses your D3 word cloud library in place of its own display. This solution will give you a block for each taxonomy vocabulary tailored to the terms associated with the viewed node.