JSFiddle - React, Tailwind, and code Playground

by CoolBlue

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<div id="log"></div>

CSS

div { white-space: pre;}

JavaScript

var log = d3.select("#log");
log.writeline = function(s){
	log.text(log.text() + "\n" + s)
}
d3.select("body").insert("svg", "#log")
    .append("circle")
    .attr({fill: "steelblue", cx: 100, cy: 100, r: 10})

    .transition("first").delay(1000).duration(2000).attr("r", 200)

	.each("start", function(){log.writeline("start first")})
	.each("interrupt", function(){log.writeline("interrupt first")})
	.each("end", function(){log.writeline("end first")})

    .transition("second").delay(1500).duration(2000).attr("r", 10)

	.each("start", function(){log.writeline("start second")})
	.each("interrupt", function(){log.writeline("interrupt second")})
	.each("end", function(){log.writeline("end second")})