How to create a bubble carousel?

Question

On this google open source project page, you'll see a carousel bubble. In the center there is one big bubble and many small bubbles moving around the big one. There are left and right arrows that you can click on and it will animate in one small bubble into a large one. If you just leave him alone, he will enliven the small bubble in the big one at a time.

Is there a technical name for this type of carousel?

Any framework needed for this? How to create such a file?

Any tutorial or step-by-step instructions for creating something like this?

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

Answer 1

D3 (Data-Driven Documents D3.js). D3 - JavaScript -.

D3, Bubble Chart.

,

$(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.imtqy.com/js/bower_components/d3/d3.min.js" type="application/javascript"></script>
  <script src="https://phuonghuynh.imtqy.com/js/bower_components/d3-transform/src/d3-transform.js" type="application/javascript"></script>
  <script src="https://phuonghuynh.imtqy.com/js/bower_components/cafej/src/extarray.js" type="application/javascript"></script>
  <script src="https://phuonghuynh.imtqy.com/js/bower_components/cafej/src/misc.js" type="application/javascript"></script>
  <script src="https://phuonghuynh.imtqy.com/js/bower_components/cafej/src/micro-observer.js" type="application/javascript"></script>
  <script src="https://phuonghuynh.imtqy.com/js/bower_components/microplugin/src/microplugin.js" type="application/javascript"></script>
  <script src="https://phuonghuynh.imtqy.com/js/bower_components/bubble-chart/src/bubble-chart.js" type="application/javascript"></script>
  <script src="https://phuonghuynh.imtqy.com/js/bower_components/bubble-chart/src/plugins/central-click/central-click.js" type="application/javascript"></script>
  <script src="https://phuonghuynh.imtqy.com/js/bower_components/bubble-chart/src/plugins/lines/lines.js" type="application/javascript"></script>
 
<div class="bubbleChart"/>

Hide result