Scatterplot

<!DOCTYPE HTML>
<meta charset="utf-8">
<html>
<head>

<style>

body, h1, h2, h3, p {
  margin: 0;
  padding: 0;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 1em;
  color: #333;
  font-weight: 400;
}

#content {
  margin: 5px;
  padding: 20px;
  width: 750px;
  text-align: left;
  border: 1px solid #ccc;
}

h1 {
  line-height: 1em;
  font-size: 1.75em;
  font-weight: 900;
  color: #000;
}

p {
  margin: 5px 0px 0px 0px;
}

.domain {
  stroke-width: 1px;
}

#chart {
  margin: 15px 0px 0px 0px;
  padding: 0px;
}

#menu {
  float: left;
  margin: 15px 0px 0px 0px;
  padding: 0;
  display: block;
}

select {
  width: 150px;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 0.9em;
  color: #333;
  font-weight: 400;
}

.axis path, .axis line {
  fill: none;
  stroke: #ccc;
  shape-rendering: crispEdges;
}

.axis line {
  stroke: #eee;
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.tick text, #xAxisLabel, #yAxisLabel {
  fill: #333;
  font-size: 0.9em;
}

.tooltip {
  position: absolute;
  padding: 7px;
  width: 240px;
  font-size: 0.9em;
  pointer-events: none;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.tooltip p {
  margin: 0;
  padding: 0;
}

circle {
  stroke: #0165A8;
  stroke-width: 2px;
  fill: #fff;
}

circle:hover {
  stroke: #003275;
  fill: #0165A8;
}

</style>

</head>

<body>

<div id="content">
	<h1>Income and Health in the United States</h1>
	<p>U.S. counties were sorted into 20 equally sized groups according to median household income. Poverty rates, infant mortality rates, and life expectancies were calculated for each of the 20 income groups. The data show that in 2007, low-income counties had significantly higher infant mortality rates and lower life expectancies than high-income counties.</p>
	<div id="menu"></div>
	<div id="chart"></div>
	<p>Source: U.S. Census Bureau, Institute for Health Metrics and Evaluation.</p>
</div>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js