The shape can enter the chart through enter and update functions, and the exit function removes the unncessary shapes. The below visual shows the same. There are many random points to begin with. Once you click the The real data buttom, the number of lynx trapped Vs the Year data populates. It is only 20 points. As the transition begins on the circles, we can see the unwanted circles removed from the SVG. This is due to the usage of join clause.
Text data is populated using the the D3 select method, when the function is called by the button click. The number of text values entering the context is same everytime. The join api cannot remove the nodes that it can bind to the data. Due to this, the seperate remove() needs to be added
With the call back show, and d3.select appending the p element to body was straight forward