hmader/contraceptive-mortality-select-countries-chart.csv

## contraceptive-mortality-select-countries-chart.csv

          
            Country
            None
            Primary
            Secondary or higher
            Average
            U5MR

            
              Afghanistan
              19.9
              27.2
              37.7
              28.2666666666667
              97.3

            
              Azerbaijan
              51.4
              25
              51.4
              42.6
              34.2

            
              Bangladesh
              61.4
              62.4
              60.3
              61.3666666666667
              41.1

            
              Benin
              11.2
              14.9
              20.9
              15.6666666666667
              85.3

            
              Bhutan
              67.5
              66.2
              57.7
              63.8
              36.2

            
              Bolivia
              42
              56.1
              68.9
              55.6666666666667
              39.1

            
              Brazil
              64.1
              71.9
              81.8
              72.6
              13.7

            
              Burkina-Faso
              11.8
              27
              50.5
              29.7666666666667
              97.6

            
              Burundi
              17.5
              24.7
              41.1
              27.7666666666667
              82.9

            
              Cambodia
              42.5
              50.2
              57.3
              50
              37.9

            
              Cameroon
              4.1
              21.6
              40.2
              21.9666666666667
              94.5

            
              Central African Republic
              7.1
              15.4
              32.8
              18.4333333333333
              139.2

            
              Chad
              1.1
              5
              25.1
              10.4
              147.5

            
              Colombia
              71.8
              80.3
              78.7
              76.9333333333333
              16.9

            
              Comoros
              12.9
              19.1
              26.8
              19.6
              77.9

            
              Congo Democratic Republic
              11.1
              15.7
              30.2
              19
              118.5

            
              Congo Republic
              33.6
              43.1
              46.6
              41.1
              49.1

            
              Costa Rica
              58.5
              76.2
              76.7
              70.4666666666667
              9.6

            
              Côte-d’Ivoire
              13
              25.8
              30.3
              23.0333333333333
              100

            
              Djibouti
              12.6
              20.8
              33
              22.1333333333333
              69.6

            
              Dominican Republic
              69.8
              75.2
              71.2
              72.0666666666667
              28.1

            
              Egypt
              57.7
              61.8
              61.4
              60.3
              21.8

            
              Ethiopia
              22.2
              35.7
              62.2
              40.0333333333333
              64.4

            
              Gabon
              14
              21.8
              36.3
              24.0333333333333
              56.1

            
              Ghana
              26.1
              34.3
              39.6
              33.3333333333333
              78.4

            
              Guatemala
              19.4
              38.4
              68
              41.9333333333333
              31

            
              Guinea
              4.7
              7.6
              10.5
              7.6
              100.7

            
              Guinea-Bissau
              6.2
              17.2
              30.6
              18
              123.9

            
              Guyana
              21.9
              40.4
              43.8
              35.3666666666667
              36.6

            
              Haiti
              29.7
              34.5
              37.2
              33.8
              72.8

            
              Honduras
              64.2
              73.2
              74.5
              70.6333333333333
              22.2

            
              India
              52.1
              60.1
              60.2
              57.4666666666667
              52.7

            
              Indonesia
              43.4
              61.8
              63.1
              56.1
              29.3

            
              Iraq
              46.1
              51.3
              57.2
              51.5333333333333
              34

            
              Jordan
              45.6
              53.4
              62.2
              53.7333333333333
              18.7

            
              Kenya
              14.1
              44.2
              59.8
              39.3666666666667
              70.7

            
              Lao PDR
              38
              54.3
              52.1
              48.1333333333333
              71.4

            
              Lesotho
              32.1
              40.2
              55.7
              42.6666666666667
              98

            
              Liberia
              15.3
              19.7
              28.6
              21.2
              71.1

            
              Madagascar
              20.5
              38.9
              55.8
              38.4
              56

            
              Malawi
              40.3
              46
              53.2
              46.5
              67.9

            
              Maldives
              43.6
              36.9
              27.9
              36.1333333333333
              9.9

            
              Mali
              8.1
              13.4
              27.5
              16.3333333333333
              122.7

            
              Mauritania
              4.4
              11.5
              21.9
              12.6
              90.1

            
              Mongolia
              47
              57.8
              55
              53.2666666666667
              31.8

            
              Morocco
              61.2
              62.9
              68.8
              64.3
              30.4

            
              Mozambique
              5.5
              11.6
              31.7
              16.2666666666667
              87.2

            
              Namibia
              33.7
              46.1
              64.1
              47.9666666666667
              49.8

            
              Nepal
              52.8
              47
              46.8
              48.8666666666667
              39.7

            
              Nicaragua
              52.1
              71.7
              73
              65.6
              23.5

            
              Niger
              12
              20.5
              32.3
              21.6
              104.2

            
              Nigeria
              2.7
              19.9
              30.9
              17.8333333333333
              117.4

            
              Pakistan
              30.2
              40.8
              43
              38
              85.5

            
              Peru
              65.6
              75.1
              76.2
              72.3
              16.7

            
              Philippines
              29.3
              52.9
              56.2
              46.1333333333333
              29.9

            
              Rwanda
              43.3
              52.6
              60.3
              52.0666666666667
              52

            
              Sao Tome and Principe
              18.3
              40.7
              38
              32.3333333333333
              51

            
              Senegal
              12.8
              26.9
              32.8
              24.1666666666667
              55.3

            
              Sierra Leone
              14.3
              19.3
              26
              19.8666666666667
              160.6

            
              Somalia
              13.6
              15.7
              22.6
              17.3
              145.6

            
              South Africa
              33.2
              47.2
              64.6
              48.3333333333333
              43.9

            
              Suriname
              19.2
              42.4
              52
              37.8666666666667
              22.8

            
              Swaziland
              54.5
              59.1
              69.5
              61.0333333333333
              80

            
              Syrian Arab Republic
              45.2
              57.5
              64.5
              55.7333333333333
              14.6

            
              Tajikistan
              23.9
              18.9
              28.4
              23.7333333333333
              47.7

            
              Thailand
              63.8
              79.5
              73.6
              72.3
              13.1

            
              Timor-Leste
              15.9
              25.8
              26.3
              22.6666666666667
              54.6

            
              Togo
              11.3
              17.3
              20
              16.2
              84.7

            
              Turkey
              55.9
              72.9
              75.9
              68.2333333333333
              19.2

            
              Uganda
              17.9
              28
              44.2
              30.0333333333333
              66.1

            
              Vanuatu
              20.8
              38.8
              42.1
              33.9
              16.9

            
              Vietnam
              74.7
              80.7
              77.2
              77.5333333333333
              23.8

            
              Yemen
              23.1
              34.2
              42.1
              33.1333333333333
              51.3

            
              Zambia
              35
              37.8
              50.6
              41.1333333333333
              87.4

            
              Zimbabwe
              43
              54.5
              61.1
              52.8666666666667
              88.5

