|
<!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> |
|
<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> |
|
|
|
<script id="jsbin-javascript"> |
|
// 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]) |
|
|
|
|
|
// 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> |
