Using datamaps, I am trying to create a map with not 100% opacity

Question

I'm using datamaps ( http://datamaps.github.io/ ) and trying to make the map transparent. I cannot find a built in feature for fillOpacity for the countries, only for the bubbles.

Since this is built on top of D3 I was wondering if there is a hacky workaround to achieve my goal. Eventually I'll probably switch over to D3 for the control.

Answer 1

You can change the default fill color with an RGBA value where the A (alpha) is used for transparency/ opacity. The main Github page for datamaps currently has demo code for that, for example:

 const opacity = 0.2; const map = new Datamap({ element: document.getElementById('container'), fills: { defaultFill: 'rgba(255, 0, 0, ' + opacity + ')' } }); 

 <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/datamaps/0.5.8/datamaps.all.min.js"></script> <div id="container" style="position: relative; width: 500px; height: 300px;"></div>