Original d3 datamaps v3 script src https cdnjs cloudflare com ajax libs d3 3 5 3 d3 min js script script src https cdnjs cloudflare com ajax libs topojson 1 6 9 topojson min js script script src https datamaps github io scripts 0 4 4 datamaps world js script div id container style position relative width 800px height 400px div script var map new Datamap element document getElementById container geographyConfig popupOnHover true highlightOnHover true fills Allowed grey Disallowed red defaultFill grey data UKR fillKey Disallowed AFG fillKey Disallowed AFG fillKey Disallowed GBR fillKey Disallowed Great Britain script Data maps ref https datamaps github io Small workaround patch currently the datamaps only works with d3 v3 however the small piece of code gets the script and patches the js renames functions to their new v7 format Works with v7 Just to show how easy it s to update the datamaps in practicality you can download the datamaps file and made the changes script type text javascript src https d3js org d3 v7 min js script script src cdnjs cloudflare com ajax libs topojson 1 6 9 topojson min js script div id container style position relative width 500px height 300px div script var script document createElement script document body appendChild script Grab the script and patch the changes async var prop await fetch https datamaps github io scripts 0 4 4 datamaps world js var tex await prop text patch the js for d3 v3 to support v7 tex tex replaceAll d3 geo albersUsa d3 geoAlbersUsa tex tex replaceAll d3 geo path d3 geoPath tex tex replaceAll d3 geo graticule d3 geoGraticule tex tex replaceAll d3 geo path d3 geoPath tex tex replaceAll d3 geo greatArc d3 geoGreatArc tex tex replaceAll d3 select this options element select svg length d3 select this options element select svg _groups length tex tex replaceAll mousemove function mousemove function event tex tex replaceAll d3 mouse self options element d3 pointer event tex tex replaceAll self svg 0 0 parentNode self svg _groups 0 0 parentNode d3 geo equirectangular is a d3v3 projection d3 geoEquirectangular is a d3v4 v5 projection tex tex replaceAll d3 geo options projection d3 geoEquirectangular let blobx new Blob tex type text plain Blob let url window URL createObjectURL blobx createObjectURL script src url script type text javascript script onload function var map new Datamap element document getElementById container console log ready script
createElement script document body appendChild script Grab the script and patch the changes async var prop await fetch https datamaps github io scripts 0 4 4 datamaps world js var tex await prop text patch the js for d3 v3 to support v7 tex tex replaceAll d3 geo albersUsa d3 geoAlbersUsa tex tex replaceAll d3 geo path d3 geoPath tex tex replaceAll d3 geo graticule d3 geoGraticule tex tex replaceAll d3 geo path d3 geoPath tex tex replaceAll d3 geo greatArc d3 geoGreatArc tex tex replaceAll d3 select this options element select svg length d3 select this options element select svg _groups length tex tex replaceAll mousemove function mousemove function event tex tex replaceAll d3 mouse self options element d3 pointer event tex tex replaceAll self svg 0 0 parentNode self svg _groups 0 0 parentNode d3 geo equirectangular is a d3v3 projection d3 geoEquirectangular is a d3v4 v5 projection tex tex replaceAll d3 geo options projection d3 geoEquirectangular let blobx new Blob tex type text plain Blob let url window URL createObjectURL blobx createObjectURL script src url script type text javascript script onload function var map new Datamap element document getElementById container console log ready script