Интерактивная карта на листовке

Question

Я нанес на карту разделение коммуны Франции и раскрасил в соответствии с каждой коммуной номер активности, представленной коммуной. Я хотел бы сделать интерактивную карту, которая позволяет мне выделять контур каждого общего, когда я нахожу мышь над городом, но я заблокирован. Я пытаюсь использовать библиотеки SVG, но я не могу сделать это слишком много. Спасибо за помощь. Вот мой код:

 <script src="https://d3js.org/d3.v5.js"></script>
      <script 
      src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"> 
  </script>
    <script 
   src="https://https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"> 
   </script>
    //création carte
     var map = L.map('carte').setView([43.316180,1.346172], 8);
     L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
         attribution: '&copy; <a 
     href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> 
       contributors'
     }).addTo(map);

      nbequipAR()

     var tabdonnees = new Array()
     var t
     function nbequipAR(){

     var loisir = $.getJSON("geojson/com09.geojson",function(data){
     for(var i=0;i<data.features.length;i++){

  tabdonnees.push([data.features[i].properties.INSEE_COM,data.features[i].prop 
    erties.equip_NB_E101])
      }

    function getColor(INSEE_COM) {
        for(var i=0;i<tabdonnees.length;i++){
           if(tabdonnees[i][0]==INSEE_COM){
              return tabdonnees[i][1] > 6 ? '#002b75':
                     tabdonnees[i][1] > 5  ? '#083480':
                     tabdonnees[i][1] > 4  ? '#445195':
                     tabdonnees[i][1] > 3  ? '#6b71aa':
                     tabdonnees[i][1] > 2   ? '#9092bf':
                     tabdonnees[i][1] > 1   ? '#b5b5d4':
                     tabdonnees[i][1] > 0   ? '#dadae9':
                                '#FFFFFF';
         }
       }

}
console.log(tabdonnees);

t=L.geoJson(data,
                    {style:function(feature){
                    return { color:'#333333', weight:1, fillColor: getColor(feature.properties.INSEE_COM),fillOpacity: .5};
                    },
                    onEachFeature:function(feature, layer ) {
                            layer.bindPopup('<b><u>Test </u></b><br>'
                                +'<b>Commune : </b>'+feature.properties.NOM_COM + '<br>'
                                +'<b>Code postal : </b>'+feature.properties.INSEE_COM + '<br>'
                                +"<b>Nombre jeu de Test : </b>"+feature.properties.equip_NB_E101 + '<br>'
                            );
                    }
            })
            map.addLayer(t)     
})

}




I would like to get the following result as on this link : 
https://www.datavis.fr/index.php?page=map-population