function highlightDataPoints({values}) {
            let accumulator = 0;

            cleanDataPointHighlights();

            // ensure order stays constant
            let sortedValues = order.reduce((acc, current) => {
                return [...acc, values.find(({name}) => name === current)];
            },[]);

            sortedValues.forEach((d, index) => {
                let marker = verticalMarkerContainer
                    .append('g')
                    .classed('circle-container', true)
                        .append('circle')
                        .classed('data-point-highlighter', true)
                        .attr('cx', highlightCircleSize)
                        .attr('cy', 0)
                        .attr('r', highlightCircleRadius)
                        .style('stroke-width', highlightCircleStroke)
                        .style('stroke', categoryColorMap[d.name])
                        .style('cursor', 'pointer')
                        .on('click', function() {
                            addGlowFilter(this);
                            handleHighlightClick(this, d);
                        })
                        .on('mouseout', function() {
                            removeFilter(this);
                        });

                accumulator = accumulator + sortedValues[index][valueLabel];

                marker.attr('transform', `translate( ${(- highlightCircleSize)}, ${(yScale(accumulator))} )` );
            });
        }
Creates coloured circles marking where the exact data y value is for a given data point
@param  {obj} dataPoint Data point to extract info from
@private