Skip to content

Instantly share code, notes, and snippets.

@gelicia gelicia/_.md

Last active Aug 29, 2015
Embed
What would you like to do?
play with drag
{"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"}
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);
.axis text {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.