Transition Plot

<!DOCTYPE html>

<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Line Chart with Multiple Data Sets, Transitions</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

body {
				background-color: white;
				font-family: "Open Sans", Arial, sans-serif;
			}
			h1 {
				font-size: 24px;
				font-weight: 600;
				color: rgba(0, 153, 255, 1);
				margin: 0;
			}
			p {
				font-size: 14px;
				margin: 10px 0 0 0;
			}
			.selected {
				background-color: rgba(0, 153, 255, 0.7);
			}
			svg {
				background-color: white;
			}
			.dots {
				fill: rgba(0,153,255,1);
				opacity: 0.5;
			}
			.highlighted {
				fill: rgba(247,148,29, 0.7);
			}
			.axis path,
			.axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}
			.axis text {
				font-family: sans-serif;
				font-size: 11px;
			}
			.xlabel{
				font-size: 14px;
				font-weight: normal;
			}
			.ylabel{
				font-size: 14px;
				font-weight: normal;
			}
			.tooltip {
					position: absolute;
					z-index: 10;
					opacity: 1;
				}
			.tooltip p {
					width: initial;
					font-family: "Open Sans", sans-serif;
					line-height: 1.4;
					color: black;
					font-size: 13px;
					background-color: rgba(255,255,255,0.8);
					border: rgba(230,230,230,1) 1px solid;
					padding: 5px 7px 5px 7px;
			 }
			/* this is an adjustment to bootstrap's row for my page */
			.row {
				padding-top: 50px;
			}
			/* this is an adjustment to bootstrap for my page */
			.btn-group {
				padding-top: 20px;
			}

</style>
	</head>

<body>

<div class="container">
			<div class="row">
					<div class="col-md-5">
          <h1>Diarrhea treatment</h1>
            			<div class="btn-group" role="group" aria-label="...">
									  <button type="button" class="btn btn-default" id="Female">Girls vs Boys</button>
									  <button type="button" class="btn btn-default" id="Urban">Urban vs Rural</button>
									</div>
						<p>This graphic shows the percentage of children under 5 with diarrhea receiving oral rehydration salts (ORS). It compares two variables: how is applied in boys and girls and how it is applies in urban an rural areas. Every circle represents a country.</p>
						<p>Source: <a href="https://www.unicef.org/">UNICEF</a></p>
						<div id="svg"></div>
        </div>
      <div class="col-md-5 col-md-offset-2">
        	<div class="map_note">
	        	<p>An example of an ORC sachet, used to avoid diarrhea among children.</p>
	        	<img src="https://farm4.static.flickr.com/3059/2934816392_556e88a4ea_o.jpg" class="img-responsive" alt="ORC sachet" height="600" width="600">
        	</div>
        </div>
      </div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>

var dotRadius = 5; // fix this to a nice value.
			//Set up date formatting and years
			var xScale = d3.scale.linear()
								.range([ margin.left, width - margin.right - margin.left])
								.domain([-2,100]);
			// top to bottom, padding just in case
			var yScale = d3.scale.linear()
								.range([ height - margin.bottom, margin.top ])
								.domain([-2,100]);
			//  Custom tick count if you want it.
			// Create your axes here.
			var xAxis = d3.svg.axis()
							.scale(xScale)
							.orient("bottom")
							.ticks(4);  // fix this to a good number of ticks for your scale later.
			var yAxis = d3.svg.axis()
							.scale(yScale)
							.orient("left")
							.ticks(4);

// add a tooltip to the page - not to the svg itself!
			var tooltip = d3.select("body")
      	.append("div")
      	.attr("class", "tooltip");
			//Create the empty SVG image

var svg = d3.select("#svg")
						.append("svg")
						.attr("width", width)
						.attr("height", height);

d3.csv("diarrhea.csv", function(error, data) {
				// Notice what happens if you don't sort by year :)
				var buttons = d3.select("body").selectAll("button");

else {
							return "dots";
						}
				});
				/*.append("title")
				.text(function(d) {
					return "In " + d.Countries + " the " + d.Female + "% of girls received treatment for diarrhea. " + "The " + d.Male + "% of boys received it.";
				});*/
				// adding a silly intro animation to catch the eye -- using transition:
				circles.sort(function(a, b) {
						return d3.ascending(+a.Female, +b.Male);
					})
					.transition()
					.delay(function(d, i) {
						return i * 10;
					})
					.duration(750)  // milliseconds, so this is 1 second.
					.ease("linear")
					.attr("r", dotRadius);

// fix these translates so they use your margin and height width as needed
			svg.append("g")
				.attr("class", "x axis")
				.attr("transform", "translate(0," + (height - margin.bottom) + ")")
				.call(xAxis);
			svg.append("g")
				.attr("class", "y axis")
				.attr("transform", "translate(" + (margin.left) + ",0)")
				.call(yAxis);

svg.append("text")
						.attr("class", "xlabel")
						.attr("transform", "translate(" + (width / 2) + " ," +
									(height-20) + ")")
						.style("text-anchor", "middle")
						.attr("dy", "1")
						.text("Treatment for girls (%)");

svg.append("text")
						.attr("class", "ylabel")
						.attr("transform", "translate(" + margin.right + ")")
						.style("text-anchor", "middle")
						.attr("dx", "-250")
						.attr("dy", "30")
						.attr("transform", "rotate(-90)")
						.text("Treatment for boys (%)");

