Skip to content

Instantly share code, notes, and snippets.

@monkeyhouse
Forked from anonymous/options.json
Created December 20, 2013 21:17
Show Gist options
  • Save monkeyhouse/8061672 to your computer and use it in GitHub Desktop.
Save monkeyhouse/8061672 to your computer and use it in GitHub Desktop.
{
"libraries": [
"d3"
],
"mode": "javascript",
"layout": "fullscreen mode (vertical)",
"resolution": "reset"
}
svg {
position: absolute;
width: 600px;
height:250px;
}
.axis path{
fill:none;
stroke: #000000;
}
.axis {
font-size:8pt;
font-family:sans-serif;
}
.tick {
fill:none;
stroke:#000000;
}
circle{
stroke:#000000;
stroke-width:0.5px;
fill:#2B60DE;
opacity:0.6;
}
<svg></svg>
<div></div>
var width = $('svg').width();
var height = $('svg').height();
var svg = d3.select('svg');
var margin = 50;
var barPadding = 1;
var elements = livecoding.json.data.length;
var x_min = d3.min(livecoding.json.data, function(d){return new Date(d.start_date)});
var x_max = d3.max(livecoding.json.data, function(d){return new Date(d.end_date)});
var x_scale = d3.time.scale()
.domain([x_min, x_max])
.range([margin,width-margin]);
var x_axis = d3.svg.axis().scale(x_scale);
svg
.attr('width', width)
.attr('height', height)
.selectAll('rect')
.data(livecoding.json.data)
.enter()
.append('rect')
.attr('width', function(d){
return x_scale( new Date(d.end_date) ) -
x_scale( new Date(d.start_date) ); })
.attr('height', (height- (2*margin))/ elements - barPadding)
.attr('x', function(d)
{ return x_scale(new Date(d.start_date)) })
.attr('y', function(d, i){ return margin + i*(height - 2* margin)/ elements });
svg
.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (height-margin) + ")")
.call(x_axis);
d3.select('.x.axis')
.append('text')
.text('Temporal Validity')
.attr('x', function(){return (width / 2) - margin})
.attr('y', margin/1.5);
{
"data": [
{
"id" : "1",
"start_date" : "2001-09-29T15:14:20.068Z",
"end_date" : "2006-07-24T13:45:41.280Z"
},
{
"id" : "2",
"start_date" : "2000-11-02T05:17:29.169Z",
"end_date" : "2017-12-17T15:52:16.309Z"
},
{
"id" : "3",
"start_date" : "2005-03-12T18:56:41.720Z",
"end_date" : "2015-03-05T13:14:01.955Z"
},
{
"id" : "4",
"start_date" : "2011-08-05T12:07:10.437Z",
"end_date" : "2015-12-28T04:12:25.244Z"
},
{
"id" : "5",
"start_date" : "2011-07-09T13:50:05.797Z",
"end_date" : "2012-09-20T07:26:31.088Z"
},
{
"id" : "6",
"start_date" : "2013-12-26T14:18:06.336Z",
"end_date" : "2017-06-04T09:53:05.016Z"
},
{
"id" : "7",
"start_date" : "2011-10-12T04:47:24.240Z",
"end_date" : "2019-07-23T13:46:28.217Z"
},
{
"id" : "8",
"start_date" : "2003-06-04T21:19:29.670Z",
"end_date" : "2006-07-27T12:02:17.693Z"
},
{
"id" : "9",
"start_date" : "2012-07-31T19:25:29.975Z",
"end_date" : "2018-08-16T20:54:35.276Z"
},
{
"id" : "10",
"start_date" : "2000-11-26T20:53:01.615Z",
"end_date" : "2017-09-23T22:35:41.339Z"
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment