levvsha

d3.csv('https://raw.githubusercontent.com/levvsha/d3-in-all-its-glory-en/master/stats/data.csv')
  .then(data => draw(data));

function draw(data) {
  const margin = {top: 20, right: 20, bottom: 50, left: 50};
  const width = 750 - margin.left - margin.right;
  const height = 420 - margin.top - margin.bottom;

  const x = d3.scaleTime()
    .range([0, width]);

levvsha

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(function (d, i) {

levvsha

const legendContainer = d3.select('.legend');

const legends = legendContainer
  .append('svg')
  .attr('width', 150)
  .attr('height', 353)
  .selectAll('g')
  .data(regionsIds)
  .enter()
  .append('g')

levvsha

const legendsDate = legendsSvg.append('text')
  .attr('visibility', 'hidden')
  .attr('x', 0)
  .attr('y', 10);

const legendsValues = legends
  .append('text')
  .attr('x', 0)
  .attr('y', 10)
  .attr('class', 'legend-value');

levvsha

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

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

    return value ? value + '%' : 'N.A.';
  });

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

levvsha

function zoomed() {
  const transformation = d3.event.transform;

  const rightEdge = Math.abs(transformation.x) / transformation.k + width / transformation.k;
  const bottomEdge = Math.abs(transformation.y) / transformation.k + height / transformation.k;

  if (rightEdge > width) {
    transformation.x = -(width * transformation.k - width);
  }

levvsha

const lineGenerator = d3.line()
  .x(d => rescaledX(d.date))
  .y(d => rescaledY(d.percent));
  
/* ... */

function voronoiMouseover(d) {
  /* ... */
  
  hoverDot

levvsha

const margin = { top: 20, right: 20, bottom: 250, left: 50 };
const previewMargin = { top: 10, right: 10, bottom: 15, left: 30 };
const width = 750 - margin.left - margin.right;
const height = 615 - margin.top - margin.bottom;

const ratio = 4;

const previewWidth = width / ratio;
const previewHeight = height / ratio;

levvsha

const previewX = d3.scaleTime()
  .range([0, previewWidth]);

const previewY = d3.scaleLinear()
  .range([previewHeight, 0]);

/* ... */

previewX.domain(d3.extent(data, d => d.date));
previewY.domain([0, d3.max(data, d => d.percent)]);

levvsha

function dragged(d) {
  const draggedNodeWidth = draggedNode.attr('width');
  const draggedNodeHeight = draggedNode.attr('height');
  const x = clamp(d3.event.x, 0, previewWidth - draggedNodeWidth);
  const y = clamp(d3.event.y, 0, previewHeight - draggedNodeHeight);

  d3.select(this)
    .attr('x', d.x = x)
    .attr('y', d.y = y);