Second-to-last version of this graph.
Next iteration will include:
Site: danaoira.com | Twitter: @danaoira
Built with blockbuilder.org
forked from danaoira's block: nations-colored
forked from danaoira's block: nations-scatterplot-v4
xxxxxxxxxx
<head>
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body {
margin: 0;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.title {
font-family: "Georgia";
font-size: 32px;
fill: #000;
}
.axis {
font-family: "Arial";
font-size: 11px;
fill: #808080;
}
.circle {
fill-opacity: 0.75;
stroke: #c0c0c0;
}
.domain {
stroke: #c0c0c0;
}
.tick > line {
stroke: #c0c0c0;
}
.year {
font-family: "Georgia";
font-size: 100px;
fill: #d0d0d0;
}
</style>
</head>
<body>
<script>
/* Input: nations.json
Output: x-axis = income
y-axis = lifeExpectancy
radius = population
color = region
Bonus: use the raw data from class 3 and create the final dataset yourself. Add axes and labels.
For extra practice: visualize the barley yield data. */
var scales = {};
var year = 1950;
var filterByYear = function(input, year) {
var result = [];
input.forEach(function(i) {
var country = {
year: null,
country: null,
region: null,
income: null,
lifeExpectancy: null,
population: null
}
var getIncome = getAttrByYear(i, country, year, "income");
var getLifeExpectancy = getAttrByYear(i, country, year, "lifeExpectancy");
var getPopulation = getAttrByYear(i, country, year, "population");
country.country = i.name;
country.region = i.region;
country.year = year;
result.push(country);
});
return result;
};
var getAttrByYear = function(input, output, year, attr) {
input[attr].forEach(function(d) {
if (d[0] === year) {
return output[attr] = d[1];
}
});
};
var getMinMax = function(input, attr) {
var min = 99999999;
var max = 0;
input.forEach(function(d) {
d[attr].forEach(function(i) {
if (i[1] < min) {
min = i[1];
}
if (i[1] > max) {
max = i[1];
}
});
});
return [min, max];
};
var update = function(data, svg, scales, year) {
var newData = filterByYear(data, year);
var selection = svg.selectAll("circle")
.data(newData);
selection.enter()
.append("circle")
.merge(selection)
.transition()
.attr("cx", function(d) {
if (d.income != null) {
return scales.xSca(d.income)
}})
.attr("cy", function(d) {
if (d.lifeExpectancy != null) {
return scales.ySca(d.lifeExpectancy)
}
})
.attr("r", function(d) {
if ((d.income && d.lifeExpectancy && d.population) != null) {
return scales.rSca(d.population)
}
})
.attr("id", function(d) { return d.country })
.attr("fill", function(d) { return scales.cSca(d.region) })
.attr("class", "circle");
d3.select(".year").text(year);
selection.exit().remove();
};
d3.json("nations.json", function(error, data) {
if (error) return error;
console.log(data); // original data
// data
// var year = 1950;
newData = filterByYear(data, year);
console.log(newData); // filtered data
// vars -----------------------------------------------------------
var margin = { top: 20, right: 20, bottom: 20, left: 20 };
var width = 960 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;
// min-max
var xExtent = getMinMax(data, "income");
var yExtent = getMinMax(data, "lifeExpectancy");
var rExtent = getMinMax(data, "population");
var colorDomain = d3.nest().key(function(d) { return d.region }).object(newData);
console.log("xExtent = ", xExtent, "yExtent = ", yExtent, "rExtent = ", rExtent);
// scales
var xScale = d3.scaleLog()
.domain([100, xExtent[1]])
.range([0, width + margin.left]);
var yScale = d3.scaleLinear()
.domain([0, (yExtent[1] + 5)])
.range([height, 0]);
var rScale = d3.scaleSqrt()
.domain(rExtent)
.range([0,90]);
var colorScale = d3.scaleOrdinal()
.domain(colorDomain)
.range(["Pink", "LightCyan", "Gainsboro", "Thistle", "MintCream", "LemonChiffon"]);
scales = {
xExt : xExtent,
yExt : yExtent,
rExt : rExtent,
color: colorDomain,
xSca : xScale,
ySca : yScale,
rSca : rScale,
cSca : colorScale
};
// axes
var x = d3.axisBottom()
.scale(xScale)
.ticks(10, ".0f");
var y = d3.axisLeft()
.scale(yScale);
// graph ----------------------------------------------------------
// svg
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + ", " + margin.top + ")");
// axes
var xAxis = svg.append("g")
.call(x)
.attr("transform", "translate(0, " + height + ")");
var yAxis = svg.append("g")
.call(y);
// labels
var xLabel = xAxis.append("text")
.text("income per capita, inflation adjusted (dollars)")
.attr("class", "axis")
.attr("transform", "translate(" + (width + margin.left) + ", " + 0.5 * -margin.bottom + ")")
.attr("text-anchor", "end");
var yLabel = yAxis.append("text")
.text("life expectancy (years)")
.attr("class", "axis")
.attr("transform", "translate(" + (margin.left * 0.85) + ", 0) rotate(-90)");
var yrLabel = svg.append("text")
.text(year)
.attr("class", "year")
.attr("transform", "translate(" + (width - 215) + ", " + (height - margin.bottom * 2.5) + ")")
// update(data, svg, scales, year);
window.svg = svg;
var interval = window.setInterval(function() {
if (year > 2009) {
year = 1950;
}
update(data, svg, scales, year);
year++;
}, 250);
});
</script>
</body>
</html>
https://d3js.org/d3.v4.min.js