D3 Examples - bar chart w/ filter

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body {
    font-family: "helvetica";
}
​
button {
    margin: 0 7px 0 0;
    background-color: #f5f5f5;
    border: 1px solid #dedede;
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;
​
    font-size: 12px;
    line-height: 130%;
    text-decoration: none;
    font-weight: bold;
    color: #565656;
    cursor: pointer;
}
​
.box {
    width: 200px;
    height: 200px;
    margin: 40px;
    float: left;
    text-align: center;
    border: #969696 solid thin;
    padding: 5px;
}
​
.red {
    background-color: #e9967a;
    color: #f0f8ff;
}
​
.blue {
    background-color: #add8e6;
    color: #f0f8ff;
}
​
.cell {
    min-width: 40px;
    min-height: 20px;
    margin: 5px;
    float: left;
    text-align: center;
    border: #969696 solid thin;
    padding: 5px;
}
​
.fixed-cell {
    min-width: 40px;
    min-height: 20px;
    margin: 5px;
    position: fixed;
    text-align: center;
    border: #969696 solid thin;
    padding: 5px;
}
​
.h-bar {
    min-height: 15px;
    min-width: 10px;
    background-color: cornflowerblue;
    margin-bottom: 2px;
    font-size: 11px;
    color: #f0f8ff;
    text-align: right;
    padding-right: 2px;
}
​
.v-bar {
    min-height: 1px;
    min-width: 30px;
    background-color: #4682b4;
    margin-right: 2px;
    font-size: 10px;
    color: #f0f8ff;
    text-align: center;
    width: 10px;
    display: inline-block;
}
​
.baseline {
    height: 1px;
    background-color: black;
}
​
.clear {
    clear: both;
}
​
.selected {
    background-color: #f08080;
}
​
.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 = [
        {expense: 10, category: "Cash"},
        {expense: 15, category: "Bonus"},
        {expense: 30, category: "Cash"},
        {expense: 50, category: "Equity"},
        {expense: 80, category: "Bonus"},
        {expense: 65, category: "Cash"},
        {expense: 55, category: "Bonus"},
        {expense: 30, category: "Equity"},
        {expense: 20, category: "Cash"},
        {expense: 10, category: "Equity"},
        {expense: 8, category: "Bonus"}
    ];
​
    var colorScale = d3.scaleLinear() 
    .domain([0, 100]) 
    .range(["#add8e6", "blue"]);
  
    function render(data, category) {
        var bars = d3.select("body").selectAll("div.h-bar")
                .data(data);
​
        // Enter
        bars.enter()
            .append("div") 
                .attr("class", "h-bar")
                .style("width", function (d) {
                    return (d.expense * 5) + "px";
                        })
                        .style("background-color", function(d){ 
                    return colorScale(d.expense); // <- E 
                }) 
            .append("span") 
                .text(function (d) {
                    return d.category;
                });
​
//            // Enter 
//         bars.enter() 
//                 .append("div") 
//                 .attr("class", "h-bar") 
//                 .merge(bars) // Enter + Update 
//                 .style("width", function (d) { // <- C 
//                     return (d.width * 5) + "px"; // <- D 
//                 }) 
//                 .style("background-color", function(d){ 
//                     return colorScale(d.color); // <- E 
//                 }) 
//                 .text(function (d) { 
//                     return d.width; // <- F 
//                 }); 
        // Exit 
//         bars.exit().remove(); 
//     }    
      
      
      
        // Update
        d3.selectAll("div.h-bar").attr("class", "h-bar");
​
        // Filter
        bars.filter(function (d, i) {
                return d.category == category;
            })
            .classed("selected", true);
    }
​
    render(data);
​
    function select(category) {
        render(data, category);
    }
</script>
​
<div class="control-group">
    <button onclick="select('Cash')">
        Cash
    </button>
    <button onclick="select('Bonus')">
        Bonus
    </button>
    <button onclick="select('Equity')">
        Equity
    </button>
    <button onclick="select()">
        Clear
    </button>
</div>
</body>
​
    