examples/typo.html

<head>
  <meta charset="UTF-8" />
  <link
    rel="stylesheet"
    href="https://fonts.googleapis.com/css?family=Tangerine"
  />
</head>

<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script
  src="https://cdn.jsdelivr.net/npm/geoviz@0.7.9"
  charset="utf-8"
></script>
<script>
  let geojson = "./world.json";

  d3.json(geojson).then((data) => {
    let svg = geoviz.create({ projection: "EqualEarth" });
    svg.plot({ type: "outline" });
    svg.plot({ type: "graticule", stroke: "white", strokeWidth: 0.4 });
    svg.plot({
      type: "typo",
      data: data,
      var: "region",
      colors: "Set3",
      tip: "$NAMEen ($region)",
      leg_pos: [670, 300],
      leg_title: "Continents",
      alphabetical: true,
    });
    svg.header({
      fontSize: 30,
      text: "A Typo World Map",
      fill: "#267A8A",
      fontWeight: "bold",
      fontFamily: "Tangerine",
    });
    document.body.appendChild(svg.render());
  });
</script>