Income V. LifeExpectancy

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://d3js.org/d3-hexbin.v0.2.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .dots {
			fill: steelblue;
			fill-opacity: 0.5;
			stroke: #c0c0c0;
		}
    .dots:hover{
      fill:orangered;
      fill-opacity:.8;
    }
    div.tooltip {
      position:absolute;
			padding-top:3px;
			padding-right:4px;
  		padding-left: 4px;
      padding-bottom: 5px;
  		font: 9.88px sans-serif;
  		background: goldenrod;
      border-radius:8px;
      text-align: center;
    }
    
  </style>
</head>

d3.json( "nations.json", function(error, json){
	if (error) throw error;
	var x = "lifeExpectancy";
  var y = "income";
  var data = json
  var svg = d3.select("body").append("svg")
        .attr("width", 960)
        .attr("height", 500)

var width = +svg.attr("width")
  var height = +svg.attr("height")
  var margin = {top: 50, bottom: 30, left: 50, right: 30};

// First we'll implement our X and Y axis functions
  // returns [ymin, ymax]
  var yExtent = d3.extent(data, function (d) {return d[y]});

// returns [xmin,xmax]
  var xEx = d3.extent(data, function (d) {return d[x]})

// adding buffer
  var xScale = d3.scaleLinear()
    .domain([xEx[0]-1,xEx[1]+2])
    .range([margin.left, width - margin.right])

// adding buffer
  var yScale = d3.scaleLinear()
    .domain([yExtent[0]-2523,yExtent[1]+2523])
    .range([height-margin.bottom,margin.top])

var xAxis = d3.axisBottom()
      .scale(xScale);

var yAxis = d3.axisLeft()
      .scale(yScale);

var div = d3.select("body").append("div")
    .attr("class", "tooltip")
    .style("opacity", 0);

//   tooltip doesn't work to great
  var dot = svg.selectAll('.dots')
      .data(data)
      .enter().append("circle")
  		.attr("class", "dots")
      .attr("r", 4.68)
      .attr("cx", function(d) {return xScale(d[x])})
      .attr("cy", function(d) {return yScale(d[y])})
  		.on("mouseover", function(d){
        div.transition()
        .duration(100)
        .style("opacity", ".7");
        div.html(
          	"Country: "+d.name
          	+"<br/>"+"Life Expectancy: "
          	+d.lifeExpectancy
          	+"</br>"+"Annual income: "
          	+d.income)
        	.style("left",
            (d3.event.pageX-50)+"px")
      		.style("top",
            (d3.event.pageY-60)+"px");
      	})
  		.on("mouseout",function(){
        div.transition()
        	.duration(1500)
        	.style("opacity","0")
        	
      });
 
//   svg.append("text")
//   	.text("D3 works")
//   	.style("fill","black")
//   	.attr("x",width/2)
// 		.attr("y",50);
  
  // creat x axis
  svg.append("g")
  	.attr("class", "x axis")
    .attr("fill", "black")
    .attr("transform", "translate(" + [0, height - margin.bottom]+")")
    .call(xAxis)
  	.append('text')
  		.attr("y",-3)
  		.attr("x",width-margin.left)
  		.style("text-anchor", "end")
  		.style("fill","black")
  		.text("Life Expectancy")

// create y axis
  svg.append("g")
  	.attr("class", "y axis")
    .attr("fill", "black")
    .attr("transform", "translate(" + [margin.left, 0 ] + ")")
    .call(yAxis)
  	.append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 7)
  		.attr("x",-53)
      .attr("dy", "0.8236em")
      .style("text-anchor", "end")
  		.style("fill","black")
      .text("Annual Income");
      });
    
    
    </script>

</body>

https://d3js.org/d3.v4.min.js

https://d3js.org/d3-hexbin.v0.2.min.js