Built with blockbuilder.org
forked from sxywu's block: Metis Class 5
license: mit |
Built with blockbuilder.org
forked from sxywu's block: Metis Class 5
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<style> | |
/* i always delete that margin thing in the style */ | |
</style> | |
</head> | |
<body> | |
<script> | |
// let's define the margins | |
var margin = {top: 20, right: 20, bottom: 20, left: 50}; | |
var width = 600 - margin.right - margin.left; | |
var height = 300 - margin.top - margin.bottom; | |
// let's do smaller numbers so that we can see | |
// what now? | |
var svg = d3.select('body') | |
.append('svg') | |
.attr('width', width + margin.right + margin.left) | |
.attr('height', height + margin.top + margin.bottom) | |
// <g> is an SVG group element, and everything | |
// within it (circle, rect, line, path, etc.) is relative to it | |
.append('g') | |
.attr('transform', 'translate(' + [margin.left, margin.top] + ')'); | |
// load data | |
var url = 'https://raw.githubusercontent.com/thisismetis/sf16_dataviz2/master/class05/incomes.csv?token=ABYaAQeuKqG3rafZDHXI6azZ__twa65cks5YKn0JwA%3D%3D'; | |
d3.csv(url, function(data) { | |
var filteredData = data.filter(function(d) { | |
return d.cutoff === 'cop50'; | |
}); | |
filteredData.forEach(function(d) { | |
d.val = +d.val; | |
d.year = +d.year; | |
}); | |
var incomeByCountry = d3.nest() | |
.key(function(d) {return d.country}) | |
.entries(filteredData); | |
// scales!! | |
// y is linear because income value is | |
// continuous (but you can use log scale, power scale, etc.) | |
var yScale = d3.scaleLinear() | |
.range([height, 0]) | |
// what to use for domain is a lot of trial and error | |
// for that matter, which scale to use is | |
// also just trial and error to see what looks good | |
.domain( | |
[d3.min(filteredData, function(d) {return d.val}) - 5000, | |
d3.max(filteredData, function(d) {return d.val}) + 5000] | |
); | |
// let's just keep it simple, and use scaleLinear for x-scale also | |
// (they're all just years) | |
var xScale = d3.scaleLinear() | |
.range([0, width]) | |
.domain(d3.extent(filteredData, function(d) {return d.year})); | |
var yAxis = d3.axisLeft() | |
.scale(yScale) | |
.tickFormat(d3.format('$,')); | |
var xAxis = d3.axisBottom() | |
.scale(xScale) | |
.tickFormat(d3.format('')); | |
// now we gotta draw the axes | |
svg.append('g') | |
.call(yAxis); | |
svg.append('g') | |
.attr('transform', 'translate(' + [0, height] + ')') | |
.call(xAxis); | |
// and draw the line! | |
// we're only drawing one line, do we need to select all? | |
var line = d3.line() | |
.x(function(d) {return xScale(d.year)}) | |
.y(function(d) {return yScale(d.val)}); | |
console.log(incomeByCountry) | |
svg.selectAll('path') | |
.data(incomeByCountry) | |
.enter().append('path') | |
.attr('d', function(d) {return line(d.values)}) | |
.attr('fill', 'none') | |
// (if statement) ? (then do this) : (else do this) | |
.attr('stroke', function(d) {return d.key === 'United States' ? 'steelblue' : 'gray'}) | |
.attr('stroke-width', function(d) {return d.key === 'United States' ? 3 : 1}); | |
}) | |
</script> | |
</body> |