## index.html
<!DOCTYPE html>
<!-- A modified example from Scott Murray's Knight d3 course. -->

<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Scatter Plot</title>
        <link href='https://fonts.googleapis.com/css?family=Roboto:400, 300, 300italic,700,400italic,700italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="main.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

</head>

<body>

    <h1 class="header">Contraceptive Use vs. Under-5 Mortality Rate</h1>

    <p class="header">The dots show the contraceptive (birth control) use in 75 low-income countries against the under-5 mortality rate in those countries. There appears to be an inverse correlation between the two: as the use of birth control decreases, the under-5 mortality rate increases. The two countries shown in red, Costa Rica and Sierra Leone, the countries with the lowest and highest under-5 mortality rates in the dataset, were highlighted to show this relationship.</p>
    <p class="header">Roll over the points to view details of the data.</p>
    <p id="sources" class="header">Sources: <a href="http://www.who.int/">World Health Organization</a>; <a href="http://www.worldbank.org/">World Bank</a>. Only countries with complete data are represented.</p>

    <script type="text/javascript" src="scatter.js"></script>
</body>

</html>

## main.css
body {
    box-sizing: border-box;
}

svg {
    /*    padding: 1em;*/
    background-color: rgb(255, 255, 255);
}

svg rect:hover {
    opacity: .3;
}

svg circle:hover {
    opacity: .3;
}

svg g {
    fill: #ACACAC;
}

