dash_d3_old

forked from anonymous's block: fresh block

forked from anonymous's block: dash1

forked from lexsf's block: dash1

<!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 style="margin-left: 30px">
    <h2> Month to Date Spend</h2>
    <ul class="toggle" id="mtd-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>
  </div>
  <script>
    var clientData = [
 { id:1, name:"Caesars", dbm:203030, dcm: 32333, ds: 39302, total:270000 },
{ id:2, name:"MGM", dbm:103030, dcm: 22333, ds: 29302, total:170000 },
{ id:3, name:"Mandalay", dbm:182030, dcm: 22333, ds: 9302, total:140000 },
{ id:4, name:"Aria", dbm:93030, dcm: 42333, ds: 19302, total:210000 }];
    var svg = d3.select("ul").append("svg")
      .attr("width", 800)
      .attr("height", 500);

var gTable = svg.append("g")
      .attr("class", "list-table");
    
 function update(data) {
   var t = d3.transition()
      .duration(1250);
 		var gRows = gTable.selectAll("g")
    .data(data, function(d) { return d; });
   // EXIT old elements not present in new data.
   gRows.exit()
      .attr("class", "exit")
      .transition(t)
      .attr("y", -60)
   		.attr("x", 500)
      .style("fill-opacity", 1e-6)
      .remove();
   
 }
    
    
    
  </script>
  
</body>

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