Inertia and back

A (not so) simple d3-inertia example.

The offset is t * (1-t) * velocity, which allows the drawing to come back to its original place after n seconds.

<!doctype html>
<html>
<head>
	<script src="https://unpkg.com/d3"></script>
  <script src="https://unpkg.com/d3-inertia"></script>
	<style>
    svg {
      cursor: move; /* fallback if grab cursor is unsupported */
      cursor: grab;
    }
	</style>
</head>
<body>
  <svg></svg>
  <script>
const width = 960, height = 500, margin = 10;
const svg = d3.select("svg").attr('width', width).attr('height', height);

var dots = d3.range(100)
    .map(d =>
         [Math.random()*width, Math.random()*height, 0.2 * (0.5 - Math.random()) * 2 * Math.PI]
        );
    
    svg.selectAll('circle')
    .data(dots)
    .enter()
    .append('circle')
    .attr('cx', d => d[0])
    .attr('cy', d => d[1])
    .attr('r', d => Math.random() * 50)
    .attr('fill-opacity', 0.1)
    .attr('fill', d => d[2] > 0 ? 'orange' : 'pink')
    .attr('stroke', 'lightblue')
    
function draw(offset) {
    svg.selectAll('circle')
    .attr('cx', d => d[0] + offset[0] * Math.cos(d[2]) + offset[1] * Math.sin(d[2]))
    .attr('cy', d => d[1] + offset[1] * Math.cos(d[2]) - offset[0] * Math.sin(d[2]))
}

var n = 10000; // reference time in ms

https://unpkg.com/d3

https://unpkg.com/d3-inertia