<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
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |