Timelines of bubbles

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://unpkg.com/d3"></script>
  <script src="https://unpkg.com/d3-jetpack"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { margin: 0 auto; display: flex;}
    .tick line {
    	stroke: #dbdbdb;
    	stroke-dasharray: 5;
		}
		path.domain {
    	stroke: #dbdbdb;
    	stroke-width: 1px;
		}
		circle.circle {
      fill: #254251;
      stroke: #F9F8F3;
    }
  </style>
</head>

<body>
  <svg id='chart'></svg>
  <script>
		var config = {
      width: 800,
      height: 600,
  		ticksCount: 12,
  		circleRadius: 70,	
    };
    
    var margin = { top: 40, right: 100, bottom: 30, left: 20 },
      width = config.width - margin.left - margin.right,
      height = config.height - margin.top - margin.bottom;

// Clean up before drawing
    // By brutally emptying all HTML from plot container div
    d3.select('#chart').html('');

var svg = d3
      .select('#chart')
      .at({
        width: config.width,
        height: config.height,
      })
      .st({ backgroundColor: '#F8F7F1' });

// g is our main container
    var g = svg.append('g').translate([margin.left, margin.top]);

d3.json('data.json', (err, dataset) => {
  if (err) {
    console.log(err);
  }

// Constrain to dates
    var parseTime = d3.timeParse('%d/%m/%Y');
    // Map over the data to process it, return a fresh copy, rather than mutating the original data
    var processedData = dataset.map(d =>
      Object.assign({}, d, { date: parseTime(d.Date) })
    );

/*
     * Scales
     * note that we use give an area to d3's radius parameter
     */
    var area = d3.scaleSqrt().range([3, config.circleRadius]).domain([0, 200]);
    var x = d3
      .scaleLinear()
      .range([0, width])
      .domain([0, processedData.length]);
    x.domain(d3.extent(processedData, d => d.date));

// X-axis
    g
      .append('g')
      .translate([0, height / 2])
      .call(
        d3
          .axisBottom(x)
          .ticks(config.ticksCount)
          .tickFormat(d3.timeFormat('%d %b'))
          .tickSizeInner(70)
      );

/*
     * The little things:
     * by sorting this way, the largest bubbles are
     * always at the very back. not data is hidden.
     */
    processedData.sort((x, y) => d3.descending(x.Fee, y.Fee));

var circles = g.selectAll('circle').data(processedData);
    circles
      .enter()
      .append('circle')
      .at({
        class: 'circle',
        cx: d => x(d.date),
        cy: height * 0.5,
      })
      .transition()
      .attr('r', d => area(d.Fee))
      .st({ opacity: 0.2 });
  });

</script>
</body>

https://unpkg.com/d3

https://unpkg.com/d3-jetpack