Added gradeint to chloropleth

index.html

@@ -30,6 +30,9 @@
  <div id="choropleth">
  <svg width="100%" viewBox="0 0 2000 1000"></svg>
  <script>
+ const colorScale = d3.scaleLinear()
+ .domain([0, 5]) 
+ .range(["#f0f0f0", "#4CAF50"]); 
  // here, I am trying to load the geoJSON file that is given to us
  d3.json("https://enjalot.github.io/wwsd/data/world/world-110m.geojson").then(function (world) {
  d3.csv("./data/WorldCupMatches.csv").then(function (data) {
@@ -91,7 +94,14 @@
  .data(world.features)
  .enter().append("path")
  .attr("d", path)
- .attr("fill", "white")
+ .attr("fill", d => {
+ // Get the name of the country
+ const countryName = d.properties.name;
+ // Get the number of trophies won by the country, defaulting to 0 if not found
+ const trophiesWon = winCount[countryName] || 0;
+ // Map the number of trophies to the color scale
+ return colorScale(trophiesWon);
+ })
  .on("mouseover", function (event, d) {
  // Transitioning to light blue
  d3.select(this)