chrisfrancis27/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      body {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        width: 960px;
        height: 100px;
        margin: 0 auto;
        font-size: 16px;
      }
      li.start {
        color: orange;
      }
      li.end {
        color: green;
      }
      li span {
        display: inline-block;
        color: #ccc;
        font-size: 14px;
        font-weight: normal;
        margin: 0 1em;
      }
      p {
        font-weight: bold;
        margin-left: 2em;
      }
    </style>
  </head>
  <body>
    <ol>
      <li id="item0">Do a bunch of (non-D3) work for 3 seconds</li>
      <li id="item1">Schedule a D3 transition for 3 seconds</li>
      <li id="item2">Run transition</li>
    </ol>

    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script>
      var time0 = window.performance.now();
      var time1, time2, time3, totalTime;
      document.querySelector('#item0').classList.add('start');

      // Simulate doing some stuff for 3 seconds
      setTimeout(function() {
        var n0 = d3.select('#item0')
          , n1 = d3.select('#item1')
          , n2 = d3.select('#item2')
        ;
        time1 = window.performance.now();

        // Increment state
        n0.classed('end', true)
          .append('span')
          .text(`${Math.round(time1 - time0)}ms`);

        // Schedule transition
        n1.classed('start', true)
          .transition()
          .duration(3000)
          .ease(d3.easeLinear)
          .on('start', function() {
            time2 = window.performance.now();
            // Increment state
            n1.classed('end', true)
              .append('span')
              .text(`${Math.round(time2 - time1)}ms`);
            n2.classed('start', true);
          })
          .on('end', function() {
            time3 = window.performance.now();
            totalTime = time3 - time0;
            // Increment state
            n2.classed('end', true)
              .append('span')
              .text(`${Math.round(time3 - time2)}ms`);

            d3.select('body')
              .append('p')
              .text(`Total time: ${Math.round(totalTime)}ms`);
          });
      }, 3000);
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<style>
	body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	width: 960px;
	height: 100px;
	margin: 0 auto;
	font-size: 16px;
	}
	li.start {
	color: orange;
	}
	li.end {
	color: green;
	}
	li span {
	display: inline-block;
	color: #ccc;
	font-size: 14px;
	font-weight: normal;
	margin: 0 1em;
	}
	p {
	font-weight: bold;
	margin-left: 2em;
	}
	</style>
	</head>
	<body>
	<ol>
	<li id="item0">Do a bunch of (non-D3) work for 3 seconds</li>
	<li id="item1">Schedule a D3 transition for 3 seconds</li>
	<li id="item2">Run transition</li>
	</ol>

	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script>
	var time0 = window.performance.now();
	var time1, time2, time3, totalTime;
	document.querySelector('#item0').classList.add('start');

	// Simulate doing some stuff for 3 seconds
	setTimeout(function() {
	var n0 = d3.select('#item0')
	, n1 = d3.select('#item1')
	, n2 = d3.select('#item2')
	;
	time1 = window.performance.now();

	// Increment state
	n0.classed('end', true)
	.append('span')
	.text(`${Math.round(time1 - time0)}ms`);

	// Schedule transition
	n1.classed('start', true)
	.transition()
	.duration(3000)
	.ease(d3.easeLinear)
	.on('start', function() {
	time2 = window.performance.now();
	// Increment state
	n1.classed('end', true)
	.append('span')
	.text(`${Math.round(time2 - time1)}ms`);
	n2.classed('start', true);
	})
	.on('end', function() {
	time3 = window.performance.now();
	totalTime = time3 - time0;
	// Increment state
	n2.classed('end', true)
	.append('span')
	.text(`${Math.round(time3 - time2)}ms`);

	d3.select('body')
	.append('p')
	.text(`Total time: ${Math.round(totalTime)}ms`);
	});
	}, 3000);
	</script>
	</body>
	</html>