d3 Animation Template by steveharoz

index.html

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

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

    <style>
    html, body { margin: 0; font-family: sans-serif; width: 100%; height: 100% }
    body { display: flex }
    @media (max-width: 600px) {
        body { display: block; }
    }
    div { padding: 1em; }
    #controls { background-color: red; width: 350px; }
    #stimulus { background-color: blue; width: 100% }
    svg { width: 100%; height: 100%; display: block; margin: auto auto; }
    </style>
</head>

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

<script src="//d3js.org/d3.v4.min.js"></script>
<script>

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>