D3 Examples - Timelines of bubbles

xxxxxxxxxx
 
<!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>
​
    