World numbers

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-annotation/2.5.1/d3-annotation.min.js"></script>

.continent {
      width: 100px;
      font-family: Verdana;
      color: white;
      font-weight: bold;
      text-align: right;
      text-transform: uppercase
    }

.container {
      width: 500px;
      margin-left: 8px;
      display: flex;

}

.time {
      margin-left: 108px;
      margin-top: 8px;
      width: 500px;
      color: white;
      font-family: Arial;
      font-size: 0.8em;
      display: flex;
      justify-content: space-between;
    }

.left {
      transform: translateX(-50%);
    }

.right {
      transform: translateX(50%);
    }

.wrapper {
      display: flex;
      align-items: flex-start;
      margin-top: 16px;
    }

svg {
      position: absolute;
    }
    
    .annotation path {
      stroke: white;
    }

.annotation text {
      fill: white;
      font-family: arial;
      font-size: 14px;
      stroke: black;
      stroke-width:0.4px;
      font-weight: bold;
    }
    
    .annotation .annotation-note-title {
      font-family: verdana;
      font-size: 16px;
      stroke: black;
      stroke-width:0.5px;
      font-weight: bold;
    }

</style>
</head>

<body>
  <div style="font-family: verdana; font-size: 2em; text-decoration: uppercase; color: white; font-weight: bold;">
    Antal fall i världen
  </div>
    <div style="font-family: verdana; font-size: 1em;  color: white;font-style:italic">
    Utveckling över tid
  </div>

<div class="wrapper">
    <div class="continent">Afrika</div>
    <div class='container Afrika'></div>
  </div>

<div class="wrapper">
    <div class="continent">Amerika</div>
    <div class='container Amerika'></div>
  </div>

<div class="wrapper">
    <div class="continent">Asien</div>
    <div class='container Asien'></div>
  </div>

<div class="wrapper">
    <div class="continent">Europa</div>
    <div class='container Europa'></div>
  </div>

<div class="wrapper">
    <div class="continent">Oceanien</div>
    <div class='container Oceanien'></div>
  </div>

<div class="time">
    <div class="left">22 januari</div>
    <div class="middle"><div class="line"></div></div>
    <div class="right">idag</div>
  </div>

const columns = 167;

const continents = [
      {name: 'Afrika', amount: 54},
      {name: 'Amerika', amount: 35},
      {name: 'Asien', amount: 44},
      {name: 'Europa', amount: 37},
      {name: 'Oceanien', amount: 14},
    ];

continents.forEach((continent, ci) => {
      const container = d3.select(`.${continent.name}`);
      for( let c = 0; c<columns; c++) {
        const col = container.append('div').classed('col', true);
        for (let r=0; r<continent.amount; r++) {
          const cell = col.append('div')
          .classed('cell', true)
          .attr('id', `ci${ci}c${c}r${r}`)

const preVal = c === 0 
          ? 0 
          : +d3.select(`#ci${ci}c${c - 1}r${r}`).attr('data-val');

let newVal = preVal;
          if (  
            (preVal === 0 && Math.random() < (ci + 1) / 100) ||  
            (preVal > 0 && Math.random() < 0.5)
          ) {
            newVal = newVal + 1;
          }

cell.attr('data-val', newVal) 
          cell.style('background', colorScale(newVal))
        }
      }
    })

const radius = 5;
    
    const bcr =
          d3.select('#ci2c30r5').node().getBoundingClientRect();
    
    console.log(bcr.x)
    console.log(bcr.y)

d3.select('svg')
      .style('top', `${bcr.y - radius/2}px`)
      .style('left', `${bcr.x - radius/2}px`)
    
    const annotations = [{
      note: {
        label: "Det händer något spännande här",
        title: "Kina"
      },
      x: 10,
      y: 10,
      dy: 25,
      dx: 30,
      subject: {
        radius: radius,
        radiusPadding: 4,
      }
    }]
    
    const makeAnnotations = d3.annotation()
    .type(d3.annotationCalloutCircle)
    //accessors & accessorsInverse not needed
    //if using x, y in annotations JSON
    .annotations(annotations)

d3.select("svg")
      .append("g")
      .attr("class", "annotation")
      .call(makeAnnotations)

</script>
</body>

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

https://cdnjs.cloudflare.com/ajax/libs/d3-annotation/2.5.1/d3-annotation.min.js