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)} )`;
                    });
        }
Creates SVG dot elements for each data entry and draws them
TODO: Plug