Water Sustainability and GDP

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<style type="text/css">
body {

margin: 0;
        background-color: lightGray;
        font-family: Helvetica, Arial, sans-serif;
      }

#container {
        width: 600px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 20px;
        padding: 20px;
        background-color: white;
        box-shadow: 3px 3px 5px 6px #ccc;
      }

h1 {
    font-size: 14px;
    margin: 0;
  }

p {
      font-size: 10px;
      margin: 0;
  }

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

.dot {
  stroke: #000;
}

.tooltip {
  position: absolute;
  width: 200px;
  height: 28px;
  pointer-events: none;
  font-size: 10px;
}

.axis text {
        font-family: sans-serif;
        font-size: 10px;
      }

.legend text {
        font-family: sans-serif;
        font-size: 10px;
      }

</style>
</head>
<body>

<h1>Current Water Availability and Renewable Water Resouces are related to GDP</h1>

<p>Looking at current and future water resources by country and relating it to GDP.  <strong>Enough Water</strong> is measured by the percent of the population who has enough clean water to drink.  <strong>Renewable Water Resources </strong>is measured by the water consumption per year as a percentage of total available renewable water resources.  <strong>Source:</strong> <a href="https://www.ssfindex.com/">Sustainable Society Index, 2014</a></p>

</div>

var marginb = {top: 20, right: 20, bottom: 30, left: 40},
    width = 600- marginb.left - marginb.right,
    height = 400 - marginb.top - marginb.bottom;

// setup x 
var xValue = function(d) { return d.SufficienttoDrink;}, // data -> value
    xScale = d3.scale.linear().range([0, width]), // value -> display
    xMap = function(d) { return xScale(xValue(d));}, // data -> display
    xAxis = d3.svg.axis().scale(xScale).orient("bottom");

// setup y
var yValue = function(d) { return d["RenewableWaterResources"];}, // data -> value
    yScale = d3.scale.linear().range([height, 0]), // value -> display
    yMap = function(d) { return yScale(yValue(d));}, // data -> display
    yAxis = d3.svg.axis().scale(yScale).orient("left");

//setup delay

var dValue = function(d) { return d["RenewableWaterResources"] *3 + 1000;}

// setup fill color
var cValue = function(d) { return d.GDPLevel;},
    color = d3.scale.category10();

// add the svg
var svg = d3.select("#container").append("svg")
    .attr("width", width + marginb.left + marginb.right)
    .attr("height", height + marginb.top + marginb.bottom)
    .append("g")
    .attr("transform", "translate(" + marginb.left + "," + marginb.top + ")") ;

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

// load data
d3.csv("Sustainable.csv", function(error, data) {

// change string (from CSV) into number format
  data.forEach(function(d) {
    d.SufficienttoDrink = +d.SufficienttoDrink;
    d["RenewableWaterResources"] = +d["RenewableWaterResources"];
//    console.log(d);
  });

// buffer the axis
  xScale.domain([d3.min(data, xValue)-1, d3.max(data, xValue)+1]);
  yScale.domain([d3.min(data, yValue)-1, d3.max(data, yValue)+1]);

// x-axis
  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
      .append("text")
      .attr("class", "label")
      .attr("x", width)
      .attr("y", +28)
      .style("text-anchor", "end")
      .text("Enough Water To Drink");

// y-axis
  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
      .append("text")
      .attr("class", "label")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Renewable Water Resources");

// draw circles
  svg.selectAll(".dot")
      .data(data)
    .enter().append("circle")
      .attr("class", "dot")
      .attr("r", 3.5)
      .attr("cx", xMap)
      .attr("cy", yMap)
      .style("fill", function(d) { return color(cValue(d));}) 
      .on("mouseover", function(d) {
          tooltip.transition()
               .duration(200)
               .style("opacity", .9);
          tooltip.html(d["Country"] + "<br/> (" + xValue(d) 
	        + ", " + yValue(d) + ")")
               .style("left", (d3.event.pageX + 5) + "px")
               .style("top", (d3.event.pageY - 28) + "px");
      })
      .on("mouseout", function(d) {
          tooltip.transition()
               .duration(500)
               .style("opacity", 0);
      })
      .style("opacity", 0)
      .transition()
      .delay(dValue)
      .style("opacity", 1);

// draw legend
  var legend = svg.selectAll(".legend")
      .data(color.domain())
    .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

// draw legend colored rectangles
  legend.append("rect")
      .attr("x", width - 500)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);

// draw legend text
  legend.append("text")
      .attr("x", width - 480)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "start")
      .text(function(d) { return d;})
});

</script>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js