D3 Examples - dash1

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;
   }
  
    
    
  </style>
</head>
​
<body>
  <div style="margin-left: 10px">
    <h3> MTD Spend</h3>
    <ul class="toggle">
            <li><button data-col="overall" 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>
    <svg width="800" height="500" class="client-list">
      <g class="list-table">
      <g class="client-row" transform="translate(0,20)">
        <text>1. Caesar's </text>
        <rect x="120" y="-8" width="391.55672823219" height="8" rx="2" ry="2" style="fill: rgb(204, 204, 204);"></rect>
      </g>
      <g class="client-row" transform="translate(0,40)">
        <text>2. MGM's </text>
        <rect x="120" y="-8" width="361.55672823219" height="8" rx="2" ry="2" style="fill: rgb(204, 204, 204);"></rect>
      </g>
      <g class="client-row" transform="translate(0,60)">
        <text>3. Aria </text>
        <rect x="120" y="-8" width="321.55672823219" height="8" rx="2" ry="2" style="fill: rgb(204, 204, 204);"></rect>
      </g>
      <g class="client-row" transform="translate(0,80)">
        <text>4. Mandalay </text>
        <rect x="120" y="-8" width="291.55672823219" height="8" rx="2" ry="2" style="fill: rgb(204, 204, 204);"></rect>
      </g>
      </g>
      <g class="hover__table" transform="translate(550, 41)">
    <text class="hover__label" style="font-size: 12px;">USD $200,000</text>
    <line  style="stroke: #c9b49c;
    stroke-dasharray: 2px 2px;" x1="-160" y1="3" x2="-6" y2="3"></line>
    <line style="stroke: #c9b49c;
    stroke-dasharray: 2px 2px;" x1="-6" y1="-15" x2="-6" y2="3"></line>
    <line style="stroke: #c9b49c;
    stroke-dasharray: 2px 2px;" x1="-6" y1="-15" x2="107.2"  y2="-15"></line>
</g>
      
      
      
      
      
      
    </svg>
  </div>
  
</body>
​
    