Currently struggling with creating a map using D3.js
The given code functions properly with certain JSON files, but when I try to use the necessary data, it's throwing a series of errors like this:
Error: attribute d: Expected number, "….21478248741596,NaNL547.70469610…".
Instead of the expected map of England, I'm seeing a different image
This is the code snippet in question:
const width = 800
const height = 800
const svg = d3.select('svg')
.append('g')
.attr('class', 'map');
const projection = d3.geoMercator()
Promise.all([
d3.json('https://raw.githubusercontent.com/joewretham/d3_map_project/main/Clinical_Commissioning_Groups__April_2019__Boundaries_EN_BUC.json')
]).then(
d => ready(null, d[0], d[1])
);
function ready(error, data) {
var fixed = data.features.map(function(feature) {
return turf.rewind(feature, {
reverse: true
});
});
const path = d3.geoPath().projection(projection);
projection.fitSize([width, height], {
"type": "FeatureCollection",
"features": fixed
})
svg.append('g')
.attr('class', 'countries')
.selectAll('path')
.data(fixed)
.enter().append('path')
.attr('d', path)
.style('fill', "teal")
.style('stroke', 'white')
.style('opacity', 0.8)
.style('stroke-width', 0.3);
};<script src="https://d3js.org/d3.v5.min.js"></script>
<script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
<svg id="partitionSVG" width="800" height="800">"</svg>Seeking assistance on why this error occurs specifically with this set of data compared to others that work without issues. I assume it has something to do with the coordinates requiring transformation, but I lack expertise in geographic data to understand how to resolve it.
Appreciate any guidance provided
Joe