Get started with d3-cloud CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with d3-cloud CDN - cdnhub.io</title>
  <style>
    .node text {
      font-size: 10px;
      text-shadow: 0 1px 0 rgba(255,255,255,0.8);
    }
  </style>
  <script src="https://d3js.org/d3.v6.min.js"></script>
  <script src="https://cdn.cdnhub.io/d3-cloud/1.2.7/d3.layout.cloud.min.js"></script>
</head>
<body>
  <script>
    const data = [
      { term: 'apple', size: 12, groups: ['fruit'] },
      { term: 'banana', size: 8, groups: ['fruit'] },
      { term: 'orange', size: 10, groups: ['fruit'] },
      { term: 'grape', size: 6, groups: ['fruit'] },
      { term: 'mango', size: 15, groups: ['fruit'] },
      { term: 'watermelon', size: 18, groups: ['fruit'] },
      { term: 'beef', size: 20, groups: ['meat'] },
      { term: 'chicken', size: 15, groups: ['meat'] },
      { term: 'pork', size: 12, groups: ['meat'] },
      { term: 'fish', size: 10, groups: ['meat'] },
      { term: 'milk', size: 15, groups: ['dairy'] },
      { term: 'cheese', size: 12, groups: ['dairy'] },
      { term: 'butter', size: 8, groups: ['dairy'] },
      { term: 'bread', size: 6, groups: ['grains'] },
      { term: 'rice', size: 10, groups: ['grains'] },
      { term: 'pasta', size: 12, groups: ['grains'] }
    ];

    const width = 960,
          height = 500;

    const svg = d3.select('body')
                  .append('svg')
                  .attr('width', width)
                  .attr('height', height);

    const cloud = d3.layout.cloud()
                    .size([width, height])
                    .words(data)
                    .padding(2)
                    .rotate(function() { return 0; })
                    .fontSize(function(d) { return d.size; })
                    .on("end", draw);

    cloud.start();

    function draw(words) {
      const speech = svg.selectAll('.speech')
                        .data(words)
                        .enter().append('g')
                        .attr('class', 'speech')
                        .attr('transform', function(d) { return 'translate(' + [d.x, d.y] + ')'; });

      speech.append('text')
            .attr('class', 'word')
            .text(function(d) { return d.term; })
            .style('font-size', function(d) { return d.size + 'px'; })
            .style('font-family', 'sans-serif')
            .style('fill', '#000');

      speech.filter(function(d) { return d.groups.length > 0; })
            .append('circle')
            .attr('r', 5)
            .style('fill', '#f00');

      speech.append('text')
            .attr('class', 'group')
            .text(function(d) { return d.groups.join(', '); })
            .style('font-size', '10px')
            .style('fill', '#000')
            .attr('transform', function(d) { return 'translate(' + [d.x, d.y] + ')'; })
            .style('text-anchor', 'middle');
    }
  </script>
</body>
</html>
Get started with d3-cloud CDN

Stable version

How to start using d3-cloud CDN

All versions
