D3 Examples - dash

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0;
    font-feature-settings: 'kern' 1,'onum' 1,'liga' 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    }
    ul li {
      list-style-type: none;
      float: left;
      width: 23%;
      margin-right: 1px;      
      background-color: #efefef;
      color: #999;
      text-align: center;
      opacity: .75;
      transition: background-color .3s,color .3s;
        }      
    button {
        cursor: pointer;
        border: none;
      outline: 0;
        margin: 0;
        padding: 0;
      font-size: 1rem;
        }
    .btn-toggle {
        background-color: #efefef;
      width: 100%;
        font-weight: 900;
        padding: .25em;
        border-radius: 2px;
        color: #2a2a2a;
        text-transform: uppercase;
        font-size: .8rem;
      color: #999;
      text-align: center;
        opacity: .75;
      transition: background-color .5s,color .5s;
        transition-property: background-color, color;
        transition-duration: .5s,.5s;
        transition-timing-function: initial, initial;
        transition-delay: initial, initial;
        }
    ul {
        list-style-type: none;
      overflow: hidden;
        zoom: 1;
        max-width: 25rem;
        margin: 1rem 0;
      
        }
    .btn-toggle:hover {
    background-color: #f3cc9b;
    color: #2a2a2a;
    } 
            
   .btn-toggle.is-active {
    background-color: #666;
    color: #efefef;
    opacity: 1;
     
   }
   .client-list {
      margin-left: 2rem;
   }
    text {
      fill: #9d1f60;
      font-family: Verdana, Geneva, sans-serif;
        font-weight: 400;
   }
   .exit {
    fill: brown;
     }
  
    
    
  </style>
</head>
​
<body>
  <div id="mtd" style="margin-left: 30px">
    <h2> Month to Date Spend</h2>
    <ul class="toggle" id="mtd-toggle">
            <li><button data-col="total" class="btn-toggle is-active">Overall</button></li>
            <li><button data-col="dbm" class="btn-toggle ">DBM</button></li>
            <li><button data-col="dcm" class="btn-toggle">DCM</button></li>
      <li><button data-col="ds" class="btn-toggle">DS</button></li>
        </ul>
  </div>
  <script>
    var clientData = [
 { id:1, name:"Caesars", dbm:203030, dcm: 32333, ds: 39302, overall:270000 },
{ id:2, name:"MGM", dbm:103030, dcm: 22333, ds: 29302, overall:170000 },
{ id:3, name:"Mandalay", dbm:182030, dcm: 22333, ds: 9302, overall:140000 },
{ id:4, name:"Aria", dbm:93030, dcm: 42333, ds: 19302, overall:210000 }];
    var svg = d3.select("#mtd").append("svg")
      .attr("width", 1200)
      .attr("height", 500);
​
    var gTable = svg.append("g")
      .attr("class", "list-table");
 
           var gHoverTable = svg.append("g")
    .attr("class", "hover-table")
    .attr("transform", "translate(500,41)")
  .style("visibility", "hidden");
gHoverTable.append("text")
    .attr("class", "hover-text")
    .style("font-size", "12px")
    .text("USD $200,000");
gHoverTable.append("line")
    .style("stroke", "#c9b49c")
    .style("stroke-dasharray", "2px 2px")
    .attr("x1", "-280")
    .attr("y1", "3")
    .attr("x2","-6")
    .attr("y2","3");
gHoverTable.append("line")
    .style("stroke", "#c9b49c")
    .style("stroke-dasharray", "2px 2px")
    .attr("x1", "-6")
    .attr("y1", "-15")
    .attr("x2","-6")
    .attr("y2","3");
gHoverTable.append("line")
    .style("stroke", "#c9b49c")
    .style("stroke-dasharray", "2px 2px")
    .attr("x1", "-6")
    .attr("y1", "-15")
    .attr("x2","107.2")
    .attr("y2","-15");
  
 d3.selectAll("button").on("click", function(){ 
   d3.selectAll("button")
     .classed("is-active", false);
   var btnSelected = d3.select(this);
   btnSelected.classed("is-active", true);
   update(clientData, btnSelected.text().toLowerCase() )
 });   
    
 function hover(hoverD, i, columnSort) {
        var gHover = d3.select(".hover-table")
        .attr("transform", "translate(475, " + ((i + 1) * 20 + 1) + " )" )
        .style("visibility", "visible");
    gHover.select("text").text("USD " + d3.format("($,.2f")(hoverD[columnSort]) )
   
 }
    
 function mouseOut(mouseD, i) {
   d3.select(".hover-table").style("visibility", "hidden");
 }
       
 function update(data, columnSort) {
   var maxValue = d3.max(data, function(d) { return d[columnSort]});
   data.sort(function(a,b) {
              var aTotal = a[columnSort];
              var bTotal = b[columnSort];
            return bTotal>=aTotal ? 1 : (bTotal<aTotal ? -1 : 0)});
    
   var t = d3.transition()
      .duration(650);
        var gRows = gTable.selectAll("g")
    .data(data, function(d) { return d.name; });   
   
   // EXIT old elements not present in new data.
   gRows.exit()
      .attr("class", "exit")
      .transition(t)
      .attr("transform", "translate(500, 80)")
      .style("fill-opacity", 1e-6)
      .remove();
   //Update the rows
   gRows.select("text")
        .text(function(d,i) { return (i+1) + ". " + d.name; });
     gRows.select("rect").attr("width", function(d) { return (d[columnSort]/maxValue)*320});                    
   gRows.on("mouseover", function(d,i) { hover(d, i, columnSort)});
   gRows.transition(t)
      .style("fill-opacity", 1)
        .attr("transform", function(d, i) { return "translate(0, " + ((i + 1) * 20) + ")"; })
   var gRow = gRows.enter().append("g")
      .attr("class", "client-row")
        .attr("transform", "translate(0, 500)")
      .style("fill-opacity", 1e-6);
   
        gRow.append("text")
        .text(function(d,i) { return (i+1) + ". " + d.name; });
      gRow.append("rect")
        .attr("x", "120")
        .attr("y", "-8")
        .attr("width", function(d) { return (d[columnSort]/maxValue)*320})
        .attr("height", "8")
        .attr("rx", "2")
        .attr("ry", "2")
        .style("fill", "rgb(204, 204, 204)")
      gRow.on("mouseover", function(d,i) { hover(d, i, columnSort)});
      gRow.transition(t)
        .style("fill-opacity", 1)
        .attr("transform", function(d, i) { return "translate(0, " + ((i + 1) * 20) + ")"; });      
     
   
   
 
​
 }  
    
   update(clientData, 'overall'); 
   
    
  </script>
  
</body>
​
    