How to create sorted square graph using javascript

I want to visualise simple data set like a bubble graph using squares instead of bubbles. those squares need to represent the quantity by size and resize when quantity changes. it is more like sorted squares according to the size. I have read about D3 js but don't know whether i can achieve this.

sample data set :
label A B C D
qty 3 5 8 10

the output should be like this;

can anyone please help me with this.. any ideas of doing this using jquery/javascript? Thank you in advance.

try google fonts

this is an example of what you are looking for: https://jsfiddle.net/b1Law49u/3/

google.load('visualization', '1', {packages: ['corechart', 'bar']});
google.setOnLoadCallback(drawTopX);

function drawTopX() {
      var data = new google.visualization.DataTable();
      data.addColumn('timeofday', 'Time of Day');
      data.addColumn('number', 'Motivation Level');
      data.addColumn('number', 'Energy Level');

      data.addRows([
        [{v: [8, 0, 0], f: '8 am'}, 1, .25],
        [{v: [9, 0, 0], f: '9 am'}, 2, .5],
        [{v: [10, 0, 0], f:'10 am'}, 3, 1],
        [{v: [11, 0, 0], f: '11 am'}, 4, 2.25],
        [{v: [12, 0, 0], f: '12 pm'}, 5, 2.25],
        [{v: [13, 0, 0], f: '1 pm'}, 6, 3],
        [{v: [14, 0, 0], f: '2 pm'}, 7, 4],
        [{v: [15, 0, 0], f: '3 pm'}, 8, 5.25],
        [{v: [16, 0, 0], f: '4 pm'}, 9, 7.5],
        [{v: [17, 0, 0], f: '5 pm'}, 10, 10],
      ]);

      var options = {
        chart: {
          title: 'Motivation and Energy Level Throughout the Day',
          subtitle: 'Based on a scale of 1 to 10'
        },
        axes: {
          x: {
            0: {side: 'top'}
          }
        },
        hAxis: {
          title: 'Time of Day',
          format: 'h:mm a',
          viewWindow: {
            min: [7, 30, 0],
            max: [17, 30, 0]
          }
        },
        vAxis: {
          title: 'Rating (scale of 1-10)'
        }
      };

      var material = new google.charts.Bar(document.getElementById('chart_div'));
      material.draw(data, options);
    }