code: function drawDataReferencePoints() {
              // Creates Dots on Data points
              var points = svg.select('.chart-group').selectAll('.dots')
                  .data(layers)
                  .enter()
                    .append('g')
                      .attr('class', 'dots')
                      .attr('d', ({values}) => area(values))
                      .attr('clip-path', 'url(#clip)');
  
              // Processes the points
              // TODO: Optimize this code
              points.selectAll('.dot')
                  .data(({values}, index) => values.map((point) => ({index, point})))
                  .enter()
                    .append('circle')
                      .attr('class','dot')
                      .attr('r', () => pointsSize)
                      .attr('fill', () => pointsColor)
                      .attr('stroke-width', '0')
                      .attr('stroke', pointsBorderColor)
                      .attr('transform', function(d) {
                          let {point} = d;
                          let key = xScale(point.date);
  
                          dataPoints[key] = dataPoints[key] || [];
                          dataPoints[key].push(d);
  
                          let {date, y, y0} = point;
  
                          return `translate( ${xScale(date)}, ${yScale(y + y0)} )`;
                      });
          }
docs: Creates SVG dot elements for each data entry and draws them
  TODO: Plug