4

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,

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="../lib/d3/d3.js"></script>
<script src="../d3.layout.cloud.js"></script>
<script>
  var fill = d3.scale.category20();

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

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

  });;
  }
</script>

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.

Improve this question
16
  • What's d3? How do you "have it"? What do you mean by "use it", exactly? – Mołot Dec 20 '13 at 15:02
  • 1
    I imagine youll need to ask the 'D3' people how to embed their service into a web page. Then just add that code to the block. We can't help with the 'D3' software here I'm afraid, this is a site for questions about Drupal. – Clive♦ Dec 20 '13 at 15:11
  • When you will have D3 up and running on your web server, and instruction @Clive mentioned ready at hand, feel welcome to edit this question and ask us how to apply it to Drupal :) I'll be glad to cast reopen vote then. – Mołot Dec 20 '13 at 15:13
  • Hi Molot, I have the code, there are two js files, one JSON file and a html file. – user2798227 Dec 20 '13 at 15:27
  • Can you tell me how do I add them together in Drupal? – user2798227 Dec 20 '13 at 15:34
4

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' => t('Display a pretty word cloud generated by D3'),
    'status' => 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'] = '<div id="d3-wordcloud"></div>';
      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 <div id="d3-wordcloud"></div>. 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.

Improve this answer
5
  • Hi autopoietic, I have tried the Option 1. I found some problem. I have taken a screenshot of what I have done and here is the link to the screenshot. 1) egitraining.esc.rl.ac.uk/images/d3%20html.jpg 2) egitraining.esc.rl.ac.uk/images/d3%20module.jpg Please check the highlighted part and let me know where I am wrong. Thanks. – user2798227 Jan 6 '14 at 11:51
  • Hi autopoietic, I am glad that you are back. Can you tell me how do I add JS files, I have tried drupal_add_js and #attached method but unable to add the files. Secondly I can't put the html file content into JS as I have to call the html file which will then call the remaining two JS files. Can you Please help me with this? – user2798227 Jan 8 '14 at 18:52
  • I may have missed something but I am not sure why you would need to import the html in this case - is that not the part drupal is playing for you? drupal_add_js should work, but if you are having problems, you could try adding it via your theme info file or move the druupal_add_js out of hook_block and into hook_preprocess_page: drupal.org/node/304255 – autopoietic Jan 10 '14 at 9:33
  • Hi,I added the d3.js and d3.layout.cloud.js using the theme.info and it worked. I used your method which you described in first option. Here is the link to what I did to make it work. egitraining.esc.rl.ac.uk/images/4.jpg I tried to copy all this in js and put the js using theme.info but it didn't work. I read somewhere that It needs <meta charset = "utf-8">. Please let me know if you think I can add it using any other way. At the moment, I have this problem, Link: stackoverflow.com/questions/21028492/… – user2798227 Jan 10 '14 at 10:02
  • 1
    I am (belatedly) glad you got this working. – autopoietic Dec 11 '14 at 17:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.