World's Meteorites History D3 JS Bubble Map

app.js

  //set margins for div container, SVG and chart area(g element)
  var margin = {top: 20, right: 20, bottom: 20, left: 20};
  
  //width of the chart, within SVG element
  var w = 1100 - margin.left - margin.right;
  //height of the chart, within SVG element
  var h = 900 - margin.top - margin.bottom;
  
  //Create SVG element and append to #chart div container
  //SVG is nested G element
  var svg = d3.select("#chart")
              .append("svg")
                .attr("width", w + margin.left + margin.right)
                .attr("height", h + margin.top + margin.bottom)
              .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

//meteor strike data API
var meteorsData = "https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/meteorite-strike-data.json";

//world map data API
var geoData = "https://raw.githubusercontent.com/johan/world.geo.json/master/countries.geo.json";

//variable to hold world map JSON object
var geo = {};

//variable to hold meteorites strikes data
var meteors = {};

d3.json(geoData, function(data){
//load world map data  

   //save world map data from API  
   geo = data.features;
  
  
   d3.json(meteorsData, function(data){
        
        //save meteorites data from API
        meteors = data.features;
     
        console.log(meteors);
     
        //get the smallest meteorite in mass
        var minMass = d3.min(meteors, function(d){
          
          return parseFloat(d.properties.mass);
          
        })
        
        //get the largest meteorite in mass
        var maxMass = d3.max(meteors, function(d){

          return parseFloat(d.properties.mass);
          
        })
     
        //create a projection
        var projection = d3.geo.mercator()
                     .scale(150)
                     .translate([w/2, h/2]);
     
        //create path generator
        var path = d3.geo.path()
                     .projection(projection);
     
        //create meteorite mass scale
        var radius = d3.scale.sqrt()
                        .domain([minMass, maxMass])
                        .range([2.5,40]);
     
        var colors = d3.scale.category10();
                          
        var tip = d3.select("#chart").append("div")
                                     .attr("class", "tooltip")
                                     .attr("opacity", 0);
            
        //draw world map with path elements
        svg.selectAll("path")
            .data(geo)
            .enter()
            .append("path")
            .attr("fill", "#95E1D3")
            .attr("stroke", "#34495e")
            .attr("stroke-width", 0.5)
            .attr("class", "countries")
            .attr("d", path);
     
        //draw meteorite strike bubbles
        svg.selectAll(".circles")
           .data(meteors.sort(function(a,b){ return b.properties.mass - a.properties.mass}))
           //prevent occlusion: sort data so smaller circles are drawn later.
           .enter()
           .append("circle")
           .attr("cx", function(d){  return projection([d.properties.reclong, d.properties.reclat])[0];})
           .attr("cy", function(d){  return projection([d.properties.reclong, d.properties.reclat])[1];})
           .attr("r", function(d){ console.log(radius(d.properties.mass)) ; return radius(d.properties.mass)})
           .attr("class", "meteorites")
           .attr("fill", function(d) {return colors(d.properties.mass)})
           .on("mouseover", function(d){
          
              tip.transition()
                 .style("opacity", 0.7)
              tip.html("mass: " + d.properties.mass + "<br>name: " + d.properties.name + "<br>year: " + d.properties.year + "<br>id: " + d.properties.id + "<br>recclass: " + d.properties.recclass)
              .style("left", d3.event.pageX + "px")
              .style("top", d3.event.pageY - 70 + "px")
          
           })
           .on("mouseout", function(d){
          
            tip.transition()
               .style("opacity", 0);
          
        });
     
            })
    
    
})

index.html

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
</head>

<body>
  <div class="container text-center">
    <h1>Meteorites History of the World</h1>
    <br>
    <div id="chart">
    </div>
  </div>
</body>

style.css

body {
  margin-top: 20px;
  margin-bottom: 20px;
  font-family: 'Work Sans', sans-serif;
  background-image: url("https://subtlepatterns.com/patterns/sos.png");
}

svg {
  background-color: #266D98;
  box-shadow: 0 0 10px #888888;
}

.meteorites {
  fill-opacity: 0.6;
  stroke: #fff;
  stroke-width: 0.5px;
}

.tooltip {
  position: absolute;
  text-align: center;
  vertical-align: middle;
  width: 160px;
  height: 130px;
  padding: 10px;
  font: 14px Work Sans;
  background: #2c3e50;
  border: 0px;
  border-radius: 8px;
  color: white;
}