I am very new to d3 and topojson and I am trying to render a map of the UK to overlay some data onto later. I have taken a topojson file from an online repository which is clearly fine since GitHub can render it. I am running this in a view specific json file for rails with d3 and topojson installed using webpacker.

I am currently importing d3, topojson and the uk map json file:

import * as d3 from 'd3';
import * as topojson from 'topojson';
import * as uk from './uk.json';

Then I try to draw the map:

let svg = d3.select('#geo-plot');
let feature = topojson.feature(uk, uk.objects.GBR_adm2);
svg.append("g")
        .selectAll("path")
        .data(feature)
        .join("path")
        .attr("fill", "#ed87c8")
        .attr("stroke", "white")
        .attr("stroke-width", 0.4)
        .attr("d", d3.geoPath(d3.geoMercator()));

I get the error arcs is undefined while running topology.feature(...)

If I pass uk.objects.GBR_adm2.geometries to feature is of type Feature but has no geometries.

I have a degree of success when passing uk.objects.GBR_adm2.geometries to .data() directly but I get the error coordinates is undefined.

If I pass uk.objects.GBR_adm2 or uk.objects to .data(), nothing happens and I get no error.

I have tried all of these steps with another map and had the exact same outcome

I am trying to follow online tutorials but nobody seems to be running into these problems. Any help or advice is much appreciated.

Thanks a lot