Missing IDs in World Atlas by curran

index.js

import {
  select,
  geoPath,
  geoNaturalEarth1,
  zoom,
  event,
  scaleOrdinal,
  schemeSpectral,
  csv,
  json
} from 'd3';

import { feature } from 'topojson';

const svg = select('svg');

const projection = geoNaturalEarth1();
const pathGenerator = 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(zoom().on('zoom', () => {
  g.attr('transform', event.transform);
}));

json('https://unpkg.com/world-atlas@1.1.4/world/50m.json')
  .then(data => feature(data, data.objects.countries))
  .then(countries => {
    g.selectAll('path').data(countries.features)
      .enter().append('path')
        .attr('class', 'country')
        .attr('d', pathGenerator)
        .attr('fill', d => (d.id === '-99') ? 'red' : 'green')
      .append('title')
        .text(d => d.id);
});

index.html

<!DOCTYPE html>
<html>                         
  <head>
    <title>Missing IDs for World Atlas</title>
    <link rel="stylesheet" href="styles.css">
    <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>
  </head>
  <body>
    <svg width="960" height="500"></svg>
    <script src="bundle.js"></script>
  </body>
</html>

bundle.js

(function (d3,topojson) {
  'use strict';

  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);
  }));

  d3.json('https://unpkg.com/world-atlas@1.1.4/world/50m.json')
    .then(data => topojson.feature(data, data.objects.countries))
    .then(countries => {
      g.selectAll('path').data(countries.features)
        .enter().append('path')
          .attr('class', 'country')
          .attr('d', pathGenerator)
          .attr('fill', d => (d.id === '-99') ? 'red' : 'green')
        .append('title')
          .text(d => d.id);
  });

}(d3,topojson));

package.json

{
  "scripts": {
    "build": "rollup -c"
  },
  "devDependencies": {
    "rollup": "latest"
  }
}

rollup.config.js

export default {
  input: 'index.js',
  external: ['d3'],
  output: {
    file: 'bundle.js',
    format: 'iife',
    sourcemap: true,
    globals: { d3: 'd3' }
  }
};

styles.css

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

.sphere {
  fill: #4242e4;
}

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

.country:hover {
  fill: red;
}

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

.tick circle {
  stroke: black;
  stroke-opacity: 0.5;
}