circles
								.on("mouseover", mouseoverChange3Func)
								.on("mousemove", mousemoveChange3Func)
								.on("mouseout", mouseoutChange3Func);

var buttons = d3.select("body").selectAll("button");

d3.select("button#Urban").on("click", function() {
					circles
						.transition()
						.duration(750)
						.ease("linear")
						.attr("cx", function(d) {
							return xScale(+d.Urban);
							// return the value to use for your x scale here
						})
						.attr("cy", function(d) {
							return yScale(+d.Rural);
						})
						// We can't transition the new title text -- must remove and rewrite.
					/*circles.selectAll("title").remove();
					circles
						.append("title")
						.text(function(d) {
							return "In " + d.Countries + ", the " + d.Rural + "% of kids in urban areas received diarrhea treatment. " + "In the rural area, the " + d.Urban + "% of the kids received it.";
						});*/

buttons
							var thisButton = d3.select(this);
							d3.selectAll("button").classed("selected", false);
							thisButton.classed("selected", true);

svg.selectAll("text").remove();
						svg.append("g")
							.attr("class", "x axis")
							.attr("transform", "translate(0," + (height - margin.bottom) + ")")
							.call(xAxis);
						svg.append("g")
							.attr("class", "y axis")
							.attr("transform", "translate(" + (margin.left) + ",0)")
							.call(yAxis);
						svg.append("text")
								.attr("class", "xlabel")
								.attr("transform", "translate(" + (width / 2) + " ," +
											(height-20) + ")")
								.style("text-anchor", "middle")
								.attr("dy", "1")
								.text("Treatment in rural areas (%)");

svg.append("text")
								.attr("class", "ylabel")
								.attr("transform", "translate(" + margin.right + " ," +
											(height/2) + ")")
								.style("text-anchor", "middle")
								.attr("dx", "-260")
								.attr("dy", "30")
								.attr("transform", "rotate(-90)")
								.text("Treatment in urban areas (%)");

circles
								.on("mouseover", mouseoverChange2Func)
								.on("mousemove", mousemoveChange2Func)
								.on("mouseout", mouseoutChange2Func);
							d3.selectAll("button").classed("selected", false);
							thisButton.classed("selected", true);
				});

d3.select("button#Female").on("click", function() {
					circles
						.transition()
						.duration(750)
						.ease("linear")
						.attr("cx", function(d) {
											return xScale(+d.Female);
											// return the value to use for your x scale here
										})
										.attr("cy", function(d) {
											return yScale(+d.Male);
										})
						.attr("id", "change2");
						// We can't transition the new title text -- must remove and rewrite.
					/*circles.selectAll("title").remove();
					circles
					.append("title")
					.text(function(d) {
						return "In " + d.Countries + " the " + d.Female + "% of girls received treatment for diarrhea. " + "The " + d.Male + "% of boys received it.";
					});*/

buttons
						var thisButton = d3.select(this);
						d3.selectAll("button").classed("selected", false);
						thisButton.classed("selected", true);

svg.append("text")
								.attr("class", "ylabel")
								.attr("transform", "translate(" + margin.right + " ," +
											(height/2) + ")")
								.style("text-anchor", "middle")
								.attr("dx", "-250")
								.attr("dy", "30")
								.attr("transform", "rotate(-90)")
								.text("Treatment for boys (%)");

circles
							.on("mouseover", mouseoverChange1Func)
      						.on("mousemove", mousemoveFunc)
      						.on("mouseout", mouseoutFunc);
						d3.selectAll("button").classed("selected", false);
							thisButton.classed("selected", true);
				});

});

d3.select("button#Female").classed("selected", true);

function mouseoverChange2Func(d) {
					d3.select(this)
						.transition()
						.attr("r", 6);
					tooltip
						.style("display", null) // this removes the display none setting from it
						.html("<p>" + d.Countries +
									"<br><strong>" + d.Urban + "%</strong> of girls received treatment" +
									"<br><strong>" + d.Rural + "%</strong> of boys received treatment</p>");
				}
				function mouseoutFunc(d) {
					d3.select(this)
						.transition()
						.attr("r", 5);
					tooltip.style("display", "none");
				}

function mousemoveFunc(d) {
				 //console.log("events", window.event, d3.event);
				 tooltip
					 .style("top", (d3.event.pageY - 10) + "px" )
					 .style("left", (d3.event.pageX + 10) + "px");
				 }

function mouseoverChange3Func(d) {
					 d3.select(this)
						 .transition()
						 .attr("r", 6);
					 tooltip
						 .style("display", null) // this removes the display none setting from it
						 .html("<p>" + d.Countries +
									 "<br><strong>" + d.Female + "%</strong> of girls received treatment" +
									 "<br><strong>" + d.Male + "%</strong> of boys received treatment</p>");
				 }
				 function mouseoutChange3Func(d) {
					 d3.select(this)
						 .transition()
						 .attr("r", 5);
					 tooltip.style("display", "none");
				 }

function mousemoveChange3Func(d) {
					//console.log("events", window.event, d3.event);
					tooltip
						.style("top", (d3.event.pageY - 10) + "px" )
						.style("left", (d3.event.pageX + 10) + "px");
					}

</script>
	</div>
		
	</body>
</html>

https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js

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