d3 SpikeMap - <path> attribute transform: Expected number, "translate(feature =\u003E path.…"

Question

I am trying to port this d3 Spike Map to codepen.io but the spike markers on the map are not rendering properly or misplaced.

The data is generated and when inspecting the output with google chorme , I see them rendered on a tiny little dot at the top left corner of the canvas

The errors if you inspect or see the console are:

Error: <path> attribute transform: Expected number, "translate(feature =\u003E path.…"

I did not find any answers except this one it has something to do not importing the d3 template properly.

The weird thing is that the bottom right legend is rendered correctly. I think it has to do with my centeroid function

let chart = SpikeMap(population, {
  value: ([population]) => +population,
  position([, stateid, countyid]) {
  const county = countymap.get(stateid + countyid);
  return county && centroid(county);
},
title([population, stateid, countyid]) {
  const state = statemap.get(stateid);
  const county = countymap.get(stateid + countyid);
  return `${county?.properties.name}, ${state?.properties.name}\n${(+population).toLocaleString("en")}`;
},
features: nation,
borders: statemesh,
width: 975,
height: 610
})

document.getElementById("myChart").append(chart)