This is a treemap representing patient leakage, inspired by Mike's block
View in full screen to see legend.
xxxxxxxxxx
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="layout_d3js.css">
<link rel="stylesheet" href="phtreemap.css">
</head>
</body>
<style>
#d3plus_tooltip_id_line, #d3plus_tooltip_id_bar, #tooltip {
position: absolute;
width: 220px;
height: auto;
padding: 10px;
background-color: white;
-webkit-border-radius: 2px !important;
-moz-border-radius: 2px !important;
border-radius: 2px !important;
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4) !important;
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4) !important;
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4) !important;
pointer-events: none;
z-index: 100000 !important;
border: #005C85 solid 1px !important;
}
#tooltip.hidden {
display: none;
}
.d3plus_tooltip_title, #tooltip p {
color:#333 !important;
margin: 0;
font-family: sans-serif !important;
font-size: 13px !important;
line-height: 20px !important;
}
.d3plus_tooltip_title{
font-weight: bold;
}
.d3plus_tooltip_container{
width:auto !important;
}
.d3plus_tooltip_arrow{
display:none;
}
</style>
<div id="tooltip" class="hidden">
<p><span id="heading"></span></p>
<p><span id="visits"></span></p>
<p><span id="otherinfo"></span></p>
</div>
<div class="row">
<div class="col-lg-11">
<div id="marketmap"
data-url="data.json"
data-npi="1982650024"
data-entitytype="2">
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="jsonToCsv.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-min.js"></script>
<script src="phtreemap.js"></script>
<script>
$('#marketmap').phTreemap();
</script>
</body>
</html>
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js
https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js
https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-min.js