levvsha

const regionsNamesById = {};

nestByRegionId.forEach(item => {
  regionsNamesById[item.key] = item.values[0].regionName;
});

const regions = {};

d3.map(data, d => d.regionId)
  .keys()

levvsha

const legendContainer = d3.select('.legend');
const chunkedRegionsIds = chunkHelper(regionsIds, 3);

const legends = legendContainer.selectAll('div.legend-column')
  .data(chunkedRegionsIds)
  .enter()
  .append('div')
  .attr('class', 'legend-column')
  .selectAll('div.legend-item')
  .data(d => d)

levvsha

function clickLegendHandler(regionId) {
  regions[regionId].enabled = !regions[regionId].enabled;

  redrawChart();
}

levvsha

function redrawChart() {
  const enabledRegionsIds = regionsIds.filter(regionId => regions[regionId].enabled);

  const paths = svg
    .selectAll('.line')
    .data(enabledRegionsIds);

  paths.exit().remove();

  paths

levvsha

const voronoi = d3.voronoi()
  .x(d => x(d.date))
  .y(d => y(d.percent))
  .extent([[0, 0], [width, height]]);

const voronoiGroup = svg.append('g')
  .attr('class', 'voronoi-parent')
  .append('g')
  .attr('class', 'voronoi');

levvsha

const filteredData = data.filter(dataItem => enabledRegionsIds.indexOf(dataItem.regionId) >= 0);

const voronoiPaths = voronoiGroup.selectAll('path')
  .data(voronoi.polygons(filteredData));

voronoiPaths.exit().remove();

voronoiPaths
  .enter()
  .append('path')

levvsha

function voronoiMouseover(d) {
  d3.select(`#region-${ d.data.regionId }`).classed('region-hover', true);
}

function voronoiMouseout(d) {
  d3.select(`#region-${ d.data.regionId }`).classed('region-hover', false);
}

function voronoiClick(d) {
  if (singleLineSelected) {

levvsha

const legendsValues = legends.append('div')
  .attr('class', 'legend-value');

const legendsDate = d3.selectAll('.legend-column')
  .append('div')
  .attr('class', 'legend-date');

levvsha

const nestByDate = d3.nest()
  .key(d => d.date)
  .entries(data);

const percentsByDate = {};

nestByDate.forEach(dateItem => {
  percentsByDate[dateItem.key] = {};

  dateItem.values.forEach(item => {

levvsha

function voronoiMouseover(d) {
  legendsDate.text(timeFormatter(d.data.date));

  legendsValues.text(dataItem => {
    const value = percentsByDate[d.data.date][dataItem];

    return value ? value + '%' : 'Н/Д';
  });

  d3.select(`#region-${ d.data.regionId }`).classed('region-hover', true);