D3 Examples - d3 Scales with Data

xxxxxxxxxx
 
<!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>
    