Creating a world map Choropleth with D3 v6 in Angular 7. (trimmed down from Angular into plain JavaScript)
Shape files gathered from NaturalEarth and piled in mapshaper to create GeoJSON.
Keeping it simple with just countries but I am getting a rubber band effect. When I try to drag the map (whether it be the background or on a specific country), it will try to move where you are dragging but then pop back to it's original position unless you drag your cursor across the screen or quickly release after an event is triggered.
As well, when you zoom in on a specific country and then zoom/drag on a different country, it pops you back to the original zoom when the map is created.
function buildMap(mapData, data) {
// Grab the container
// Append an SVG with world-map as it's ID
// Append a g for all of the countries
console.log('Building the map');
const countriesData = data;
const mapContainer = d3.select('#map-container');
const mapRatio = 0.4;
// The plus turns it into a number
const width = +mapContainer.node().clientWidth;
const height = +mapContainer.node().clientHeight;
// Map and projection
const projection = d3.geoMercator()
.scale(width / (2 * Math.PI))
.translate([width / 2, height / 2])
// Centered initially ([longitude, latitude])
// I move it down a bit cause we do not have antartica apart of our map
.center([0, 45]);
const pathBuilder = d3.geoPath(projection);
// The Tooltip
const Tooltip = d3.select('body')
.append('div')
.attr('class', 'map-tooltip')
.style('visibility', 'hidden')
.style('background-color', 'white')
.style('border', 'solid')
.style('border-width', '2px')
.style('border-radius', '5px')
.style('padding', '5px')
.style('position', 'absolute')
.on('mouseover', (event) => {
// A bug where if the user's cursor gets on top of the Tooltip, it flashes infinitely until the user's cursor moves
// Very distracting and this gets rid of it pletely. Besides, the cursor should never be over the Tooltip anyway
Tooltip.style('visibility', 'hidden');
});
// The Map
const map = mapContainer
.append('svg')
.attr('padding', 'none')
.attr('height', height)
.attr('width', width)
.attr('border', '1px solid black')
.attr('margin-left', '16px')
.attr('preserveAspectRatio', 'xMinYMin meet')
// This is for when you click on the background, it will drag
.call(d3.drag()
.on('drag', (event) => {
map.attr('transform', 'translate(' + [event.dx, event.dy] + ')');
}))
// This is for when you zoom on the background, it will zoom
.call(d3.zoom()
.on('zoom', (event) => {
map.attr('transform', event.transform);
})
.scaleExtent([1, 40]))
// This is going to be the country group
.append('g')
.selectAll('path')
.data(mapData.features)
.enter()
// This will be the country appended
.append('path')
// Used for clearing out styling later
.classed('country', true)
// Used for selecting specific countries for styling
.attr('id', (feature) => {
return 'country' + feature.properties.adm0_a3;
})
// Simple stylings
.attr('opacity', '.7')
.attr('stroke', 'black')
.attr('stroke-width', '.5px')
.attr('d', (feature) => {
// Using the projection, create the polygon for the country
return pathBuilder(feature);
})
// This is for when you click a country, it will drag
.call(d3.drag()
.on('drag', (event, feature) => {
map.attr('transform', 'translate(' + [event.dx, event.dy] + ')');
}))
// This is for when you zoom in on a country, it will zoom
.call(d3.zoom()
.on('zoom', (event, feature) => {
map.attr('transform', event.transform);
})
.scaleExtent([1, 40]))
.attr('fill', (feature) => {
// Change color of the country based upon the count
const country = countriesData.find(agg => agg.country === feature.properties.admin);
if (country) {
return colorScale(country.count);
} else {
return colorScale(0);
}
})
// Events are given the event object and the feature object (AKA datum AKA d as it is usually shown in documentation)
.on('mouseover', (event, feature) => {
// This adds the styling to show the user they are hovering over the country
d3.select('#country' + feature.properties.adm0_a3)
.transition()
.duration(200)
.attr('opacity', '1')
.attr('stroke-width', '1px');
// Show the Tooltip
Tooltip.style('visibility', 'visible');
})
.on('mouseleave', (event, feature) => {
// This clears out the remaining styles on all other countries not currently being hovered
d3.selectAll('.country')
.transition()
.duration(200)
.attr('opacity', '0.7')
.attr('stroke-width', '.5px');
// Hide the tooltip
Tooltip.style('visibility', 'hidden');
})
.on('mousemove', (event, feature) => {
// This adds the tooltip where the user's cursor currently is
const country = countriesData.find(agg => agg.country === feature.properties.admin);
if (country) {
// We have an agg for this country, display name and their count
Tooltip
.html(feature.properties.admin + '<br>' + 'Count: ' + country.count)
.style('left', (event.x + 10) + 'px')
.style('top', (event.y + 10) + 'px');
} else {
// There is no agg for this country, display name and a 0 count
Tooltip
.html(feature.properties.admin + '<br>' + 'Count: 0')
.style('left', (event.x + 10) + 'px')
.style('top', (event.y + 10) + 'px');
}
});
}
function colorScale(count) {
// Take a count and return one of these:
if (count > 20) {
// Red
return '#ff0000';
// Blue shift
// return '#000052';
} else if (count > 15) {
// Yellowish-red
return '#ffaa00';
// Blue shift
// return '#0000A3';
} else if (count > 5) {
// Yellow
return '#ffff00';
// Blue shift
// return '#0000F5';
} else if (count >= 1) {
// Greenish-yellow
return '#aaff00';
// Blue shift
// return '#4747FF';
} else {
// Green
return '#00ff00';
// Blue shift
// return '#9999FF';
}
}
// This is a GeoJSON file that is thousands of lines long
// mapData isn't here because Stackoverflow kept crashing when I tried to paste it in here and review/post the question.
mapData = {"type":"FeatureCollection","features":[{"type":"Feature","properties":{"admin":"United States of America","adm0_a3":"USA"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-155.54211,19.08348],[-155.68817,18.91619],[-155.93665,19.05939],[-155.90806,19.33888],[-156.07347,19.70294],[-156.02368,19.81422],[-155.85008,19.97729],[-155.91907,20.17395],[-155.86108,20.26721],[-155.78505,20.2487],[-155.40214,20.07975],[-155.22452,19.99302],[-155.06226,19.8591],[-154.80741,19.50871],[-154.83147,19.45328],[-155.22217,19.23972],[-155.54211,19.08348]]],[[[-156.07926,20.64397],[-156.41445,20.57241],[-156.58673,20.783],[-156.70167,20.8643],[-156.71055,20.92676],[-156.61258,21.01249],[-156.25711,20.91745],[-155.99566,20.76404],[-156.07926,20.64397]]],[[[-156.75824,21.17684],[-156.78933,21.06873],[-157.32521,21.09777],[-157.25027,21.21958],[-156.75824,21.17684]]],[[[-157.65283,21.32217],[-157.70703,21.26442],[-157.7786,21.27729],[-158.12667,21.31244],[-158.2538,21.53919],[-158.29265,21.57912],[-158.0252,21.71696],[-157.94161,21.65272],[-157.65283,21.32217]]],[[[-159.34512,21.982],[-159.46372,21.88299],[-159.80051,22.06533],[-159.74877,22.1382],[-159.5962,22.23618],[-159.36569,22.21494],[-159.34512,21.982]]],[[[-94.81758,49.38905],[-94.63999999999987,48.84000000000012],[-94.32914,48.67074000000011],[-93.63087,48.60926],[-92.61,48.45],[-91.64,48.14],[-90.82999999999986,48.27],[-89.6,48.010000000000105],[-89.27291744663668,48.01980825458284],[-88.37811418328653,48.30291758889382],[-87.43979262330024,47.94],[-86.46199083122815,47.55333801939204],[-85.65236324740323,47.22021881773051],[-84.87607988151485,46.90008331968238],[-84.77923824739983,46.63710195574913],[-84.54374874544567,46.53868419044923],[-84.6049,46.4396],[-84.3367,46.40877000000011],[-84.1421195136733,46.51222585711574],[-84.09185126416148,46.27541860613826],[-83.89076534700567,46.116926988299156],[-83.6161309475905,46.116926988299156],[-83.46955074739463,45.99468638771259],[-83.59285071484308,45.81689362241255],[-82.55092464875818,45.34751658790545],[-82.33776312543108,44.44],[-82.13764238150397,43.57108755144],[-82.43,42.9800000000001],[-82.89999999999989,42.43000000000015],[-83.11999999999989,42.08],[-83.14199968131256,41.975681057293],[-83.02981014680694,41.83279572200601],[-82.69008928092018,41.675105088867326],[-82.43927771679162,41.675105088867326],[-81.27774654816707,42.20902598730686],[-80.24744767934784,42.36619985612267],[-78.9393621487437,42.86361135514812],[-78.92,42.965],[-79.00999999999988,43.27],[-79.17167355011188,43.46633942318431],[-78.72027991404238,43.62508942318496],[-77.73788509795762,43.62905558936339],[-76.82003414580558,43.628784288093755],[-76.5,44.018458893758606],[-76.375,44.09631],[-75.31821,44.816450000000174],[-74.867,45.000480000000124],[-73.34783,45.00738],[-71.50505999999987,45.0082000000001],[-71.405,45.25500000000014],[-71.08482,45.30524000000017],[-70.6599999999998,45.46],[-70.305,45.915],[-69.99997,46.69307],[-69.237216,47.447781],[-68.905,47.185],[-68.23444,47.35486],[-67.79046,47.06636],[-67.79134,45.70281000000014],[-67.13741,45.13753],[-66.96466,44.80970000000016],[-68.03252,44.3252],[-69.05999999999989,43.98],[-70.11617,43.684050000000155],[-70.645475633411,43.09023834896405],[-70.81489,42.8653],[-70.825,42.335],[-70.495,41.805],[-70.08,41.78],[-70.185,42.145],[-69.88497,41.92283000000012],[-69.96503,41.63717000000017],[-70.64,41.475],[-71.12039,41.49445000000017],[-71.85999999999984,41.32],[-72.295,41.27],[-72.87643,41.22065],[-73.71,40.93110235165449],[-72.24126,41.11948000000015],[-71.94499999999982,40.93],[-73.345,40.63],[-73.982,40.628],[-73.952325,40.75075],[-74.25671,40.47351],[-73.96244,40.42763],[-74.17838,39.70926],[-74.90604,38.93954],[-74.98041,39.1964],[-75.20002,39.248450000000105],[-75.52805,39.4985],[-75.32,38.96],[-75.0718347647898,38.78203223017928],[-75.05673,38.40412000000012],[-75.37747,38.01551],[-75.94023,37.21689],[-76.03127,37.2566],[-75.72204999999978,37.93705000000011],[-76.23287,38.319215],[-76.35,39.15],[-76.542725,38.71761500000011],[-76.32933,38.08326],[-76.98999793161354,38.23999176691339],[-76.30162,37.917945],[-76.25874,36.96640000000011],[-75.9718,36.89726],[-75.86803999999984,36.55125],[-75.72749,35.55074000000013],[-76.36318,34.80854000000013],[-77.39763499999988,34.51201],[-78.05496,33.92547],[-78.55434999999983,33.86133000000012],[-79.06067,33.49395],[-79.20357,33.15839],[-80.301325,32.509355],[-80.86498,32.0333],[-81.33629,31.44049],[-81.49042,30.72999000000013],[-81.31371,30.035520000000105],[-80.98,29.180000000000117],[-80.53558499999988,28.47213],[-80.5299999999998,28.040000000000106],[-80.05653928497756,26.880000000000138],[-80.088015,26.205765],[-80.13155999999987,25.816775],[-80.38103,25.20616],[-80.67999999999988,25.08],[-81.17213,25.201260000000133],[-81.33,25.64],[-81.70999999999981,25.87],[-82.24,26.730000000000132],[-82.70515,27.49504],[-82.85526,27.88624],[-82.65,28.550000000000153],[-82.92999999999988,29.100000000000136],[-83.70959,29.93656],[-84.1,30.090000000000117],[-85.10882,29.63615],[-85.28784,29.68612000000013],[-85.7731,30.152610000000124],[-86.39999999999988,30.40000000000012],[-87.53036,30.27433],[-88.41782,30.3849],[-89.18048999999984,30.31598],[-89.59383117841978,30.15999400483685],[-89.413735,29.89419],[-89.43,29.48864],[-89.21767,29.29108],[-89.40823,29.15961],[-89.77928,29.307140000000143],[-90.15463,29.11743],[-90.880225,29.148535000000123],[-91.62678499999987,29.67700000000013],[-92.49906,29.5523],[-93.22637,29.78375],[-93.84842,29.71363],[-94.69,29.480000000000132],[-95.60026,28.73863],[-96.59404,28.30748],[-97.13999999999982,27.83],[-97.37,27.38],[-97.37999999999987,26.69],[-97.33,26.21000000000012],[-97.13999999999982,25.87],[-97.52999999999989,25.84],[-98.24,26.060000000000116],[-99.01999999999988,26.37],[-99.3,26.84],[-99.51999999999987,27.54],[-100.11,28.110000000000127],[-100.45584,28.696120000000118],[-100.9576,29.380710000000132],[-101.6624,29.779300000000116],[-102.48,29.76],[-103.11,28.97],[-103.94,29.27],[-104.45696999999984,29.57196],[-104.70575,30.12173],[-105.03737,30.64402],[-105.63159,31.08383000000012],[-106.1429,31.39995],[-106.50758999999982,31.75452],[-108.24,31.7548537181664],[-108.24194,31.34222],[-109.035,31.34194000000016],[-111.02361,31.33472],[-113.30498,32.03914],[-114.815,32.52528],[-114.72138999999986,32.72083],[-115.9913499999999,32.61239000000014],[-117.12775999999978,32.53534],[-117.29593769127388,33.04622461520389],[-117.944,33.621236431201396],[-118.41060227589749,33.740909223124504],[-118.51989482279971,34.02778157757575],[-119.081,34.078],[-119.43884064201669,34.3484771782843],[-120.36778,34.44711],[-120.62286,34.60855],[-120.74433,35.15686000000011],[-121.71456999999988,36.16153],[-122.54747,37.551760000000115],[-122.51201,37.78339000000013],[-122.95319,38.11371000000011],[-123.7272,38.95166000000012],[-123.86517,39.76699000000013],[-124.39807,40.3132],[-124.17886,41.142020000000116],[-124.2137,41.99964000000014],[-124.53284,42.7659900000001],[-124.14214,43.70838],[-124.020535,44.615895],[-123.89893,45.52341],[-124.079635,46.86475],[-124.39567,47.72017000000011],[-124.68721008300783,48.18443298339855],[-124.56610107421876,48.3797149658204],[-123.12,48.04],[-122.58736,47.096],[-122.34,47.36],[-122.5,48.18],[-122.84,49.000000000000114],[-120,49.000000000000114],[-117.03121,49.000000000000114],[-116.04818,49.000000000000114],[-113,49.000000000000114],[-110.04999999999983,49.000000000000114],[-107.05,49.000000000000114],[-104.04826,48.99986],[-100.65,49.000000000000114],[-97.22872000000471,49.00070000000011],[-95.15906950917196,49.000000000000114],[-95.15609,49.38425],[-94.81758,49.38905]]],[[[-153.0063140533369,57.11584219016589],[-154.0050902984581,56.73467682558106],[-154.5164027577701,56.9927489284467],[-154.67099280497115,57.46119578717249],[-153.76277950744148,57.81657461204377],[-153.2287294179211,57.968968410872435],[-152.56479061583514,57.901427313866975],[-152.1411472239063,57.59105866152199],[-153.0063140533369,57.11584219016589]]],[[[-165.57916419173358,59.90998688418755],[-166.19277014876727,59.754440822988975],[-166.848337368822,59.94140615502096],[-167.45527706609008,60.21306915957938],[-166.46779212142462,60.38416982689778],[-165.67442969466367,60.293606879306246],[-165.57916419173358,59.90998688418755]]],[[[-171.7316568675394,63.78251536727592],[-171.1144335602452,63.592191067144995],[-170.4911124339407,63.69497549097352],[-169.68250545965358,63.431115627691156],[-168.6894394603007,63.2975062120006],[-168.7719408844546,63.18859813094545],[-169.52943986720504,62.9769314642779],[-170.29055620021597,63.194437567794466],[-170.67138566799088,63.37582184513897],[-171.55306311753867,63.317789211675084],[-171.7911106028912,63.405845852300494],[-171.7316568675394,63.78251536727592]]],[[[-155.06779029032424,71.1477763943237],[-154.34416520894123,70.6964085964702],[-153.90000627339262,70.8899885118357],[-152.2100060699353,70.82999217394485],[-152.27000240782615,70.60000621202985],[-150.73999243874454,70.43001658800571],[-149.72000301816752,70.53001048449045],[-147.61336157935708,70.2140349392418],[-145.6899898002253,70.12000967068676],[-144.92001095907642,69.9899917670405],[-143.5894461804252,70.15251414659832],[-142.07251034871342,69.85193817817265],[-140.98598752156073,69.71199839952638],[-140.9859883290049,69.71199839952638],[-140.9924987520294,66.00002859156868],[-140.99776974812312,60.30639679629861],[-140.0129978161531,60.27683787702759],[-139.03900042031586,60.000007229240026],[-138.34089,59.56211000000016],[-137.4525,58.905000000000115],[-136.4797200000001,59.46389],[-135.47583,59.78778],[-134.945,59.27056000000013],[-134.27111,58.86111],[-133.35554888220722,58.410285142645165],[-132.73042,57.69289000000011],[-131.70780999999988,56.55212],[-130.00778,55.91583],[-129.9799942633583,55.28499787049722],[-130.53611018946725,54.8027534043494],[-131.08581823797215,55.17890615500204],[-131.9672114671423,55.49777558045906],[-132.25001074285947,56.36999624289746],[-133.53918108435641,57.17888743756214],[-134.07806292029605,58.1230675319669],[-135.03821103227907,58.18771474876393],[-136.62806230995466,58.21220937767046],[-137.80000627968604,58.49999542910379],[-139.867787041413,59.53776154238915],[-140.82527381713305,59.727517401765084],[-142.57444353556446,60.08444651960499],[-143.9588809948799,59.9991804063234],[-145.92555681682785,60.45860972761429],[-147.11437394914668,60.88465607364463],[-148.22430620012767,60.672989406977166],[-148.01806555885076,59.97832896589363],[-148.5708225168609,59.914172675203304],[-149.72785783587585,59.70565827090556],[-150.60824337461645,59.36821116803949],[-151.71639278868332,59.15582103131999],[-151.85943315326716,59.744984035879604],[-151.4097190012472,60.72580272077939],[-150.34694149473253,61.03358755150986],[-150.62111080625698,61.284424953854455],[-151.89583919981686,60.72719798445129],[-152.5783298410956,60.06165721296429],[-154.01917212625762,59.35027944603428],[-153.28751135965317,58.8647276882198],[-154.2324924387585,58.14637360293054],[-155.30749142151024,57.72779450136633],[-156.3083347239231,57.42277435976365],[-156.55609737854633,56.979984849670636],[-158.11721655986776,56.46360809999419],[-158.43332129619716,55.99415355083855],[-159.60332739971744,55.56668610292012],[-160.2897196116342,55.643580634170576],[-161.2230476552578,55.364734605523495],[-162.23776607974108,55.02418691672011],[-163.06944658104638,54.68973704692717],[-164.7855692210272,54.40417308208217],[-164.94222632552004,54.57222483989534],[-163.84833960676568,55.03943146424612],[-162.87000139061593,55.348043117893205],[-161.80417497459604,55.89498647727043],[-160.56360470278116,56.00805451112504],[-160.0705598622845,56.41805532492876],[-158.68444291891944,57.01667511659787],[-158.46109737855394,57.21692129172888],[-157.7227703521839,57.57000051536306],[-157.55027442119356,58.32832632103023],[-157.041674974577,58.91888458926172],[-158.19473120830548,58.61580231386984],[-158.5172179840231,58.78778148053732],[-159.05860612692874,58.424186102931685],[-159.71166704001735,58.93139028587634],[-159.9812888255002,58.57254914004164],[-160.35527116599653,59.07112335879364],[-161.35500342511506,58.670837714260756],[-161.96889360252635,58.67166453717738],[-162.05498653872468,59.26692536074745],[-161.87417070213536,59.6336213242906],[-162.5180590484921,59.98972361921391],[-163.81834143782015,59.79805573184339],[-164.66221757714646,60.26748444278265],[-165.34638770247483,60.50749563256241],[-165.35083187565186,61.07389516869751],[-166.12137915755596,61.500019029376226],[-165.73445187077053,62.074996853271806],[-164.91917863671785,62.63307648380793],[-164.56250790103934,63.14637848576305],[-163.75333248599702,63.21944896102377],[-163.0672244944579,63.05945872664802],[-162.26055538638172,63.54193573674117],[-161.5344498362486,63.455816962326764],[-160.77250668032113,63.766108100023274],[-160.95833513084256,64.22279857040277],[-161.5180684072122,64.40278758407531],[-160.77777767641476,64.78860382756642],[-161.39192623598763,64.77723501246234],[-162.45305009666885,64.55944468856822],[-162.7577860178941,64.33860545516882],[-163.5463942128843,64.5591604681905],[-164.96082984114517,64.44694509546885],[-166.42528825586447,64.68667206487072],[-166.84500423893905,65.08889557561453],[-168.11056006576717,65.66999705673675],[-166.70527116602196,66.0883177761394],[-164.4747096425755,66.5766600612975],[-163.65251176659564,66.5766600612975],[-163.78860165103617,66.07720734319668],[-161.67777442121016,66.11611969671242],[-162.48971452538,66.73556509059512],[-163.71971696679108,67.1163945583701],[-164.4309913808565,67.6163382025778],[-165.39028683170676,68.04277212185025],[-166.76444068099602,68.35887685817968],[-166.20470740462662,68.88303091091618],[-164.4308105133435,68.91553538682774],[-163.16861365461452,69.3711148139129],[-162.93056616926202,69.85806183539927],[-161.90889726463553,70.33332998318764],[-160.9347965159337,70.44768992784958],[-159.03917578838715,70.89164215766894],[-158.11972286683397,70.82472117785105],[-156.58082455139805,71.35776357694175],[-155.06779029032424,71.1477763943237]]]]}},{"type":"Feature","properties":{"admin":"United Kingdom","adm0_a3":"GBR"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-5.661948614921897,54.55460317648385],[-6.197884894220977,53.86756500916334],[-6.953730231137996,54.073702297575636],[-7.572167934591079,54.05995636658599],[-7.366030646178785,54.595840969452695],[-7.572167934591079,55.1316222194549],[-6.733847011736145,55.1728600124238],[-5.661948614921897,54.55460317648385]]],[[[-3.005004848635281,58.63500010846633],[-4.073828497728016,57.55302480735525],[-3.055001796877661,57.69001902936095],[-1.959280564776918,57.68479970969951],[-2.219988165689301,56.87001740175353],[-3.119003058271118,55.973793036515474],[-2.085009324543023,55.90999848085127],[-2.005675679673857,55.80490285035023],[-1.11499101399221,54.62498647726539],[-0.4304849918542,54.46437612570216],[0.184981316742039,53.32501414653103],[0.469976840831777,52.92999949809197],[1.681530795914739,52.739520168664],[1.559987827164377,52.09999848083601],[1.050561557630914,51.806760565795685],[1.449865349950301,51.28942780212196],[0.550333693045502,50.765738837275876],[-0.78751746255864,50.77498891865622],[-2.489997524414377,50.50001862243124],[-2.956273972984036,50.696879991247016],[-3.617448085942328,50.22835561787272],[-4.542507900399244,50.34183706318566],[-5.245023159191135,49.95999990498108],[-5.776566941745301,50.15967763935682],[-4.309989793301838,51.21000112568916],[-3.414850633142123,51.42600861266925],[-3.422719467108323,51.42684816740609],[-4.984367234710874,51.593466091510976],[-5.267295701508885,51.99140045837458],[-4.222346564134853,52.301355699261364],[-4.770013393564113,52.840004991255626],[-4.579999152026915,53.49500377055517],[-3.093830673788659,53.404547400669685],[-3.092079637047106,53.404440822963544],[-2.945008510744344,53.984999701546684],[-3.614700825433034,54.600936773292574],[-3.63000545898933,54.615012925833014],[-4.844169073903004,54.790971177786844],[-5.082526617849226,55.06160065369937],[-4.719112107756644,55.50847260194348],[-5.047980922862109,55.78398550070752],[-5.586397670911139,55.31114614523682],[-5.644998745130181,56.275014960344805],[-6.149980841486354,56.78500967063354],[-5.786824713555291,57.81884837506465],[-5.009998745127575,58.63001333275005],[-4.211494513353557,58.55084503847917],[-3.005004848635281,58.63500010846633]]]]}}]}
data = [{
"country": "United States of America",
"count": 146
},
{
"country": "Belgium",
"count": 24
},
{
"country": "United Kingdom",
"count": 17
},
{
"country": "Ireland",
"count": 16
},
{
"country": "Malaysia",
"count": 15
},
{
"country": "China",
"count": 13
},
{
"country": "India",
"count": 10
},
{
"country": "Australia",
"count": 9
},
{
"country": "Portugal",
"count": 6
},
{
"country": "Singapore",
"count": 6
},
{
"country": "Thailand",
"count": 5
},
{
"country": "Denmark",
"count": 4
},
{
"country": "Israel",
"count": 4
},
{
"country": "Japan",
"count": 4
},
{
"country": "Romania",
"count": 4
},
{
"country": "South Africa",
"count": 4
},
{
"country": "Germany",
"count": 3
},
{
"country": "Pakistan",
"count": 3
},
{
"country": "Turkey",
"count": 3
},
{
"country": "Kuwait",
"count": 2
},
{
"country": "Lebanon",
"count": 2
},
{
"country": "Mexico",
"count": 2
},
{
"country": "Algeria",
"count": 1
},
{
"country": "Brazil",
"count": 1
},
{
"country": "Chile",
"count": 1
},
{
"country": "Costa Rica",
"count": 1
},
{
"country": "Czech Republic",
"count": 1
},
{
"country": "France",
"count": 1
},
{
"country": "Indonesia",
"count": 1
},
{
"country": "Norway",
"count": 1
},
{
"country": "Peru",
"count": 1
},
{
"country": "Poland",
"count": 1
}
];
buildMap(mapData, data);<script src=".v6.js"></script>
<p class="pl-2">
World Map
</p>
<div id="map-container" class="col-3 m-2 p-0" style="border: 1px solid grey; background-color: #72727230; height: 300px;"></div>Creating a world map Choropleth with D3 v6 in Angular 7. (trimmed down from Angular into plain JavaScript)
Shape files gathered from NaturalEarth and piled in mapshaper to create GeoJSON.
Keeping it simple with just countries but I am getting a rubber band effect. When I try to drag the map (whether it be the background or on a specific country), it will try to move where you are dragging but then pop back to it's original position unless you drag your cursor across the screen or quickly release after an event is triggered.
As well, when you zoom in on a specific country and then zoom/drag on a different country, it pops you back to the original zoom when the map is created.
function buildMap(mapData, data) {
// Grab the container
// Append an SVG with world-map as it's ID
// Append a g for all of the countries
console.log('Building the map');
const countriesData = data;
const mapContainer = d3.select('#map-container');
const mapRatio = 0.4;
// The plus turns it into a number
const width = +mapContainer.node().clientWidth;
const height = +mapContainer.node().clientHeight;
// Map and projection
const projection = d3.geoMercator()
.scale(width / (2 * Math.PI))
.translate([width / 2, height / 2])
// Centered initially ([longitude, latitude])
// I move it down a bit cause we do not have antartica apart of our map
.center([0, 45]);
const pathBuilder = d3.geoPath(projection);
// The Tooltip
const Tooltip = d3.select('body')
.append('div')
.attr('class', 'map-tooltip')
.style('visibility', 'hidden')
.style('background-color', 'white')
.style('border', 'solid')
.style('border-width', '2px')
.style('border-radius', '5px')
.style('padding', '5px')
.style('position', 'absolute')
.on('mouseover', (event) => {
// A bug where if the user's cursor gets on top of the Tooltip, it flashes infinitely until the user's cursor moves
// Very distracting and this gets rid of it pletely. Besides, the cursor should never be over the Tooltip anyway
Tooltip.style('visibility', 'hidden');
});
// The Map
const map = mapContainer
.append('svg')
.attr('padding', 'none')
.attr('height', height)
.attr('width', width)
.attr('border', '1px solid black')
.attr('margin-left', '16px')
.attr('preserveAspectRatio', 'xMinYMin meet')
// This is for when you click on the background, it will drag
.call(d3.drag()
.on('drag', (event) => {
map.attr('transform', 'translate(' + [event.dx, event.dy] + ')');
}))
// This is for when you zoom on the background, it will zoom
.call(d3.zoom()
.on('zoom', (event) => {
map.attr('transform', event.transform);
})
.scaleExtent([1, 40]))
// This is going to be the country group
.append('g')
.selectAll('path')
.data(mapData.features)
.enter()
// This will be the country appended
.append('path')
// Used for clearing out styling later
.classed('country', true)
// Used for selecting specific countries for styling
.attr('id', (feature) => {
return 'country' + feature.properties.adm0_a3;
})
// Simple stylings
.attr('opacity', '.7')
.attr('stroke', 'black')
.attr('stroke-width', '.5px')
.attr('d', (feature) => {
// Using the projection, create the polygon for the country
return pathBuilder(feature);
})
// This is for when you click a country, it will drag
.call(d3.drag()
.on('drag', (event, feature) => {
map.attr('transform', 'translate(' + [event.dx, event.dy] + ')');
}))
// This is for when you zoom in on a country, it will zoom
.call(d3.zoom()
.on('zoom', (event, feature) => {
map.attr('transform', event.transform);
})
.scaleExtent([1, 40]))
.attr('fill', (feature) => {
// Change color of the country based upon the count
const country = countriesData.find(agg => agg.country === feature.properties.admin);
if (country) {
return colorScale(country.count);
} else {
return colorScale(0);
}
})
// Events are given the event object and the feature object (AKA datum AKA d as it is usually shown in documentation)
.on('mouseover', (event, feature) => {
// This adds the styling to show the user they are hovering over the country
d3.select('#country' + feature.properties.adm0_a3)
.transition()
.duration(200)
.attr('opacity', '1')
.attr('stroke-width', '1px');
// Show the Tooltip
Tooltip.style('visibility', 'visible');
})
.on('mouseleave', (event, feature) => {
// This clears out the remaining styles on all other countries not currently being hovered
d3.selectAll('.country')
.transition()
.duration(200)
.attr('opacity', '0.7')
.attr('stroke-width', '.5px');
// Hide the tooltip
Tooltip.style('visibility', 'hidden');
})
.on('mousemove', (event, feature) => {
// This adds the tooltip where the user's cursor currently is
const country = countriesData.find(agg => agg.country === feature.properties.admin);
if (country) {
// We have an agg for this country, display name and their count
Tooltip
.html(feature.properties.admin + '<br>' + 'Count: ' + country.count)
.style('left', (event.x + 10) + 'px')
.style('top', (event.y + 10) + 'px');
} else {
// There is no agg for this country, display name and a 0 count
Tooltip
.html(feature.properties.admin + '<br>' + 'Count: 0')
.style('left', (event.x + 10) + 'px')
.style('top', (event.y + 10) + 'px');
}
});
}
function colorScale(count) {
// Take a count and return one of these:
if (count > 20) {
// Red
return '#ff0000';
// Blue shift
// return '#000052';
} else if (count > 15) {
// Yellowish-red
return '#ffaa00';
// Blue shift
// return '#0000A3';
} else if (count > 5) {
// Yellow
return '#ffff00';
// Blue shift
// return '#0000F5';
} else if (count >= 1) {
// Greenish-yellow
return '#aaff00';
// Blue shift
// return '#4747FF';
} else {
// Green
return '#00ff00';
// Blue shift
// return '#9999FF';
}
}
// This is a GeoJSON file that is thousands of lines long
// mapData isn't here because Stackoverflow kept crashing when I tried to paste it in here and review/post the question.
mapData = {"type":"FeatureCollection","features":[{"type":"Feature","properties":{"admin":"United States of America","adm0_a3":"USA"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-155.54211,19.08348],[-155.68817,18.91619],[-155.93665,19.05939],[-155.90806,19.33888],[-156.07347,19.70294],[-156.02368,19.81422],[-155.85008,19.97729],[-155.91907,20.17395],[-155.86108,20.26721],[-155.78505,20.2487],[-155.40214,20.07975],[-155.22452,19.99302],[-155.06226,19.8591],[-154.80741,19.50871],[-154.83147,19.45328],[-155.22217,19.23972],[-155.54211,19.08348]]],[[[-156.07926,20.64397],[-156.41445,20.57241],[-156.58673,20.783],[-156.70167,20.8643],[-156.71055,20.92676],[-156.61258,21.01249],[-156.25711,20.91745],[-155.99566,20.76404],[-156.07926,20.64397]]],[[[-156.75824,21.17684],[-156.78933,21.06873],[-157.32521,21.09777],[-157.25027,21.21958],[-156.75824,21.17684]]],[[[-157.65283,21.32217],[-157.70703,21.26442],[-157.7786,21.27729],[-158.12667,21.31244],[-158.2538,21.53919],[-158.29265,21.57912],[-158.0252,21.71696],[-157.94161,21.65272],[-157.65283,21.32217]]],[[[-159.34512,21.982],[-159.46372,21.88299],[-159.80051,22.06533],[-159.74877,22.1382],[-159.5962,22.23618],[-159.36569,22.21494],[-159.34512,21.982]]],[[[-94.81758,49.38905],[-94.63999999999987,48.84000000000012],[-94.32914,48.67074000000011],[-93.63087,48.60926],[-92.61,48.45],[-91.64,48.14],[-90.82999999999986,48.27],[-89.6,48.010000000000105],[-89.27291744663668,48.01980825458284],[-88.37811418328653,48.30291758889382],[-87.43979262330024,47.94],[-86.46199083122815,47.55333801939204],[-85.65236324740323,47.22021881773051],[-84.87607988151485,46.90008331968238],[-84.77923824739983,46.63710195574913],[-84.54374874544567,46.53868419044923],[-84.6049,46.4396],[-84.3367,46.40877000000011],[-84.1421195136733,46.51222585711574],[-84.09185126416148,46.27541860613826],[-83.89076534700567,46.116926988299156],[-83.6161309475905,46.116926988299156],[-83.46955074739463,45.99468638771259],[-83.59285071484308,45.81689362241255],[-82.55092464875818,45.34751658790545],[-82.33776312543108,44.44],[-82.13764238150397,43.57108755144],[-82.43,42.9800000000001],[-82.89999999999989,42.43000000000015],[-83.11999999999989,42.08],[-83.14199968131256,41.975681057293],[-83.02981014680694,41.83279572200601],[-82.69008928092018,41.675105088867326],[-82.43927771679162,41.675105088867326],[-81.27774654816707,42.20902598730686],[-80.24744767934784,42.36619985612267],[-78.9393621487437,42.86361135514812],[-78.92,42.965],[-79.00999999999988,43.27],[-79.17167355011188,43.46633942318431],[-78.72027991404238,43.62508942318496],[-77.73788509795762,43.62905558936339],[-76.82003414580558,43.628784288093755],[-76.5,44.018458893758606],[-76.375,44.09631],[-75.31821,44.816450000000174],[-74.867,45.000480000000124],[-73.34783,45.00738],[-71.50505999999987,45.0082000000001],[-71.405,45.25500000000014],[-71.08482,45.30524000000017],[-70.6599999999998,45.46],[-70.305,45.915],[-69.99997,46.69307],[-69.237216,47.447781],[-68.905,47.185],[-68.23444,47.35486],[-67.79046,47.06636],[-67.79134,45.70281000000014],[-67.13741,45.13753],[-66.96466,44.80970000000016],[-68.03252,44.3252],[-69.05999999999989,43.98],[-70.11617,43.684050000000155],[-70.645475633411,43.09023834896405],[-70.81489,42.8653],[-70.825,42.335],[-70.495,41.805],[-70.08,41.78],[-70.185,42.145],[-69.88497,41.92283000000012],[-69.96503,41.63717000000017],[-70.64,41.475],[-71.12039,41.49445000000017],[-71.85999999999984,41.32],[-72.295,41.27],[-72.87643,41.22065],[-73.71,40.93110235165449],[-72.24126,41.11948000000015],[-71.94499999999982,40.93],[-73.345,40.63],[-73.982,40.628],[-73.952325,40.75075],[-74.25671,40.47351],[-73.96244,40.42763],[-74.17838,39.70926],[-74.90604,38.93954],[-74.98041,39.1964],[-75.20002,39.248450000000105],[-75.52805,39.4985],[-75.32,38.96],[-75.0718347647898,38.78203223017928],[-75.05673,38.40412000000012],[-75.37747,38.01551],[-75.94023,37.21689],[-76.03127,37.2566],[-75.72204999999978,37.93705000000011],[-76.23287,38.319215],[-76.35,39.15],[-76.542725,38.71761500000011],[-76.32933,38.08326],[-76.98999793161354,38.23999176691339],[-76.30162,37.917945],[-76.25874,36.96640000000011],[-75.9718,36.89726],[-75.86803999999984,36.55125],[-75.72749,35.55074000000013],[-76.36318,34.80854000000013],[-77.39763499999988,34.51201],[-78.05496,33.92547],[-78.55434999999983,33.86133000000012],[-79.06067,33.49395],[-79.20357,33.15839],[-80.301325,32.509355],[-80.86498,32.0333],[-81.33629,31.44049],[-81.49042,30.72999000000013],[-81.31371,30.035520000000105],[-80.98,29.180000000000117],[-80.53558499999988,28.47213],[-80.5299999999998,28.040000000000106],[-80.05653928497756,26.880000000000138],[-80.088015,26.205765],[-80.13155999999987,25.816775],[-80.38103,25.20616],[-80.67999999999988,25.08],[-81.17213,25.201260000000133],[-81.33,25.64],[-81.70999999999981,25.87],[-82.24,26.730000000000132],[-82.70515,27.49504],[-82.85526,27.88624],[-82.65,28.550000000000153],[-82.92999999999988,29.100000000000136],[-83.70959,29.93656],[-84.1,30.090000000000117],[-85.10882,29.63615],[-85.28784,29.68612000000013],[-85.7731,30.152610000000124],[-86.39999999999988,30.40000000000012],[-87.53036,30.27433],[-88.41782,30.3849],[-89.18048999999984,30.31598],[-89.59383117841978,30.15999400483685],[-89.413735,29.89419],[-89.43,29.48864],[-89.21767,29.29108],[-89.40823,29.15961],[-89.77928,29.307140000000143],[-90.15463,29.11743],[-90.880225,29.148535000000123],[-91.62678499999987,29.67700000000013],[-92.49906,29.5523],[-93.22637,29.78375],[-93.84842,29.71363],[-94.69,29.480000000000132],[-95.60026,28.73863],[-96.59404,28.30748],[-97.13999999999982,27.83],[-97.37,27.38],[-97.37999999999987,26.69],[-97.33,26.21000000000012],[-97.13999999999982,25.87],[-97.52999999999989,25.84],[-98.24,26.060000000000116],[-99.01999999999988,26.37],[-99.3,26.84],[-99.51999999999987,27.54],[-100.11,28.110000000000127],[-100.45584,28.696120000000118],[-100.9576,29.380710000000132],[-101.6624,29.779300000000116],[-102.48,29.76],[-103.11,28.97],[-103.94,29.27],[-104.45696999999984,29.57196],[-104.70575,30.12173],[-105.03737,30.64402],[-105.63159,31.08383000000012],[-106.1429,31.39995],[-106.50758999999982,31.75452],[-108.24,31.7548537181664],[-108.24194,31.34222],[-109.035,31.34194000000016],[-111.02361,31.33472],[-113.30498,32.03914],[-114.815,32.52528],[-114.72138999999986,32.72083],[-115.9913499999999,32.61239000000014],[-117.12775999999978,32.53534],[-117.29593769127388,33.04622461520389],[-117.944,33.621236431201396],[-118.41060227589749,33.740909223124504],[-118.51989482279971,34.02778157757575],[-119.081,34.078],[-119.43884064201669,34.3484771782843],[-120.36778,34.44711],[-120.62286,34.60855],[-120.74433,35.15686000000011],[-121.71456999999988,36.16153],[-122.54747,37.551760000000115],[-122.51201,37.78339000000013],[-122.95319,38.11371000000011],[-123.7272,38.95166000000012],[-123.86517,39.76699000000013],[-124.39807,40.3132],[-124.17886,41.142020000000116],[-124.2137,41.99964000000014],[-124.53284,42.7659900000001],[-124.14214,43.70838],[-124.020535,44.615895],[-123.89893,45.52341],[-124.079635,46.86475],[-124.39567,47.72017000000011],[-124.68721008300783,48.18443298339855],[-124.56610107421876,48.3797149658204],[-123.12,48.04],[-122.58736,47.096],[-122.34,47.36],[-122.5,48.18],[-122.84,49.000000000000114],[-120,49.000000000000114],[-117.03121,49.000000000000114],[-116.04818,49.000000000000114],[-113,49.000000000000114],[-110.04999999999983,49.000000000000114],[-107.05,49.000000000000114],[-104.04826,48.99986],[-100.65,49.000000000000114],[-97.22872000000471,49.00070000000011],[-95.15906950917196,49.000000000000114],[-95.15609,49.38425],[-94.81758,49.38905]]],[[[-153.0063140533369,57.11584219016589],[-154.0050902984581,56.73467682558106],[-154.5164027577701,56.9927489284467],[-154.67099280497115,57.46119578717249],[-153.76277950744148,57.81657461204377],[-153.2287294179211,57.968968410872435],[-152.56479061583514,57.901427313866975],[-152.1411472239063,57.59105866152199],[-153.0063140533369,57.11584219016589]]],[[[-165.57916419173358,59.90998688418755],[-166.19277014876727,59.754440822988975],[-166.848337368822,59.94140615502096],[-167.45527706609008,60.21306915957938],[-166.46779212142462,60.38416982689778],[-165.67442969466367,60.293606879306246],[-165.57916419173358,59.90998688418755]]],[[[-171.7316568675394,63.78251536727592],[-171.1144335602452,63.592191067144995],[-170.4911124339407,63.69497549097352],[-169.68250545965358,63.431115627691156],[-168.6894394603007,63.2975062120006],[-168.7719408844546,63.18859813094545],[-169.52943986720504,62.9769314642779],[-170.29055620021597,63.194437567794466],[-170.67138566799088,63.37582184513897],[-171.55306311753867,63.317789211675084],[-171.7911106028912,63.405845852300494],[-171.7316568675394,63.78251536727592]]],[[[-155.06779029032424,71.1477763943237],[-154.34416520894123,70.6964085964702],[-153.90000627339262,70.8899885118357],[-152.2100060699353,70.82999217394485],[-152.27000240782615,70.60000621202985],[-150.73999243874454,70.43001658800571],[-149.72000301816752,70.53001048449045],[-147.61336157935708,70.2140349392418],[-145.6899898002253,70.12000967068676],[-144.92001095907642,69.9899917670405],[-143.5894461804252,70.15251414659832],[-142.07251034871342,69.85193817817265],[-140.98598752156073,69.71199839952638],[-140.9859883290049,69.71199839952638],[-140.9924987520294,66.00002859156868],[-140.99776974812312,60.30639679629861],[-140.0129978161531,60.27683787702759],[-139.03900042031586,60.000007229240026],[-138.34089,59.56211000000016],[-137.4525,58.905000000000115],[-136.4797200000001,59.46389],[-135.47583,59.78778],[-134.945,59.27056000000013],[-134.27111,58.86111],[-133.35554888220722,58.410285142645165],[-132.73042,57.69289000000011],[-131.70780999999988,56.55212],[-130.00778,55.91583],[-129.9799942633583,55.28499787049722],[-130.53611018946725,54.8027534043494],[-131.08581823797215,55.17890615500204],[-131.9672114671423,55.49777558045906],[-132.25001074285947,56.36999624289746],[-133.53918108435641,57.17888743756214],[-134.07806292029605,58.1230675319669],[-135.03821103227907,58.18771474876393],[-136.62806230995466,58.21220937767046],[-137.80000627968604,58.49999542910379],[-139.867787041413,59.53776154238915],[-140.82527381713305,59.727517401765084],[-142.57444353556446,60.08444651960499],[-143.9588809948799,59.9991804063234],[-145.92555681682785,60.45860972761429],[-147.11437394914668,60.88465607364463],[-148.22430620012767,60.672989406977166],[-148.01806555885076,59.97832896589363],[-148.5708225168609,59.914172675203304],[-149.72785783587585,59.70565827090556],[-150.60824337461645,59.36821116803949],[-151.71639278868332,59.15582103131999],[-151.85943315326716,59.744984035879604],[-151.4097190012472,60.72580272077939],[-150.34694149473253,61.03358755150986],[-150.62111080625698,61.284424953854455],[-151.89583919981686,60.72719798445129],[-152.5783298410956,60.06165721296429],[-154.01917212625762,59.35027944603428],[-153.28751135965317,58.8647276882198],[-154.2324924387585,58.14637360293054],[-155.30749142151024,57.72779450136633],[-156.3083347239231,57.42277435976365],[-156.55609737854633,56.979984849670636],[-158.11721655986776,56.46360809999419],[-158.43332129619716,55.99415355083855],[-159.60332739971744,55.56668610292012],[-160.2897196116342,55.643580634170576],[-161.2230476552578,55.364734605523495],[-162.23776607974108,55.02418691672011],[-163.06944658104638,54.68973704692717],[-164.7855692210272,54.40417308208217],[-164.94222632552004,54.57222483989534],[-163.84833960676568,55.03943146424612],[-162.87000139061593,55.348043117893205],[-161.80417497459604,55.89498647727043],[-160.56360470278116,56.00805451112504],[-160.0705598622845,56.41805532492876],[-158.68444291891944,57.01667511659787],[-158.46109737855394,57.21692129172888],[-157.7227703521839,57.57000051536306],[-157.55027442119356,58.32832632103023],[-157.041674974577,58.91888458926172],[-158.19473120830548,58.61580231386984],[-158.5172179840231,58.78778148053732],[-159.05860612692874,58.424186102931685],[-159.71166704001735,58.93139028587634],[-159.9812888255002,58.57254914004164],[-160.35527116599653,59.07112335879364],[-161.35500342511506,58.670837714260756],[-161.96889360252635,58.67166453717738],[-162.05498653872468,59.26692536074745],[-161.87417070213536,59.6336213242906],[-162.5180590484921,59.98972361921391],[-163.81834143782015,59.79805573184339],[-164.66221757714646,60.26748444278265],[-165.34638770247483,60.50749563256241],[-165.35083187565186,61.07389516869751],[-166.12137915755596,61.500019029376226],[-165.73445187077053,62.074996853271806],[-164.91917863671785,62.63307648380793],[-164.56250790103934,63.14637848576305],[-163.75333248599702,63.21944896102377],[-163.0672244944579,63.05945872664802],[-162.26055538638172,63.54193573674117],[-161.5344498362486,63.455816962326764],[-160.77250668032113,63.766108100023274],[-160.95833513084256,64.22279857040277],[-161.5180684072122,64.40278758407531],[-160.77777767641476,64.78860382756642],[-161.39192623598763,64.77723501246234],[-162.45305009666885,64.55944468856822],[-162.7577860178941,64.33860545516882],[-163.5463942128843,64.5591604681905],[-164.96082984114517,64.44694509546885],[-166.42528825586447,64.68667206487072],[-166.84500423893905,65.08889557561453],[-168.11056006576717,65.66999705673675],[-166.70527116602196,66.0883177761394],[-164.4747096425755,66.5766600612975],[-163.65251176659564,66.5766600612975],[-163.78860165103617,66.07720734319668],[-161.67777442121016,66.11611969671242],[-162.48971452538,66.73556509059512],[-163.71971696679108,67.1163945583701],[-164.4309913808565,67.6163382025778],[-165.39028683170676,68.04277212185025],[-166.76444068099602,68.35887685817968],[-166.20470740462662,68.88303091091618],[-164.4308105133435,68.91553538682774],[-163.16861365461452,69.3711148139129],[-162.93056616926202,69.85806183539927],[-161.90889726463553,70.33332998318764],[-160.9347965159337,70.44768992784958],[-159.03917578838715,70.89164215766894],[-158.11972286683397,70.82472117785105],[-156.58082455139805,71.35776357694175],[-155.06779029032424,71.1477763943237]]]]}},{"type":"Feature","properties":{"admin":"United Kingdom","adm0_a3":"GBR"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-5.661948614921897,54.55460317648385],[-6.197884894220977,53.86756500916334],[-6.953730231137996,54.073702297575636],[-7.572167934591079,54.05995636658599],[-7.366030646178785,54.595840969452695],[-7.572167934591079,55.1316222194549],[-6.733847011736145,55.1728600124238],[-5.661948614921897,54.55460317648385]]],[[[-3.005004848635281,58.63500010846633],[-4.073828497728016,57.55302480735525],[-3.055001796877661,57.69001902936095],[-1.959280564776918,57.68479970969951],[-2.219988165689301,56.87001740175353],[-3.119003058271118,55.973793036515474],[-2.085009324543023,55.90999848085127],[-2.005675679673857,55.80490285035023],[-1.11499101399221,54.62498647726539],[-0.4304849918542,54.46437612570216],[0.184981316742039,53.32501414653103],[0.469976840831777,52.92999949809197],[1.681530795914739,52.739520168664],[1.559987827164377,52.09999848083601],[1.050561557630914,51.806760565795685],[1.449865349950301,51.28942780212196],[0.550333693045502,50.765738837275876],[-0.78751746255864,50.77498891865622],[-2.489997524414377,50.50001862243124],[-2.956273972984036,50.696879991247016],[-3.617448085942328,50.22835561787272],[-4.542507900399244,50.34183706318566],[-5.245023159191135,49.95999990498108],[-5.776566941745301,50.15967763935682],[-4.309989793301838,51.21000112568916],[-3.414850633142123,51.42600861266925],[-3.422719467108323,51.42684816740609],[-4.984367234710874,51.593466091510976],[-5.267295701508885,51.99140045837458],[-4.222346564134853,52.301355699261364],[-4.770013393564113,52.840004991255626],[-4.579999152026915,53.49500377055517],[-3.093830673788659,53.404547400669685],[-3.092079637047106,53.404440822963544],[-2.945008510744344,53.984999701546684],[-3.614700825433034,54.600936773292574],[-3.63000545898933,54.615012925833014],[-4.844169073903004,54.790971177786844],[-5.082526617849226,55.06160065369937],[-4.719112107756644,55.50847260194348],[-5.047980922862109,55.78398550070752],[-5.586397670911139,55.31114614523682],[-5.644998745130181,56.275014960344805],[-6.149980841486354,56.78500967063354],[-5.786824713555291,57.81884837506465],[-5.009998745127575,58.63001333275005],[-4.211494513353557,58.55084503847917],[-3.005004848635281,58.63500010846633]]]]}}]}
data = [{
"country": "United States of America",
"count": 146
},
{
"country": "Belgium",
"count": 24
},
{
"country": "United Kingdom",
"count": 17
},
{
"country": "Ireland",
"count": 16
},
{
"country": "Malaysia",
"count": 15
},
{
"country": "China",
"count": 13
},
{
"country": "India",
"count": 10
},
{
"country": "Australia",
"count": 9
},
{
"country": "Portugal",
"count": 6
},
{
"country": "Singapore",
"count": 6
},
{
"country": "Thailand",
"count": 5
},
{
"country": "Denmark",
"count": 4
},
{
"country": "Israel",
"count": 4
},
{
"country": "Japan",
"count": 4
},
{
"country": "Romania",
"count": 4
},
{
"country": "South Africa",
"count": 4
},
{
"country": "Germany",
"count": 3
},
{
"country": "Pakistan",
"count": 3
},
{
"country": "Turkey",
"count": 3
},
{
"country": "Kuwait",
"count": 2
},
{
"country": "Lebanon",
"count": 2
},
{
"country": "Mexico",
"count": 2
},
{
"country": "Algeria",
"count": 1
},
{
"country": "Brazil",
"count": 1
},
{
"country": "Chile",
"count": 1
},
{
"country": "Costa Rica",
"count": 1
},
{
"country": "Czech Republic",
"count": 1
},
{
"country": "France",
"count": 1
},
{
"country": "Indonesia",
"count": 1
},
{
"country": "Norway",
"count": 1
},
{
"country": "Peru",
"count": 1
},
{
"country": "Poland",
"count": 1
}
];
buildMap(mapData, data);<script src="https://d3js/d3.v6.js"></script>
<p class="pl-2">
World Map
</p>
<div id="map-container" class="col-3 m-2 p-0" style="border: 1px solid grey; background-color: #72727230; height: 300px;"></div>I know the code doesn't run in this snippet
Update: Now runs with proper D3 Script Tag
I am new to posting questions to StackOverflow, especially when dealing with map data. In order for me to post this question, I could not include the mapData because Stack Overflow would send out a 418 error code (I'm a teapot). I assume this has to do with the size of the GeoJSON? (3852000 characters)
Hope someone can give me insight as there doesn't seem to be a lot of consistent documentation (please prove me wrong, I've been looking all week) towards D3 v6 in regards to drag/zoom functionality nor working examples of World Maps with the functionality I am looking for. I know of the migration guide ( https://observablehq./@d3/d3v6-migration-guide#event_drag ) and that helped some but I'm still not getting the result I need.
Thank you in advance!
UPDATE: Made a super simplified version of my GeoJSON so the mapData is in there now
Share Improve this question edited Oct 12, 2020 at 16:12 Charles McKelvey asked Oct 12, 2020 at 15:14 Charles McKelveyCharles McKelvey 732 silver badges6 bronze badges 01 Answer
Reset to default 7Just use d3-zoom for both zooming and panning. Removing drag and zoom from the countries itself fixed it.
function buildMap(mapData, data) {
// Grab the container
// Append an SVG with world-map as it's ID
// Append a g for all of the countries
const countriesData = data;
const mapContainer = d3.select('#map-container');
const mapRatio = 0.4;
// The plus turns it into a number
const width = +mapContainer.node().clientWidth;
const height = +mapContainer.node().clientHeight;
// Map and projection
const projection = d3.geoMercator()
.scale(width / (2 * Math.PI))
.translate([width / 2, height / 2])
// Centered initially ([longitude, latitude])
// I move it down a bit cause we do not have antartica apart of our map
.center([0, 45]);
const pathBuilder = d3.geoPath(projection);
// The Tooltip
const Tooltip = d3.select('body')
.append('div')
.attr('class', 'map-tooltip')
.style('visibility', 'hidden')
.style('background-color', 'white')
.style('border', 'solid')
.style('border-width', '2px')
.style('border-radius', '5px')
.style('padding', '5px')
.style('position', 'absolute')
.on('mouseover', (event) => {
// A bug where if the user's cursor gets on top of the Tooltip, it flashes infinitely until the user's cursor moves
// Very distracting and this gets rid of it pletely. Besides, the cursor should never be over the Tooltip anyway
Tooltip.style('visibility', 'hidden');
});
const zoom = d3.zoom()
.on('zoom', (event) => {
map.attr('transform', event.transform);
})
.scaleExtent([1, 40]);
// The Map
const map = mapContainer
.append('svg')
.attr('padding', 'none')
.attr('height', height)
.attr('width', width)
.attr('border', '1px solid black')
.attr('margin-left', '16px')
.attr('preserveAspectRatio', 'xMinYMin meet')
// This is for when you zoom on the background, it will zoom
.call(zoom)
// This is going to be the country group
.append('g');
map
.selectAll('path')
.data(mapData.features)
.enter()
// This will be the country appended
.append('path')
// Used for clearing out styling later
.classed('country', true)
// Used for selecting specific countries for styling
.attr('id', (feature) => {
return 'country' + feature.properties.adm0_a3;
})
// Simple stylings
.attr('opacity', '.7')
.attr('stroke', 'black')
.attr('stroke-width', '.5px')
.attr('d', (feature) => {
// Using the projection, create the polygon for the country
return pathBuilder(feature);
})
.attr('fill', (feature) => {
// Change color of the country based upon the count
const country = countriesData.find(agg => agg.country === feature.properties.admin);
if (country) {
return colorScale(country.count);
} else {
return colorScale(0);
}
})
// Events are given the event object and the feature object (AKA datum AKA d as it is usually shown in documentation)
.on('mouseover', (event, feature) => {
// This adds the styling to show the user they are hovering over the country
d3.select('#country' + feature.properties.adm0_a3)
.transition()
.duration(200)
.attr('opacity', '1')
.attr('stroke-width', '1px');
// Show the Tooltip
Tooltip.style('visibility', 'visible');
})
.on('mouseleave', (event, feature) => {
// This clears out the remaining styles on all other countries not currently being hovered
d3.selectAll('.country')
.transition()
.duration(200)
.attr('opacity', '0.7')
.attr('stroke-width', '.5px');
// Hide the tooltip
Tooltip.style('visibility', 'hidden');
})
.on('mousemove', (event, feature) => {
// This adds the tooltip where the user's cursor currently is
const country = countriesData.find(agg => agg.country === feature.properties.admin);
if (country) {
// We have an agg for this country, display name and their count
Tooltip
.html(feature.properties.admin + '<br>' + 'Count: ' + country.count)
.style('left', (event.x + 10) + 'px')
.style('top', (event.y + 10) + 'px');
} else {
// There is no agg for this country, display name and a 0 count
Tooltip
.html(feature.properties.admin + '<br>' + 'Count: 0')
.style('left', (event.x + 10) + 'px')
.style('top', (event.y + 10) + 'px');
}
});
}
function colorScale(count) {
// Take a count and return one of these:
if (count > 20) {
// Red
return '#ff0000';
// Blue shift
// return '#000052';
} else if (count > 15) {
// Yellowish-red
return '#ffaa00';
// Blue shift
// return '#0000A3';
} else if (count > 5) {
// Yellow
return '#ffff00';
// Blue shift
// return '#0000F5';
} else if (count >= 1) {
// Greenish-yellow
return '#aaff00';
// Blue shift
// return '#4747FF';
} else {
// Green
return '#00ff00';
// Blue shift
// return '#9999FF';
}
}
// This is a GeoJSON file that is thousands of lines long
// mapData isn't here because Stackoverflow kept crashing when I tried to paste it in here and review/post the question.
mapData = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"admin": "United States of America",
"adm0_a3": "USA"
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[-94.81758, 49.38905],
[-94.64, 48.84],
[-94.32914, 48.67074],
[-93.63087, 48.60926],
[-92.61, 48.45],
[-91.64, 48.14],
[-90.83, 48.27],
[-89.6, 48.01],
[-89.27291744663668, 48.01980825458284],
[-88.37811418328653, 48.30291758889382],
[-87.43979262330024, 47.94],
[-86.46199083122815, 47.55333801939204],
[-85.65236324740323, 47.22021881773051],
[-84.87607988151485, 46.90008331968238],
[-84.77923824739983, 46.63710195574913],
[-84.54374874544567, 46.53868419044923],
[-84.6049, 46.4396],
[-84.3367, 46.40877],
[-84.1421195136733, 46.51222585711574],
[-84.09185126416148, 46.27541860613826],
[-83.89076534700567, 46.116926988299156],
[-83.6161309475905, 46.116926988299156],
[-83.46955074739463, 45.99468638771259],
[-83.59285071484308, 45.81689362241255],
[-82.55092464875818, 45.34751658790545],
[-82.33776312543108, 44.44],
[-82.13764238150397, 43.57108755144],
[-82.43, 42.98],
[-82.9, 42.43],
[-83.12, 42.08],
[-83.14199968131256, 41.975681057293],
[-83.02981014680694, 41.83279572200601],
[-82.69008928092018, 41.675105088867326],
[-82.43927771679162, 41.675105088867326],
[-81.27774654816707, 42.20902598730686],
[-80.24744767934784, 42.36619985612267],
[-78.9393621487437, 42.86361135514812],
[-78.92, 42.965],
[-79.00999999999988, 43.27],
[-79.17167355011188, 43.46633942318431],
[-78.72027991404238, 43.62508942318496],
[-77.73788509795762, 43.62905558936339],
[-76.82003414580558, 43.628784288093755],
[-76.5, 44.018458893758606],
[-76.375, 44.09631],
[-75.31821, 44.81645],
[-74.867, 45.00048],
[-73.34783, 45.00738],
[-71.50506, 45.0082],
[-71.405, 45.255],
[-71.08482, 45.30524],
[-70.66, 45.46],
[-70.305, 45.915],
[-69.99997, 46.69307],
[-69.237216, 47.447781],
[-68.905, 47.185],
[-68.23444, 47.35486],
[-67.79046, 47.06636],
[-67.79134, 45.70281],
[-67.13741, 45.13753],
[-66.96466, 44.8097],
[-68.03252, 44.3252],
[-69.06, 43.98],
[-70.11617, 43.68405],
[-70.645475633411, 43.09023834896405],
[-70.81489, 42.8653],
[-70.825, 42.335],
[-70.495, 41.805],
[-70.08, 41.78],
[-70.185, 42.145],
[-69.88497, 41.92283],
[-69.96503, 41.63717],
[-70.64, 41.475],
[-71.12039, 41.49445],
[-71.86, 41.32],
[-72.295, 41.27],
[-72.87643, 41.22065],
[-73.71, 40.93110235165449],
[-72.24126, 41.11948],
[-71.945, 40.93],
[-73.345, 40.63],
[-73.982, 40.628],
[-73.952325, 40.75075],
[-74.25671, 40.47351],
[-73.96244, 40.42763],
[-74.17838, 39.70926],
[-74.90604, 38.93954],
[-74.98041, 39.1964],
[-75.20002, 39.24845],
[-75.52805, 39.4985],
[-75.32, 38.96],
[-75.0718347647898, 38.78203223017928],
[-75.05673, 38.40412],
[-75.37747, 38.01551],
[-75.94023, 37.21689],
[-76.03127, 37.2566],
[-75.72205, 37.93705],
[-76.23287, 38.319215],
[-76.35, 39.15],
[-76.542725, 38.717615],
[-76.32933, 38.08326],
[-76.98999793161354, 38.23999176691339],
[-76.30162, 37.917945],
[-76.25874, 36.9664],
[-75.9718, 36.89726],
[-75.86804, 36.55125],
[-75.72749, 35.55074],
[-76.36318, 34.80854],
[-77.397635, 34.51201],
[-78.05496, 33.92547],
[-78.55435, 33.86133],
[-79.06067, 33.49395],
[-79.20357, 33.15839],
[-80.301325, 32.509355],
[-80.86498, 32.0333],
[-81.33629, 31.44049],
[-81.49042, 30.72999],
[-81.31371, 30.03552],
[-80.98, 29.18],
[-80.535585, 28.47213],
[-80.53, 28.04],
[-80.05653928497756, 26.88],
[-80.088015, 26.205765],
[-80.13156, 25.816775],
[-80.38103, 25.20616],
[-80.68, 25.08],
[-81.17213, 25.20126],
[-81.33, 25.64],
[-81.70999999999981, 25.87],
[-82.24, 26.73],
[-82.70515, 27.49504],
[-82.85526, 27.88624],
[-82.65, 28.55],
[-82.93, 29.1],
[-83.70959, 29.93656],
[-84.1, 30.09],
[-85.10882, 29.63615],
[-85.28784, 29.68612],
[-85.7731, 30.15261],
[-86.4, 30.4],
[-87.53036, 30.27433],
[-88.41782, 30.3849],
[-89.18049, 30.31598],
[-89.59383117841978, 30.15999400483685],
[-89.413735, 29.89419],
[-89.43, 29.48864],
[-89.21767, 29.29108],
[-89.40823, 29.15961],
[-89.77928, 29.30714],
[-90.15463, 29.11743],
[-90.880225, 29.148535],
[-91.626785, 29.677],
[-92.49906, 29.5523],
[-93.22637, 29.78375],
[-93.84842, 29.71363],
[-94.69, 29.48],
[-95.60026, 28.73863],
[-96.59404, 28.30748],
[-97.14, 27.83],
[-97.37, 27.38],
[-97.38, 26.69],
[-97.33, 26.21],
[-97.14, 25.87],
[-97.53, 25.84],
[-98.24, 26.06],
[-99.02, 26.37],
[-99.3, 26.84],
[-99.52, 27.54],
[-100.11, 28.11],
[-100.45584, 28.69612],
[-100.9576, 29.38071],
[-101.6624, 29.7793],
[-102.48, 29.76],
[-103.11, 28.97],
[-103.94, 29.27],
[-104.45697, 29.57196],
[-104.70575, 30.12173],
[-105.03737, 30.64402],
[-105.63159, 31.08383],
[-106.1429, 31.39995],
[-106.50759, 31.75452],
[-108.24, 31.7548537181664],
[-108.24194, 31.34222],
[-109.035, 31.34194],
[-111.02361, 31.33472],
[-113.30498, 32.03914],
[-114.815, 32.52528],
[-114.72139, 32.72083],
[-115.99135, 32.61239],
[-117.12776, 32.53534],
[-117.29593769127388, 33.04622461520389],
[-117.944, 33.621236431201396],
[-118.41060227589749, 33.740909223124504],
[-118.51989482279971, 34.02778157757575],
[-119.081, 34.078],
[-119.43884064201669, 34.3484771782843],
[-120.36778, 34.44711],
[-120.62286, 34.60855],
[-120.74433, 35.15686],
[-121.71457, 36.16153],
[-122.54747, 37.55176],
[-122.51201, 37.78339],
[-122.95319, 38.11371],
[-123.7272, 38.95166],
[-123.86517, 39.76699],
[-124.39807, 40.3132],
[-124.17886, 41.14202],
[-124.2137, 41.99964],
[-124.53284, 42.76599],
[-124.14214, 43.70838],
[-124.020535, 44.615895],
[-123.89893, 45.52341],
[-124.079635, 46.86475],
[-124.39567, 47.72017],
[-124.68721008300783, 48.18443298339855],
[-124.56610107421876, 48.3797149658204],
[-123.12, 48.04],
[-122.58736, 47.096],
[-122.34, 47.36],
[-122.5, 48.18],
[-122.84, 49.],
[-120, 49.],
[-117.03121, 49.],
[-116.04818, 49.],
[-113, 49.],
[-110.05, 49.],
[-107.05, 49.],
[-104.04826, 48.99986],
[-100.65, 49.],
[-97.22872, 49.0007],
[-95.15906950917196, 49.],
[-95.15609, 49.38425],
[-94.81758, 49.38905]
]
],
[
[
[-155.06779029032424, 71.1477763943237],
[-154.34416520894123, 70.6964085964702],
[-153.90000627339262, 70.8899885118357],
[-152.2100060699353, 70.82999217394485],
[-152.27000240782615, 70.60000621202985],
[-150.73999243874454, 70.43001658800571],
[-149.72000301816752, 70.53001048449045],
[-147.61336157935708, 70.2140349392418],
[-145.6899898002253, 70.12000967068676],
[-144.92001095907642, 69.9899917670405],
[-143.5894461804252, 70.15251414659832],
[-142.07251034871342, 69.85193817817265],
[-140.98598752156073, 69.71199839952638],
[-140.9859883290049, 69.71199839952638],
[-140.9924987520294, 66.00002859156868],
[-140.99776974812312, 60.30639679629861],
[-140.0129978161531, 60.27683787702759],
[-139.03900042031586, 60.000007229240026],
[-138.34089, 59.56211],
[-137.4525, 58.905],
[-136.47972, 59.46389],
[-135.47583, 59.78778],
[-134.945, 59.27056],
[-134.27111, 58.86111],
[-133.35554888220722, 58.410285142645165],
[-132.73042, 57.69289],
[-131.70780999999988, 56.55212],
[-130.00778, 55.91583],
[-129.9799942633583, 55.28499787049722],
[-130.53611018946725, 54.8027534043494],
[-131.08581823797215, 55.17890615500204],
[-131.9672114671423, 55.49777558045906],
[-132.25001074285947, 56.36999624289746],
[-133.53918108435641, 57.17888743756214],
[-134.07806292029605, 58.1230675319669],
[-135.03821103227907, 58.18771474876393],
[-136.62806230995466, 58.21220937767046],
[-137.80000627968604, 58.5],
[-139.867787041413, 59.53776154238915],
[-140.82527381713305, 59.727517401765084],
[-142.57444353556446, 60.08444651960499],
[-143.9588809948799, 59.9991804063234],
[-145.92555681682785, 60.45860972761429],
[-147.11437394914668, 60.88465607364463],
[-148.22430620012767, 60.672989406977166],
[-148.01806555885076, 59.97832896589363],
[-148.5708225168609, 59.914172675203304],
[-149.72785783587585, 59.70565827090556],
[-150.60824337461645, 59.36821116803949],
[-151.71639278868332, 59.15582103131999],
[-151.85943315326716, 59.744984035879604],
[-151.4097190012472, 60.72580272077939],
[-150.34694149473253, 61.03358755150986],
[-150.62111080625698, 61.284424953854455],
[-151.89583919981686, 60.72719798445129],
[-152.5783298410956, 60.06165721296429],
[-154.01917212625762, 59.35027944603428],
[-153.28751135965317, 58.8647276882198],
[-154.2324924387585, 58.14637360293054],
[-155.30749142151024, 57.72779450136633],
[-156.3083347239231, 57.42277435976365],
[-156.55609737854633, 56.979984849670636],
[-158.11721655986776, 56.46360809999419],
[-158.43332129619716, 55.99415355083855],
[-159.60332739971744, 55.56668610292012],
[-160.2897196116342, 55.643580634170576],
[-161.2230476552578, 55.364734605523495],
[-162.23776607974108, 55.02418691672011],
[-163.06944658104638, 54.68973704692717],
[-164.7855692210272, 54.40417308208217],
[-164.94222632552004, 54.57222483989534],
[-163.84833960676568, 55.03943146424612],
[-162.87000139061593, 55.348043117893205],
[-161.80417497459604, 55.89498647727043],
[-160.56360470278116, 56.00805451112504],
[-160.0705598622845, 56.41805532492876],
[-158.68444291891944, 57.01667511659787],
[-158.46109737855394, 57.21692129172888],
[-157.7227703521839, 57.57000051536306],
[-157.55027442119356, 58.32832632103023],
[-157.041674974577, 58.91888458926172],
[-158.19473120830548, 58.61580231386984],
[-158.5172179840231, 58.78778148053732],
[-159.05860612692874, 58.424186102931685],
[-159.71166704001735, 58.93139028587634],
[-159.9812888255002, 58.57254914004164],
[-160.35527116599653, 59.07112335879364],
[-161.35500342511506, 58.670837714260756],
[-161.96889360252635, 58.67166453717738],
[-162.05498653872468, 59.26692536074745],
[-161.87417070213536, 59.6336213242906],
[-162.5180590484921, 59.98972361921391],
[-163.81834143782015, 59.79805573184339],
[-164.66221757714646, 60.26748444278265],
[-165.34638770247483, 60.50749563256241],
[-165.35083187565186, 61.07389516869751],
[-166.12137915755596, 61.500019029376226],
[-165.73445187077053, 62.074996853271806],
[-164.91917863671785, 62.63307648380793],
[-164.56250790103934, 63.14637848576305],
[-163.75333248599702, 63.21944896102377],
[-163.0672244944579, 63.05945872664802],
[-162.26055538638172, 63.54193573674117],
[-161.5344498362486, 63.455816962326764],
[-160.77250668032113, 63.766108100023274],
[-160.95833513084256, 64.22279857040277],
[-161.5180684072122, 64.40278758407531],
[-160.77777767641476, 64.78860382756642],
[-161.39192623598763, 64.77723501246234],
[-162.45305009666885, 64.55944468856822],
[-162.7577860178941, 64.33860545516882],
[-163.5463942128843, 64.5591604681905],
[-164.96082984114517, 64.44694509546885],
[-166.42528825586447, 64.68667206487072],
[-166.84500423893905, 65.08889557561453],
[-168.11056006576717, 65.66999705673675],
[-166.70527116602196, 66.0883177761394],
[-164.4747096425755, 66.5766600612975],
[-163.65251176659564, 66.5766600612975],
[-163.78860165103617, 66.07720734319668],
[-161.67777442121016, 66.11611969671242],
[-162.48971452538, 66.73556509059512],
[-163.71971696679108, 67.1163945583701],
[-164.4309913808565, 67.6163382025778],
[-165.39028683170676, 68.04277212185025],
[-166.76444068099602, 68.35887685817968],
[-166.20470740462662, 68.88303091091618],
[-164.4308105133435, 68.91553538682774],
[-163.16861365461452, 69.3711148139129],
[-162.93056616926202, 69.85806183539927],
[-161.90889726463553, 70.33332998318764],
[-160.9347965159337, 70.44768992784958],
[-159.03917578838715, 70.89164215766894],
[-158.11972286683397, 70.82472117785105],
[-156.58082455139805, 71.35776357694175],
[-155.06779029032424, 71.1477763943237]
]
]
]
}
}, {
"type": "Feature",
"properties": {
"admin": "United Kingdom",
"adm0_a3": "GBR"
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[-5.661948614921897, 54.55460317648385],
[-6.197884894220977, 53.86756500916334],
[-6.953730231137996, 54.073702297575636],
[-7.572167934591079, 54.05995636658599],
[-7.366030646178785, 54.595840969452695],
[-7.572167934591079, 55.1316222194549],
[-6.733847011736145, 55.1728600124238],
[-5.661948614921897, 54.55460317648385]
]
],
[
[
[-3.005004848635281, 58.63500010846633],
[-4.073828497728016, 57.55302480735525],
[-3.055001796877661, 57.69001902936095],
[-1.959280564776918, 57.68479970969951],
[-2.219988165689301, 56.87001740175353],
[-3.119003058271118, 55.973793036515474],
[-2.085009324543023, 55.90999848085127],
[-2.005675679673857, 55.80490285035023],
[-1.11499101399221, 54.62498647726539],
[-0.4304849918542, 54.46437612570216],
[0.184981316742039, 53.32501414653103],
[0.469976840831777, 52.92999949809197],
[1.681530795914739, 52.739520168664],
[1.559987827164377, 52.09999848083601],
[1.050561557630914, 51.806760565795685],
[1.449865349950301, 51.28942780212196],
[0.550333693045502, 50.765738837275876],
[-0.78751746255864, 50.77498891865622],
[-2.489997524414377, 50.50001862243124],
[-2.956273972984036, 50.696879991247016],
[-3.617448085942328, 50.22835561787272],
[-4.542507900399244, 50.34183706318566],
[-5.245023159191135, 49.96],
[-5.776566941745301, 50.15967763935682],
[-4.309989793301838, 51.21000112568916],
[-3.414850633142123, 51.42600861266925],
[-3.422719467108323, 51.42684816740609],
[-4.984367234710874, 51.593466091510976],
[-5.267295701508885, 51.99140045837458],
[-4.222346564134853, 52.301355699261364],
[-4.770013393564113, 52.840004991255626],
[-4.579999152026915, 53.49500377055517],
[-3.093830673788659, 53.404547400669685],
[-3.092079637047106, 53.404440822963544],
[-2.945008510744344, 53.984999701546684],
[-3.614700825433034, 54.600936773292574],
[-3.63000545898933, 54.615012925833014],
[-4.844169073903004, 54.790971177786844],
[-5.082526617849226, 55.06160065369937],
[-4.719112107756644, 55.50847260194348],
[-5.047980922862109, 55.78398550070752],
[-5.586397670911139, 55.31114614523682],
[-5.644998745130181, 56.275014960344805],
[-6.149980841486354, 56.78500967063354],
[-5.786824713555291, 57.81884837506465],
[-5.009998745127575, 58.63001333275005],
[-4.211494513353557, 58.55084503847917],
[-3.005004848635281, 58.63500010846633]
]
]
]
}
}]
}
data = [{
"country": "United States of America",
"count": 146
},
{
"country": "Belgium",
"count": 24
}
];
buildMap(mapData, data);<script src="https://d3js/d3.v6.js"></script>
<p class="pl-2">
World Map
</p>
<div id="map-container" class="col-3 m-2 p-0" style="border: 1px solid grey; background-color: #72727230; height: 300px;"></div>