svg g text.label,
svg g text.ylabel {
    fill: #2A2A2A;
}

svg {
    background-color: white;
}

.axis path,
.axis line {
    fill: none;
    stroke: #D3D3D3;
    stroke-width: 1px;
}

.line {
    stroke: #FF9900;
    fill: none;
    stroke-opacity: 25%;
    stroke-width: 1px;
}

.ssAfrica {
    stroke: red;
    stroke-opacity: 50%;
}

.unfocused {
    stroke-opacity: 25%;
}

.focused {
    stroke-width: 2px;
    stroke-opacity: 100%;
}

.MDG {
    stroke: #2A2A2A;
    fill: none;
    stroke-opacity: 100%;
    stroke-width: 1px;
}

.axis text,
.aside {
    font-family: sans-serif;
    font-size: 11px;
}

.header {
    width: 70%;
    margin-left: 16px;
}

h1 {
    font-family: 'Roboto', sans-serif;
    font-size: 1.75em;
    margin-top: 1em;
    font-weight: 700;
    color: #0099FF;
    text-transform: uppercase;
}

h2 {
    font-family: 'Roboto', sans-serif;
    text-align: justify;
    line-height: 1.25em;
    font-weight: 700;
    font-size: 1em;
}

p {
    font-family: 'Lora', serif;
    font-size: 15px;
    line-height: 1.25em;
    text-align: justify;
}

#sources {
    font-size: 12px;
    font-style: italic;
    color: rgb(0, 0, 0);
    font-style: italic;
}

a {
    color: #0099FF;
    text-decoration: none;
}

a:hover {
    color: rgb(255, 0, 153);
}

.sans {
 font-family: sans-serif;
}

.orange {
    color: #FF9900;
}

.blue {
    color: #0099FF;
}

.red {
    color: red;
}

.tooltip {
    position: absolute;
    z-index: 10;
}

.tooltip p {
    background-color: rgba(255, 255, 255, .8);
    padding: .5em 1em;
    font-size: 12px;
    line-height: 17px;
    color: black;
}

.tooltipHeader {
    font-weight: 700;
    font-size: 12.5px;
}

## scatter.js
var margin = {
    top: 50,
    right: 10,
    bottom: 50,
    left: 50
};

var height = $(window).height() * .7;
var width = $(window).width() * .75;
console.log("width = " + width);

var dotRadius = 5;

var xScale = d3.scale.linear()
    .range([margin.left, width - margin.left - margin.right]); //--- range is what we are mapping TO, so we want it to be the chart area


var yScale = d3.scale.linear()
    .range([height - margin.bottom, margin.top]); //--- range is what we are mapping TO, so we want it to be the chart area


var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom")
    .ticks(15);

var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left");

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

var tooltip = d3.select("body")
      	.append("div")
      	.attr("class", "tooltip");

d3.csv("contraceptive-mortality-select-countries-chart.csv", function (data) {

    xScale.domain([0, d3.max(data, function (d) {
        return +d.U5MR;
    })]);

    yScale.domain([0, d3.max(data, function (d) {
        return +d.Average;
    })]);

    var circles = svg.selectAll("circle")
        .data(data)
        .enter()
        .append("circle");

    circles.attr("class", "dots");
    // class to the circles - ".dots".

    circles.attr("cx", function (d) {
            return xScale(+d.U5MR);
        })
        .attr("cy", function (d) {
            return yScale(+d.Average);
        })
        .attr("r", dotRadius) // you might want to increase your dotRadius
        .attr("fill", function(d) {
        if (d.Country === "Sierra Leone" || d.Country === "Costa Rica") {
         return "#FF0000"
        } else {
        return "#0099FF"}
    })
    .attr("opacity", ".6")

    circles
    .on("mouseover", mouseoverFunc)
      		.on("mousemove", mousemoveFunc)
      		.on("mouseout", mouseoutFunc);


    // 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)
    .append("text")
    .attr("x", width - margin.right - margin.left)
    .attr("y", -20)
    .attr("dy", "1em")
    .style("text-anchor", "end")
    .attr("class", "label")
    .text("Mortality Rate");

    svg.append("g")
        .attr("class", "y axis")
        .attr("transform", "translate(" + (margin.left) + ",0)")
        .call(yAxis)
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("x", -50)
    .attr("y", 5)
    .attr("dy", "1em")
    .style("text-anchor", "end")
    .attr("class", "label")
    .text("avg. Contraceptive Use (%)");

    function mouseoverFunc(d) {
		console.log(d);
		return tooltip
			.style("display", null) // this removes the display none setting from it
			.html("<p class='sans'><span class='tooltipHeader'>" + d.Country + "</span><br>Avg. Contraceptive Use: " + d3.format(".2f")(d.Average) + "%" + "<br>Under-5 Mortality Rate: " + d.U5MR + "</p>");
		}

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

	function mouseoutFunc(d) {
    return tooltip.style("display", "none");  // this sets it to invisible!
  }


});

