AlexanderWingard · June 20, 2017 13:42
diff --git a/index.html b/index.html
 <!doctype HTML>
 <html>
    <head>
        <script src="https://d3js.org/d3.v4.min.js"></script>
        <style>
         svg {
             width: 100%;
             height: 200px;
         }
         rect {
             fill: lightBlue;
         }
        </style>
    </head>
    <body>
        <svg id="graph"></svg>
        <div>
            <button onclick="stop();">Stop</button>
        </div>
        <script>
 var data = [{start: new Date(), end: undefined}];

 var svg = d3.select("#graph");
 var width = parseInt(svg.style("width"));
 var xScale = d3.scaleTime().range([0, width]);
 var minDate = new Date(data[0]["start"].getTime());
 minDate.setSeconds(0);

 function render() {
    xScale.domain([minDate, roundMinutes(max_date(data[0]))]);
    var select = svg.selectAll("rect")
        .data(data);

    var enter = select.enter()
        .append("rect")
        .attr("height", 200);

    var exit = select.exit()
        .remove();

    var merged = select.merge(enter)
        .transition()
        .duration(1000)
        .ease(d3.easeLinear)
        .attr("width", function(d) {return xScale(max_date(d));});
 }

 function max_date(d) {
    if(d["end"] == undefined) {
        return new Date();
    } else {
        return d["end"];
    }
 }

 function roundMinutes(date) {
    newDate = new Date(date.getTime());
    newDate.setMinutes(newDate.getMinutes() + 1);
    newDate.setSeconds(0);
    return newDate;
 }

 function stop() {
    data[0]["end"] = new Date();
 }

 setInterval(render, 1000);
        </script>
    </body>
 </html>
	<!doctype HTML>
	<html>
	<head>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	svg {
	width: 100%;
	height: 200px;
	}
	rect {
	fill: lightBlue;
	}
	</style>
	</head>
	<body>
	<svg id="graph"></svg>
	<div>
	<button onclick="stop();">Stop</button>
	</div>
	<script>
	var data = [{start: new Date(), end: undefined}];

	var svg = d3.select("#graph");
	var width = parseInt(svg.style("width"));
	var xScale = d3.scaleTime().range([0, width]);
	var minDate = new Date(data[0]["start"].getTime());
	minDate.setSeconds(0);

	function render() {
	xScale.domain([minDate, roundMinutes(max_date(data[0]))]);
	var select = svg.selectAll("rect")
	.data(data);

	var enter = select.enter()
	.append("rect")
	.attr("height", 200);

	var exit = select.exit()
	.remove();

	var merged = select.merge(enter)
	.transition()
	.duration(1000)
	.ease(d3.easeLinear)
	.attr("width", function(d) {return xScale(max_date(d));});
	}

	function max_date(d) {
	if(d["end"] == undefined) {
	return new Date();
	} else {
	return d["end"];
	}
	}

	function roundMinutes(date) {
	newDate = new Date(date.getTime());
	newDate.setMinutes(newDate.getMinutes() + 1);
	newDate.setSeconds(0);
	return newDate;
	}

	function stop() {
	data[0]["end"] = new Date();
	}

	setInterval(render, 1000);
	</script>
	</body>
	</html>