comp bars w/ sort

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body {
    font-family: "helvetica";
    background-color: #e0edfa;
		}

button {
    margin: 10px 10px 10px 10px;
    background-color: #f5f5f5;
    border: 2px solid #dedede;
    border-top: 2px solid #eee;
    border-left: 2px solid #eee;
    font-size: 18px;
    line-height: 180%;
    text-decoration: none;
    font-weight: bold;
    color: #238bd1;
    cursor: pointer;
}

.h-bar {
    min-height: 15px;
  	height: 25px;
    min-width: 20px;
    background-color: cornflowerblue;
    margin-bottom: 0px;
    font-size: 10px;
    color: #d6e7fe;
    text-align: left;
    padding-top: 1px;
	  padding-left: 1px;
}

.v-bar {
    min-height: 40px;
  	height: 40px;
    min-width: 10px;
    background-color: #82acce;
    margin-right: 2px;
    font-size: 10px;
    color: #e0f1ff;
    text-align: center;
    width: 20px;
    display: inline-block;
}

.bar-label {
  	color: "#ce5d9f";
    font-style: italic;
    font-size: 10px;
  	font-weight: 500;
    opacity: 0.7;
    padding-bottom: 1px;
    margin-top: 0px;
    margin-bottom: 0px;
  	letter-spacing: 1px;
 }    
    
/* .baseline {
    height: 1px;
    background-color: black;
} */

/* .clear {
    clear: both;
}

.selected {
    background-color: #eae051;
} */

/* .control-group {
    padding-top: 10px;
    margin: 10px;
} */

/* .table {
    width: 70%;
}

.table td, th {
    padding: 5px;
}

.table-header {
    background-color: #00AFEF;
    font-weight: bold;
}

.table-row-odd {
    background-color: #f0f8ff;
}

.table-row-odd {
    background-color: #d3d3d3;
} */

/* .code {
    display: inline-block;
    font-style: italic;
    background-color: #d3d3d3;
    border: #969696 solid thin;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
} */

/* .countdown{
    width: 150px;
    height: 150px;
    font-size: 5em;
    font-weight: bold;
}

.axis .grid-line{
    stroke: black;
    shape-rendering: crispEdges;
    stroke-opacity: .2;
}

.line{
    fill: none;    
    stroke: steelblue;
    stroke-width: 2;
}

.dot {
  fill: #fff;
  stroke: steelblue;
}

.area {
    stroke: none;
    fill: steelblue;
    fill-opacity: .2;
}

.pie text{
    fill: white;
    font-weight: bold;
} */
/* 
._0{
    stroke: none;
    fill: darkred;
    fill-opacity: .7;
}

._1 {
    stroke: none;
    fill: red;
    fill-opacity: .7;
}

._2 {
    stroke: none;
    fill: blue;
    fill-opacity: .7;
}

._3 {
    stroke: none;
    fill: green;
    fill-opacity: .7;
}

._4{
    stroke: none;
    fill: yellow;
    fill-opacity: .7;
}

._5{
    stroke: none;
    fill: blueviolet;
    fill-opacity: .7;
} */

/* .bubble{
    fill-opacity: .3;
} */

/* .bar{
    stroke: none;
    fill: steelblue;
}
 */
  </style>
</head>

<body>
<script type="text/javascript"> 
  
  	var data = [
      {"unit": "$/year", "compType": "salary", "min": 80, "baseDriver": 130, "max": 150, "normalizeFn": 1, "category": "base", "recurring": true, "guaranteed": true, "percentRealization": 100},
      {"unit": "$/year", "compType": "match401k", "min": 0, "baseDriver": 5, "max": 6, "normalizeFn": 1, "category": "base", "recurring": true, "guaranteed": true, "percentRealization": 50},

{"unit": "$", "compType": "signingBonus", "min": 5, "baseDriver": 8, "max": 12, "normalizeFn": 1, "category": "Incentive", "recurring": false, "guaranteed": true, "percentRealization": 100},
      {"unit": "$", "compType": "annualBonus", "min": 10, "baseDriver": 25, "max": 50, "normalizeFn": 1, "category": "Incentive", "recurring": true, "guaranteed": false, "percentRealization": 50},

{"unit": "$/month", "compType": "employerPaidHealth", "min": 0.4, "baseDriver": 1.5, "max": 2.2, "normalizeFn": 12, "category": "Benefits", "recurring": true, "guaranteed": true, "percentRealization": 100},
      {"unit": "$/month", "compType": "stipends", "min": 0, "baseDriver": 1.5, "max": 3, "normalizeFn": 12, "category": "Benefits", "recurring": true, "guaranteed": false, "percentRealization": 100},
      {"unit": "$/month", "compType": "subsidies", "min": 0, "baseDriver": 1, "max": 2, "normalizeFn": 12, "category": "Benefits", "recurring": true, "guaranteed": true, "percentRealization": 100},
      {"unit": "$/month", "compType": "misc", "min": 0, "baseDriver": 0.01, "max": 5, "normalizeFn": 12, "category": "Benefits", "recurring": true, "guaranteed": true, "percentRealization": 100},

{"unit": "$/year", "compType": "professionalDev", "min": 0, "baseDriver": 1.5, "max": 2.0, "normalizeFn": 1, "category": "Education", "recurring": true, "guaranteed": true, "percentRealization": 70},
      {"unit": "$/year", "compType": "personalDev", "min": 0, "baseDriver": 0.5, "max": 0.5, "normalizeFn": 1, "category": "Education", "recurring": true, "guaranteed": true, "percentRealization": 90},

{"unit": "hours/week", "compType": "timeAllocation", "min": 10, "baseDriver": 32, "max": 80, "normalizeFn": 40, "category": "Availability", "recurring": true, "guaranteed": false, "percentRealization": 80},

{"unit": "weeks/year", "compType": "vacation", "min": 2, "baseDriver": 4, "max": 6, "normalizeFn": 52, "category": "Availability", "recurring": true, "guaranteed": true, "percentRealization": 100},
      {"unit": "weeks/year", "compType": "newParent", "min": 0, "baseDriver": 0.01, "max": 8, "normalizeFn": 52, "category": "Availability", "recurring": false, "guaranteed": true, "percentRealization": 0},

{"unit": "stockOptions", "compType": "signingOptions", "min": 0, "baseDriver": 10, "max": 20, "normalizeFn": 0.25, "category": "Equity", "recurring": false, "guaranteed": false, "percentRealization": 100},
      {"unit": "RSUs", "compType": "signingRSUs", "min": 0, "baseDriver": 10, "max": 25, "normalizeFn": 0.25, "category": "Equity", "recurring": false, "guaranteed": false, "percentRealization": 100},

{"unit": "stockOptions/year", "compType": "ESOP", "min": 10, "baseDriver": 15, "max": 30, "normalizeFn": 0.25, "category": "Equity", "recurring": true, "guaranteed": true, "percentRealization": 50},
      {"unit": "RSUs/year", "compType": "ESOP", "min": 5, "baseDriver": 15, "max": 20, "normalizeFn": 0.25, "category": "Equity", "recurring": true, "guaranteed": true, "percentRealization": 50}

];
  
   var colorScale = d3.scaleLinear() 
    .domain([0, 100]) 
    .range(["#9f3631", "#38a8b7"]);
  
  var linearCapped = d3.scaleLinear()
  .domain([1, 100]) // <-B 
  .range([1, 200]);
  
  var powCapped = d3.scalePow() 
  .exponent(2) 
  .domain([1, 10]) 
  .rangeRound([1, 10]);

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