1

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

Expected map

Gaiusfr
  • 35
  • 4
  • Rather than resizing the viewbox you can use d3.geoIdentity() and fitSize() to automatically scale and center the data when dealing with already projected data like yours ([eg](https://stackoverflow.com/a/42430876/7106086)) – Andrew Reid Jun 27 '22 at 04:15

1 Answers1

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.

H.B.
  • 166,899
  • 29
  • 327
  • 400
  • Even with your values there is nothing displayed. But thanks, I'll look for an explanation in the json file. – Gaiusfr Jun 26 '22 at 15:34
  • @Gaiusfr The styling is off, change the fill or adjust stroke – H.B. Jun 26 '22 at 15:36
  • @Gaiusfr: (At the scale of the data you need something like `stroke-width: 1000px;` to make that actually show up.) – H.B. Jun 26 '22 at 15:39
  • It works , great ! There are still adjustments to be made, but most of it is done – Gaiusfr Jun 26 '22 at 15:44