magjac/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v4.js"></script>
<div></div>
<script>

var svg = d3.select("div").append("svg")
    .attr("width", 300)
    .attr("height", 220);

var g = svg.append("g");

function waste(time) {
    var t0 = Date.now();
    while (Date.now() - t0 < time)
        ;
}

var rect = g.append("rect")
    .attr("width", 100)
    .attr("height", 100)
    .attr("fill", "#d62728");

g.selectAll("rect.guide")
    .data([100, 200])
  .enter()
  .append("rect")
    .attr("width", d => d)
    .attr("height", d => d)
    .attr("fill", "none")
    .attr("stroke", "black");

// comment out either of these two lines to make it work
var dummy = d3.now();
waste(3000);

rect
  .transition()
    .ease(d3.easeLinear)
    .delay(100)
    .duration(6000)
    .attr("width", 200)
    .attr("height", 200);

</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<body>
	<script src="//d3js.org/d3.v4.js"></script>
	<div></div>
	<script>

	var svg = d3.select("div").append("svg")
	.attr("width", 300)
	.attr("height", 220);

	var g = svg.append("g");

	function waste(time) {
	var t0 = Date.now();
	while (Date.now() - t0 < time)
	;
	}

	var rect = g.append("rect")
	.attr("width", 100)
	.attr("height", 100)
	.attr("fill", "#d62728");

	g.selectAll("rect.guide")
	.data([100, 200])
	.enter()
	.append("rect")
	.attr("width", d => d)
	.attr("height", d => d)
	.attr("fill", "none")
	.attr("stroke", "black");

	// comment out either of these two lines to make it work
	var dummy = d3.now();
	waste(3000);

	rect
	.transition()
	.ease(d3.easeLinear)
	.delay(100)
	.duration(6000)
	.attr("width", 200)
	.attr("height", 200);

	</script>