Simple Bubble Tree

Simple example using BubbleChart

HTML

<script src="https://rawgit.com/mbaez/bubbles-chart/master/dist/js/bubbles-chart.full.js"></script>
<link rel="stylesheet" href="https://rawgit.com/mbaez/bubbles-chart/master/dist/css/bubbles-chart.css">
<script src="https://rawgit.com/mbaez/bubbles-chart/master/test/js/flare.js"></script>
<div id="test" width="300px"></div>

CSS

#test {
  margin-left: auto;
  margin-right: auto;
}

ul.bubble-hierarchies li a {
    padding: 10px 8px;
}
ul.bubble-hierarchies li a::before{
    border-width: 20px 0px 19px 15px;
}

#test-viz {
  width: 100%;
  height: 100%;
}

svg {
  width: 100%;
  height: 100%;
}

JavaScript

$(function(){

  var options = {
    container: "#test",
    label: "label",
    type: "tree",
    width: 550,
    height: 550,
    size: "amount",
    levels: ["Lvl 1", "Lvl 2", "Lvl 3", "Lvl 4"]
  };
  var viz = new BubbleChart(options);
  viz.data(data);
})