play with drag

_.md

[ Launch: play with drag ] 3f8a8a82f6b6233e90ef by gelicia

config.json

{"description":"play with drag","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/HNh5Z5h.png"}

inlet.js

var data = [
			{startTime:'2014-07-13T10:45:03Z', endTime: '2014-07-13T11:56:21Z'},
            {startTime:'2014-07-13T13:40:03Z', endTime: '2014-07-13T14:19:21Z'},
			{startTime:'2014-07-13T16:22:03Z', endTime: '2014-07-13T17:35:21Z'}
           ];

var svg = d3.select('svg');

var timeMin = d3.min(data, function(d){
  var thisDate = new Date(d.startTime);
  return thisDate.setTime(thisDate.getTime() - (500000)); 
});
                                      
var timeMax = d3.max(data, function(d){
  var thisDate = new Date(d.endTime);
  return thisDate.setTime(thisDate.getTime() + (500000)); 
});
     

var margin = {top: 41, left: 10, right: 0};
var screenWidth = 627;//$("#content").width();
var chartHeight = 200;

var timeScale = d3.time.scale().domain([timeMin, timeMax])
	.range([margin.left, screenWidth - (margin.left + margin.right)]);

var colorScale = d3.scale.category20();

  var monthAxis = d3.svg.axis()
      .scale(timeScale)
      .orient('bottom')
      .ticks(d3.time.hours, 1)
      .tickFormat(d3.time.format('%I %p'))
      .tickSize(9)
      .tickPadding(4);

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + chartHeight + ")")
    .call(monthAxis);

var timeTags = svg.selectAll("rect.timeTag").data(data);

timeTags.enter().append("rect").attr({
  x: function(d){ return timeScale(new Date(d.startTime));},
  y: 10,
  height: chartHeight - 20,
  width: function(d){ return timeScale(new Date(d.endTime)) - timeScale(new Date(d.startTime));},
  'fill-opacity': 0.5,
  fill: function(d,i){ return colorScale(i);},
  'stroke-opacity': 1,
  stroke: function(d,i){ return colorScale(i);},
  'stroke-width': 2
});


var drag = d3.behavior.drag()
.on("drag", function(d,i) {
  var dis = d3.select(this)
  dis.attr("x", + dis.attr("x") + d3.event.dx)
})
.on("dragend", function(d,i) {
  var dis = d3.select(this);
  var x = +dis.attr("x");  
})

drag.apply(timeTags);

style.css

.axis text {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}