Simple Motion Bubble

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>
<script src="https://rawgit.com/mbaez/bubbles-chart/master/test/js/motion.js"></script>
<div id="test" width="300px"></div>

CSS

#test {
    margin-left: auto;
    margin-right: auto;
    font-size: 14px !important;
}

text,
.d3plus_node {
    font-size: 14px !important;
}

.filters .size {
    font-weight: bold;
}

.legend-container {
    margin-top: -451px !important;
    width: 260px;
    font-size: 14px;
    color: #6C6B6D;
    text-align: justify;
}

.legend-container text {
    font-size: 12px !important;
    fill: $text_color;
}

.legend-container svg {
    width: 100%;
    height: 100%;
    margin-left: 70px;
}

JavaScript

$(function() {
      var options = {
          container: "#test",
          label: "tipo",
          size: "cantidad",
          legend: {
              title: "¿Que representa?",
              description: "El tamaño de las burbujas refleja la cantidad casos por entidad y tipografía. Donde las burbujas de mayor tamaño representan a las cantidades más elevadas y las burbujas más pequeñas a las cantidades inferiores.",
              footer: "Cada burbuja tiene asociada un color que corresponde al tipo de caso."
          },
          //colour: "nombreAcreedor",
          filters: [{
              text: "Intitución",
              value: "institucion"
          }, {
              text: "Tipo de Caso",
              value: "tipo"
          }],
          tooltip: function(d) {
              return [{
                  "value": d.cantidad,
                  "name": "Cantidad de casos"
              }, {
                  "value": d.institucion,
                  "name": "Institucion"
              }]

          },
          type: "motion"
      };
      
      console.log(JSON.stringify(data, null, 4));

      var viz = new BubbleChart(options);
      viz.data(data);
      viz.on("click", function(d) {
          console.log(d);
      });
  });