Change In Median Income Per Country (1975-2010)

<!DOCTYPE html>
<meta charset="utf-8">

svg{
    border: thin solid #f0f;
  }

.axis text {
    font-size: 12px;
    fill: #777;
  }

.axis path {
    display: none;
  }

.axis line {
    stroke-width:1px;
    stroke: #ccc;
    opacity: 0.7;
/*    stroke-dasharray: 2px 2px;*/
  }

.line {
    fill: none;
/*    stroke: steelblue;*/
    stroke-width: 2px;
    cursor: pointer;
  }

.circle-container{
    cursor: pointer;
  }

.info{
    position: absolute;
    top:100px;
    left:100px;
    font-size: 20px;
    color:#4682B4;
    font-weight: bold;
    opacity: 0;
  }

</style>

<body>
	
	<h1 class="header">Change In Median Income By Country (1975 - 2010)</h1>
  <div class="info">Foobar</div>
</body>

var margin = {top: 20, right: 30, bottom: 50, left: 20};

var color = d3.scale.category20b();

var width = 1400 - margin.left - margin.right,
    height = 700 - margin.top - margin.bottom;

var svg = d3.select("body").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 + ")");

var y = d3.scale.linear()
    .range([height, 0]);

var x = d3.scale.linear()
      .range([0,width]);

var yAxis = d3.svg.axis()
                .scale(y)
                .tickSize(-width)
                //.tickPadding(8)
                //.ticks(10,"+")
                .orient("right");

var xAxis = d3.svg.axis()
                .scale(x)
                .tickSize(-height)
                //.tickPadding(8)
               // .ticks(4)
                .tickFormat(d3.round)
                .orient("bottom");

if(typeof(String.prototype.trim) === "undefined"){ 
    String.prototype.trim = function() {
      return String(this).replace(/^\s+|\s+$/g, '');
    };
  }

function fetchInt(string){
    return +string.replace(",","");
  }

function mouseover(){
    
    var element = d3.select(this);
    var data = element[0][0].__data__;

// d3.selectAll(".circle-svg").transition().duration(200)
    //   .style("opacity",function(d){return (d.country===data.country)?1:0.1;});
    // d3.selectAll(".line").transition().duration(200)
    //   .style("opacity",function(d){return (d[0].country===data.country)?1:0.1;});

try{
      var info = d3.select(".info")
                  .style("opacity",1)
                  .text(data[0].country);
    }
    catch(err){
       var info = d3.select(".info")
                  .style("opacity",1)
                  .text(data.country);
    }
  }

function mouseleave(){
    var element = d3.select(this);
    var info = d3.select(".info").style("opacity",0);

d3.selectAll(".circle-svg").transition().duration(200).style("opacity",1);
    d3.selectAll(".line").transition().duration(200).style("opacity",1);
  }

d3.tsv("./allCountries.tsv",function(error,data){
    if(error){ alert("error!"); return;}

data.forEach(function(d){
      d.cop5 = fetchInt(d.cop5);
      d.cop10 = fetchInt(d.cop10);
      d.cop20 = fetchInt(d.cop20);
      d.cop30 = fetchInt(d.cop30);
      d.cop40 = fetchInt(d.cop40);
      d.cop50 = fetchInt(d.cop50);
      d.cop60 = fetchInt(d.cop60);
      d.cop70 = fetchInt(d.cop70);
      d.cop80 = fetchInt(d.cop80);
      d.cop90 = fetchInt(d.cop90);
      d.cop95 = fetchInt(d.cop95);
      d.year = +d.dataset.split(" ")[d.dataset.split(" ").length-1];
      d.country = d.dataset.replace(/[0-9]/g, "").replace("LIS - ","").trim();
    });

x.domain(d3.extent(data,function(d){return d.year;}));
    y.domain(d3.extent(data,function(d){return d.cop50;}));

data = d3.nest().key(function(d){ return d.country;}).entries(data);

var line = d3.svg.line()
    .x(function(d) { return x(d.year); })
    .y(function(d) { return y(d.cop50); });

//console.log(data);

svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + (height) + ")")
      .call(xAxis);

svg.append("g")
      .attr("class", "y axis")
      .attr("transform", "translate("+(width-10)+",0)")
      .call(yAxis);

//Plain vanilla JS, nothing to do with d3...pretty nice
    //var usa = data.filter(function(d){return d.country === "United States";});

for(var i=0; i<data.length; i++){
      //console.log(data[i]);
      svg.append("g")
        .attr("class","circle-container")
        .selectAll("circle")
        .data(data[i].values)
        .enter()
        .append("circle")
        .attr("r",4)
        .attr("class","circle-svg")
        .style("fill",color(i))
        .attr("cx",function(d){return x(d.year); })
        .attr("cy",function(d){return y(d.cop50); })
        .on("mouseover",mouseover)
        .on("mouseleave",mouseleave);

svg.append("path")
        .datum(data[i].values)
        .attr("class", "line")
        .style("stroke",color(i))
        .attr("d", line)
        .on("mouseover",mouseover)
        .on("mouseleave",mouseleave);
    }

//This works too, just specify fill none
    //But this never gives you a data joined to the element..the above is technically better
    // svg.append("path").attr("d",line(data));

});

</script>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js