D3 Examples - Candidate Tracker

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body{
  width: 960px;
  height: 500px;
  font-family: monospace;
}
​
#states {
  fill: #ccc;
}
​
#state-borders {
  fill: none;
  stroke: #fff;
  stroke-width: 1.5px;
  stroke-linejoin: round;
  stroke-linecap: round;
  pointer-events: none;
}
​
#left, #right{
  float: left;
}
​
.legend{
  text-align: center;
}
.legend span{
  width: 100px;
  display: inline-block;
  font-size: 18px;
  cursor: pointer;
  font-variant: small-caps;
}
.legend span.selected{
  font-weight: bold;
  text-decoration: underline;
}
​
​
.tbl-head{
  font-weight: bold;
  text-decoration: underline;
  background-color: lightgrey;
}
​
.tbl, .tbl-head{
  display: inline-block;
  vertical-align: top;
}
​
.tbl{
  overflow-y: scroll;
  height: 400px;
}
​
.cell{
  display: inline-block;
  width: 120px;
  border: 1px solid darkgrey;
  padding-left: 2px;
}
​
​
</style>
​
<body>
  <div id='left'></div>
  <div id='right'></div>
​
</body>
​
​
<script src="/1wheel/raw/67b47524ed8ed829d021/d3-3.5.5.js"></script>
<script src="/1wheel/raw/67b47524ed8ed829d021/lodash-3.8.0.js"></script>
<script src="/1wheel/raw/67b47524ed8ed829d021/topojson.v1.min.js"></script>
<script src='/1wheel/raw/1b6758978dc2d52d3a37/d3-jetpack.js'></script>
<script src='/1wheel/raw/1b6758978dc2d52d3a37/d3-starterkit.js'></script>
​
​
<script src='candidate-map.js'></script>
​
​
    