//Create variables`width` and `height`
var width = 900;
var height = 600;

//Create SVG in variable:
var svg = d3
  //Returns 'body'-tag in the HTML document
  .select("body")
  //Create SVG element and add it at the end of 'body' element
  .append("svg")
  //Set width on 'body' element
  .attr("width", width)
  //Set height on 'body' element
  .attr("height", height);

//Create `g_countries` variable which will be grouping all the paths of the countries that I have in `svg`:
var g_countries = svg.append("g");
//Create `g_points` variable which will be grouping all the points that I have in `svg`:
var g_points = svg.append("g");

//Create the Mercator projection from given json data
var projection = d3
  .geoMercator()
  // "zoom in" map
  .scale(140)
  // Set the projection’s translation offset to the specified two-element array [tx, ty] and returns the projection
  .translate([width / 2, height / 1.4]);
//The geographic path generator, it generates an SVG path data string
var path = d3.geoPath(projection);

var map = d3
  //Send http request to the url to load .json file and executes callback function with parsed json data objects
  .json("https://cdn.jsdelivr.net/npm/[email protected]/countries-110m.json")
  //When promise will fulfill successfully we can pass a function that accepts as input the data
  .then((data) => {
    //Convert TopoJSON to GeoJSON and save new structure in variable `countries`
    var countries = topojson.feature(data, data.objects.countries);
    //Select all future rendered `path`-tags in the HTML document
    g_countries
      .selectAll("path")
      //Create paths placeholders according to dataset
      .data(countries.features)
      //Map data and paths placeholders
      .enter()
      // Create `path`-tags and add to the DOM
      .append("path")
      //Give class `country` to `path`
      .attr("class", "country")
      //Give an SVG path for each of the countries
      .attr("d", path);

    //Send http request to the url to load .json file and executes callback function with parsed json data objects
    d3.csv(
      "https://gist.githubusercontent.com/dsibi/626d88be4522b3afad12f73f0e7a78c1/raw/data.csv"
    )
      //When promise will fulfill successfully we can pass a function that accepts as input the data
      .then((data) => {
        //Select all future rendered `circle`-tags in the HTML document
        g_points
          .selectAll("circle")
          //Create placeholders for circles according to dataset
          .data(data)
          //Map data and placeholders for circles
          .enter()
          // Create `circle`-tags and add to the DOM
          .append("circle")
          //Assign X and Y coordinates accordind to dataset
          .attr("cx", function (d) {
            // Return an array [x, y] in pixels representing the projected point of the given point and take first element from the array for X-coordinate
            return projection([d.lon, d.lat])[0];
          })
          .attr("cy", function (d) {
            // Return an array [x, y] in pixels representing the projected point of the given point and take second element from the array for Y-coordinate
            return projection([d.lon, d.lat])[1];
          })
          //Specify raduis for the circles
          .attr("r", 3)
          //Give class `country` to `circle`
          .attr("class", "locations")
          //Add Event Listener | mouseover
          .on("mouseover", function (event, d) {
            //Select hovering `circle` and fill it with black color
            d3.select(this).style("fill", "black");
            //Select HTML-tag with class "place" and add text for "place"
            d3.select("#place").text("Place: " + d.place);
            //Select HTML-tag with class "year" and add text for "year"
            d3.select("#year").text("Year: " + d.year);
            //Select HTML-tag with class "weight" and add text for "weight"
            d3.select("#weight").text("Weight, g: " + d.mass_g);
            //Select HTML-tag with class "tooltip"
            d3.select("#tooltip")
              //Apply left position according selected `circle` for tooltip
              .style("left", `${event.layerX+10}px`)
              //Apply top position according selected `circle` for tooltip
              .style("top", `${event.layerY+10}px`)
              //Displays an element as a block element, which starts on a new line, and takes up the whole width
              .style("display", "block")
              //Apply opacity for 90 %
              .style("opacity", 0.9);
          })
          //Add Event Listener | mouseout
          .on("mouseout", function (e, d) {
            //Give back color for unhovering `circle`
            d3.select(this).style("fill", "yellow");
            //Hide tooltip
            d3.select("#tooltip").style("display", "none");
          });
      });
  });