d3 choropleth map is extremely small - d3.js

Question

I am trying to draw an svg map from a topojson file located here. When I run the code below, I see a small red collection of g elements that is that map, but I'm not sure how to make it larger. I've tried doing projection.scale(100) but that does not work.
Here is a fiddle.
<svg width=500 height=500></svg>
async function run() {
const res = await fetch(
"https://rawcdn.githack.com/jasonicarter/toronto-geojson/0fb40bd54333bc3d397a26cf4f68abb1b6d94188/toronto_topo.json"
);
const jsondata = await res.json();
const width = 500;
const height = 500;
const neighbourhoods = topojson.feature(jsondata, jsondata.objects.toronto);
const projection = d3.geoAlbers().translate([width / 2, height / 2])
const svg = d3.select("svg")
svg
.append("g")
.selectAll("path")
.data(neighbourhoods.features)
.enter()
.append("path")
.attr("d", d3.geoPath().projection(projection))
.attr("fill", "red")
.attr("stroke", "white");
console.log("done")
}
run();

Answer 1

Indeed, you have to use the scale and the translate properties to scale / center your map.
But d3.geoProjection also provides some convenience functions such as fitExtent and fitSize in order to fit the projection on one specific GeoJSON feature object.
As your dataset is containing many features, I propose to use topojson.mesh to obtain a unique object representing your whole dataset (as a mesh) to use its extent with the fitSize method of the projection to scale your map :
const neighbourhoods = topojson.feature(jsondata, jsondata.objects.toronto);
const mesh = topojson.mesh(jsondata, jsondata.objects.toronto);
const projection = d3.geoAlbers()
.fitSize([width, height], mesh);
const svg = d3.select("svg")
svg
.append('g')
.selectAll("path")
.data(neighbourhoods.features)
.enter()
.append("path")
.attr("d", d3.geoPath().projection(projection))
.attr("fill", "red")
.attr("stroke", "white");
Which (after adding a border on the svg element) gives the following :
If you wanted to fit the extent using a some padding (lets say 20px) you could have use the following :
const projection = d3.geoAlbers()
.fitExtent([[20, 20], [width - 20, height - 20]], mesh);