small_multiples

<!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] + ')');

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>

https://d3js.org/d3.v4.min.js