Map with Svelte

App.svelte

<script>
  import { json } from "d3";

  import Marks from "./Marks.svelte";

  let dataset = [];
  json(
    "https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson"
  ).then((data) => {
    dataset = data.features;
  });

  const width = 1200,
    height = 600;
</script>

<main>
  <svg {width} {height}>
    <Marks {dataset} />
  </svg>
</main>

Marks.svelte

<script>
  import { geoPath, geoNaturalEarth1 } from "d3";
  export let dataset = [];

  import { draw } from "svelte/transition";
  import { quadInOut } from "svelte/easing";

  const projection = geoNaturalEarth1();
  const path = geoPath(projection);
</script>

{#each dataset as data}
  <path
    transition:draw={{ duration: 5000, delay: 0, easing: quadInOut }}
    d={path(data)}
  />
{/each}

<style>
  path {
    fill: none;
    stroke: darkgreen;
  }
</style>