How to create a bubble carousel?

Question

On this google open source project page, you will see a bubble carousel. There is one big bubble in the center and a lot of small bubbles moving around the big one. There are left and right arrows where you can click on, and it will animate in one of the small bubble into the big one. If you just leave it alone, it animates the small bubble into the big one at a time.

Is there a technical name for this type of carousel?

Any frameworks needed for this? How to create one like this?

Any tutorial or step by step guides for creating something like this?

https://opensource.google.com/projects/explore/featured

Answer 1

You can use D3 (Data-Driven Documents or D3.js). D3 is a JavaScript library for visualizing data using web standards.

visit D3 gallery, which contains many examples of Bubble Chart.

You can check simple demo example which partially fulfill your requirement

$(document).ready(function () {
var bubbleChart = new d3.svg.BubbleChart({
    supportResponsive: true,
    //container: => use @default
    size: 600,
    //viewBoxSize: => use @default
    innerRadius: 600 / 3.5,
    //outerRadius: => use @default
    radiusMin: 50,
    //radiusMax: use @default
    //intersectDelta: use @default
    //intersectInc: use @default
    //circleColor: use @default
    data: {
      items: [
        {text: "Java", count: "236"},
        {text: ".Net", count: "382"},
        {text: "Php", count: "170"},
        {text: "Ruby", count: "123"},
        {text: "D", count: "12"},
        {text: "Python", count: "170"},
        {text: "C/C++", count: "382"},
        {text: "Pascal", count: "10"},
        {text: "Something", count: "170"},
      ],
      eval: function (item) {return item.count;},
      classed: function (item) {return item.text.split(" ").join("");}
    },
    plugins: [
      {
        name: "central-click",
        options: {
          text: "(See more detail)",
          style: {
            "font-size": "12px",
            "font-style": "italic",
            "font-family": "Source Sans Pro, sans-serif",
            //"font-weight": "700",
            "text-anchor": "middle",
            "fill": "white"
          },
          attr: {dy: "65px"},
          centralClick: function() {
            alert("Here is more details!!");
          }
        }
      },
      {
        name: "lines",
        options: {
          format: [
            {// Line #0
              textField: "count",
              classed: {count: true},
              style: {
                "font-size": "28px",
                "font-family": "Source Sans Pro, sans-serif",
                "text-anchor": "middle",
                fill: "white"
              },
              attr: {
                dy: "0px",
                x: function (d) {return d.cx;},
                y: function (d) {return d.cy;}
              }
            },
            {// Line #1
              textField: "text",
              classed: {text: true},
              style: {
                "font-size": "14px",
                "font-family": "Source Sans Pro, sans-serif",
                "text-anchor": "middle",
                fill: "white"
              },
              attr: {
                dy: "20px",
                x: function (d) {return d.cx;},
                y: function (d) {return d.cy;}
              }
            }
          ],
          centralFormat: [
            {// Line #0
              style: {"font-size": "50px"},
              attr: {}
            },
            {// Line #1
              style: {"font-size": "30px"},
              attr: {dy: "40px"}
            }
          ]
        }
      }]
  });
  });

.bubbleChart {
      min-width: 100px;
      max-width: 700px;
      height: 700px;
      margin: 0 auto;
    }
    .bubbleChart svg{
      background: #000000;
    }
    
body{
background: #000000;
}

<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,600,200italic,600italic&subset=latin,vietnamese' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="application/javascript"></script>  
  <script src="https://phuonghuynh.github.io/js/bower_components/d3/d3.min.js" type="application/javascript"></script>
  <script src="https://phuonghuynh.github.io/js/bower_components/d3-transform/src/d3-transform.js" type="application/javascript"></script>
  <script src="https://phuonghuynh.github.io/js/bower_components/cafej/src/extarray.js" type="application/javascript"></script>
  <script src="https://phuonghuynh.github.io/js/bower_components/cafej/src/misc.js" type="application/javascript"></script>
  <script src="https://phuonghuynh.github.io/js/bower_components/cafej/src/micro-observer.js" type="application/javascript"></script>
  <script src="https://phuonghuynh.github.io/js/bower_components/microplugin/src/microplugin.js" type="application/javascript"></script>
  <script src="https://phuonghuynh.github.io/js/bower_components/bubble-chart/src/bubble-chart.js" type="application/javascript"></script>
  <script src="https://phuonghuynh.github.io/js/bower_components/bubble-chart/src/plugins/central-click/central-click.js" type="application/javascript"></script>
  <script src="https://phuonghuynh.github.io/js/bower_components/bubble-chart/src/plugins/lines/lines.js" type="application/javascript"></script>
 
<div class="bubbleChart"/>

and the source code is here