D3 Examples - Map: Cell Towers

xxxxxxxxxx
 
<!DOCTYPE HTML>
<meta charset="utf-8">
<html>
<head>
​
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400italic,600italic,700italic,200,300,400,600,700,900">
<script src="https://d3js.org/d3.v3.min.js"></script>
​
<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 id="text">
​
    </div>
​
</div>
<script type="text/javascript" src="map.js"></script>
<script type="text/javascript" src="chart.js"></script>
</body>
</html>
    