D3Brush

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.11/crossfilter.min.js"></script>
<div id="histogram"></div>
<div id="choropleth"> </div>

CSS

/*** choropleth heat map styles */

#state-borders {
  fill: none;
  stroke: #fff;
  stroke-width: 2.0px;
  stroke-linejoin: round;
  stroke-linecap: round;
  pointer-events: none;
}

.counties {
  fill: #555;
  stroke: #C0C0C0;
  stroke-linejoin: round;
}


/*** d3-tip styles */

.d3-tip {
  line-height: 1.5;
  padding: 8px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 0px;
  text-align: center;
}

.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

.d3-tip.n:after {
  top: 100%;
  left: 0;
  margin: -1px 0 0;
}


/*** histogram styles */

.axis {
  shape-rendering: crispEdges;
}

.axis line {
  stroke: #fff;
}

.axis path {
  display: none;
}

.axis text {
  font-family: sans-serif;
  font-size: 8px
}


/* D3 brush */

.selecting path {
  fill-opacity: .2;
}

.selecting path.selected {
  stroke: #f00;
  stroke-width: 2px;
}

.brush .extent {
  stroke: #fff;
  fill-opacity: .125;
  shape-rendering: crispEdges;
}

JavaScript

var MSPB = [{
  "provider": "10001",
  "hospital": "SOUTHEAST ALABAMA MEDICAL CENTER",
  "county": "HOUSTON",
  "score": 0.97,
  "FIPS": 1045,
  "latitude": 31.216726,
  "longitude": -85.363066
}, {
  "provider": "10001",
  "hospital": "SOUTHEAST ALABAMA MEDICAL CENTER",
  "county": "HOUSTON",
  "score": 0.97,
  "FIPS": 1061,
  "latitude": 31.216726,
  "longitude": -85.363066
}, {
  "provider": "10001",
  "hospital": "SOUTHEAST ALABAMA MEDICAL CENTER",
  "county": "HOUSTON",
  "score": 0.97,
  "FIPS": 1069,
  "latitude": 31.216726,
  "longitude": -85.363066
}, {
  "provider": "10001",
  "hospital": "SOUTHEAST ALABAMA MEDICAL CENTER",
  "county": "HOUSTON",
  "score": 0.97,
  "FIPS": 1097,
  "latitude": 31.216726,
  "longitude": -85.363066
}, {
  "provider": "10005",
  "hospital": "MARSHALL MEDICAL CENTER SOUTH",
  "county": "MARSHALL",
  "score": 0.98,
  "FIPS": 1009,
  "latitude": 34.221523,
  "longitude": -86.160796
}, {
  "provider": "10005",
  "hospital": "MARSHALL MEDICAL CENTER SOUTH",
  "county": "MARSHALL",
  "score": 0.98,
  "FIPS": 1049,
  "latitude": 34.221523,
  "longitude": -86.160796
}, {
  "provider": "10005",
  "hospital": "MARSHALL MEDICAL CENTER SOUTH",
  "county": "MARSHALL",
  "score": 0.98,
  "FIPS": 1055,
  "latitude": 34.221523,
  "longitude": -86.160796
}, {
  "provider": "10005",
  "hospital": "MARSHALL MEDICAL CENTER SOUTH",
  "county": "MARSHALL",
  "score": 0.98,
  "FIPS": 1095,
  "latitude": 34.221523,
  "longitude": -86.160796
}, {
  "provider": "10006",
  "hospital": "ELIZA COFFEE MEMORIAL HOSPITAL",
  "county": "LAUDERDALE",
  "score": 0.99,
  "FIPS": 1077,
  "latitude": 34.793797,
  "longitude": -87.683273
}, {
  "provider": "10007",
  "hospital": "MIZELL MEMORIAL HOSPITAL",
  "county": "COVINGTON",
  "score": 1.02,
  "FIPS": 1031,
  "latitude": 31.292074,
  "longitude": -86.254428
}, {
  "provider": "10007",
  "hospital": "MIZELL MEMORIAL HOSPITAL",
  "county": "COVINGTON",
  "score": 1.02,
  "FIPS": 1039,
  "latitude":...