## thumbnail.png

      
    Raw
  

              thumbnail.png
Country	None	Primary	Secondary or higher	Average	U5MR
Afghanistan	19.9	27.2	37.7	28.2666666666667	97.3
Azerbaijan	51.4	25	51.4	42.6	34.2
Bangladesh	61.4	62.4	60.3	61.3666666666667	41.1
Benin	11.2	14.9	20.9	15.6666666666667	85.3
Bhutan	67.5	66.2	57.7	63.8	36.2
Bolivia	42	56.1	68.9	55.6666666666667	39.1
Brazil	64.1	71.9	81.8	72.6	13.7
Burkina-Faso	11.8	27	50.5	29.7666666666667	97.6
Burundi	17.5	24.7	41.1	27.7666666666667	82.9
Cambodia	42.5	50.2	57.3	50	37.9
Cameroon	4.1	21.6	40.2	21.9666666666667	94.5
Central African Republic	7.1	15.4	32.8	18.4333333333333	139.2
Chad	1.1	5	25.1	10.4	147.5
Colombia	71.8	80.3	78.7	76.9333333333333	16.9
Comoros	12.9	19.1	26.8	19.6	77.9
Congo Democratic Republic	11.1	15.7	30.2	19	118.5
Congo Republic	33.6	43.1	46.6	41.1	49.1
Costa Rica	58.5	76.2	76.7	70.4666666666667	9.6
Côte-d’Ivoire	13	25.8	30.3	23.0333333333333	100
Djibouti	12.6	20.8	33	22.1333333333333	69.6
Dominican Republic	69.8	75.2	71.2	72.0666666666667	28.1
Egypt	57.7	61.8	61.4	60.3	21.8
Ethiopia	22.2	35.7	62.2	40.0333333333333	64.4
Gabon	14	21.8	36.3	24.0333333333333	56.1
Ghana	26.1	34.3	39.6	33.3333333333333	78.4
Guatemala	19.4	38.4	68	41.9333333333333	31
Guinea	4.7	7.6	10.5	7.6	100.7
Guinea-Bissau	6.2	17.2	30.6	18	123.9
Guyana	21.9	40.4	43.8	35.3666666666667	36.6
Haiti	29.7	34.5	37.2	33.8	72.8
Honduras	64.2	73.2	74.5	70.6333333333333	22.2
India	52.1	60.1	60.2	57.4666666666667	52.7
Indonesia	43.4	61.8	63.1	56.1	29.3
Iraq	46.1	51.3	57.2	51.5333333333333	34
Jordan	45.6	53.4	62.2	53.7333333333333	18.7
Kenya	14.1	44.2	59.8	39.3666666666667	70.7
Lao PDR	38	54.3	52.1	48.1333333333333	71.4
Lesotho	32.1	40.2	55.7	42.6666666666667	98
Liberia	15.3	19.7	28.6	21.2	71.1
Madagascar	20.5	38.9	55.8	38.4	56
Malawi	40.3	46	53.2	46.5	67.9
Maldives	43.6	36.9	27.9	36.1333333333333	9.9
Mali	8.1	13.4	27.5	16.3333333333333	122.7
Mauritania	4.4	11.5	21.9	12.6	90.1
Mongolia	47	57.8	55	53.2666666666667	31.8
Morocco	61.2	62.9	68.8	64.3	30.4
Mozambique	5.5	11.6	31.7	16.2666666666667	87.2
Namibia	33.7	46.1	64.1	47.9666666666667	49.8
Nepal	52.8	47	46.8	48.8666666666667	39.7
Nicaragua	52.1	71.7	73	65.6	23.5
Niger	12	20.5	32.3	21.6	104.2
Nigeria	2.7	19.9	30.9	17.8333333333333	117.4
Pakistan	30.2	40.8	43	38	85.5
Peru	65.6	75.1	76.2	72.3	16.7
Philippines	29.3	52.9	56.2	46.1333333333333	29.9
Rwanda	43.3	52.6	60.3	52.0666666666667	52
Sao Tome and Principe	18.3	40.7	38	32.3333333333333	51
Senegal	12.8	26.9	32.8	24.1666666666667	55.3
Sierra Leone	14.3	19.3	26	19.8666666666667	160.6
Somalia	13.6	15.7	22.6	17.3	145.6
South Africa	33.2	47.2	64.6	48.3333333333333	43.9
Suriname	19.2	42.4	52	37.8666666666667	22.8
Swaziland	54.5	59.1	69.5	61.0333333333333	80
Syrian Arab Republic	45.2	57.5	64.5	55.7333333333333	14.6
Tajikistan	23.9	18.9	28.4	23.7333333333333	47.7
Thailand	63.8	79.5	73.6	72.3	13.1
Timor-Leste	15.9	25.8	26.3	22.6666666666667	54.6
Togo	11.3	17.3	20	16.2	84.7
Turkey	55.9	72.9	75.9	68.2333333333333	19.2
Uganda	17.9	28	44.2	30.0333333333333	66.1
Vanuatu	20.8	38.8	42.1	33.9	16.9
Vietnam	74.7	80.7	77.2	77.5333333333333	23.8
Yemen	23.1	34.2	42.1	33.1333333333333	51.3
Zambia	35	37.8	50.6	41.1333333333333	87.4
Zimbabwe	43	54.5	61.1	52.8666666666667	88.5
	<!DOCTYPE html>
	<!-- A modified example from Scott Murray's Knight d3 course. -->

	<html lang="en">

	<head>
	<meta charset="utf-8">
	<title>Scatter Plot</title>
	<link href='https://fonts.googleapis.com/css?family=Roboto:400, 300, 300italic,700,400italic,700italic' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" type="text/css" href="main.css">
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

	</head>

	<body>

	<h1 class="header">Contraceptive Use vs. Under-5 Mortality Rate</h1>

	<p class="header">The dots show the contraceptive (birth control) use in 75 low-income countries against the under-5 mortality rate in those countries. There appears to be an inverse correlation between the two: as the use of birth control decreases, the under-5 mortality rate increases. The two countries shown in red, Costa Rica and Sierra Leone, the countries with the lowest and highest under-5 mortality rates in the dataset, were highlighted to show this relationship.</p>
	<p class="header">Roll over the points to view details of the data.</p>
	<p id="sources" class="header">Sources: <a href="http://www.who.int/">World Health Organization</a>; <a href="http://www.worldbank.org/">World Bank</a>. Only countries with complete data are represented.</p>

	<script type="text/javascript" src="scatter.js"></script>
	</body>

	</html>
	body {
	box-sizing: border-box;
	}

	svg {
	/* padding: 1em;*/
	background-color: rgb(255, 255, 255);
	}

	svg rect:hover {
	opacity: .3;
	}

	svg circle:hover {
	opacity: .3;
	}

	svg g {
	fill: #ACACAC;
	}

	svg g text.label,
	svg g text.ylabel {
	fill: #2A2A2A;
	}

	svg {
	background-color: white;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #D3D3D3;
	stroke-width: 1px;
	}

	.line {
	stroke: #FF9900;
	fill: none;
	stroke-opacity: 25%;
	stroke-width: 1px;
	}

	.ssAfrica {
	stroke: red;
	stroke-opacity: 50%;
	}

	.unfocused {
	stroke-opacity: 25%;
	}

	.focused {
	stroke-width: 2px;
	stroke-opacity: 100%;
	}

	.MDG {
	stroke: #2A2A2A;
	fill: none;
	stroke-opacity: 100%;
	stroke-width: 1px;
	}

	.axis text,
	.aside {
	font-family: sans-serif;
	font-size: 11px;
	}

	.header {
	width: 70%;
	margin-left: 16px;
	}

	h1 {
	font-family: 'Roboto', sans-serif;
	font-size: 1.75em;
	margin-top: 1em;
	font-weight: 700;
	color: #0099FF;
	text-transform: uppercase;
	}

	h2 {
	font-family: 'Roboto', sans-serif;
	text-align: justify;
	line-height: 1.25em;
	font-weight: 700;
	font-size: 1em;
	}

	p {
	font-family: 'Lora', serif;
	font-size: 15px;
	line-height: 1.25em;
	text-align: justify;
	}

	#sources {
	font-size: 12px;
	font-style: italic;
	color: rgb(0, 0, 0);
	font-style: italic;
	}

	a {
	color: #0099FF;
	text-decoration: none;
	}

	a:hover {
	color: rgb(255, 0, 153);
	}

	.sans {
	font-family: sans-serif;
	}

	.orange {
	color: #FF9900;
	}

	.blue {
	color: #0099FF;
	}

	.red {
	color: red;
	}

	.tooltip {
	position: absolute;
	z-index: 10;
	}

	.tooltip p {
	background-color: rgba(255, 255, 255, .8);
	padding: .5em 1em;
	font-size: 12px;
	line-height: 17px;
	color: black;
	}

	.tooltipHeader {
	font-weight: 700;
	font-size: 12.5px;
	}
	var margin = {
	top: 50,
	right: 10,
	bottom: 50,
	left: 50
	};

	var height = $(window).height() * .7;
	var width = $(window).width() * .75;
	console.log("width = " + width);

	var dotRadius = 5;

	var xScale = d3.scale.linear()
	.range([margin.left, width - margin.left - margin.right]); //--- range is what we are mapping TO, so we want it to be the chart area


	var yScale = d3.scale.linear()
	.range([height - margin.bottom, margin.top]); //--- range is what we are mapping TO, so we want it to be the chart area


	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom")
	.ticks(15);

	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left");

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

	var tooltip = d3.select("body")
	.append("div")
	.attr("class", "tooltip");

	d3.csv("contraceptive-mortality-select-countries-chart.csv", function (data) {

	xScale.domain([0, d3.max(data, function (d) {
	return +d.U5MR;
	})]);

	yScale.domain([0, d3.max(data, function (d) {
	return +d.Average;
	})]);

	var circles = svg.selectAll("circle")
	.data(data)
	.enter()
	.append("circle");

	circles.attr("class", "dots");
	// class to the circles - ".dots".

	circles.attr("cx", function (d) {
	return xScale(+d.U5MR);
	})
	.attr("cy", function (d) {
	return yScale(+d.Average);
	})
	.attr("r", dotRadius) // you might want to increase your dotRadius
	.attr("fill", function(d) {
	if (d.Country === "Sierra Leone" \|\| d.Country === "Costa Rica") {
	return "#FF0000"
	} else {
	return "#0099FF"}
	})
	.attr("opacity", ".6")

	circles
	.on("mouseover", mouseoverFunc)
	.on("mousemove", mousemoveFunc)
	.on("mouseout", mouseoutFunc);


	// 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)
	.append("text")
	.attr("x", width - margin.right - margin.left)
	.attr("y", -20)
	.attr("dy", "1em")
	.style("text-anchor", "end")
	.attr("class", "label")
	.text("Mortality Rate");

	svg.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(" + (margin.left) + ",0)")
	.call(yAxis)
	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("x", -50)
	.attr("y", 5)
	.attr("dy", "1em")
	.style("text-anchor", "end")
	.attr("class", "label")
	.text("avg. Contraceptive Use (%)");

	function mouseoverFunc(d) {
	console.log(d);
	return tooltip
	.style("display", null) // this removes the display none setting from it
	.html("<p class='sans'><span class='tooltipHeader'>" + d.Country + "</span><br>Avg. Contraceptive Use: " + d3.format(".2f")(d.Average) + "%" + "<br>Under-5 Mortality Rate: " + d.U5MR + "</p>");
	}

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

	function mouseoutFunc(d) {
	return tooltip.style("display", "none"); // this sets it to invisible!
	}


	});