function createMapAndLegend(world, gameData, selectedGame) {
  var ratingsData = {};
  var ratings = [];
  console.log({world, gameData, selectedGame})

  gameData.forEach((d) => (d["Average Rating"] = +d["Average Rating"]));
  gameData.forEach(function (d) {
    if (d.Game === selectedGame) ratings.push(d["Average Rating"]);
  });

  var color = d3.scaleQuantile().range(colors).domain(ratings);

  var legend = d3.legendColor().labelFormat(d3.format(".2f")).scale(color);

  var div = d3.select("body").selectAll("#legend").attr("class", "column");

  div.html("");

  var legSvg = div.append("svg").attr("transform", "translate(20, 10)");

  legSvg.append("g").attr("class", "legend").call(legend);

  gameData.forEach(function (d) {
    if (d.Game === selectedGame) ratingsData[d.Country] = d;
  });

  world.features.forEach(
    (d) =>
      (ratingsData[d.properties.name] = ratingsData[d.properties.name] || {
        "Average Rating": 0,
      })
  );
  world.features.forEach(
    (d) =>
      (d.ratings_data = ratingsData[d.properties.name] || {
        "Average Rating": 0,
      })
  );
  
  d3.select("#choropleth").empty();

  var svg = d3
    .select("#choropleth")
    .attr("transform", "translate(50, 50)")
    .attr("height", height)
    .attr("width", width)
    .append("g");
  svg
    .attr("id", "countries")
    .attr("class", "countries")
    .selectAll("path")
    .data(world.features)
    .enter()
    .append("path")
    .attr("d", path)
    .style("fill", function (d)  {
      if (ratingsData[d.properties.name]["Average Rating"] === 0) return "gray";
      return color(ratingsData[d.properties.name]["Average Rating"]);
    })
    .style("stroke", "white")
    .on("mouseover",function  (d) {
      var rating = ratingsData[d.properties.name]["Average Rating"];
      d.rating = rating > 0 ? rating : "N/A";
      d.users = ratingsData[d.properties.name]["Number of Users"] || "N/A";
      d.game = selectedGame;
      tip.show(d);
      d3.select(this).style("stroke-width", 2);
    })
    .on("mouseout", function (d)  {
      tip.hide(d);
      d3.select(this).style("stroke-width", 0.3);
    });
}

function ready(error, world, gameData) {
  var games = [...new Set(gameData.map((item) => item.Game))].sort();

  d3.select("#gameDropdown")
    .selectAll("options")
    .data(games)
    .enter()
    .append("option")
    .text(function (d) {
      return d;
    }).attr("value", function (d) {
        return d;
    });

  d3.select("#gameDropdown").on("change",function () {
    createMapAndLegend(world, gameData, d3.select(this).property("value"));
  });

  createMapAndLegend(world, gameData, games[0]);

  svg
    .append("path")
    .datum(topojson.mesh(world.features, (a, b) => a.id !== b.id))
    .attr("class", "names")
    .attr("d", path);
}