xxxxxxxxxx<meta charset="utf-8"><style type="text/css"> 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> <h3 class="g-chart-title"></h3><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>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