d3: Using DataMaps to create a map of the USA

Question

I'm trying to get a simple US map up using the DataMaps package and d3. I have tried the following:

<!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>

I think I'm screwing this up in the links above (and I've installed DataMaps with NPM ). I do not think I am hitting the correct d3 version or something in that realm.

Right now I just get this error:

Uncaught TypeError: Cannot read property 'albersUsa' of undefined

Which I fixed, as per this question: albersUsa fix

If I change the usa to world , I get the same error, but with equirectangular instead of albersUsa.

How do I get this map to render? Thanks

Answer 1

Andrew Reid is right, it looks like a D3 version issue. I haven't used this library before but was able to get a simple choropleth working with this example (and v3 d3):

<!DOCTYPE html>
<html>
<head>
<title> TEST </title>

<script src="https://d3js.org/d3.v3.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'),
        fills: {
            HIGH: '#afafaf',
            LOW: '#123456',
            MEDIUM: 'blue',
            UNKNOWN: 'rgb(0,0,0)',
            defaultFill: 'green'
        },
        data: {
            IRL: {
                fillKey: 'LOW',
                numberOfThings: 2002
            },
            USA: {
                fillKey: 'MEDIUM',
                numberOfThings: 10381
            }
        }
    });


</script>

However I wasn't able to get your example working with that same change, so there might be a deeper issue with the code you posted.

d3: Using DataMaps to create a map of the USA

Question

1 answers

solution1
1 ACCPTED 2019-01-07 19:11:10

d3: Using DataMaps to create a map of the USA

Question

1 answers

solution1 1 ACCPTED 2019-01-07 19:11:10

solution1
1 ACCPTED 2019-01-07 19:11:10