D3 Examples - Income V. LifeExpectancy

xxxxxxxxxx
 
<!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>
​
<body>
  <script>
​
​
​
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>
    