martinjc · June 3, 2017 20:10 · Jun 3, 2017 · Jun 3, 2017
diff --git a/README.md b/README.md
@@ -0,0 +1 @@
+Using d3.timer() to animate a bouncing ball
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <script src="http://d3js.org/d3.v4.min.js"></script>
+    <link rel="stylesheet" href="style.css">
+    <title>Animation with D3</title>
+</head>
+<body>
+    <div id="vis"></div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/preview.png b/preview.png
diff --git a/script.js b/script.js
@@ -0,0 +1,74 @@
+var width = 500;
+var height = 500;
+
+var margin = {
+    top: 20,
+    left: 20,
+    bottom: 20,
+    right: 20
+};
+
+var radius = 5;
+
+var svg = d3.select('#vis')
+    .append('svg')
+    .attr('width', width)
+    .attr('height', height)
+    .append('g')
+    .attr('transform', 'translate(' + margin.left + ',' + margin.right + ')');
+
+width = width - margin.left - margin.right;
+height = height - margin.top - margin.bottom;
+
+var circle_data = createRandomCircles();
+
+var circles = svg.selectAll('.circle')
+    .data(circle_data)
+    .enter()
+    .append('circle')
+    .attr('class', 'circle')
+    .attr('r', radius)
+    .attr('fill', 'blue')
+    .attr('cx', function(d) {
+        return d.x;
+    })
+    .attr('cy', function(d) {
+        return d.y;
+    });
+
+d3.timer(animate);
+
+function animate(elapsed) {
+
+    circles
+        .attr('cx', function(d) {
+            d.x = d.x + (d.speed * d.x_diff);
+            if (d.x <= 0 || d.x >= width) {
+                d.x_diff = d.x_diff * -1;
+            }
+            return d.x;
+        })
+        .attr('cy', function(d) {
+            d.y = d.y + (d.speed * d.y_diff);
+            if (d.y <= 0 || d.y >= height) {
+                d.y_diff = d.y_diff * -1;
+            }
+            return d.y;
+        });
+}
+
+function createRandomCircles() {
+    var circle_data = [];
+    var numCircles = Math.floor(Math.random() * 10) + 1;
+    for (var i = 0; i < numCircles; i++) {
+        circle_data.push({
+            x: Math.random() * width,
+            y: Math.random() * height,
+            x_diff: Math.random() < 0.5 ? 1 : -1,
+            y_diff: Math.random() < 0.5 ? 1 : -1,
+            speed: Math.random() * 5,
+            checked: false,
+        })
+    }
+    return circle_data;
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,4 @@
+html, body, #vis {
+    height: 100%;
+    margin: 0;
+}
diff --git a/thumbnail.png b/thumbnail.png
diff --git a/.block b/.block
@@ -0,0 +1,2 @@
+license: MIT
+border: no
No results found