D3-Cloud is an open source word cloud implementation, based on D3.js, use HTML5 Canvas to draw output, because the use of asynchronous manner, so good performance properties.
Project home page : https: //www.jasondavies.com/wordcloud/
Download : https: //github.com/jasondavies/d3-cloud
1. First d3.js need to import files and d3.layout.cloud.js two js <head> HTML file Tags
<! DOCTYPE HTML>
<HTML lang = "EN">
<head>
<Meta charset = "UTF-. 8">
<title> </ title>
<Script the src = "d3.min.js"> </ Script>
< the src = Script "d3.layout.cloud.js"> </ Script>
</ head>
<body>
<div ID = "d3_cloud"> </ div>
<Script>
var words_list = [
{text: "medical Internet" , size: '20 '},
{text: "genetic testing", size: '30'},
{text: "health services", size: '26 '},
{text: "regenerative medicine", size: '30 '},
{text: "biotechnology", size: '26'},
{text: "Medicine ", size: '34 '},
{text:" Immunotherapy ", size: '16'},
{text:" In Vitro Diagnostic ", size: '20 '},
{text:" medical device ", size: '30'},
{text:" Medical Imaging ", size: '24'},
{text: "brain Science", size: '20 '},
];
var = d3.scale.category20 Fill (); // output type 20 --- Color another color scale
var layout = d3.layout.cloud ( )
.size ([360, 200 is]) // size ([X, Y]) word cloud display size
.words (words_list)
.padding (. 5)
.rotate (function () {return ~ ~ (Math.random ( ) * 2) * 0;})
.font ( "Impact")
.fontSize (function (D) d.size {return;})
.on ( "End", Draw);
layout.start ();
function Draw ( words) {
d3.select ( "# d3_cloud"). the append ( "SVG")
.attr ( "width", layout.size () [0])
.attr ( "height", layout.size()[1])
.append ( "G")
.attr("transform", "translate(" + layout.size()[0] / 2 + "," + layout.size()[1] / 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 fill(i); })
.attr("text-anchor", "middle")
.attr("transform", function(d) {
return "translate(" + [d.x-2, d.y] + ")rotate(" + d.rotate + ")"; separate a layout // word cloud layout layout word cloud, d3 layout established as a word cloud
}
.Text (function (D) d.text {return;});
})
a configuration word cloud //d3.layout.cloud () layout Example
// on (type, listener) registered to receive specific listener layout in a particular type of event.
// currently only word and end the two event is supported.
// This word completion event is scheduled for every word of a layout in the layout.
// end of this activity is complete when all the words of the layout is scheduled to change the layout.
// registered listener is scheduled by two parameters:
// the layout of an array of words successfully
// in [{x0, y0}, { x1, y1}] in the form of limits the scope of the representative words a bounds object of the form [ X0 {, yO}, {X1, Y1}] the extents of Representing the Placed Objects.
//
// the layout of the various parameters on the start algorithm initializes an array of words, and words beginning with the largest layout word
// rectangular region from intermediate, every word must be detected when the layout is a good word with the layout position has been previously conflict.
// Once a conflict is detected, the algorithm will re-layout of the word along the helix.
// If a word can not be anywhere along the helix are laid out, the final word will not appear on the word cloud, the problem may be resolved in subsequent versions.
// stop () stop layout algorithm
// timeInterval ([time]) to avoid by the browser when a layout setInterval event loop is locked.
// words ([words array] .map (function (d) (return {text: d; size: one value}))
// allocation words for each word in the array is a font size
</ Script>
</ body>
</ HTML>