Map: Cell Towers

<!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: 0px 0px 0px 20px;
  padding: 20px;
  width: 1200px;
  border: 3px solid #e11b17;
  border-width: 3px 0px 0px 0px;
}

#map {
  margin: 10px 0px 0px 0px;
  padding: 0px;
}

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

h2 {
  display: inline;
  margin: 0px 5px 0px 0px;
  font-size: 1.2em;
  font-weight: 600;
  vertical-align: bottom;
}

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

#text p {
  margin: 15px 0px 5px 0px;
}

input {
  display: block;
  width: 200px;
  margin: 10px 0px 0px 0px;
}

.states {
  fill: #f5eede;
  stroke: #fff;
  stroke-width: 2;
  stroke-linejoin: round;
}

.crowncastle {
  fill: #648d9e;
  display: none;
}

.americantower {
  fill: #00485d;
  display: none;
}

.sbac {
  fill: #00a1ce;
  display: none;
}

.nextten {
  fill: #e11b17;
  display: none;
}

.button {
  display: inline-block;
  margin: 0px 2px 0px 0px;
  padding: 3px 5px;
  line-height: 20px;
  border: 1px solid #ccc;
  border-width: 1px;
  min-width: 90px;
  border-radius:3px;

font-family: 'Source Sans Pro', sans-serif;
  font-size: 0.8em;
  font-weight: 600;
}

.button:hover {
  background:#e11b17;
  color: #fff;
  cursor: pointer;
  border-color: #C80200;
}

circle.selected {
  display: block;
}

div.selected {
  background:#e11b17;
  color: #fff;
  cursor: default;
  border-color: #C80200;
}

#buttons {
  margin: 5px 0px 0px 0px;
}

#block {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 20px;
  height: 60px;
  background: #e11b17;
}

.domain {
  fill: none;
  stroke-width: 0;
}

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

.bar {
  fill: steelblue;
}

.x.axis path {
  display: none;
}

.y.axis text, .x.axis text, .legend text {
  font-size: 0.8em;
}

.ylabel {
  font-weight: 900;
}

.g-baseline line {
  stroke: #333;
  stroke-width: 2;
  opacity: 1;
  shape-rendering: crispEdges;
}

#map {
float: left;
}

#barchart {
margin: 10px 0px 0px 0px;
padding: 0;
}

.source {
clear: both;
}

</style>
</head>

<body>
<div id="block"></div>
<div id="content">
	<h1>Towering Above the Rest</h1>
	<p>Wireless towers registered with the FCC</p>
	<div id="buttons">
		<div class="button" id="americantower">American Tower</div>
		<div class="button" id="crowncastle">Crown Castle International</div>
		<div class="button" id="sbac">SBA Communications</div>
		<div class="button" id="nextten">Next Ten Leading Competitors</div>
	</div>

<div id="map"></div>
	<div id="barchart"></div>
	<p class="source">Source: Federal Communications Commission, annual reports.</p>

</div>

</div>
<script type="text/javascript" src="map.js"></script>
<script type="text/javascript" src="chart.js"></script>
</body>
</html>

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

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