d3-easy

download .ZIP download .TGZ

Generate WordCloud

EasyWordCloud is the easiest way to create beautiful word cloud for all of your projects. You don't need to install anything complicated. Just load the js files and call one function. That's it!!

Preparation

Install d3-easy by bower at root directory of your project or download zip file
```
bower install d3-easy --save
```

In your html file, load js files in lib directory: jquery.js(not included but use Google CDN), d3.js, d3.layout.cloud.js, easywordcloud.js(I made)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="lib/d3.js"></script>
<script src="lib/d3.layout.cloud.js"></script>
<script src = "lib/easywordcloud.js"></script>

In your html or js file, use the function makeWordCloud function

How to use

Load DOM at beginning of js script:

$().ready(function(){ // write your code here })

Prepare your data and make sure the format:

data = [ {"word": String, "value": Number}, {...}, {...} ]

Call the makeWordCloud function(simplest version):

window.makeWordCloud(data, css selector, size of svg)

Call the makeWordCloud function(with more options):

window.makeWordCloud(data, css_selector, svgscale, svg_class, font-family, rotate words or not, color converting function)

Below is the simplest case, but be careful. EasyWordCloud uses the svg class name as an identifier. If you do not give name to your svg, easywordcloud automatically think all "svg" as wordcluod canvas. So, it may updates or destroy the other svgs. I recommend to name it. Also, when you wanna create another wordcloud at same time, they should be named separately. Do not give them same names.

// simple example

$().ready(function(){

    data = [
        {"text": "田中", "value": 3}, 
        {"text": "太郎", "value": 13}, 
        {"text": "西尾", "value": 8},
    ]
    
    var href_func = function(d){ return "#" + d.text }
    window.makeWordCloud(data, href_func, "body", 200)

})

With more options

// more option example

$().ready(function(){

    data = [
        {"text": "田中", "value": 3}, 
        {"text": "太郎", "value": 13}, 
        {"text": "西尾", "value": 8},
    ]

    var my_color = d3.scale.category20();
    var href_func = function(d){ return "#" + d.text }

    window.makeWordCloud(data, href_func, "body", 500, "my_svg", "Impact", true, my_color)

})

Parameters Format

Parameter	Must Or Not	Type of Format	Example
Data	Must	[ {"text": String, "value": Number}, {...}, {...} ]	[ {"text": "田中", "value": 3}, {"text": "太郎", "value": 13}, {"text": "西尾", "value": 8}, ]
Href Function	Must	String	function(d){ return "#" + d.text }
Css Selector	Must	function(each data){ return string that represents url }	"#my_id_dom", ".my_class_dom"
Svg Scale	Must	Number	500
Svg Class Name	Optional	string but not css selector	"my_dom"
Font Family	Optional	String	"Impact"
Rotate Words Or Not	Optional	Boolean	true, false
Color Converting Function	Optional	function(number){ return some color code as string; }	function MyColoring(i){ if(i > 0){ return "#696969"; }else{ return "#f0f8ff"; }

For More Details

To see whole the example, please check out demo.html and demo.js