"d3 v6 - zoom and drag functionality" Code Answer

function buildMap(mapData, data) {
  // Grab the container
  // Append an SVG with world-map as it's ID
  // Append a g for all of the countries
  const countriesData = data;
  const mapContainer = d3.select('#map-container');

  const mapRatio = 0.4;
  // The plus turns it into a number
  const width = +mapContainer.node().clientWidth;
  const height = +mapContainer.node().clientHeight;

  // Map and projection
  const projection = d3.geoMercator()
    .scale(width / (2 * Math.PI))
    .translate([width / 2, height / 2])
    // Centered initially ([longitude, latitude])
    // I move it down a bit cause we do not have antartica apart of our map
    .center([0, 45]);
  const pathBuilder = d3.geoPath(projection);

  // The Tooltip
  const Tooltip = d3.select('body')
    .append('div')
    .attr('class', 'map-tooltip')
    .style('visibility', 'hidden')
    .style('background-color', 'white')
    .style('border', 'solid')
    .style('border-width', '2px')
    .style('border-radius', '5px')
    .style('padding', '5px')
    .style('position', 'absolute')
    .on('mouseover', (event) => {
      // A bug where if the user's cursor gets on top of the Tooltip, it flashes infinitely until the user's cursor moves
      // Very distracting and this gets rid of it completely. Besides, the cursor should never be over the Tooltip anyway
      Tooltip.style('visibility', 'hidden');
    });

  const zoom = d3.zoom()
    .on('zoom', (event) => {
      map.attr('transform', event.transform);
    })
    .scaleExtent([1, 40]);

  // The Map
  const map = mapContainer
    .append('svg')
    .attr('padding', 'none')
    .attr('height', height)
    .attr('width', width)
    .attr('border', '1px solid black')
    .attr('margin-left', '16px')
    .attr('preserveAspectRatio', 'xMinYMin meet')
    // This is for when you zoom on the background, it will zoom
    .call(zoom)
    // This is going to be the country group
    .append('g');

  map
    .selectAll('path')
    .data(mapData.features)
    .enter()
    // This will be the country appended
    .append('path')
    // Used for clearing out styling later
    .classed('country', true)
    // Used for selecting specific countries for styling
    .attr('id', (feature) => {
      return 'country' + feature.properties.adm0_a3;
    })
    // Simple stylings
    .attr('opacity', '.7')
    .attr('stroke', 'black')
    .attr('stroke-width', '.5px')
    .attr('d', (feature) => {
      // Using the projection, create the polygon for the country
      return pathBuilder(feature);
    })
    .attr('fill', (feature) => {
      // Change color of the country based upon the count
      const country = countriesData.find(agg => agg.country === feature.properties.admin);
      if (country) {
        return colorScale(country.count);
      } else {
        return colorScale(0);
      }
    })
    // Events are given the event object and the feature object (AKA datum AKA d as it is usually shown in documentation)
    .on('mouseover', (event, feature) => {
      // This adds the styling to show the user they are hovering over the country
      d3.select('#country' + feature.properties.adm0_a3)
        .transition()
        .duration(200)
        .attr('opacity', '1')
        .attr('stroke-width', '1px');
      // Show the Tooltip
      Tooltip.style('visibility', 'visible');
    })
    .on('mouseleave', (event, feature) => {
      // This clears out the remaining styles on all other countries not currently being hovered
      d3.selectAll('.country')
        .transition()
        .duration(200)
        .attr('opacity', '0.7')
        .attr('stroke-width', '.5px');
      // Hide the tooltip
      Tooltip.style('visibility', 'hidden');
    })
    .on('mousemove', (event, feature) => {
      // This adds the tooltip where the user's cursor currently is
      const country = countriesData.find(agg => agg.country === feature.properties.admin);
      if (country) {
        // We have an agg for this country, display name and their count
        Tooltip
          .html(feature.properties.admin + '<br>' + 'Count: ' + country.count)
          .style('left', (event.x + 10) + 'px')
          .style('top', (event.y + 10) + 'px');
      } else {
        // There is no agg for this country, display name and a 0 count
        Tooltip
          .html(feature.properties.admin + '<br>' + 'Count: 0')
          .style('left', (event.x + 10) + 'px')
          .style('top', (event.y + 10) + 'px');
      }
    });
}

