[컴] datamaps.world.js 사용하기

d3로 세계지도 world map / d3 world map / datamaps

datamaps.world.js

• DataMaps

아래 예제에서 사용법을 확인하자.

• datamaps/README.md at master · markmarkoh/datamaps · GitHub
• JS Bin - Collaborative JavaScript Debugging

with d3 v5

datamaps 가 나온지 오래됐다. 6년전에 마지막으로 update 되고는 멈췄다. 그래서 최근의 d3 의 함수이름이 바뀌었는데, 그것에 대응되지 못하고 있다.

• d3 4.x support? · Issue #320 · markmarkoh/datamaps · GitHub

그래서 간단하게 d3-v5 에서 동작하도록 수정했다. 완전히 동작하는 것은 아니지만 개인적으로 error 가 난 부분만 수정했다.

• datamaps-for-d3v5.zip

그래서 아래처럼 사용하면 된다. 주의할 부분은 projection 부분의 string 이 ‘대문자’ 로 시작해야만 한다.

const geo_map = new Datamap({
    scope: 'world',
    element: document.getElementById('container1'),
    projection: 'Mercator', // 'mercator' -> 'Mercator'
    height: 500,
    fills: {
      defaultFill: '#f0af0a',
      lt50: 'rgba(0,244,244,0.9)',
      gt50: 'red'
    },
    
    data: {
      USA: {fillKey: 'lt50' },
      RUS: {fillKey: 'lt50' },
      CAN: {fillKey: 'lt50' },
      BRA: {fillKey: 'gt50' },
      ARG: {fillKey: 'gt50'},
      COL: {fillKey: 'gt50' },
      AUS: {fillKey: 'gt50' },
      ZAF: {fillKey: 'gt50' },
      MAD: {fillKey: 'gt50' }
    })
  },