D3 Examples - comp bars w/ sort

xxxxxxxxxx
 
<!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]); 
​
  var logCapped = d3.scaleLog() 
  .domain([1, 200]) 
  .rangeRound([1, 200]); 
  
  
    function render(data, comparator) { 
        var bars = d3.select("body").selectAll("div.h-bar") // <-B 
                .data(data); 
        // Enter 
        bars.enter().append("div") // <-C 
                .attr("class", "h-bar")
                .style("background-color", function(d){ 
                    return colorScale((d.max - d.baseDriver)/(d.max - d.min)*100); 
                })
                      .style("width", function (d) { 
                    return logCapped((d.baseDriver * 100)) + "px"; 
                }) 
                .append("span"); 
        // Update 
        d3.selectAll("div.h-bar") // <-D 
                .style("width", function (d) { 
                    return logCapped((d.baseDriver * 1000)) + "px"; 
                }) 
                        .style("height", '25px')
                .select("span") 
                .text(function (d) { 
                        if (d.unit == /[^]*/g){
                    return "$" + d.baseDriver + " " + d.compType;                 
                  } else {
                    return d.baseDriver + " " + d.compType;   }      
//              return d.baseDriver + " " + d.compType + "   (" + d.category + ")";           
//                     return d.category; 
                })
                        .attr("class", "bar-label")
       
        // Sort 
        if(comparator) 
            bars.sort(comparator); // <-E 
    } 
  
    var compareByValue = function (a, b) {  // <-F 
        return a.baseDriver > b.baseDriver?-1:1; 
    }; 
    var compareByCategory = function (a, b) {  // <-G 
        return a.category > b.category?-1:1; 
        }; 
        var compareByCompType = function (a, b) {  // <-G 
        return a.compType < b.compType?-1:1; 
        }; 
 
  
    render(data); 
     
    function sort(comparator) { 
        render(data, comparator); 
    } 
</script> 
 
<div class="control-group"> 
    <button onclick="sort(compareByValue)"> 
        Sort by Amount 
    </button> 
    <button onclick="sort(compareByCompType)"> 
        Sort by Comp Type 
    </button> 
    <button onclick="sort()"> 
        Reset 
    </button> 
</div> 
</body>
​
    