TagCloud Chart

A Tagcloud (or Wordcloud) displays a list of words, the importance of each beeing shown with font size or color. This format is useful for quickly perceiving the most prominent terms.


Example Color Themes

Example Fonts



Show Code

Tools

<!-- Include the CanvasXpress library in your HTML file -->
<link rel="stylesheet" href="https://www.canvasxpress.org/dist/canvasXpress.css" type="text/css"/>
<script src="https://www.canvasxpress.org/canvasXpress.min.js"></script>


<!-- Create a canvas element for the chart with the desired dimensions -->
<div>
  <canvas id="canvasId" width="600" height="600"</canvas>
</div>


<!-- Create a script to initialize the chart -->
<script>

  <!-- Create the data for the graph -->
  var data = {
     "x" : {
        "Country" : ["U.S.","U.S.","U.S.","U.S.","U.S.","Japan","Japan","U.S.","Germany","Sweden","Sweden","France","U.S.","U.S.","U.S.","U.S.","U.S.","U.S.","U.S.","U.S.","U.S.","U.S.","Japan","Japan","U.S.","Germany","Japan","U.S.","U.S.","U.S.","U.S.","U.S.","Japan","Italy","Germany","Japan","Germany","Germany"]
     },
     "y" : {
        "data" : [
          [16.9,15.5,19.2,18.5,30,27.5,27.2,30.9,20.3,17,21.6,16.2,20.6,20.8,18.6,18.1,17,17.6,16.5,18.2,26.5,21.9,34.1,35.1,27.4,31.5,29.5,28.4,28.8,26.8,33.5,34.2,31.8,37.3,30.5,22,21.5,31.9],
          [4.36,4.054,3.605,3.94,2.155,2.56,2.3,2.23,2.83,3.14,2.795,3.41,3.38,3.07,3.62,3.41,3.84,3.725,3.955,3.83,2.585,2.91,1.975,1.915,2.67,1.99,2.135,2.67,2.595,2.7,2.556,2.2,2.02,2.13,2.19,2.815,2.6,1.925],
          [2.73,2.26,2.56,2.45,3.7,3.05,3.54,3.37,3.9,3.5,3.77,3.58,2.73,3.08,2.71,2.73,2.41,2.26,2.26,2.45,3.08,3.08,3.73,2.97,3.08,3.78,3.05,2.53,2.69,2.84,2.69,3.37,3.7,3.1,3.7,3.7,3.64,3.78],
          [155,142,125,150,68,95,97,75,103,125,115,133,105,85,110,120,130,129,138,135,88,109,65,80,80,71,68,90,115,115,90,70,65,69,78,97,110,71],
          [350,351,267,360,98,134,119,105,131,163,121,163,231,200,225,258,305,302,351,318,140,171,86,98,121,89,98,151,173,173,151,105,85,91,97,146,121,89],
          [8,8,8,8,4,4,4,4,5,6,4,6,6,6,6,6,8,8,8,8,4,6,4,4,4,4,4,4,6,6,4,4,4,4,4,6,4,4]
        ],
        "smps" : ["Buick Estate Wagon","Ford Country Squire Wagon","Chevy Malibu Wagon","Chrysler LeBaron Wagon","Chevette","Toyota Corona","Datsun 510","Dodge Omni","Audi 5000","Volvo 240 GL","Saab 99 GLE","Peugeot 694 SL","Buick Century Special","Mercury Zephyr","Dodge Aspen","AMC Concord D/L","Chevy Caprice Classic","Ford LTD","Mercury Grand Marquis","Dodge St Regis","Ford Mustang 4","Ford Mustang Ghia","Mazda GLC","Dodge Colt","AMC Spirit","VW Scirocco","Honda Accord LX","Buick Skylark","Chevy Citation","Olds Omega","Pontiac Phoenix","Plymouth Horizon","Datsun 210","Fiat Strada","VW Dasher","Datsun 810","BMW 320i","VW Rabbit"],
        "vars" : ["MPG","Weight","Drive_Ratio","Horsepower","Displacement","Cylinders"]
     }
  }
  
  
  <-- Create the configuration for the graph -->
  var config = {
     "colorBy":"Country",
     "graphType":"TagCloud",
     "legendKeyBackgroundBorderColor":"rgba(255,255,255,0)",
     "legendKeyBackgroundColor":"rgba(255,255,255,0)",
     "showTransition":"false"
  }
  

  <!-- Call the CanvasXpress function to create the graph -->
  var cX = new CanvasXpress("canvasId", data, config);


</script>
library(canvasXpress)
y=read.table("https://www.canvasxpress.org/data/cX-cars-dat.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
x=read.table("https://www.canvasxpress.org/data/cX-cars-smp.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
  data=y,
  smpAnnot=x,
  colorBy="Country",
  graphType="TagCloud",
  legendKeyBackgroundBorderColor="rgba(255,255,255,0)",
  legendKeyBackgroundColor="rgba(255,255,255,0)",
  showTransition=FALSE
)