code: 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(new Date(dataPoint.topics[index].date));
                  const y = getPathYFromX(x, path, d.name);
  
                  marker.attr('transform', `translate( ${(-highlightCircleSize)}, ${y} )` );
              });
          }
docs: 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