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.

The dataset is from Our World in Data

This visualization was:

(1) forked from Curran Kelleher's block: Stylized Scatter Plot with Color Legend

(2) forked from Q-Zhao's block: Internet user change by region

(3) forked from Will's block: D3 Mouse Events

<!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 };

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>

https://d3js.org/d3.v4.min.js

https://d3js.org/d3-selection-multi.v0.4.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js