d3 Scales with Data

D3 Scales w/ Data

Playing with D3 scales, with sample data and transitions

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<meta charset="utf-8">
<html>
<head>
	<script src="//d3js.org/d3.v3.min.js" charset="utf-8" type="text/javascript"></script>
	<style>
		body{
			margin:0px;
			padding:0px;
			border:0px;
			
		}
		#menu{
			height:8vh;
			width:100vw;
      padding-left:1vw;
		}
		#viz{
			height:10vh;
			width:100vw;
			padding-left:2vw;
			padding-right:2vw;
		}
		.axis .title {
	    font: 20px helvetica;
		}
		.axis text {
	    font: 10px sans-serif;
	  }
		.axis path,
		.axis line {
      fill: none;
	    stroke: #000;
	  }
		button {
	  color: none;
	  border: 2px black solid;
	  margin: 10px;
	  border-radius: 5px;
	  text-decoration: none;
	  padding: 10px;
	  font-size: 12px;
	  transition: .3s;
	  -webkit-transition: .3s;
	  -moz-transition: .3s;
	  -o-transition: .3s;
	  display: inline-block;
	  transition: .3s;
	  -webkit-transition: .3s;
	  -moz-transition: .3s;
	  -o-transition: .3s;
	  background-color:white;
		}
		button:hover {
	    background-color: black;
	    color: white
	  }
	</style>	
	
  <script type = "text/javascript">
  var items = [
                {"lane": 0, "id": "hello", "start": 1, "end": 2},
			          {"lane": 1, "id": "example", "start": 3, "end": 5},
                {"lane": 2, "id": "text", "start": 6, "end": 9}
              ];
  </script>
	
</head>
<body>
	
	<div id="viz">
	  	<p id ="message"></p>
	</div>
	<div id="menu">
	  <button id="rescaleLinear" onclick= display("linear") >Linear</button>  
	  <button id="rescaleLog"  onclick= display("log")>Logarithmic</button>
	  <button id="rescaleSqrt"  onclick= display("sqrt")>SquareRoot</button>
	  <button id="rescalePower"  onclick= display("power")>Power^2</button>
  
	</div>
	<script type="text/javascript">
			
		var divWidth = parseInt(window.getComputedStyle(document.getElementById("viz")).width);
		var divHeight = parseInt(window.getComputedStyle(document.getElementById("viz")).height);
		var leftPadding = parseInt(window.getComputedStyle(document.getElementById("viz")).getPropertyValue('padding-left'));
		var rightPadding = parseInt(window.getComputedStyle(document.getElementById("viz")).getPropertyValue('padding-right'));		
		var width = divWidth-leftPadding-rightPadding;
		var height = divHeight;
		
		var simpleDomain = [1,10];
		var simpleRange = [0,width];
		
		var scale, axis;	
		
		var svg = d3.select("#viz").append("svg")
								.attr("style","background:white;")
		    				.attr("width", width)
		    				.attr("height", height);
				
		var g = svg.append("g")
	 							.attr("class","axis")
	 							.attr("transform", "translate(0,20)");
				g.append("text")
	 							.attr("y","50")
                .attr("class","title")                     
           
  	
		//---render the svg container
		var timeline = d3.select("svg").append("g")
			.attr("class","timeline")
			.attr("width",width)
			.attr("height",height);

//---render container for compressed timeline data
		var cTimeline = timeline.append("g")
		  .attr("transform","translate(20,10)")
    	.attr("width", width)
			.attr("class", "cTimeline");

display();     //display the timeline
   
    function getInterval(){
			return simpleDomain;
    }     
    function getAxis(scale){
      return d3.svg.axis()
      			    .scale(scale);
    }  
    function getScale(type){ 
      var timeRange = getInterval();
      switch(type) {
       
          case "linear":   	
      			scale = d3.scale.linear()
      			    .domain(timeRange)
      			    .range(simpleRange);  	
		    		
    		    d3.select(".axis")
    		        .transition()
    		        .duration(1500)
    		        .ease("sin-in-out")  
    		        .call(getAxis(scale));  
    		    d3.select(".title")
    		        .transition()
    		        .duration(1500)
    		        .text("Linear Scale");			
            return scale;      
      			break;
						
          case "power":
      			scale = d3.scale.pow().exponent(2)
      			    .domain(timeRange)
      			    .range(simpleRange);
  	    	  
            d3.select(".axis")
        	      .transition()
        	      .duration(1500)
        	      .ease("sin-in-out")  
        	      .call(getAxis(scale)); 
        	 	d3.select(".title")
        	      .transition()
        	      .duration(1500)
        	      .text("Squared Power Scale");
            return scale;                     
            break;
						
      		case "sqrt":
      			scale = d3.scale.sqrt()
      			    .domain(timeRange)
      			    .range(simpleRange);
  	    		
        		  d3.select(".axis")
        		    .transition()
        		    .duration(1500)
        		    .ease("sin-in-out")  
        		    .call(getAxis(scale));  
        		  d3.select(".title")
        		    .transition()
        		    .duration(1500)
        		    .text("Square Root Scale");
            return scale;               
    		    break;
								
      		case "log":
      			scale = d3.scale.log()
      			    .domain(timeRange)
      			    .range(simpleRange);
  	
            d3.select(".axis")
                .transition()
                .duration(1500)
                .ease("sin-in-out")
                .call( getAxis(scale));
            d3.select(".title")
              .transition()
              .duration(1500)
              .text("Log Scale");
            return scale;                
    			  break;
					     			
          default:
  			    scale = d3.scale.linear()
  			      .domain(timeRange)
  			      .range(simpleRange);  	
    		
            d3.select(".axis")
		          .transition()
		          .duration(1500)
		          .ease("sin-in-out")  
		          .call(getAxis(scale));  
            d3.select(".title")
		          .transition()
		          .duration(1500)
		          .text("Linear Scale");			
            return scale;      
      }
	  }//end setScale(type)
		function display(type){			
        var timeInterval = getInterval();       
				filteredApps = items.filter(function (el) {
					return (el.start <= timeInterval[1] && el.start >= timeInterval[0]) ||
					(el.end <= timeInterval[1] && el.end >= timeInterval[0]);
				});
        drawCompressed(type,filteredApps);	
		}	
		function drawCompressed(type,filteredApps){
			     
        scale = getScale(type);
        
  			var cbars = d3.select(".timeline").selectAll(".cbar")
        .data(filteredApps);
       
        cbars.enter()
          .append("rect")
          .attr("class", 'cbar')
          .attr("x", function(d) {return scale(d.start);})   //x = scaled value of start time
          .attr("y", 0)
          .attr("width", function(d) {return ( scale(d.end) - scale(d.start)); }) //x = value of scaled(end) - scaled(start)
          .attr("height", 20)
          .style("fill", "blue");
      
        cbars.transition()
    		        .duration(1500)
    		        .ease("sin-in-out")  
          .attr("x", function(d) {return scale(d.start);})   //x = scaled value of start time
          .attr("y", 0)
          .attr("width", function(d) {return ( scale(d.end) - scale(d.start)); }) //x = value of scaled(end) - scaled(start)
          .attr("height", 20)
                  
        cbars.exit().transition().remove();
		}
				
</script>
</body>
</html>

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