html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function() {

​

  // load data

  anychart.data.loadJsonFile("https://gist.githubusercontent.com/awanshrestha/8df51b9b1c44b2d1bd3ebeb0757b5fb0/raw/28ee08902d393e02278a7ef7e3461b33e34c6c90/Top-liked-YouTube-Videos.json",

  function (data) {

​

    // create a bubble chart    

    chart = anychart.bubble();

    // set the minimum and maximum bubble sizes

    chart.minBubbleSize("3%");

    chart.maxBubbleSize("12%");

    // name the axes

    chart.xAxis().title("Year");

    chart.yAxis().title("Views");

    // set the intervals between the ticks

    chart.xScale().ticks().interval(2);

    chart.yScale().ticks().interval(2000000000);

    // enable the grid

    chart.yGrid(true).xGrid(true).xMinorGrid(true).yMinorGrid(true);

    // separate the data into different series based on genre

    var videos_shorts = data.filter(function(entry) {

      return entry.genre === "Shorts";

    });

    var videos_music= data.filter(function(entry) {

      return entry.genre === "Music";

    });

    var videos_comedy = data.filter(function(entry) {

      return entry.genre === "Comedy";

    });

    var videos_children = data.filter(function(entry) {

      return entry.genre === "Children";

    });

​

    // customize the appearance of each series

    // series 1

    var series1 = chart.bubble(videos_children).name("Children");

    series1.normal().fill("#A0EA63", 0.9);

    series1.hovered().fill("#A0EA63", 0.7);

    series1.selected().fill("#9EE57C", 0.9);

    series1.normal().stroke("#41a312", 1);

    series1.hovered().stroke("#41a312", 2);

    series1.selected().stroke("#41a312", 4);

    // series 2

    var series2 = chart.bubble(videos_shorts).name("Shorts");

    series2.normal().fill("#FFFF00", 1);

    series2.hovered().fill("#FFFF00", 0.8);

    series2.selected().fill("#FFFF00", 0.3);

    series2.normal().stroke("#FFC000", 1);

    series2.hovered().stroke("#FFC000", 2);

    series2.selected().stroke("#FFC000", 4);

    // series 3

    var series3 = chart.bubble(videos_comedy).name("Comedy");

    series3.normal().fill("#DE3163", 0.5);

    series3.hovered().fill("#DE3163", 0.3);

    series3.selected().fill("#DE3163", 0.3);

    series3.normal().stroke("#DE3163", 1);

    series3.hovered().stroke("#DE3163", 2);

    series3.selected().stroke("#DE3163", 2);

    // series 4

    var series4 = chart.bubble(videos_music).name("Music");

    series4.normal().fill("#87C4F6", 0.85);

    series4.hovered().fill("#87C4F6", 0.9);

    series4.selected().fill("#55A0E5", 0.98);

    series4.normal().stroke("#1069c2", 1);

    series4.hovered().stroke("#1069c2", 2);

    series4.selected().stroke("#1069c2", 4);

    // prevent the bubbles from clipping

    series1.clip(false);

    series2.clip(false);

    series3.clip(false);

    series4.clip(false);

    // add the legend  

    chart.legend(true).padding({bottom: 12 , top: 12});

​

    // configure the tooltip

    var tooltip = chart.tooltip();

    tooltip.titleFormat("Title: {%title}");

    tooltip.format("Year: {%x} \nViews: {%value} \nLikes: {%size} \nGenre: {%genre}");

    // add a chart title

    chart.title("Top 30 Most Liked YouTube Videos");

​

    // set the container

    chart.container("container");

    // initiate the chart drawing

    chart.draw();

​

  })

});