Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.0/lodash.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body onload="">
  <button onclick="changeTime(1)">1 day</button>
  <button onclick="changeTime(3)">3 days</button>
  <div id="chart"></div>
</body>
</html>
 
var hourDomain, hourAxis, svg;
var now = moment.utc();
var todayStart = now.clone().hours(0).minutes(0).seconds(0);
var todayEnd = now.clone().hours(23).minutes(59).seconds(59);
var start = todayStart.valueOf();
var end = todayEnd.valueOf();
var data = [{
    'trips': [{
        'id': 29661,
        'legs': [{
          'departureDateTime': todayStart.clone().hours(5).valueOf(),
          'arrivalDateTime': todayStart.clone().hours(7).valueOf(),
          'id': 5875
        }, {
          'departureDateTime': todayStart.clone().hours(2).valueOf(),
          'arrivalDateTime': todayStart.clone().hours(4).valueOf(),
          'id': 5876
        }]
    }, {
        'id': 2375238758235,
        'legs': [{
          'departureDateTime': todayStart.clone().hours(10).valueOf(),
          'arrivalDateTime': todayStart.clone().hours(11).valueOf(),
          'id': 5877
        }, {
          'departureDateTime': todayStart.clone().hours(12).valueOf(),
          'arrivalDateTime': todayStart.clone().hours(20).valueOf(),
          'id': 5878
        }]
    }, {
        'id': 2375238758235,
        'legs': [{
          'departureDateTime': todayStart.clone().hours(22).valueOf(),
          'arrivalDateTime': todayStart.clone().hours(26).valueOf(),
          'id': 5880
        }]
    }]
}];
​
​
function drawTimeline() {
  var timeline = svg.append('g')
  .attr('class', 'timeline')
  .attr('height', 40);
​
  timeline.append('g')
    .attr('id', 'labeledHours')
    .attr('class', 'x axis')
    .attr('transform', 'translate(0, 40)');
​
}
function setAxis() {
  hourDomain = d3.time.scale.utc().domain([start, end]).range([0, 800]);
  hourAxis = d3.svg.axis()
    .scale(hourDomain)
    .orient('top')
    .ticks(22)
    .tickFormat(d3.time.format.utc('%H'))
    .tickSize(10, 1)
    .tickPadding(1);
}
function timeline() {
  setAxis();
​
  svg.select('g #labeledHours')
    .transition()
    .call(hourAxis)
    .selectAll('.tick')
    .attr('class', 'tick minor');
​
}
​
function drawBoard() {
  svg = d3.select('#chart')
    .append('svg')
    .attr('class', 'chart')
    .attr('width', 800);
​
  drawTimeline();
  timeline();
}
​
function draw(theData) {
  _.each(_.flatten(_.values(theData)), function (v) {
    drawTrips(v.trips);
  });
}
​
function drawTrips(trips) {
          var group;
          group = svg.selectAll('.flight')
            .data(trips);
​
          // draw the group
          group.enter()
            .append('g')
            .attr('class', 'flight')
            .attr('transform', function (trip) {
            return 'translate(' + hourDomain(      Math.min.apply(null, _.map(trip.legs, 'departureDateTime'))) + ', 60)';
            });
​
​
          group.each(function (trip) {
            drawLegs(trip.id, trip.legs, d3.select(this));
          });
​
          group.exit().remove();
​
        }
​
function drawLegs(tripId, legs, group) {
          var tripObj = {
            id: tripId,
            legs: legs
          };
​
          var gLegs = group.selectAll('.leg')
              .data(legs);
​
          // draw each leg box
          gLegs.enter()
              .append('rect')
              .attr('class', function (l) {
                return (l.type === 'REPO' ? 'repo-leg ' : '') + 'leg';
              })
              .attr('y', 0)
              .attr('x', function (leg) {
                return  hourDomain(leg.departureDateTime) -
​
                  hourDomain(      Math.min.apply(null, _.map(legs, 'departureDateTime')));
              })
              .attr('height', 20)
              .attr('width', function (leg) {
                return (hourDomain(leg.arrivalDateTime) - hourDomain(      Math.min.apply(null, _.map(legs, 'departureDateTime')))) -
                       (hourDomain(leg.departureDateTime) - hourDomain(      Math.min.apply(null, _.map(legs, 'departureDateTime'))));
              });
​
          gLegs.exit().remove();
          //drawLegsLabels(tripObj, legs, group, yPos);
        }
​
​
function changeTime(time) {
  switch (time) {
    case 1:
      end = todayEnd.valueOf();
      //rangeStart rangeEnd]).range([0, width]).clamp(true);
      break;
    case 3:
      end = todayEnd.clone().add(2, 'd').valueOf();
      break;
  }
  
  timeline();
  draw(data);
}
​
drawBoard();
draw(data);
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers