mkfreeman/jsbin.lufex.css

## jsbin.lufex.css
.axis path, .axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}

## jsbin.lufex.html
<!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<meta name="description" content="Lecture 4 exercise 4" />
  <meta charset="utf-8">
  <title>JS Bin</title>
</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>

</body>
</html>

## jsbin.lufex.js
// Width and height settings
var settings = {
  width:200,
  height:100,
  radius:10
}

// 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])

// Set x and y values
data.map(function(d) {
  d.x = xScale(d.ex_1960)
  d.y = yScale(d.ex_2012)
})

// 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)
	.axis path, .axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<meta name="description" content="Lecture 4 exercise 4" />
	<meta charset="utf-8">
	<title>JS Bin</title>
	</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>

	</body>
	</html>
	// Width and height settings
	var settings = {
	width:200,
	height:100,
	radius:10
	}

	// 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])

	// Set x and y values
	data.map(function(d) {
	d.x = xScale(d.ex_1960)
	d.y = yScale(d.ex_2012)
	})

	// 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)