[ Launch: time stuff ] 8299ccff7a4564c020e4 by gelicia
-
-
Save gelicia/8299ccff7a4564c020e4 to your computer and use it in GitHub Desktop.
time stuff
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"description":"time stuff","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/7guVRqx.png"} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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'}, | |
{startTime:'2014-07-13T19:52:03Z', endTime: '2014-07-13T20:35:21Z'}, | |
{startTime:'2014-07-13T18:52:03Z', endTime: '2014-07-13T19:21: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); | |
svg.selectAll("rect.timeTag").data(data).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 | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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