D3Bubbles, Bubble Chart using D3

1. Add libraries and dependencies

<!-- jQuery 1.11.0 -->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- D3.js v3 -->
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<!-- D3Bubbles libraries -->
<script src="lib/d3bubbles.js"></script>
<!-- D3Bubbles stylesheet -->
<link rel="stylesheet" href="lib/d3bubbles.css">
                        

2. Generate Markup

<div id="sample-1">
    <div class="plot"></div>
</div>
                        

3. Initilize your plot and choose your options

var bubbles = new D3Bubbles({
    width: 'auto',
    height: 300,
    wrapper: '#bubbles',
    container: '#bubbles .plot',
    bubbles: {
        bubbles_per_px: 0.02,
        bubbles_max: 'auto',
    },
    radius: {
        min:28,
        max:65
    },
    colors: {
        bubbles:['#c9ad7d'],
        texts:['#FFF'],
    },
    features: {
        dragmove: true,
        overflow: false,
        fit_texts: true,
    },
});
                        

4. Get Data on correct format

var data = [
    {name: "love", radius: 186, label: "186 posts", type: "hashtag"},
    {name: "code", radius: 67, label: "67 posts", type: "keyword"},
    {name: "sudei", radius: 53, label: "53 posts", type: "hashtag"},
];
                        

5. Bring data to life using HTML, SVG and CSS

bubbles.init();
bubbles.visualize();
                        

(bonus). Add Event Listener

var container = document.querySelector('#d3bubbles');
container.addEventListener('complete', function (e) {
    // do stuff ...
}, false);