function colorScale(count) {
  // Take a count and return one of these:
  if (count > 20) {
    // Red
    return '#ff0000';
    // Blue shift
    // return '#000052';
  } else if (count > 15) {
    // Yellowish-red
    return '#ffaa00';
    // Blue shift
    // return '#0000A3';
  } else if (count > 5) {
    // Yellow
    return '#ffff00';
    // Blue shift
    // return '#0000F5';
  } else if (count >= 1) {
    // Greenish-yellow
    return '#aaff00';
    // Blue shift
    // return '#4747FF';
  } else {
    // Green
    return '#00ff00';
    // Blue shift
    // return '#9999FF';
  }
}

// This is a GeoJSON file that is thousands of lines long
// mapData isn't here because Stack kept crashing when I tried to paste it in here and review/post the question. 
mapData = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {
      "admin": "United States of America",
      "adm0_a3": "USA"
    },
    "geometry": {
      "type": "MultiPolygon",
      "coordinates": [
        [
          [
            [-94.81758, 49.38905],
            [-94.64, 48.84],
            [-94.32914, 48.67074],
            [-93.63087, 48.60926],
            [-92.61, 48.45],
            [-91.64, 48.14],
            [-90.83, 48.27],
            [-89.6, 48.01],
            [-89.27291744663668, 48.01980825458284],
            [-88.37811418328653, 48.30291758889382],
            [-87.43979262330024, 47.94],
            [-86.46199083122815, 47.55333801939204],
            [-85.65236324740323, 47.22021881773051],
            [-84.87607988151485, 46.90008331968238],
            [-84.77923824739983, 46.63710195574913],
            [-84.54374874544567, 46.53868419044923],
            [-84.6049, 46.4396],
            [-84.3367, 46.40877],
            [-84.1421195136733, 46.51222585711574],
            [-84.09185126416148, 46.27541860613826],
            [-83.89076534700567, 46.116926988299156],
            [-83.6161309475905, 46.116926988299156],
            [-83.46955074739463, 45.99468638771259],
            [-83.59285071484308, 45.81689362241255],
            [-82.55092464875818, 45.34751658790545],
            [-82.33776312543108, 44.44],
            [-82.13764238150397, 43.57108755144],
            [-82.43, 42.98],
            [-82.9, 42.43],
            [-83.12, 42.08],
            [-83.14199968131256, 41.975681057293],
            [-83.02981014680694, 41.83279572200601],
            [-82.69008928092018, 41.675105088867326],
            [-82.43927771679162, 41.675105088867326],
            [-81.27774654816707, 42.20902598730686],
            [-80.24744767934784, 42.36619985612267],
            [-78.9393621487437, 42.86361135514812],
            [-78.92, 42.965],
            [-79.00999999999988, 43.27],
            [-79.17167355011188, 43.46633942318431],
            [-78.72027991404238, 43.62508942318496],
            [-77.73788509795762, 43.62905558936339],
            [-76.82003414580558, 43.628784288093755],
            [-76.5, 44.018458893758606],
            [-76.375, 44.09631],
            [-75.31821, 44.81645],
            [-74.867, 45.00048],
            [-73.34783, 45.00738],
            [-71.50506, 45.0082],
            [-71.405, 45.255],
            [-71.08482, 45.30524],
            [-70.66, 45.46],
            [-70.305, 45.915],
            [-69.99997, 46.69307],
            [-69.237216, 47.447781],
            [-68.905, 47.185],
            [-68.23444, 47.35486],
            [-67.79046, 47.06636],
            [-67.79134, 45.70281],
            [-67.13741, 45.13753],
            [-66.96466, 44.8097],
            [-68.03252, 44.3252],
            [-69.06, 43.98],
            [-70.11617, 43.68405],
            [-70.645475633411, 43.09023834896405],
            [-70.81489, 42.8653],
            [-70.825, 42.335],
            [-70.495, 41.805],
            [-70.08, 41.78],
            [-70.185, 42.145],
            [-69.88497, 41.92283],
            [-69.96503, 41.63717],
            [-70.64, 41.475],
            [-71.12039, 41.49445],
            [-71.86, 41.32],
            [-72.295, 41.27],
            [-72.87643, 41.22065],
            [-73.71, 40.93110235165449],
            [-72.24126, 41.11948],
            [-71.945, 40.93],
            [-73.345, 40.63],
            [-73.982, 40.628],
            [-73.952325, 40.75075],
            [-74.25671, 40.47351],
            [-73.96244, 40.42763],
            [-74.17838, 39.70926],
            [-74.90604, 38.93954],
            [-74.98041, 39.1964],
            [-75.20002, 39.24845],
            [-75.52805, 39.4985],
            [-75.32, 38.96],
            [-75.0718347647898, 38.78203223017928],
            [-75.05673, 38.40412],
            [-75.37747, 38.01551],
            [-75.94023, 37.21689],
            [-76.03127, 37.2566],
            [-75.72205, 37.93705],
            [-76.23287, 38.319215],
            [-76.35, 39.15],
            [-76.542725, 38.717615],
            [-76.32933, 38.08326],
            [-76.98999793161354, 38.23999176691339],
            [-76.30162, 37.917945],
            [-76.25874, 36.9664],
            [-75.9718, 36.89726],
            [-75.86804, 36.55125],
            [-75.72749, 35.55074],
            [-76.36318, 34.80854],
            [-77.397635, 34.51201],
            [-78.05496, 33.92547],
            [-78.55435, 33.86133],
            [-79.06067, 33.49395],
            [-79.20357, 33.15839],
            [-80.301325, 32.509355],
            [-80.86498, 32.0333],
            [-81.33629, 31.44049],
            [-81.49042, 30.72999],
            [-81.31371, 30.03552],
            [-80.98, 29.18],
            [-80.535585, 28.47213],
            [-80.53, 28.04],
            [-80.05653928497756, 26.88],
            [-80.088015, 26.205765],
            [-80.13156, 25.816775],
            [-80.38103, 25.20616],
            [-80.68, 25.08],
            [-81.17213, 25.20126],
            [-81.33, 25.64],
            [-81.70999999999981, 25.87],
            [-82.24, 26.73],
            [-82.70515, 27.49504],
            [-82.85526, 27.88624],
            [-82.65, 28.55],
            [-82.93, 29.1],
            [-83.70959, 29.93656],
            [-84.1, 30.09],
            [-85.10882, 29.63615],
            [-85.28784, 29.68612],
            [-85.7731, 30.15261],
            [-86.4, 30.4],
            [-87.53036, 30.27433],
            [-88.41782, 30.3849],
            [-89.18049, 30.31598],
            [-89.59383117841978, 30.15999400483685],
            [-89.413735, 29.89419],
            [-89.43, 29.48864],
            [-89.21767, 29.29108],
            [-89.40823, 29.15961],
            [-89.77928, 29.30714],
            [-90.15463, 29.11743],
            [-90.880225, 29.148535],
            [-91.626785, 29.677],
            [-92.49906, 29.5523],
            [-93.22637, 29.78375],
            [-93.84842, 29.71363],
            [-94.69, 29.48],
            [-95.60026, 28.73863],
            [-96.59404, 28.30748],
            [-97.14, 27.83],
            [-97.37, 27.38],
            [-97.38, 26.69],
            [-97.33, 26.21],
            [-97.14, 25.87],
            [-97.53, 25.84],
            [-98.24, 26.06],
            [-99.02, 26.37],
            [-99.3, 26.84],
            [-99.52, 27.54],
            [-100.11, 28.11],
            [-100.45584, 28.69612],
            [-100.9576, 29.38071],
            [-101.6624, 29.7793],
            [-102.48, 29.76],
            [-103.11, 28.97],
            [-103.94, 29.27],
            [-104.45697, 29.57196],
            [-104.70575, 30.12173],
            [-105.03737, 30.64402],
            [-105.63159, 31.08383],
            [-106.1429, 31.39995],
            [-106.50759, 31.75452],
            [-108.24, 31.7548537181664],
            [-108.24194, 31.34222],
            [-109.035, 31.34194],
            [-111.02361, 31.33472],
            [-113.30498, 32.03914],
            [-114.815, 32.52528],
            [-114.72139, 32.72083],
            [-115.99135, 32.61239],
            [-117.12776, 32.53534],
            [-117.29593769127388, 33.04622461520389],
            [-117.944, 33.621236431201396],
            [-118.41060227589749, 33.740909223124504],
            [-118.51989482279971, 34.02778157757575],
            [-119.081, 34.078],
            [-119.43884064201669, 34.3484771782843],
            [-120.36778, 34.44711],
            [-120.62286, 34.60855],
            [-120.74433, 35.15686],
            [-121.71457, 36.16153],
            [-122.54747, 37.55176],
            [-122.51201, 37.78339],
            [-122.95319, 38.11371],
            [-123.7272, 38.95166],
            [-123.86517, 39.76699],
            [-124.39807, 40.3132],
            [-124.17886, 41.14202],
            [-124.2137, 41.99964],
            [-124.53284, 42.76599],
            [-124.14214, 43.70838],
            [-124.020535, 44.615895],
            [-123.89893, 45.52341],
            [-124.079635, 46.86475],
            [-124.39567, 47.72017],
            [-124.68721008300783, 48.18443298339855],
            [-124.56610107421876, 48.3797149658204],
            [-123.12, 48.04],
            [-122.58736, 47.096],
            [-122.34, 47.36],
            [-122.5, 48.18],
            [-122.84, 49.],
            [-120, 49.],
            [-117.03121, 49.],
            [-116.04818, 49.],
            [-113, 49.],
            [-110.05, 49.],
            [-107.05, 49.],
            [-104.04826, 48.99986],
            [-100.65, 49.],
            [-97.22872, 49.0007],
            [-95.15906950917196, 49.],
            [-95.15609, 49.38425],
            [-94.81758, 49.38905]
          ]
        ],
        [
          [
            [-155.06779029032424, 71.1477763943237],
            [-154.34416520894123, 70.6964085964702],
            [-153.90000627339262, 70.8899885118357],
            [-152.2100060699353, 70.82999217394485],
            [-152.27000240782615, 70.60000621202985],
            [-150.73999243874454, 70.43001658800571],
            [-149.72000301816752, 70.53001048449045],
            [-147.61336157935708, 70.2140349392418],
            [-145.6899898002253, 70.12000967068676],
            [-144.92001095907642, 69.9899917670405],
            [-143.5894461804252, 70.15251414659832],
            [-142.07251034871342, 69.85193817817265],
            [-140.98598752156073, 69.71199839952638],
            [-140.9859883290049, 69.71199839952638],
            [-140.9924987520294, 66.00002859156868],
            [-140.99776974812312, 60.30639679629861],
            [-140.0129978161531, 60.27683787702759],
            [-139.03900042031586, 60.000007229240026],
            [-138.34089, 59.56211],
            [-137.4525, 58.905],
            [-136.47972, 59.46389],
            [-135.47583, 59.78778],
            [-134.945, 59.27056],
            [-134.27111, 58.86111],
            [-133.35554888220722, 58.410285142645165],
            [-132.73042, 57.69289],
            [-131.70780999999988, 56.55212],
            [-130.00778, 55.91583],
            [-129.9799942633583, 55.28499787049722],
            [-130.53611018946725, 54.8027534043494],
            [-131.08581823797215, 55.17890615500204],
            [-131.9672114671423, 55.49777558045906],
            [-132.25001074285947, 56.36999624289746],
            [-133.53918108435641, 57.17888743756214],
            [-134.07806292029605, 58.1230675319669],
            [-135.03821103227907, 58.18771474876393],
            [-136.62806230995466, 58.21220937767046],
            [-137.80000627968604, 58.5],
            [-139.867787041413, 59.53776154238915],
            [-140.82527381713305, 59.727517401765084],
            [-142.57444353556446, 60.08444651960499],
            [-143.9588809948799, 59.9991804063234],
            [-145.92555681682785, 60.45860972761429],
            [-147.11437394914668, 60.88465607364463],
            [-148.22430620012767, 60.672989406977166],
            [-148.01806555885076, 59.97832896589363],
            [-148.5708225168609, 59.914172675203304],
            [-149.72785783587585, 59.70565827090556],
            [-150.60824337461645, 59.36821116803949],
            [-151.71639278868332, 59.15582103131999],
            [-151.85943315326716, 59.744984035879604],
            [-151.4097190012472, 60.72580272077939],
            [-150.34694149473253, 61.03358755150986],
            [-150.62111080625698, 61.284424953854455],
            [-151.89583919981686, 60.72719798445129],
            [-152.5783298410956, 60.06165721296429],
            [-154.01917212625762, 59.35027944603428],
            [-153.28751135965317, 58.8647276882198],
            [-154.2324924387585, 58.14637360293054],
            [-155.30749142151024, 57.72779450136633],
            [-156.3083347239231, 57.42277435976365],
            [-156.55609737854633, 56.979984849670636],
            [-158.11721655986776, 56.46360809999419],
            [-158.43332129619716, 55.99415355083855],
            [-159.60332739971744, 55.56668610292012],
            [-160.2897196116342, 55.643580634170576],
            [-161.2230476552578, 55.364734605523495],
            [-162.23776607974108, 55.02418691672011],
            [-163.06944658104638, 54.68973704692717],
            [-164.7855692210272, 54.40417308208217],
            [-164.94222632552004, 54.57222483989534],
            [-163.84833960676568, 55.03943146424612],
            [-162.87000139061593, 55.348043117893205],
            [-161.80417497459604, 55.89498647727043],
            [-160.56360470278116, 56.00805451112504],
            [-160.0705598622845, 56.41805532492876],
            [-158.68444291891944, 57.01667511659787],
            [-158.46109737855394, 57.21692129172888],
            [-157.7227703521839, 57.57000051536306],
            [-157.55027442119356, 58.32832632103023],
            [-157.041674974577, 58.91888458926172],
            [-158.19473120830548, 58.61580231386984],
            [-158.5172179840231, 58.78778148053732],
            [-159.05860612692874, 58.424186102931685],
            [-159.71166704001735, 58.93139028587634],
            [-159.9812888255002, 58.57254914004164],
            [-160.35527116599653, 59.07112335879364],
            [-161.35500342511506, 58.670837714260756],
            [-161.96889360252635, 58.67166453717738],
            [-162.05498653872468, 59.26692536074745],
            [-161.87417070213536, 59.6336213242906],
            [-162.5180590484921, 59.98972361921391],
            [-163.81834143782015, 59.79805573184339],
            [-164.66221757714646, 60.26748444278265],
            [-165.34638770247483, 60.50749563256241],
            [-165.35083187565186, 61.07389516869751],
            [-166.12137915755596, 61.500019029376226],
            [-165.73445187077053, 62.074996853271806],
            [-164.91917863671785, 62.63307648380793],
            [-164.56250790103934, 63.14637848576305],
            [-163.75333248599702, 63.21944896102377],
            [-163.0672244944579, 63.05945872664802],
            [-162.26055538638172, 63.54193573674117],
            [-161.5344498362486, 63.455816962326764],
            [-160.77250668032113, 63.766108100023274],
            [-160.95833513084256, 64.22279857040277],
            [-161.5180684072122, 64.40278758407531],
            [-160.77777767641476, 64.78860382756642],
            [-161.39192623598763, 64.77723501246234],
            [-162.45305009666885, 64.55944468856822],
            [-162.7577860178941, 64.33860545516882],
            [-163.5463942128843, 64.5591604681905],
            [-164.96082984114517, 64.44694509546885],
            [-166.42528825586447, 64.68667206487072],
            [-166.84500423893905, 65.08889557561453],
            [-168.11056006576717, 65.66999705673675],
            [-166.70527116602196, 66.0883177761394],
            [-164.4747096425755, 66.5766600612975],
            [-163.65251176659564, 66.5766600612975],
            [-163.78860165103617, 66.07720734319668],
            [-161.67777442121016, 66.11611969671242],
            [-162.48971452538, 66.73556509059512],
            [-163.71971696679108, 67.1163945583701],
            [-164.4309913808565, 67.6163382025778],
            [-165.39028683170676, 68.04277212185025],
            [-166.76444068099602, 68.35887685817968],
            [-166.20470740462662, 68.88303091091618],
            [-164.4308105133435, 68.91553538682774],
            [-163.16861365461452, 69.3711148139129],
            [-162.93056616926202, 69.85806183539927],
            [-161.90889726463553, 70.33332998318764],
            [-160.9347965159337, 70.44768992784958],
            [-159.03917578838715, 70.89164215766894],
            [-158.11972286683397, 70.82472117785105],
            [-156.58082455139805, 71.35776357694175],
            [-155.06779029032424, 71.1477763943237]
          ]
        ]
      ]
    }
  }, {
    "type": "Feature",
    "properties": {
      "admin": "United Kingdom",
      "adm0_a3": "GBR"
    },
    "geometry": {
      "type": "MultiPolygon",
      "coordinates": [
        [
          [
            [-5.661948614921897, 54.55460317648385],
            [-6.197884894220977, 53.86756500916334],
            [-6.953730231137996, 54.073702297575636],
            [-7.572167934591079, 54.05995636658599],
            [-7.366030646178785, 54.595840969452695],
            [-7.572167934591079, 55.1316222194549],
            [-6.733847011736145, 55.1728600124238],
            [-5.661948614921897, 54.55460317648385]
          ]
        ],
        [
          [
            [-3.005004848635281, 58.63500010846633],
            [-4.073828497728016, 57.55302480735525],
            [-3.055001796877661, 57.69001902936095],
            [-1.959280564776918, 57.68479970969951],
            [-2.219988165689301, 56.87001740175353],
            [-3.119003058271118, 55.973793036515474],
            [-2.085009324543023, 55.90999848085127],
            [-2.005675679673857, 55.80490285035023],
            [-1.11499101399221, 54.62498647726539],
            [-0.4304849918542, 54.46437612570216],
            [0.184981316742039, 53.32501414653103],
            [0.469976840831777, 52.92999949809197],
            [1.681530795914739, 52.739520168664],
            [1.559987827164377, 52.09999848083601],
            [1.050561557630914, 51.806760565795685],
            [1.449865349950301, 51.28942780212196],
            [0.550333693045502, 50.765738837275876],
            [-0.78751746255864, 50.77498891865622],
            [-2.489997524414377, 50.50001862243124],
            [-2.956273972984036, 50.696879991247016],
            [-3.617448085942328, 50.22835561787272],
            [-4.542507900399244, 50.34183706318566],
            [-5.245023159191135, 49.96],
            [-5.776566941745301, 50.15967763935682],
            [-4.309989793301838, 51.21000112568916],
            [-3.414850633142123, 51.42600861266925],
            [-3.422719467108323, 51.42684816740609],
            [-4.984367234710874, 51.593466091510976],
            [-5.267295701508885, 51.99140045837458],
            [-4.222346564134853, 52.301355699261364],
            [-4.770013393564113, 52.840004991255626],
            [-4.579999152026915, 53.49500377055517],
            [-3.093830673788659, 53.404547400669685],
            [-3.092079637047106, 53.404440822963544],
            [-2.945008510744344, 53.984999701546684],
            [-3.614700825433034, 54.600936773292574],
            [-3.63000545898933, 54.615012925833014],
            [-4.844169073903004, 54.790971177786844],
            [-5.082526617849226, 55.06160065369937],
            [-4.719112107756644, 55.50847260194348],
            [-5.047980922862109, 55.78398550070752],
            [-5.586397670911139, 55.31114614523682],
            [-5.644998745130181, 56.275014960344805],
            [-6.149980841486354, 56.78500967063354],
            [-5.786824713555291, 57.81884837506465],
            [-5.009998745127575, 58.63001333275005],
            [-4.211494513353557, 58.55084503847917],
            [-3.005004848635281, 58.63500010846633]
          ]
        ]
      ]
    }
  }]
}
data = [{
    "country": "United States of America",
    "count": 146
  },
  {
    "country": "Belgium",
    "count": 24
  }
];
buildMap(mapData, data);

<script src="https://d3js.org/d3.v6.js"></script>
<p class="pl-2">
  World Map
</p>
<div id="map-container" class="col-3 m-2 p-0" style="border: 1px solid grey; background-color: #72727230; height: 300px;"></div>