D3 Examples - Multiple line graphs

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
​
<style type="text/css">
    body {
        font-family: sans-serif;
    }
​
    .g-country-path {
        stroke: #d0d0d0;
        stroke-width: 1px;
        fill: none;
    }
​
    .income-value {
        fill: steelBlue;
        stroke: white;
        stroke-width: 1px;
    }
​
    .axis text {
      font-size: 12px;
      fill: #777;
      font-family:sans-serif;
    }
​
    .axis path {
      display: none;
    }
​
    .axis line {
      stroke-width:1px;
      stroke: #ccc;
      stroke-dasharray: 2px 2px;
    }
​
    .g-baseline line {
        stroke: black;
        stroke-dasharray: 0;
        stroke-width: 2px;
    }
​
    .g-usa-line {
        stroke: steelblue;
        stroke-width: 3px;
        fill: none;
    }
​
    .g-chart-container {
        display: inline-block;
​
    }
​
</style>
​
<body>
    <div class="g-chart-container"></div>
</body> 
​
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<script src="https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
​
<script> 
var compareCountries = ["United Kingdom", "Norway", "Germany", "Canada", "Netherlands", "France", "Sweden", "Ireland", "Spain"]
​
//margin convention
var margin = {top: 0, right: 60, bottom: 20, left: 10};
​
var width = 200 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;
​
var xScale = d3.scale.linear()
    .range([0, width]);
​
var yScale = d3.scale.linear()
    .range([height, 0]); 
​
var xAxis = d3.svg.axis()
    .scale(xScale)
    .tickSize(-height)
    .tickPadding(8)
    .ticks(4)
    .tickFormat(d3.round)
    .orient("bottom");
​
var yAxis = d3.svg.axis()
    .scale(yScale)
    .tickSize(-width)
    .tickPadding(8)
    .orient("right")
    .tickFormat(d3.format("$,"));       
​
//line function convention (feeds an array)
var line = d3.svg.line()
    .x(function(d) { return xScale(d.year); })
    .y(function(d) { return yScale(d.val); });    
​
//load data
d3.csv("incomes.csv", ready); 
​
function ready(err, data) {
   if (err) throw "error loading data"; 
​
   console.log("data loaded", data);
 
​
//FORMAT data
   data.forEach(function(d) {
      d.year = +d.year;
      d.val = +d.val;
   }); 
​
//FILTER data
var countryMedian = data.filter(function(d) { return d.cutoff === "cop50"; });   
​
//sets x doman and finds largest x value
xScale.domain(d3.extent(countryMedian, function(d) { return d.year;}))
​
//sets y domain
var maxValue = d3.max(countryMedian, function(d) { return d.val;});
​
yScale.domain([0, maxValue]); 
​
//nest the data (Mr. Nester)
var mediansByCountry = d3.nest()
    .key(function(d) { return d.country; })
    .entries(countryMedian);
​
var selectedMediansByCountry = mediansByCountry.filter(function(d) { return compareCountries.indexOf(d.key) > -1;});
​
var usaOnly = mediansByCountry.filter(function(d) { return d.key === "United States"; });    
​
var chartContainer = d3.select("body").selectAll(".g-chart-container")
      .data(selectedMediansByCountry)
      .enter().append("div")
      .attr("class", "g-chart-container");
​
chartContainer.append("h4")
    .text(function(d) { return d.key;}); 
​
//svg
var svg = chartContainer.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 xAxisGroup = svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + (height) + ")")
      .call(xAxis);
​
var yAxisGroup = svg.append("g")
      .attr("class", "y axis")
      .attr("transform", "translate(" + (width) + ",0)")
      .call(yAxis)
      .selectAll("g")
      .classed("g-baseline", function(d) { return d === 0; }); //finds the baseline and styles differently
​
//data join for paths 
  var countryLine = svg.append("path")
      .datum(function(d) { return d.values; })
      .attr("class", "g-country-path")
      .attr("d", function(d) { return line(d); });
​
  var usaLine = svg.append("path")
      .datum(usaOnly[0].values)
      .attr("class", "g-usa-line g-country-line")
      .attr("d", line);
​
​
//data join for circles
/* var circle = svg.selectAll(".income-value")
      .data(countryMedian)
      .enter().append("circle")
      .attr("class", "income-value")
      .attr("r", 2)
      .attr("cx", function(d) { return xScale(d.year);})
      .attr("cy", function(d) { return yScale(d.val);}); 
      :
      */        
}
​
</script>
    