D3 Examples - wealth & health of nations

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    
    div.tooltip {
      position: absolute;
      text-align: center;
      width: 60px;
      height: 56px;
      padding: 2px;
      font: 12px sans-serif;
      background: cyan;
      border: 0px;
      border-radius: 8px;
      pointer-events: none;
    }
  </style>
  
  
</head>
​
<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
     
//  HOMEWORK:
//     https://github.com/thisismetis/sf17_dataviz3/tree/master/class02
//     
//  SOURCES:
// 
//  Blocks builder axis: https://blockbuilder.org/sxywu/8045c7e4f4aebce27722e23eec960a6b
//  FEM: Exercise 1 Starter code: https://blockbuilder.org/sxywu/909992222842cdbda009006e456a23b0
//  Margin convention: https://bl.ocks.org/mbostock/3019563
// Axis labels and SVG: https://bl.ocks.org/d3noob/23e42c8f67210ac6c678db2cd07a747e
// Scatterplot with v4: https://bl.ocks.org/d3noob/6f082f0e3b820b6bf68b78f2f7786084    
//  D3 scales: https://github.com/d3/d3/blob/master/API.md#scales-d3-scale    
    
    
​
  d3.json("world_data.json", function(error, data) {
    if (error) { throw error}; 
    console.log('World Data json', data);
     
    // Define the margin object with properties for the four sides
   var margin = {top: 20, right: 20, bottom: 50, left: 70};
    // define width and height as the INNER dimensions of the chart area     
   var width = 960 - margin.left - margin.right;
   var height = 500 - margin.top - margin.bottom;
   console.log('margin', margin);
   console.log('width', width);
   console.log('height', height);
​
        //      X-axis setup
        var xExtent = d3.extent(data, d => d.income);
    console.log('xExtent', xExtent);
​
    var xScale = d3.scaleLog()
        .domain([300, xExtent[1]]) // income per capita data
        .range([0 , width]) // screen space display
    console.log('xScale', xScale)
    
        // Y-axis
        // extent provides min, max    
    var yExtent = d3.extent(data, d => d.lifeExpectancy);
    console.log('yExtent', yExtent);
        // maximum value for y      
        var yMax = d3.max(data, d => d.lifeExpectancy);
    console.log('yMax', yMax);
​
    var yScale = d3.scaleLinear()
        .domain([0, yExtent[1]]) // life expectancy data
        .range([height, 0]) // screen space display
    console.log('yScale', yScale);
   
        // X and Y Axis     
    var xAxis = d3.axisBottom()
        .scale(xScale)
    var yAxis = d3.axisLeft()
        .scale(yScale);
    
    // Append the svg object to the body of the page
        // appends a 'group' element to 'svg'
        // moves the 'group' element to the top left margin
    var svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")  //     define svg as a G element that translates the origin to the top-left corner of the chart area.
      .attr("transform",
            "translate(" + margin.left + "," + margin.top + ")") //(translate (20, 20)
    
        // Append X-axis    
    svg.append('g')
      .attr("transform", "translate(0," + height + ")") // Move x-axis down translate(tx, ty) / (0, 500 - margin.top - margin.bottom)
        .call(xAxis)
    
        // Append Y-axis     
    svg
      .append('g')
      .call(yAxis)
​
//     
    
var div = d3.select("body").append("div")
    .attr("class", "tooltip")
    .style("opacity", 0);
        // Create scatter plot
        // Bind circles to income (x coord), and lifeExpectancy (y)     
    svg.selectAll('dot')
        .data(data)
        .enter().append("circle")
      .attr("r", 3)
//      .attr("r", d => d.lifeExpectancy*0.1)
      .attr("cx", function(d) { return xScale(d.income); })
      .attr("cy", function(d) { return yScale(d.lifeExpectancy); })
      .on("mouseover", function(d) {
       div.transition()
         .duration(200)
         .style("opacity", .9);
       div.html("Hello" + "<br/>" + d.name)
         .style("left", (d3.event.pageX) + "px")
         .style("top", (d3.event.pageY - 28) + "px");
       })
     .on("mouseout", function(d) {
       div.transition()
         .duration(500)
         .style("opacity", 0);
       });
        
    // text label for the y axis
    svg.append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 0 - margin.left)
        .attr("x",0 - (height / 2))
        .attr("dy", "1em")
        .style("text-anchor", "middle")
        .text("Life Expectancy");
    
     // text label for the x axis
  svg.append("text")             
      .attr("transform",
            "translate(" + (width/2) + " ," + 
                           (height + margin.top + 20) + ")")
      .style("text-anchor", "middle")
      .text("Income per capita");
    
   });
  </script>
</body>
​
    