function highlightDataPoints(dataPoint) {
            cleanDataPointHighlights();

            const nodes = paths.nodes()
            const nodesById = nodes.reduce((acc, node) => {
                acc[node.id] = node

                return acc;
            }, {});

            // Group corresponding path node with its topic, and
            // sorting the topics based on the order of the colors,
            // so that the order always stays constant
            const topicsWithNode = dataPoint.topics
                .map(topic => ({
                    topic,
                    node: nodesById[topic.name]
                }))
                .filter(({topic}) => !!topic)
                .sort((a, b) => topicColorMap[a.topic.name] < topicColorMap[b.topic.name])

            dataPoint.topics = topicsWithNode.map(({topic}) => topic);

            dataPoint.topics.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', () => (
                            shouldShowAllDataPoints ? highlightCircleStrokeAll : highlightCircleStroke
                        ))
                        .style('stroke', topicColorMap[d.name])
                        .style('cursor', 'pointer')
                        .on('click', function () {
                            addGlowFilter(this);
                            handleHighlightClick(this, d);
                        })
                        .on('mouseout', function () {
                            removeFilter(this);
                        });

                const path = topicsWithNode[index].node;
                const x = xScale(castValueToType(dataPoint.topics[index].date, xAxisValueType));
                const y = getPathYFromX(x, path, d.name);

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