Class10

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

body {
	font-family: "Avenir Next", sans;
	font-size: 11px;
	width:720px;
    margin: 20px auto;
	}

svg {
	border: 1px solid #f0f;
	}

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

.axis path {
	  display: none;
	}

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

.g-enter {
	  fill:green;
	}

.g-update {
	  fill:grey;
	}

.g-exit {
	  fill:red;
	}

</style>

</body>

var transitionTime = 2000;

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

var width = 720 - margin.left - margin.right,
   height = 500 - margin.top - margin.bottom;

var hed = d3.select(".g-chart-title");

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

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

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

var yAxis = d3.svg.axis()
    .scale(yScale)
    .tickSize(-width)
    .tickPadding(8)
    .orient("right");

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 + ")");

d3.tsv("incomes.tsv",  ready);

function ready(error, data) {

if (error) throw error;

var allCountries = d3.set(data.map(function(d){ return d.country})).values();

console.log("all countries",allCountries);

d3.select("body").selectAll("button")
  	.data(allCountries)
  .enter().append("button")
  	.text(function(d){ return d; })
  	.on("click", function(d){
  		drawChartForCountry(d);
  	})

data.forEach( function (d) {
  	d.val = +d.val;
  	d.year = +d.year;
  	d.uniqueId = d.cutoff + "-" + d.year;

});

xScale.domain(d3.extent(data, function(d) { return d.year; }));
   yScale.domain(d3.extent(data, function(d) { return d.val; }));

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);

function drawChartForCountry(countryName){
	var thisCountry = data.filter(function(d){ return d.country == countryName; });

hed.text(countryName);

console.log("I am firing for", countryName);

// 1. Do your data join, but separate the data join and the enter function. Give this selection a class of `g-update`.
	var countryCircleData = svg.selectAll("circle")
        .data(thisCountry, function(d) { return d.uniqueId; });

countryCircleData
		.attr("class","g-update");
    
    // 2. Do your `enter()` selection, and give this selection a class of `g-enter`.   
    var countryCircleEnter= countryCircleData.enter()
    	.append("circle")
    	.attr("r",5)
    	.attr("class", "g-enter");

// 4. Make a new `selectAll` call, which will select all your elements, including those you just appended. Position your new circles accordingly.
    svg.selectAll("circle")
        .transition()
        .duration(transitionTime)
        .style("opacity", 1)
        .attr("cx", function(d) { return xScale(d.year); })
        .attr("cy", function(d) { return yScale(d.val); });

// 5. Sometimes your new data join will have less data than your old one, so you will have to perform an `exit()` selection and remove them from the SVG. Give this selection a class of `g-exit`. (A transition on this could help)
    countryCircleData.exit()
    	.attr("class", "g-exit")
    	.transition()
    	.duration(transitionTime)
    	.style("opacity",0)
    	.remove();

}

drawChartForCountry("United States");

window.drawChartForCountry = drawChartForCountry;

}

</script>

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