manchicken/tag_cloud.html

## tag_cloud.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Word Cloud</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <style type="text/css">
    @import url(http://fonts.googleapis.com/css?family=Felipa);
    body {
      margin: 0px;
      padding: 0px;
      font-family: 'Felipa', cursive;
    }
    #output {
      width:400px;
      height: 400px;
      overflow: auto;
      border: 1px black solid;
    }
  </style>
</head>
<body>
  <h1>Input words here</h1>
  <form action="" name="words_form">
    <textarea name="input" id="input" cols="30" rows="10"></textarea><br/>
    <input type="button" id="submit" name="submit" value="Make it Cloudy!" />
    <div><p id="output"></p></div>
  </form>
  <script type="text/javascript">
    $("#submit").click(function () {
      $("#output").empty();
      var txt = $("#input").val();
      all_words = txt.split(" ");
      var word_counts = new Object();
      var distincts = new Array();
      var max = 0;

      all_words.forEach(function(input) {
        input = input.toLowerCase();
        if (!word_counts[input]) {
          word_counts[input] = 1;
          distincts.push(input);
        } else {
          word_counts[input] += 1;
        }

        if (word_counts[input] > max) { max = word_counts[input]; }
      });

      distincts.sort().forEach(function(one) {
        var score = (((word_counts[one]/max)%5)*100)+100;
        var toAppend = $("<span style='font-size:"+score+"%;'>"+one+" </span> ");
        $("#output").append(toAppend);
      });
    });
  </script>
</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Word Cloud</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<style type="text/css">
	@import url(http://fonts.googleapis.com/css?family=Felipa);
	body {
	margin: 0px;
	padding: 0px;
	font-family: 'Felipa', cursive;
	}
	#output {
	width:400px;
	height: 400px;
	overflow: auto;
	border: 1px black solid;
	}
	</style>
	</head>
	<body>
	<h1>Input words here</h1>
	<form action="" name="words_form">
	<textarea name="input" id="input" cols="30" rows="10"></textarea><br/>
	<input type="button" id="submit" name="submit" value="Make it Cloudy!" />
	<div><p id="output"></p></div>
	</form>
	<script type="text/javascript">
	$("#submit").click(function () {
	$("#output").empty();
	var txt = $("#input").val();
	all_words = txt.split(" ");
	var word_counts = new Object();
	var distincts = new Array();
	var max = 0;

	all_words.forEach(function(input) {
	input = input.toLowerCase();
	if (!word_counts[input]) {
	word_counts[input] = 1;
	distincts.push(input);
	} else {
	word_counts[input] += 1;
	}

	if (word_counts[input] > max) { max = word_counts[input]; }
	});

	distincts.sort().forEach(function(one) {
	var score = (((word_counts[one]/max)%5)*100)+100;
	var toAppend = $("<span style='font-size:"+score+"%;'>"+one+" </span> ");
	$("#output").append(toAppend);
	});
	});
	</script>
	</body>
	</html>