Title: d3.layout.cloud is not a function
Tags: javascript;d3.js;data-visualization
Question: *d3.layout.cloud() throws an error: d3.layout.cloud is not a function.

I have tried the answer of Adam Pearce at TypeError: d3.layout.cloud is not a function, but this does not work for me.

Can anyone tell me what i am doing wrong.

I am using d3 version 3

Files



```d3.json(inputData, (data)=&gt;{
var cloud = d3.layout.cloud().size([800, 300])
  .words(data["subtype"])
  .fontSize((d)=&gt;{ return  d.values.length + "px"; })
  .on("end", draw )
  .start();

    function draw(words){
      // Text charts
      const text = svgCanvas.selectAll("#text_chart")
            .data(words)
            .enter()
              .append("text")
              .attr("id", "text_chart")
              .attr("fill", (d,i)=&gt;{ return color(i) })
              .attr("transform", (d,i)=&gt;{ return "translate( 20 , "+Math.floor(Math.random()*(d.values.length*2))+")" })
              .style("font-size", (d)=&gt;{ return d.values.length + "px"; })
              .style("position","absolute")
              .style("top", (d)=&gt;{return Math.floor(Math.random()*d.values.length) })
              .style("left", (d)=&gt;{return Math.floor(Math.random()*d.values.length) })
              .text((d)=&gt;{ return d.key });
    }
  }```
```<!DOCTYPE&gt;
<html&gt;
<head&gt;
  <meta charset="UTF-8"/&gt;
  <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet"&gt;
  <link rel="stylesheet" href="./css/style.css" media="screen" title="no title"&gt;
  <title&gt;Test</title&gt;
</head&gt;
<body&gt;
  <h2&gt;Stuff my phone tracks</h2&gt;
  <small&gt;Filter</small&gt;
    <label&gt;<input id="bars" type="radio" name="chartToggle" value="Bars"&gt; Bars
    </label&gt;
    <label&gt;<input id="text" type="radio" name="chartToggle" value="Text"&gt; Text
    </label&gt;
    <label&gt;<input id="all" type="radio" name="chartToggle" value="All"&gt; All
    </label&gt;


  <div id="canvas"&gt;</div&gt;


  <script src="http://d3js.org/d3.v3.min.js"&gt;</script&gt;
  <script src="https://gist.github.com/emeeks/3361332/raw/61cf57523fe8cf314333e5f60cc266351fec2017/d3.layout.cloud.js"&gt;</script&gt;  <script src="./main.js"&gt;</script&gt;
  <script src="./main.js"&gt;</script&gt;
</body&gt;
</html&gt;```






Here is another answer: I had make it work but in Node.js environment.

But you need to npm install d3-cloud (in this example, I use version 1.2.5)
See below working example

index.html
```<!DOCTYPE html&gt;
<html&gt;
  <script src=&quot;https://d3js.org/d3.v3.min.js&quot;&gt;</script&gt;
  <script defer src=&quot;src/app.js&quot;&gt;</script&gt;
  <head&gt;
    <title&gt;Word Cloud Example</title&gt;
  </head&gt;
  <style&gt;
  </style&gt;
  <body&gt;
  </body&gt;
</html&gt;
```
/src/app.js
```import cloud from &quot;d3-cloud&quot;;

const frequency_list = [
  { text: &quot;text&quot;, size: 32 },
  { text: &quot;sleight&quot;, size: 12 },
  { text: &quot;hand&quot;, size: 12 },
  { text: &quot;magic&quot;, size: 12 },
  { text: &quot;future&quot;, size: 24 },
  { text: &quot;read&quot;, size: 20 },
  { text: &quot;mind&quot;, size: 12 },
  { text: &quot;training&quot;, size: 24 },
  { text: &quot;amp&quot;, size: 72 },
  { text: &quot;question&quot;, size: 44 },
  { text: &quot;thing&quot;, size: 32 },
];

var color = d3.scale
  .linear()
  .domain([0, 1, 2, 3, 4, 5, 6, 10, 15, 20, 100])
  .range([
    &quot;#ddd&quot;,
    &quot;#ccc&quot;,
    &quot;#bbb&quot;,
    &quot;#aaa&quot;,
    &quot;#999&quot;,
    &quot;#888&quot;,
    &quot;#777&quot;,
    &quot;#666&quot;,
    &quot;#555&quot;,
    &quot;#444&quot;,
    &quot;#333&quot;,
    &quot;#222&quot;
  ]);

cloud()
  .size([800, 300])
  .words(frequency_list)
  .rotate(0)
  .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;, 850)
    .attr(&quot;height&quot;, 350)
    .attr(&quot;class&quot;, &quot;wordcloud&quot;)
    .append(&quot;g&quot;)
    // without the transform, words words would get cutoff to the left and top, they would
    // appear outside of the SVG area
    .attr(&quot;transform&quot;, &quot;translate(320,200)&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;fill&quot;, function(d, i) {
      return color(i);
    })
    .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;
    });
}

```
Example can see here:
codesandbox

Comment for this answer: @SylvanDAsh I see. Thanks for your sugeestion.
Comment for this answer: The external link might go dead in the future. Please include the actual solution in your answer

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2016:00:09/28/16', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><d3.js><data-visualization>', 'Title': 'd3.layout.cloud is not a function', 'ViewCount': 1032, 'id': 39750365, 'user_AboutMe': '', 'user_AccountId': 8633530.0, 'user_DisplayName': 'eltongonc', 'user_Reputation': 87.0, 'user_Views': 19.0, 'user_id': 6464463.0}}