Class 02 Homework - Life & Income

<!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; }
  </style>
</head>

<body>
  <svg></svg>
  <script>
    var data = [{"name":"Angola","income":5055.59,"lifeExpectancy":47.58},{"name":"Benin","income":1457.57,"lifeExpectancy":61.89},{"name":"Botswana","income":12282.28,"lifeExpectancy":55.12},{"name":"Burkina Faso","income":1234.42,"lifeExpectancy":53.38},{"name":"Burundi","income":457.07,"lifeExpectancy":50.95},{"name":"Cameroon","income":1997.18,"lifeExpectancy":51.39},{"name":"Cape Verde","income":3456.14,"lifeExpectancy":71.68},{"name":"Chad","income":1557.83,"lifeExpectancy":48.97},{"name":"Comoros","income":1016.42,"lifeExpectancy":65.77},{"name":"Congo, Dem. Rep.","income":358.8,"lifeExpectancy":47.81},{"name":"Congo, Rep.","income":3834.67,"lifeExpectancy":53.75},{"name":"Cote d'Ivoire","income":1520.23,"lifeExpectancy":57.86},{"name":"Equatorial Guinea","income":15342.2,"lifeExpectancy":50.64},{"name":"Eritrea","income":548.37,"lifeExpectancy":60.03},{"name":"Ethiopia","income":812.16,"lifeExpectancy":55.69},{"name":"Gabon","income":12704.99,"lifeExpectancy":60.89},{"name":"Ghana","income":1382.95,"lifeExpectancy":56.83},{"name":"Guinea","income":908.86,"lifeExpectancy":58.35},{"name":"Guinea-Bissau","income":568.94,"lifeExpectancy":48.2},{"name":"Kenya","income":1493.53,"lifeExpectancy":54.95},{"name":"Lesotho","income":1521.4,"lifeExpectancy":45.56},{"name":"Liberia","income":474.9,"lifeExpectancy":58.71},{"name":"Madagascar","income":1006.9,"lifeExpectancy":60.81},{"name":"Malawi","income":866.35,"lifeExpectancy":53.88},{"name":"Mali","income":1136.17,"lifeExpectancy":48.84},{"name":"Mauritania","income":1775.87,"lifeExpectancy":56.99},{"name":"Mauritius","income":11411.53,"lifeExpectancy":72.1},{"name":"Mayotte","income":9617.82,"lifeExpectancy":75.99},{"name":"Mozambique","income":888.65,"lifeExpectancy":48.13},{"name":"Namibia","income":4952.26,"lifeExpectancy":61.72},{"name":"Niger","income":643.39,"lifeExpectancy":51.95},{"name":"Nigeria","income":2158.98,"lifeExpectancy":48.17},{"name":"Reunion","income":7670.12,"lifeExpectancy":76.64},{"name":"Rwanda","income":995.27,"lifeExpectancy":50.69},{"name":"Sao Tome and Principe","income":1703.43,"lifeExpectancy":65.86},{"name":"Senegal","income":1700.05,"lifeExpectancy":55.91},{"name":"Sierra Leone","income":893.6,"lifeExpectancy":47.95},{"name":"Somalia","income":943.04,"lifeExpectancy":50.09},{"name":"South Africa","income":9141.27,"lifeExpectancy":51.72},{"name":"Sudan","income":2778.61,"lifeExpectancy":58.5},{"name":"Swaziland","income":4728.18,"lifeExpectancy":46.36},{"name":"Tanzania","income":1220.25,"lifeExpectancy":56.35},{"name":"Togo","income":888.01,"lifeExpectancy":62.93},{"name":"Uganda","income":1202.53,"lifeExpectancy":53.47},{"name":"Zambia","income":1442.06,"lifeExpectancy":46.4},{"name":"Zimbabwe","income":443.74,"lifeExpectancy":45.72},{"name":"Afghanistan","income":1216.68,"lifeExpectancy":44.3},{"name":"Bangladesh","income":1492,"lifeExpectancy":66.56},{"name":"Bhutan","income":5053.83,"lifeExpectancy":66.42},{"name":"India","income":2731,"lifeExpectancy":64.01},{"name":"Maldives","income":5081.79,"lifeExpectancy":71.94},{"name":"Nepal","income":1224.73,"lifeExpectancy":67.12},{"name":"Pakistan","income":2603,"lifeExpectancy":66.84},{"name":"Sri Lanka","income":4254.13,"lifeExpectancy":74.24},{"name":"Algeria","income":6207.17,"lifeExpectancy":72.67},{"name":"Bahrain","income":24226.51,"lifeExpectancy":75.88},{"name":"Djibouti","income":2176.79,"lifeExpectancy":55.78},{"name":"Iraq","income":3518.18,"lifeExpectancy":68.1},{"name":"Israel","income":25463.69,"lifeExpectancy":81},{"name":"Jordan","income":5109.39,"lifeExpectancy":72.88},{"name":"Kuwait","income":42443.53,"lifeExpectancy":77.79},{"name":"Lebanon","income":12766.21,"lifeExpectancy":72.26},{"name":"Libya","income":12051.62,"lifeExpectancy":74.28},{"name":"Morocco","income":4162.93,"lifeExpectancy":71.58},{"name":"Oman","income":22804.85,"lifeExpectancy":75.94},{"name":"Qatar","income":74138.28,"lifeExpectancy":75.81},{"name":"Saudi Arabia","income":21138.18,"lifeExpectancy":73.1},{"name":"Tunisia","income":7499.61,"lifeExpectancy":74.15},{"name":"United Arab Emirates","income":33734.94,"lifeExpectancy":77.58},{"name":"West Bank and Gaza","income":3084.56,"lifeExpectancy":73.74},{"name":"Yemen, Rep.","income":2313.16,"lifeExpectancy":63.39},{"name":"Argentina","income":13498.04,"lifeExpectancy":75.52},{"name":"Aruba","income":25351.09,"lifeExpectancy":74.92},{"name":"Barbados","income":15846.77,"lifeExpectancy":77.51},{"name":"Belize","income":6998.08,"lifeExpectancy":76.6},{"name":"Bolivia","income":4007.16,"lifeExpectancy":66.01},{"name":"Brazil","income":9569.78,"lifeExpectancy":72.68},{"name":"Canada","income":34569.63,"lifeExpectancy":80.89},{"name":"Chile","income":13087.38,"lifeExpectancy":78.67},{"name":"Colombia","income":7090.69,"lifeExpectancy":73.19},{"name":"Costa Rica","income":9551.56,"lifeExpectancy":78.98},{"name":"Cuba","income":9277.96,"lifeExpectancy":78.84},{"name":"Ecuador","income":7035.45,"lifeExpectancy":75.26},{"name":"El Salvador","income":5646.85,"lifeExpectancy":71.74},{"name":"French Guiana","income":8202.74,"lifeExpectancy":76.16},{"name":"Grenada","income":8826.9,"lifeExpectancy":75.62},{"name":"Guadeloupe","income":7788.25,"lifeExpectancy":79.28},{"name":"Guatemala","income":5163.22,"lifeExpectancy":70.55},{"name":"Guyana","income":3776.95,"lifeExpectancy":67.43},{"name":"Haiti","income":1198.05,"lifeExpectancy":61.48},{"name":"Honduras","income":3473.46,"lifeExpectancy":72.41},{"name":"Jamaica","income":7023.74,"lifeExpectancy":72.11},{"name":"Martinique","income":14627.13,"lifeExpectancy":79.77},{"name":"Mexico","income":11250.37,"lifeExpectancy":76.47},{"name":"Netherlands Antilles","income":23178.37,"lifeExpectancy":76.38},{"name":"Nicaragua","income":2591.39,"lifeExpectancy":73.44},{"name":"Panama","income":10796.68,"lifeExpectancy":75.81},{"name":"Paraguay","income":4054.3,"lifeExpectancy":72.07},{"name":"Peru","income":7858.97,"lifeExpectancy":73.47},{"name":"Puerto Rico","income":18970.51,"lifeExpectancy":78.95},{"name":"Suriname","income":8199.03,"lifeExpectancy":69.16},{"name":"Trinidad and Tobago","income":17826.05,"lifeExpectancy":69.7},{"name":"United States","income":41256.08,"lifeExpectancy":79.43},{"name":"Uruguay","income":11461.03,"lifeExpectancy":76.5},{"name":"Albania","income":6546.27,"lifeExpectancy":76.74},{"name":"Armenia","income":4523.44,"lifeExpectancy":74.03},{"name":"Austria","income":35636.42,"lifeExpectancy":80.23},{"name":"Azerbaijan","income":9088.42,"lifeExpectancy":70.6},{"name":"Belarus","income":11574.43,"lifeExpectancy":69.4},{"name":"Belgium","income":32256.64,"lifeExpectancy":80.05},{"name":"Bosnia and Herzegovina","income":7341.98,"lifeExpectancy":75.34},{"name":"Bulgaria","income":10840.26,"lifeExpectancy":73.53},{"name":"Croatia","income":14110.46,"lifeExpectancy":76.49},{"name":"Cyprus","income":25643.45,"lifeExpectancy":79.85},{"name":"Denmark","income":32670.06,"lifeExpectancy":78.57},{"name":"Estonia","income":16349.13,"lifeExpectancy":73.5},{"name":"Finland","income":30602.73,"lifeExpectancy":79.9},{"name":"France","income":29774.85,"lifeExpectancy":81.47},{"name":"Georgia","income":4168.7,"lifeExpectancy":71.86},{"name":"Germany","income":31191.15,"lifeExpectancy":80.08},{"name":"Greece","income":27626.11,"lifeExpectancy":79.5},{"name":"Hungary","income":16982.8,"lifeExpectancy":73.67},{"name":"Iceland","income":34989.73,"lifeExpectancy":81.95},{"name":"Ireland","income":35692.95,"lifeExpectancy":80.16},{"name":"Italy","income":26160.59,"lifeExpectancy":81.34},{"name":"Kazakhstan","income":10612.29,"lifeExpectancy":65.18},{"name":"Latvia","income":13021.94,"lifeExpectancy":72.77},{"name":"Lithuania","income":14928.78,"lifeExpectancy":71.93},{"name":"Luxembourg","income":70857.46,"lifeExpectancy":79.75},{"name":"Macedonia, FYR","income":8364.79,"lifeExpectancy":74.4},{"name":"Malta","income":21327.85,"lifeExpectancy":79.91},{"name":"Moldova","income":2593.42,"lifeExpectancy":68.72},{"name":"Montenegro","income":12257.79,"lifeExpectancy":74.34},{"name":"Netherlands","income":36074.53,"lifeExpectancy":80.19},{"name":"Norway","income":47915,"lifeExpectancy":80.85},{"name":"Poland","income":16465.8,"lifeExpectancy":75.84},{"name":"Portugal","income":19898.43,"lifeExpectancy":78.94},{"name":"Romania","income":10868.12,"lifeExpectancy":72.99},{"name":"Serbia","income":10005.22,"lifeExpectancy":74.23},{"name":"Slovak Republic","income":19186.01,"lifeExpectancy":74.94},{"name":"Slovenia","income":24778.21,"lifeExpectancy":78.63},{"name":"Spain","income":26811.93,"lifeExpectancy":81.11},{"name":"Sweden","income":32021,"lifeExpectancy":81.12},{"name":"Switzerland","income":38003.92,"lifeExpectancy":82.06},{"name":"Tajikistan","income":1775.38,"lifeExpectancy":67.07},{"name":"Turkey","income":8040.78,"lifeExpectancy":72.06},{"name":"Turkmenistan","income":5702.66,"lifeExpectancy":65.06},{"name":"Ukraine","income":5730.86,"lifeExpectancy":68.45},{"name":"United Kingdom","income":31042.47,"lifeExpectancy":79.64},{"name":"Uzbekistan","income":2586.96,"lifeExpectancy":67.97},{"name":"Australia","income":34327.26,"lifeExpectancy":81.71},{"name":"Brunei","income":44738.99,"lifeExpectancy":77.32},{"name":"Cambodia","income":1830.97,"lifeExpectancy":61.67},{"name":"China","income":7226.07,"lifeExpectancy":73.28},{"name":"Fiji","income":4016.2,"lifeExpectancy":69.05},{"name":"French Polynesia","income":26733.88,"lifeExpectancy":74.59},{"name":"Hong Kong, China","income":39086.39,"lifeExpectancy":82.4},{"name":"Indonesia","income":3818.08,"lifeExpectancy":71.17},{"name":"Japan","income":29680.68,"lifeExpectancy":82.98},{"name":"Korea, Dem. Rep.","income":1635,"lifeExpectancy":67.53},{"name":"Korea, Rep.","income":23875,"lifeExpectancy":79.65},{"name":"Macao, China","income":57436.68,"lifeExpectancy":80.95},{"name":"Malaysia","income":12387.67,"lifeExpectancy":74.54},{"name":"Micronesia, Fed. Sts.","income":4994.56,"lifeExpectancy":68.81},{"name":"Mongolia","income":3205.17,"lifeExpectancy":66.93},{"name":"Myanmar","income":1269.14,"lifeExpectancy":62.14},{"name":"New Caledonia","income":30959.74,"lifeExpectancy":76.36},{"name":"New Zealand","income":24009.46,"lifeExpectancy":80.45},{"name":"Papua New Guinea","income":1947.16,"lifeExpectancy":61.29},{"name":"Philippines","income":3203.97,"lifeExpectancy":72.1},{"name":"Samoa","income":5003.61,"lifeExpectancy":71.92},{"name":"Singapore","income":43526.04,"lifeExpectancy":80.58},{"name":"Solomon Islands","income":1903.69,"lifeExpectancy":66.66},{"name":"Taiwan","income":28361,"lifeExpectancy":78.6},{"name":"Thailand","income":7376.17,"lifeExpectancy":69.08},{"name":"Timor-Leste","income":2475.68,"lifeExpectancy":61.6},{"name":"Tokelau","income":889.43,"lifeExpectancy":69},{"name":"Tonga","income":5104.06,"lifeExpectancy":71.96},{"name":"Vietnam","income":2679.34,"lifeExpectancy":74.7},{"name":"Vanuatu","income":3943.3,"lifeExpectancy":70.5}
];
    //dimensions
    var margin = {top: 40, bottom: 40, left: 40, right: 40}
    var height = 500 - margin.bottom - margin.top
    var width = 900 - margin.left - margin.right
   
    
    //scales
     var xExtent = d3.extent(data, d => d.income);
      var xScale = d3.scaleLinear()
      	.domain(xExtent)
      	.range([0, width]);
     var yExtent = d3.extent(data, d => d.lifeExpectancy);
      var yScale = d3.scaleLinear()
      	.domain(yExtent)
      	.range([height, 0]);
    
    //create the circles
    var svg = d3.select('svg')
			.attr("width", width + margin.left + margin.right)
			.attr("height", height + margin.top + margin.bottom)
    	.append("g")
    	.attr("transform", "translate(" + margin.left +"," + margin.top +")");
        
    svg.selectAll('circle')
    	.data(data)
    	.enter().append('circle')
  		.attr("cx", function(d) {return xScale(d.income)
                              })
  		.attr("cy", function(d) {return yScale(d.lifeExpectancy)
                              })
  		.attr("r", 2)
  		.style("fill", "fbd0d5")
  		.style("stroke", "df729d")
    
      //Axis
      var xAxis = d3.axisBottom()
      	.scale(xScale)
      var yAxis = d3.axisLeft()
      	.scale(yScale);
    
      svg.append('g')
      	.attr("transform", "translate(" + [0,height]+")")
        .call(xAxis);
      svg.append('g')
      	.attr("transform", "translate(0,0)")
        .call(yAxis);
  </script>
</body>

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