Impossible to display a TopoJson map with Svelte

Question

I'm trying to view a TopoJson map with Svelte (and D3), but I can't figure out what's wrong because there is absolutely nothing displayed and yet the console output does not return any errors. Does anyone have a clue?

I put below the link of a Svelte repl and the code used :

https://svelte.dev/repl/1cadb042523d40a5803171b9d29367af?version=3.48.0

<script>
  import { geoAlbers, geoPath, geoAlbersUsa, } from "d3-geo";
  import { onMount } from "svelte";
  import * as topojson from 'topojson-client';
    import { draw } from 'svelte/transition';
  
  const path = geoPath().projection(null);
    let deps = [];
    let mesh;

onMount(async () => {
    const france = await fetch('https://gist.githubusercontent.com/Fralacticus/b6584c5865607300b2b5a0559ae47cbb/raw/8287c28f9a3eab4e3d1aa5f7e6181f064957c9de/deptopo.json'
    ).then(d => d.json());  
    console.log({ france });
    
    deps = topojson.feature(france, france.objects.dep).features;   
    console.log({ deps });
    
    mesh = topojson.mesh(france, france.objects.dep, (a, b) => a !== b);
});
</script>


<svg viewBox="0 0 910 610">
  <g fill="white" stroke="black">
        {#each deps as feature, i}
            <path d={path(feature)} />
        {/each} 
    </g>
</svg>

The map viewer and what it displays (this is the expected result):

https://mapshaper.org/?files=https://gist.githubusercontent.com/Fralacticus/b6584c5865607300b2b5a0559ae47cbb/raw/8287c28f9a3eab4e3d1aa5f7e6181f064957c9de/deptopo.json

Answer 1

If you look at the data, you will see that the values are huge and just do not fit the current dimensions of the SVG. You can e.g. increase the viewBox to make the map show up:

<svg viewBox="0 0 10000000 10000000">
  <!-- stroke-width adjusted for large viewBox -->
  <g stroke="black" stroke-width="1000px" fill="none">

REPL

france.transform appears to contain some additional information, but I do not know how that is supposed to be used. You can always calculate the bounding box yourself from the data and there appears to be function for this: bbox.

If the large scale of the data points is maintained, the stroke-width needs to be very high (e.g. 1000px), because it gets scaled down by the viewBox.