JavaScript World Map Visualization

This JavaScript code snippet uses the D3.js library to create a choropleth world map visualization. The code loads and processes data from two files, a TSV file and a JSON file, which contain information about the countries of the world. It then uses D3 to create and append SVG elements to the DOM, including a projection, a path generator, a sphere, and a group element.

It also creates a color legend using the colorScale and colorValue functions. Finally, the code fills in the countries on the map with colors based on their economic data, and appends a title to each country indicating its name and corresponding economic value. The code also includes a zoom feature that allows users to zoom in and out of the map.

How to Create World Map Visualization in JavaScript

First of all, create SVG element in HTML with width and height attributes as follows:

<svg width="960" height="500"></svg>

Style the map using the following CSS styles. These styles are optional, you can define your own CSS rules in order to customize the map layout.

body {
  margin: 0px;
  overflow: hidden;
}

.sphere {
  fill: #4242e4;
}

.country {
  stroke: black;
  stroke-width: 0.05px;
}

.country:hover {
  fill: red;
}

.tick text {
  font-size: 1em;
  font-family: sans-serif;
  fill: black;
}

rect {opacity: .7;}

p {padding-left: 10px;}

Now, load the D3 JS and TopoJSON JS by adding the following CDN links before closing the body tag:

<script src='https://unpkg.com/d3@5.6.0/dist/d3.min.js'></script>
<script src='https://unpkg.com/topojson@3.0.2/dist/topojson.min.js'></script>

Finally, add the following JavaScript function to activate the world map visualization:

const svg = d3.select('svg');

const projection = d3.geoNaturalEarth1();
const pathGenerator = d3.geoPath().projection(projection);

const g = svg.append('g');

const colorLegendG = svg.append('g')
   .attr('transform', `translate(40,310)`);


g.append('path')
    .attr('class', 'sphere')
    .attr('d', pathGenerator({type: 'Sphere'}));

svg.call(d3.zoom().on('zoom', () => {
  g.attr('transform', d3.event.transform);
}));
 const colorScale = d3.scaleOrdinal();

 const colorValue = d => d.properties.economy;

const loadAndProcessData = () =>

  Promise.all([
    d3.tsv('https://unpkg.com/world-atlas@1.1.4/world/50m.tsv'),
    d3.json('https://unpkg.com/world-atlas@1.1.4/world/50m.json')
  ])
  
  .then(([tsvData, topoJSONdata]) => {
  
  const rowById = tsvData.reduce((accumulator, d) => {
    accumulator[d.iso_n3] = d;
    return accumulator;
  }, {});
  
  const countries = topojson.feature(topoJSONdata, topoJSONdata.objects.countries);
    
     countries.features.forEach(d =>{
   Object.assign(d.properties, rowById[d.id])
  });
  
  return countries;
  
});

const colorLegend = (selection, props) => {
  const {
    colorScale,
    circleRadius,
    spacing,
    textOffset,
    backgroundRectWidth
  } = props;
  
  const backgroundRect = selection.selectAll('rect')
    .data([null]);
  
  const n = colorScale.domain().length;
  backgroundRect.enter()
    .append('rect')
    .merge(backgroundRect)
    .attr('x', -circleRadius * 2)
    .attr('y', -circleRadius * 2)
    .attr('rx', circleRadius * 2)
    .attr('width', backgroundRectWidth)
    .attr('fill', 'white')
    .attr('height', spacing * n + circleRadius * 2)

  const groups = selection.selectAll('.tick')
    .data(colorScale.domain());
  const groupsEnter = groups
    .enter().append('g')
      .attr('class', 'tick');
  groupsEnter
    .merge(groups)
      .attr('transform', (d, i) =>
        `translate(0, ${i * spacing})`
      );
  groups.exit().remove();
  
  groupsEnter.append('circle')
    .merge(groups.select('circle'))
      .attr('r', circleRadius)
      .attr('fill', colorScale);
  
  groupsEnter.append('text')
    .merge(groups.select('text'))
      .text(d => d)
      .attr('dy', '0.32em')
      .attr('x', textOffset);
}

  loadAndProcessData().then(countries => {
  console.log(colorScale);
 colorScale.domain(countries.features.map(colorValue))
    .domain(colorScale.domain().sort().reverse())
    .range(d3.schemeSpectral[colorScale.domain().length]);
    
  colorLegendG.call(colorLegend, {
  colorScale,
  circleRadius: 8,
  spacing: 20,
  textOffset: 15,
  backgroundRectWidth: 240
});
  
  g.selectAll('path').data(countries.features)
    .enter().append('path')
      .attr('class', 'country')
      .attr('d', pathGenerator)
      .attr('fill', d => colorScale(colorValue(d)))
    .append('title')
      .text(d => d.properties.name + ' : ' + colorValue(d));
  
});

That’s all! hopefully, you have successfully created world map visualization. If you have any questions or suggestions, feel free to comment below.