Legend doesn't appear, but no errors in the code (?) - html

Question

I want to create a legend with my 3 classes (a, b, and c), but the legend doesn't appear on my localhost webmap. I couldn't find any errors. This is the assignment I am working on: https://github.com/NieneB/webmapping_for_beginners_v2/wiki/D3-step-3
I have tried to move the codes of the legend to another place, but this doesn't seem to work. I have checked the code if there were any ;)} etc. missing.
And these are some of my codes:
<h1>Bigfoot Field Researchers Organizations</h1>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
//Width and height
var w = 1000;
var h = 800;
//Create SVG
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
// create a new SVG group element
var layerWorld = svg.append('g');
//Load in GeoJSON data
var data = d3.json("world_simple.json", function(error, data){
if (error) console.log(error);
return data
});
// create a new SVG group element
var layerYeti = svg.append('g');
//Load in GeoJSON data
var yetiData = d3.json("All_BFRO_Reports_points.json", function (error, data) {
if (error) console.log(error);
return data
});
Promise.all([data, yetiData]).then(function (values){
console.log(values[1])
console.log(data)
//Bind data and create one path per GeoJSON feature
layerWorld.selectAll("path")
.data(values[0].features)
.enter()
.append("path")
.attr("class", "countries")
.attr("d", path)
.style("fill", function(d){
return color(d.properties.pop_est)})
.style("stroke", "#5a5959")
.on("mouseover", handleMouseOver)
.on("mouseout", handleMouseOut);
layerYeti.selectAll("circle")
.data(values[1].features)
.enter()
.append("circle")
.attr("cx", function(d) {
//[0] returns the first coordinate (x) of the projected value
return projection(d.geometry.coordinates)[0];})
.attr("cy", function(d) {
//[1] returns the second coordinate (y) of the projected value
return projection(d.geometry.coordinates)[1];})
.attr("r", 2)
.style("fill", function(d){
if (d.properties.styleUrl == "#a") {return "red"}
else if (d.properties.styleUrl == "#b") {return "blue"}
else { return "yellow"}
})
.style("opacity", 0.75);
//Create Legend
var legend = d3.select("body")
.append("svg")
.attr("class", "legend")
.attr("width", 200)
.attr("height", 300);
})
var unique_values = d3.map(data.features, function(d){return d.properties.styleUrl;}).keys();
console.log(unique_values);