D3 Examples - Water Sustainability and GDP

xxxxxxxxxx
 
<!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>
​
​
<div id="container">
​
      <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>
​
    <script type="text/javascript">
​
​
​
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>
    