Icons in Infographiq image highlighting inconsistently

[superjai]

Infographiq is not working consistently in the new IEA Drupal theme. As you can see in this test page, you can only click on the icons in the image some of the time. If you mouse over the icon just so, then the highlighting and clickability works just fine - but generally no.

The first guess of the cause of the problem is that there is a subtle conflict between Drupal 9 and D3.

[superjai]

Problem fixed. See here for working example. The issue was a minor css conflict, which was resolved by reordering how css elements are brought into the body of the drupal post. Here is the order that works:

<!-- load required css and javascript libraries used by infographiq functionality -->
<link crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" rel="stylesheet" />
<link href="/drupal/web/themes/iea2021/css/style.css" rel="stylesheet" />
<script src="https://d3js.org/d3.v5.min.js"></script>
<link crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" rel="stylesheet" />
<!-- define bootstrap layout that will contain the infographic -->
<div class="container-fluid">
<div class="row">
<div class="col-md-9">
<div id="svg1">&nbsp;</div>
</div>

<div class="col-md-3">
<ul id="toc1">
</ul>
</div>
</div>
</div>
<!-- run infographiq function to link the svg with the svg_list --><script src='https://marinebon.org/infographiqJS/libs/infographiq_latest/infographiq.js'></script>
<link href="https://marinebon.org/infographiqJS/libs/infographiq_latest/infographiq.css" rel="stylesheet" /><script>
    link_svg({
      svg: 'https://noaa-iea.github.io/fk-esr-info/assets/svg/FKIEA_Ecosystem.svg', 
      csv: 'https://docs.google.com/spreadsheets/d/e/2PACX-1vSAROGVpYB58Zkr8P0iwJdTMRPNLZtJ07IyUn-dQ62C2HMuCEScyl8x7urCD7QbRXQYSIJwDn_wku9G/pub?gid=0&single=true&output=csv', 
      svg_id: "svg1", 
      toc_id: "toc1",
      modal_url_pfx: 'https://noaa-iea.github.io/fk-esr-info/modals/',
      toc_style: "accordion"});
  </script>