Built with blockbuilder.org
Last active
November 8, 2016 18:25
-
-
Save oliviac12/8e9adc17c887d8fc6d05a7db0a873063 to your computer and use it in GitHub Desktop.
small_multiples
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <style> | |
| /* svg { | |
| border:1px solid #f0f; | |
| } */ | |
| /* path.line { | |
| fill: none; | |
| } */ | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| //0.define svg & margin convention | |
| //0.5 filter the date for country & cutoff | |
| //1.for each | |
| //2. figure out the scales | |
| //3.axies | |
| //4.draw the line | |
| var compareCountries = ["United Kingdom", "Norway", "Germany", "Canada", "Netherlands", "France", "Sweden", "Ireland", "Spain"] | |
| var containerMargin = {left:50}; | |
| var numCountries = 10 | |
| var margin = {top: 20, right: 10, bottom: 20, left: 10}; | |
| var width = 80 - margin.right - margin.left; | |
| var height = 300 - margin.top - margin.bottom; | |
| var svg = d3.select('body') | |
| .append('svg') | |
| .attr('width', (width + margin.left + margin.right)*compareCountries.length + containerMargin.left) | |
| .attr('height', height + margin.top + margin.bottom) | |
| .append('g') | |
| .attr('transform', 'translate(' + [containerMargin.left, margin.top] + ')'); | |
| var yscale = d3.scaleLinear(); | |
| var xscale = d3.scaleLinear(); | |
| var line = d3.line() | |
| .x(function(d) { return xscale(d.year); }) | |
| .y(function(d) { return yscale(d.val); }); | |
| /*load data */ d3.csv('https://raw.githubusercontent.com/thisismetis/sf16_dataviz2/master/class05/incomes.csv?token=ALYcMG6sLZPTi1NU00YzoNGOhsJeQ88dks5YKn0awA%3D%3D', | |
| function(data){ | |
| // console.log(data) | |
| var filteredData = data.filter(function(d) { | |
| //return counrties that only in the compareCountries array | |
| return compareCountries.indexOf(d.country) > -1 && d.cutoff === 'cop50'; | |
| }); | |
| filteredData.forEach(function(d) { | |
| d.val = +d.val; | |
| d.year = +d.year; | |
| }) | |
| var USData = data.filter(function(d){return d.country === 'United States' && d.cutoff === 'cop50';}) | |
| var incomeByCountry = d3.nest() | |
| .key(function(d){ return d.country}) | |
| .entries(filteredData); | |
| var minMaxY = d3.extent(filteredData, function(d) {return d.val}); | |
| yscale | |
| .range([height, 0]) | |
| .domain([d3.min(filteredData, function(d) {return d.val}) - 5000, | |
| d3.max(filteredData, function(d) {return d.val}) + 5000]); | |
| var minMaxX = d3.extent(filteredData, function(d) {return d.year}); | |
| xscale.domain(minMaxX) | |
| .range([0, width]); | |
| var yaxis = d3.axisLeft() | |
| .scale(yscale) | |
| .tickFormat(d3.format('$,')) // add dollar sigh | |
| var xaxis = d3.axisBottom() | |
| .tickFormat(d3.format('')) // remove the , | |
| .scale(xscale) | |
| .tickValues([1978, 2010]); | |
| var countries = svg.selectAll('.country') | |
| .data(incomeByCountry) | |
| .enter().append('g') | |
| // .attr('transform', function(d, i) { | |
| // return 'translate(' + (i * width) + ',0)'; | |
| // }) | |
| .attr('transform', function(d, i) { | |
| return 'translate(' + (i * (width + margin.right + margin.left)) + ',0)'; | |
| }); | |
| countries.append('text') | |
| .attr('font-size', 12) | |
| .text(function(d){return d.key}) | |
| countries.filter(function(d,i) {return i === 0}) | |
| .append('g') | |
| .call(yaxis); | |
| countries.append("g") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xaxis) | |
| .selectAll('text') | |
| .attr('text-anchor', function(d, i) {return i === 0 ? 'start' : 'end'}) | |
| //in d3, axies are also paths | |
| countries.selectAll('.line') | |
| .data(function(d){return [USData, d.values]}) | |
| .enter().append('path') | |
| .classed('line',true) | |
| .attr('d', line) | |
| .attr('fill', 'none') | |
| .attr('stroke', function(d,i) {return i===0 ? 'steelblue' :'grey'}) | |
| .attr('stroke-width', function(d,i) {return i === 0 ? 3 : 1}); | |
| // countries.append('path') | |
| // .datum(function(d){return d.values}) | |
| // .attr('d', line) | |
| // .attr('fill', 'none') | |
| // .attr('stroke', 'grey'); | |
| // svg.selectAll('path') | |
| // .data(incomeByCountry) | |
| // .enter().append('path') | |
| // .attr('d', function(d) {return line(d.values)}) | |
| // .attr('fill', 'none') | |
| // .attr('stroke', function(d) {return d.key === 'United States' ? 'steelblue' : 'grey'}) | |
| // .attr('stroke-width', function(d) {return d.key === 'United States' ? 3 : 1}) | |
| }); | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment