D3 Examples - timeline

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; }
  </style>
</head>
​
<body>
  <script>
    
    
    d3.json("data3.json", function(error, data) {
      
        var _zoneColors = ["#BDDBF3", '#84CCE7', '#2EB0DF', '#0094D0', '#004EA7', '#0071C1', '#004EA7', '#BD10E0', '#B5BCC2', '#A565DC', '#822FB5', '#51A5DE', "#BDDBF3"];
      var _colors = ["#d8e9f7", '#bae2f1', '#a2dbf0', '#8edfff', '#89c0ff', '#8ed0ff', '#89c0ff', '#e99ff8', '#ccd1d5', '#d7bcef', '#cea5e7', '#add5ef', "#BDDBF3"];
​
      var locObj = {}, locIndex = 0, zoneObj = {}, zoneIndex = 0;
     function getLocColor(d, i) {
       if(d.isZone){
//          console.log('zone', d)
//          zoneObj[d.areaLocation] = locObj[d.areaLocation] ||  zoneIndex++;
//          i = zoneObj[d.areaLocation];
            var len = _zoneColors.length;
            if (i > len - 1) {
                i = i % len;
            }
            return _zoneColors[i];
       } else {
                locObj[d.locationName] = locObj[d.locationName] ||  locIndex++;
        i = locObj[d.locationName];
            var len = _colors.length;
            if (i > len - 1) {
                i = i % len;
            }
            return _colors[i];
       }
     }
​
    var height = 870;
    var width = 950;
    var margin = {top:30, bottom: 20, left: 120, right: 20};
        
//     var width = parseInt(d3.select("#graph").style("width")) - margin.left*2,
//     height = parseInt(d3.select("#graph").style("height")) - margin.top*2;
    var locHeight = height/data.length -4;
    var zoneHeight = locHeight/2 - 2;
      var transitHeight = zoneHeight - 2;
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);
        
      
    var rects = [];
    
      data.sort(function(a,b){
        var last = a.values.length-1;
        if(a.values && a.values.length) {
          return (b.key > a.key)
//           return (b.values.length > a.values.length)
//            return (b.values[last].site < a.values[last].site)
        } else {
          return (b.key > a.key)
        }
      });
    data.forEach(function(asset, i){ 
      var key = asset['key'];
      asset['values'].forEach(function(val){
        val.key = key;
        rects.push(val)
      })
    });
    
    var extent = d3.extent(rects, d => new Date(d.entry));
 var xScale = d3.scaleTime()
            .domain(extent)
            .range([margin.left, width - margin.right]);
    var yScale = d3.scaleLinear()
    .range([height - margin.bottom, margin.top])
    .domain([0, data.length]);
​
     var assets = svg.selectAll('rect')
        .data(rects)
        .enter();
      assets.append('rect')
      .attr("rx", 4)
     .attr('x', function(d,j) {
       var entry = xScale(new Date(d.entry));
        return entry;
     })
     .attr('y', function(d,k) {
        if (d.isZone) {
         return   yScale(d.series)   - zoneHeight/2 - margin.bottom/2 + 1 ;
       } else if (d.isTransit) {
         return   yScale(d.series)   - transitHeight/2 - margin.bottom/2 + 1 ;
       } else {
         return   yScale(d.series) - locHeight/2 - margin.bottom/2 + 1 ;
       }
     })
     .attr('width', function(d,j) {
       var entry = xScale(new Date(d.entry));
       var exit = xScale(new Date(d.exit));
       var width = (exit - entry);
        return width;
     })
     .attr('height', function(d) {
        if (d.isZone) {
          return zoneHeight;
        }
       return (d.isTransit) ? transitHeight : locHeight;
     })
     .attr('opacity', function (d,i){
       if (d.isZone || d.isTransit) {
         return 1;
       } else {
         return .5;
       }
     })
     .attr('fill', function (d,i){
       if (d.isTransit) {
         return 'deeppink';//#C70039'
       } else {
         return getLocColor(d,i)
       }
     });
           
//      assets.append("text")
//         .attr("x", function(d, i) { 
//        return xScale(new Date(d.entry)) + 80 })
//         .attr("y", function(d, i) { 
//            return yScale(d.series); 
//          })
//         .attr("dy", function(d) {
//        if (d.type === 'inTransit'){
//          return '.5em';
//        } else {
//          return '-.5em'
//        }
//      })
//      .attr('text-anchor', 'middle')
//        .style('font-size', '10px')
//        .style('font-family', 'arial')
//        .style('fill', 'white')
//         .text(function(d,i) { 
//           if (d.type !== 'inTransit'){
//             return d.locationName; 
//           }
//         });
    
//       assets.on("mouseover", function(d) {       
//             div.transition()     
//                 .duration(200)       
//                 .style("opacity", .9);       
//             div  .html(d.entryDisplay + "<br/>" )    ;
// //                 .style("left", (d3.event.pageX) + "px")       
// //                 .style("top", (d3.event.pageY - 28) + "px");  
//             })                   
//         .on("mouseout", function(d) {        
//             div.transition()     
//                 .duration(500)       
//                 .style("opacity", 0);    
//         });
      
    var xAxis = d3.axisBottom()
    .scale(xScale);
  
    
   var yAxis = d3.axisLeft()
    .scale(yScale)
   .ticks(data.length)
   .tickFormat(function(d, i) { 
     if (data[i]) {
     return data[i].key;
     }
   });
    
    var axisX = d3.select('svg').append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(" + [0, height - margin.bottom]  + ")")
        .call(xAxis);
    
       var axisY = d3.select('svg').append("g")
        .attr("class", "y axis")
        .attr("transform", "translate(" + [margin.left, -margin.bottom/2] + ")")
        .call(yAxis);
//     console.log(axisX.node);
    });
  </script>
</body>
​
    