Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>WordCloud d3-cloud Demo</title>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="https://rawgit.com/jasondavies/d3-cloud/master/build/d3.layout.cloud.js"></script>
  
</head>
<body>
  <div id="wordcloud"></div>
</body>
</html>
 
$(document).ready(function() {
  var width = 850;
  var height = 300;
    
  var color = d3.scale.category20();
  //var color = d3.scale.linear().domain([0,1,2,3,4,5,6,10,15,20,100])
  //.range(["#F00", "#E00", "#D00", "#C00", "#B00", "#A00", "#900", "#800", "#700", "#600", "#500", "#400"]);
  
  var words = [
    {"text":"study","size":40},
    {"text":"motion","size":15},
    {"text":"forces","size":10},
    {"text":"electricity","size":15},
    {"text":"movement","size":10},
    {"text":"relation","size":10},
    {"text":"things","size":10},
    {"text":"force","size":5},
    {"text":"ad","size":5},
    {"text":"energy","size":85},
    {"text":"living","size":10},
    {"text":"nonliving","size":10},
    {"text":"laws","size":15},
    {"text":"speed","size":45},
    {"text":"velocity","size":30},
    {"text":"define","size":10},
    {"text":"constraints","size":10},
    {"text":"universe","size":10},
    {"text":"physics","size":100},
    {"text":"describing","size":10},
    {"text":"matter","size":90},
    {"text":"physics-the","size":10},
    {"text":"world","size":10},
    {"text":"works","size":10},
    {"text":"science","size":70},
    {"text":"interactions","size":30},
    {"text":"studies","size":5},
    {"text":"properties","size":45},
    {"text":"nature","size":40},
    {"text":"defintions","size":10},
    {"text":"two","size":15},
    {"text":"grouped","size":15},
    {"text":"traditional","size":15},
    {"text":"fields","size":15},
    {"text":"acoustics","size":15},
    {"text":"optics","size":15},
    {"text":"mechanics","size":20},
    {"text":"thermodynamics","size":15},
    {"text":"electromagnetism","size":15},
    {"text":"modern","size":15},
    {"text":"extensions","size":15},
    {"text":"thefreedictionary","size":15},
    {"text":"interaction","size":15},
    {"text":"org","size":25},
    {"text":"department","size":10},
    {"text":"gravitation","size":10},
    {"text":"heat","size":10},
    {"text":"light","size":10},
    {"text":"magnetism","size":10},
    {"text":"modify","size":10},
    {"text":"general","size":10},
    {"text":"bodies","size":15},
    {"text":"philosophy","size":15},
    {"text":"brainyquote","size":15},
    {"text":"words","size":15},
    {"text":"ph","size":15},
    {"text":"html","size":15},
    {"text":"lrl","size":15},
    {"text":"zgzmeylfwuy","size":15},
    {"text":"subject","size":15},
    {"text":"distinguished","size":15},
  ];
  
  var vis = document.getElementById("wordcloud");
  var layout = d3.layout.cloud().size([width, height])
    .words(words)
    .padding(2)
    .rotate(function() { return (~~(Math.random() * 6) - 3) * 20; })
    .font("Impact")
    .fontSize(function(d) { return d.size; })
    .spiral("archimedean")
    .on("end", draw);
  
  layout.start();
  
  function draw(words) {
    d3.select("#wordcloud").append("svg")
      .style("width", "100%")
      .style("height", height+"px")
      .attr("viewBox", "0 0 " + width + " " + height)
      .attr("preserveAspectRatio", "xMidYMin meet")
      .append("g")
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
      .selectAll("text")
      .data(words).enter().append("text")
      .style("font-size", function(d) { return d.size + "px"; })
      .style("font-family", "Impact")
      .style("fill", function(d, i) { return color(i); })
      .attr("text-anchor", "middle")
      .attr("transform", function(d) {
        return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
      })
      .text(function(d) { return d.text; })
    ;
  }  
  
});
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers