d3article1.5

const nestByRegionId = d3.nest()
  .key(d => d.regionId)
  .sortKeys((v1, v2) => (parseInt(v1, 10) > parseInt(v2, 10) ? 1 : -1))
  .entries(data);

const regions = {};

d3.map(data, d => d.regionId)
  .keys()
  .forEach((d, i) => {
    regions[d] = nestByRegionId[i].values;
  });

const regionIds = Object.keys(regions);

const lineGenerator = d3.line()
  .x(d => x(d.date))
  .y(d => y(d.percent))
  .curve(d3.curveCardinal);

svg
  .selectAll('.line')
  .data(regionIds)
  .enter()
  .append('path')
  .attr('class', 'line')
  .attr('id', regionId => `region-${ regionId }`)
  .attr('d', regionId => lineGenerator(regions[regionId]))
  .style('stroke', regionId => colorScale(regionId));