Skip to content

Instantly share code, notes, and snippets.

@sxywu
Last active November 8, 2016 05:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sxywu/2dcb31ef27a33c2e7e0f5c975a8fc8c1 to your computer and use it in GitHub Desktop.
Save sxywu/2dcb31ef27a33c2e7e0f5c975a8fc8c1 to your computer and use it in GitHub Desktop.
Metis Class 5, #3
license: mit
<!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 compareCountries = ["United Kingdom", "Norway", "Germany", "Canada", "Netherlands", "France", "Sweden", "Ireland", "Spain"];
var margin = {top: 20, right: 10, bottom: 20, left: 10};
var width = 80 - 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) * compareCountries.length)
.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) {
// filter and get only the countries in compareCountries
// indexOf is a Javascript function
// that takes an element and sees what index it is in the array
// if it's not in array, it returns -1
// the below statement is seeing if the country
// is in the compareCountries array
return compareCountries.indexOf(d.country) > -1 && d.cutoff === 'cop50';
});
console.log(filteredData)
filteredData.forEach(function(d) {
d.val = +d.val;
d.year = +d.year;
});
var americaData = data.filter(function(d) {
return d.country === 'United States' && d.cutoff === 'cop50';
})
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(''));
// 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)
var countries = svg.selectAll('.country')
.data(incomeByCountry)
.enter().append('g')
.attr('transform', function(d, i) {
return 'translate(' + (i * width) + ',0)';
});
// now we gotta draw the axes
countries.filter(function(d, i) {return i === 0})
.append('g')
.call(yAxis);
countries.append('g')
.attr('transform', 'translate(' + [0, height] + ')')
.call(xAxis);
countries.append('path')
.datum(function(d) {return d.values})
.attr('d', line)
.attr('fill', 'none')
.attr('stroke', 'gray');
})
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment