<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/3.0.2/topojson.min.js" integrity="sha256-tHoAPGoNdhIR28YHl9DWLzeRfdwigkH7OCBXMrHXhoM=" crossorigin="anonymous"></script>
<title>Choropleth Map</title>
</head>
<body>
<svg id='canvas'></svg>
</body>
<script defer src='script.js'></script>
<script defer src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</html>
let countyURL = 'https://gist.githubusercontent.com/Saw-mon-and-Natalie/a11f058fc0dcce9343b02498a46b3d44/raw/e8afc74f791169a64d6e8df033d7e88ff85ba673/canada.json'
let eduURL = 'https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/for_user_education.json'
let countyData
let educationData
let canvas = d3.select('#canvas')
let drawMap = () => {
canvas.selectAll('path')
.data(countyData)
.enter()
.append('path')
.attr('d', d3.geoPath())
.attr('class', 'county')
}
d3.json(countyURL).then(
(data, error) => {
if (error) {
console.log(error)
} else {
countyData = topojson.feature(data, data.objects.provinces).features
d3.json(eduURL).then(
(data, error) => {
if (error) {
console.log(error)
}
else {
educationData = data
console.log('Education Data')
console.log(educationData)
drawMap()
}
}
)
}
}
)
`I'm working on a project to create a choropleth map using D3.js. I have successfully implemented the map using the FreeCodeCamp provided TopoJSON file for the USA. However, when I try to use a different TopoJSON file for Canada, the map doesn't display properly.
I've tried using two different TopoJSON files for Canada:
In both cases, while the SVG element is generated with paths, nothing actually shows up on the map. It's worth noting that when using the USA file, the map displays correctly.
I have ensured that I've modified the code to accommodate the differences in the TopoJSON files (e.g., changing counties to provinces), but the issue persists.
Any insights into why the map isn't displaying correctly with the Canada TopoJSON files would be greatly appreciated.`