Overlaying dots

Trying to avoid overlaying dots with same GPS coordinates

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>Carte Score ESG</title>

    <link rel="stylesheet" href="style.css">


    <!-- Librairie Leaflet; le JS doit être après le CSS -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>

    <!-- Librairies d'icones-->
    <script src="https://kit.fontawesome.com/5c3f18a241.js" crossorigin="anonymous"></script>
    <!--script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="script/require.js"></script-->

    <!-- Chargemment de la libraire D3.js -->

    <script src="https://d3js.org/d3.v5.min.js"></script>

    <!-- Chargemment de la libraire annotation D3.js -->


    <script src="https://rawgit.com/susielu/d3-annotation/master/d3-annotation.min.js"></script>

    <!--script src="https://raw.githubusercontent.com/Mathiaslauber/geovis_qualite_vie_suisse/main/script/L.D3SvgOverlay.min.js"></script-->
    <script>
      ! function(t) {
        "function" == typeof define && define.amd ? define(["leaflet", "d3"], t) : "object" == typeof module && module.exports ? module.exports = t(require("leaflet", "d3")) : t(L, d3)
      }(function(t, o) {
        if (void 0 === o) throw "D3 SVG Overlay for Leaflet requires D3 library loaded first";
        if (void 0 === t) throw "D3 SVG Overlay for Leaflet requires Leaflet library loaded first";
        o.select("head").append("style").attr("type", "text/css").text("g.d3-overlay *{pointer-events:visiblePainted;}"), t.D3SvgOverlay = t.Layer.extend({
          _undef: function(t) {
            return void 0 === t
          },
          _options: function(t) {
            return this._undef(t) ?...

CSS

@import "https://fonts.googleapis.com/css?family=Comfortaa:300,700|Bungee+Shade|Josefin+Sans:400";
@import "https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@700&display=swap";
html,
body,


.Titre {
    grid-area: Titre;
    position: absolute;
    z-index: 1;
    background-color: #333;
    text-align: center;
    overflow: visible;
    background-color: #333;
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    width: 100%; /* Full width */
  

}

#timeline{
    top: 40px;
    width: 750px;
    margin: 0 auto;
  }
  /* basic styling for the time-series elements */
  .time-series {
    width:110px;
    background: #eee;
    margin:0;
    padding:0;
    text-align:center;
    line-height: 40px;
    float: left;
  } 

   /* styles for the active time-series element */
   .active {
    background: #b4b4b4;
    color:white;
  }
  .overlay {
    fill: none;
    pointer-events: all;
  }


/*----------H1----------------*/

h1 {
    position: relative;
    color: var(--color_title);
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 45px;
    font-weight: bolder;
    line-height: 40px;
    margin: 0 0 0;
    padding: 10px 300px;
    text-align: left;
    text-transform: uppercase;
}


/*---------H2-----------------*/

h2 {
    color: var(--color_title);
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 30px;
    font-weight: normal;
    line-height: 30px;
    margin: 5px 0 24px;
    padding: 0 300px;
    text-align: left;
    text-transform: uppercase;
}


/*----------H3----------------*/

h3 {
    color: var(--color_legend);
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    font-weight: normal;
    line-height: 15px;
    margin: -12px 0 24px;
    padding: 0 300px;
    text-align: left;
    z-index: 1;
    text-transform: uppercase;
}

/*-----------------CARTE CHOROPLETHE------------------------*/
#mapdiv {
    position: absolute;
  ...

JavaScript

// ------------------------------------------------
//------------CE QU'IL RESTE À FAIRE :
//  [x] Créer une légende sur les quantiles
//  [ ] Déterminer si l'encodage pour le code couleur se fait dans D3.js ou en amont dans R
//      --> l'encodage se fait sur un car cela donne plus de libertés quant au Scale percentize intégré dans D3.js
//  [x] Encodage avec Scale.Threshold correspondant aux quantiles des données (09.03.2022)
//  [x] Encodage de la légende avec les quantiles
//  [x] How to Improve D3.js Graphs with Annotations
//  [ ] Eviter la superposition des points de données, quand les coordonées GPS sont identiques force_pack.js
//  [ ] Feature de la bordure des cercles trait-tillés force_pack.js
//  [x] Modifier les légendes avec les nouvelles données ESG
//  [ ]
//  [ ]

const colortitle = ['#acadae']
const coloraxis = ['#dce0e1']
const colorlegend = ['#5d6164']
const background_color = ['#25282c']

function map_symbol() {
  var map = L.map('mapdiv', {
    center: [46.6, 7.95],
    zoom: 8,
  })
  map.setMaxBounds([
    [45.989329, 5.98],
    [47.413155, 10.538028],
  ])
  map.setMinZoom(8)

  // Définir les différentes couches de base:
  var osmLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution:
      '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
  })
  var osmNoirBlanc = L.tileLayer(
    'http://{s}.www.toolserver.org/tiles/bw-mapnik/{z}/{x}/{y}.png',
    {
      attribution:
        '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
    },
  )
  var esriImagery = L.tileLayer(
    'http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
    {
      attribution:
        '&copy; <a href="http://www.esri.com">Esri</a>, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
    },
  )
  var myMapbox = L.tileLayer(
   ...