Lecture 4 exercise 4 // source http://jsbin.com/xizor/1

<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3.v3.min.js"></script>
<meta name="description" content="Lecture 4 exercise 4" />
  <meta charset="utf-8">
  <title>JS Bin</title>
<style id="jsbin-css">
.axis path, .axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
</style>
</head>
<body>
  <div style="height:40px;">
    <text><u>Incredible life expectancy visualization </u></text>
  </div>
  <div>
    <svg id="my-svg" height=400 width=500>
    </svg>
  </div>

// Data
var data = [
	{location:'AFG', ex_1960:31.5, ex_2012:60.5}, 
	{location:'ALB', ex_1960:62.3, ex_2012:77.4}, 
	{location:'ARG', ex_1960:65.2, ex_2012:76.0}, 
	{location:'AUS', ex_1960:70.8, ex_2012:82.1}, 
]
  
// Get min/max values for x
var xValues = data.map(function(d) {return d.ex_1960})
var xMin = d3.min(xValues)
var xMax = d3.max(xValues)
  
// Using a function for y
var yMin = d3.min(data, function(d ){return d.ex_2012})
var yMax = d3.max(data, function(d ){return d.ex_2012})
  
// Define the xScale
var xScale = d3.scale.linear().domain([xMin, xMax]).range([settings.radius, settings.width - settings.radius])

// Define the yScale
var yScale = d3.scale.linear().domain([yMin, yMax]).range([settings.height - settings.radius,settings.radius])

// Append circles
d3.select('#my-svg').selectAll('circle')
  .data(data)
  .enter().append('circle')
  .attr('cx', function(d) {return xScale(d.ex_1960)})
  .attr('cy', function(d) {return yScale(d.ex_2012)})
  .attr('r', settings.radius)

// Axis function
xAxis = d3.svg.axis()
  .scale(xScale)
  .orient('bottom')
  .ticks(4)

// Append axis
d3.select('#my-svg').append('g').attr('class', 'axis')
  .attr('transform', 'translate(0,'+ settings.height + ')')
  .call(xAxis)

</script>

</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

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