Gapminder Subset

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>The Wealth & Health of Nations</title>
<style>

text {
  font: 10px sans-serif;
}

.dot {
  stroke: #000;
  opacity: 0.8;
}

.axis path, .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.label {
  fill: #777;
}

</style>
</head>
<body>
<div id="chart"></div>

// Based on https://bost.ocks.org/mike/nations/ and data from gapminder.org

// Chart dimensions.
var margin = {top: 19.5, right: 19.5, bottom: 19.5, left: 19.5},
    width = 960 - margin.right - margin.left,
    height = 500 - margin.top - margin.bottom;

// Create the SVG container and set the origin.
var svg = d3.select("#chart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// Various scales. These domains make assumptions of data.
var xScale = d3.scale.log().domain([400, 70000]).range([0, width]),
    yScale = d3.scale.linear().domain([35, 80]).range([height, 0]),
    radiusScale = d3.scale.sqrt().domain([0, 5e8]).range([3, 40]),
    colorScale = d3.scale.category10();

// The x & y axes.
var xAxis = d3.svg.axis().orient("bottom").scale(xScale).ticks(12, d3.format(",d")),
    yAxis = d3.svg.axis().scale(yScale).orient("left");

// Add the x-axis.
svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

// Add the y-axis.
svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);

// Add an x-axis label.
svg.append("text")
    .attr("class", "x label")
    .attr("text-anchor", "end")
    .attr("x", width)
    .attr("y", height - 6)
    .text("Average GDP per capita");

// Add a y-axis label.
svg.append("text")
    .attr("class", "y label")
    .attr("text-anchor", "end")
    .attr("y", 6)
    .attr("dy", ".75em")
    .attr("transform", "rotate(-90)")
    .text("Average life expectancy (years)");

// Load the data.

//d3.json("nations.json", function(nations) {
d3.csv("gapminder_avg.csv", function(nations) {

// Defines a sort order so that the smallest dots are drawn on top.
  function order(a, b) {
    return +b.population - +a.population;
  }
  
    dots.on("mouseover", function(d) {
      d3.select(this).style("stroke", "yellow").style("stroke-width", 3)
    })
    
    dots.on("mouseout", function(d) {
      d3.select(this).style("stroke", "").style("stroke-width", "")
    })
});

</script>
</body>

Modified http://d3js.org/d3.v3.min.js to a secure url

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