D3 Examples - Interactivity - Internet user change by region

Interactivity - Internet user change by region
The dataset is about the Internet user number of different regions of world from 1990 to 2015. By mouse hovering, the corresponding year and Internet user number will show up interactively.
This visualization was:
xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js"></script>
    <title>Internet user change by region</title>
    <style>
      body {
        margin: 0px;
      }
      .domain {
        display: none;
      }
      .tick line {
        stroke: #C0C0BB;
      }
      .tick text, .legendCells text {
        fill: #8E8883;
        font-size: 10pt;
        font-family: sans-serif;
      }
      .axis-label, .legend-label {
        fill: #635F5D;
        font-size: 20pt;
        font-family: sans-serif;
      }
    </style>
  </head>
  
  <body>
    <svg width="960" height="500"></svg>
    <script>
      const xValue = d => d['Year'];
      const xLabel = 'Year';
      const yValue = d => d['Internet Users by World Region'];
      const yLabel = 'Internet Users (millions)';
      const colorValue = d => d['Entity'];
      const colorLabel = 'Countries';
      const margin = { left: 120, right: 300, top: 20, bottom: 120 };
​
      const svg = d3.select('svg');
      const width = svg.attr('width');
      const height = svg.attr('height');
      const innerWidth = width - margin.left - margin.right;
      const innerHeight = height - margin.top - margin.bottom;
            
      var radius = 5;
      
      const g = svg.append('g')
          .attr('transform', `translate(${margin.left},${margin.top})`);
      const xAxisG = g.append('g')
          .attr('transform', `translate(0, ${innerHeight})`);
      const yAxisG = g.append('g');
      const colorLegendG = g.append('g')
          .attr('transform', `translate(${innerWidth + 60}, 150)`);
​
      xAxisG.append('text')
          .attr('class', 'axis-label')
          .attr('x', innerWidth / 2)
          .attr('y', 60)
          .text(xLabel);
​
      yAxisG.append('text')
          .attr('class', 'axis-label')
          .attr('x', -innerHeight / 2)
          .attr('y', -60)
          .attr('transform', `rotate(-90)`)
          .style('text-anchor', 'middle')
          .text(yLabel);
​
      colorLegendG.append('text')
          .attr('class', 'legend-label')
          .attr('x', -30)
          .attr('y', -40)
          .text(colorLabel);
​
      const xScale = d3.scaleLinear();
      const yScale = d3.scaleLinear();
      const colorScale = d3.scaleOrdinal()
        .range(d3.schemeCategory10);
​
      const xAxis = d3.axisBottom()
        .scale(xScale)
        .tickPadding(15)
        .tickSize(-innerHeight)
        .tickFormat(d3.format("d"));
​
      const yAxis = d3.axisLeft()
        .scale(yScale)
        .ticks(8)
        .tickPadding(15)
        .tickSize(-innerWidth)
        .tickFormat(d3.format("d"));
​
      const colorLegend = d3.legendColor()
        .scale(colorScale)
        .shape('circle')
​
      const row = d => {
        d['Year'] = +d['Year'];
        d['Internet Users by World Region'] = +d['Internet Users by World Region']/1000000;
        return d;
      };
​
      d3.csv('internet-users-by-world-region.csv', row, data => {
        xScale
          .domain(d3.extent(data, xValue))
          .range([0, innerWidth])
          .nice();
​
        yScale
          .domain(d3.extent(data, yValue))
          .range([innerHeight, 0])
          .nice();
​
        g.selectAll('circle').data(data)
          .enter()
          .append('circle')
          .attr('cx', d => xScale(xValue(d)))
          .attr('cy', d => yScale(yValue(d)))
          .attr('fill', d => colorScale(colorValue(d)))
          .attr('fill-opacity', 0.8)
          .attr('r', radius)
          .on("mouseover", handleMouseOver)
          .on("mouseout",handleMouseOut);
            
​
        xAxisG.call(xAxis);
        yAxisG.call(yAxis);
        colorLegendG.call(colorLegend)
          .selectAll('.cell text')
            .attr('dy', '0.1em');
      });
      
      function handleMouseOver(d, i){
        
        d3.select(this).attrs({
              r: radius * 2
            });
​
        // Specify where to put label of text
        g.append("text").attrs({
            id: "id" + 
            d['Year'] + 
                "-" + 
                Math.round(d['Internet Users by World Region']) + 
                "-" + 
                i,
            x: function() { return xScale(d['Year']) - 300; },
            y: function() { return yScale(d['Internet Users by World Region']) - 15; },
            fill: colorScale(colorValue(d))
          })
          .text(function() {
            return ["(" + d['Entity'] + '; Year ' + d['Year'] + '; Users ' + Math.round(d['Internet Users by World Region']) + " millions)"];
          });
      }
      
      function handleMouseOut(d, i) {
        d3.select(this).attrs({
          r: radius
        });
​
        d3.select("#id" + 
                  d['Year'] + 
                  "-" + 
                  Math.round(d['Internet Users by World Region']) + 
                  "-" + 
                  i)
          .remove();
      }
      
    </script>
  </body>
</html>
    