Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible"
            content="IE=edge">
      <link rel="icon"
            type="image"
            href="favicon.ico">
      <link rel="stylesheet"
            href="style.css">
      <meta name="viewport"
            content="width=device-width, initial-scale=1.0">
      <title>Points with Tooltip on World Map in d3</title>
</head>

<body>
      <div id="tooltip">
            <text id="place"></text><br>
            <text id="year"></text><br>
            <text id="weight"></text><br>
      </div>

      <script src="https://d3js.org/d3.v6.min.js"></script>
      <script src="https://unpkg.com/topojson@3"></script>
      <script src="index.js"></script>
</body>

</html>
              
            
!

CSS

              
                .country {
  fill: black;
  stroke: #118ab2;
}

.locations {
  fill: yellow;
  opacity: 0.3;
}

#tooltip {
  position: absolute;
  width: 150px;
  height: auto;
  padding: 8px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  opacity: 0;
}

#tooltip text {
  margin: 0;
  font-family: sans-serif;
  font-size: 14px;
  line-height: 20px;
}

              
            
!

JS

              
                //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/world-atlas@2/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");
          });
      });
  });

              
            
!
999px

Console