I'm trying to create a basic US map using the DataMaps
package and d3 library. Here's what I have attempted so far:
<!DOCTYPE html>
<html>
<head>
<title> TEST </title>
<script src="https://d3js.org/d3.v5.js"></script>
<script src="https://unpkg.com/topojson@3"></script>
<script src="node_modules/datamaps/dist/datamaps.world.min.js"></script>
<div id="container" style="position: relative; width: 500px; height: 300px;"></div>
<script>
var map = new Datamap({
element: document.getElementById('container'),
scope: 'usa'
})
var projection = d3.geoAlbers()
</script>
It seems like there may be an issue with the links above (even though I've installed DataMaps
with NPM
). It appears that I'm not using the correct version of d3 or something along those lines.
Currently, I'm encountering this error:
Uncaught TypeError: Cannot read property 'albersUsa' of undefined
I managed to resolve the above error by following the solution provided in this question: albersUsa fix
When I switch from using scope: 'usa'
to scope: 'world'
, I face a similar error, but this time it mentions equirectangular
instead of albersUsa.
Could someone guide me on how to successfully display this map? Thank you