d3 Animation Template

A template for an animated d3 page with space for controls and visuals.

<!DOCTYPE html>
<meta charset="utf-8">

<head>
    <title> Animation Template </title>

<body>
    <div id="controls"> 
        Controls go here
    </div>
    <div id="stimulus"> 
        <svg></svg>
    </div>
</body>

var SVGSize = 100;
var width, height;

var svg = d3.select("svg")
    .attr("viewBox", [0, 0, SVGSize, SVGSize].join(' '))

var circle = svg.append("circle")
    .attr("cx", "50")
    .attr("cy", "50")
    .attr("r", "50");

d3.timer(function(elapsed) {
    circle.attr("r", 1 + 25 * (1 + Math.sin(elapsed/1000)) / 2);
});

</script>

https://d3js.org/d3.v4.min.js