Changing scatter plots

<!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;
			}
			.tooltip p {
				background-color: white;
				border: none;
				padding: 2px;
			}
			/* 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>Diarrhoea 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 show the percentage of children receiving 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.</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 diarrhoea among children.</p>
	        	<img src="ors.jpg" class="img-responsive" alt="SubSaharan Map image" 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("diarrhoea.csv", function(error, data) {
				// Notice what happens if you don't sort by year :)
				var buttons = d3.select("body").selectAll("button");

else {
							return "dots";
						}
				})

.attr("id", "change1")
				.append("title")
				.text(function(d) {
					return "In " + d.Countries + " the " + d.Female + "% of girls received treatment for diarrhoea. " + "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 (%)");

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 diarrhoea 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 (%)");
				});
				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);
										});
						// 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 diarrhoea. " + "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 (%)");
				});

/*d3.selectAll("circles#change1")
						.on("mouseover", mouseoverFunc)
						.on("mousemove", mousemoveFunc)
						.on("mouseout",	mouseoutFunc);

</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