Tag cloud using d3-cloud and D3.js

by Rajesh Danabal

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdn.rawgit.com/jasondavies/d3-cloud/v1.2.1/build/d3.layout.cloud.js"></script>
<div id="cloud"></div>

JavaScript

// First define your cloud data, using `text` and `size` properties:

var skillsToDraw = [{
  "text": "2",
  "size": 8,
  "color": "#1B4D5C"
}, {
  "text": "3",
  "size": 5,
  "color": "#DFCFBF"
}, {
  "text": "4",
  "size": 1,
  "color": "#165889"
}, {
  "text": "5",
  "size": 1,
  "color": "#BDA750"
}, {
  "text": "8",
  "size": 4,
  "color": "#7D5731"
}, {
  "text": "9",
  "size": 1,
  "color": "#544E48"
}, {
  "text": "10",
  "size": 3,
  "color": "#A66999"
}, {
  "text": "12",
  "size": 3,
  "color": "#F4D25A"
}, {
  "text": "13",
  "size": 5,
  "color": "#B687AC"
}, {
  "text": "15",
  "size": 1,
  "color": "#168980"
}, {
  "text": "16",
  "size": 2,
  "color": "#293537"
}, {
  "text": "17",
  "size": 1,
  "color": "#B59525"
}, {
  "text": "18",
  "size": 1,
  "color": "#6898A6"
}, {
  "text": "20",
  "size": 3,
  "color": "#0F5C55"
}, {
  "text": "21",
  "size": 4,
  "color": "#0D262E"
}, {
  "text": "22",
  "size": 1,
  "color": "#FDB15D"
}, {
  "text": "24",
  "size": 1,
  "color": "#AAF20F"
}, {
  "text": "27",
  "size": 1,
  "color": "#8AA3EB"
}, {
  "text": "28",
  "size": 3,
  "color": "#FEE266"
}, {
  "text": "30",
  "size": 4,
  "color": "#B687AC"
}, {
  "text": "40",
  "size": 2,
  "color": "#BB824A"
}, {
  "text": "42",
  "size": 1,
  "color": "#8DB525"
}, {
  "text": "47",
  "size": 1,
  "color": "#6A7CB0"
}, {
  "text": "50",
  "size": 1,
  "color": "#7B4F5A"
}, {
  "text": "51",
  "size": 2,
  "color": "#706860"
}, {
  "text": "54",
  "size": 1,
  "color": "#0F3C5C"
}, {
  "text": "55",
  "size": 1,
  "color": "#1C1E25"
}, {
  "text": "60",
  "size": 1,
  "color": "#477568"
}, {
  "text": "80",
  "size": 1,
  "color": "#9FB06A"
}, {
  "text": "88",
  "size": 1,
  "color": "#52343D"
}, {
  "text": "90",
  "size": 1,
  "color": "#010EB8"
}, {
  "text": "102",
  "size": 1,
  "color": "#4AC5BB"
}, {
  "text": "127",
  "size": 1,
  "color": "#FDAB89"
}, {
  "text": "200",
  "size": 1,
  "color": "#796419"
}, {
  "text": "300",
  "size": 1,
 ...