created by http://livecoding.io

README.md

View this code at http://livecoding.io/8061672

options.json

{
    "libraries": [
        "d3"
    ],
    "mode": "javascript",
    "layout": "fullscreen mode (vertical)",
    "resolution": "reset"
}

water.css

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;
}

water.html

<svg></svg>
<div></div>

water.js

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);

water.json

{
  "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"
}
  ]
}