Edit in JSFiddle

const width = 256;
const height = 128;

const data1 = [
	{id: 'user-1', page: 'page-A'},
	{id: 'user-2', page: 'page-B'}
];
const data2 = [
	{id: 'user-2', page: 'page-A'},
	{id: 'user-1', page: 'page-B'}
];

function getX(page) {
	if(page === 'page-A'){ 
  	return 50;
  } else {
		return width - 50;
  }
}

const svg = d3.select('body').append('svg')
	.attr('width', width)
  .attr('height', height);

function draw(data) {
	const circles = svg.selectAll('circle').data(data);
  // 不要なノードの削除
  circles.exit().remove();
	// ノードの追加
	circles.enter().append('circle')
		.attr('cx', d => getX(d.page))
  	.attr('cy', height / 2)
  	.attr('r', 10)
  	.attr('fill', 'blue');
	// ノードの移動
	circles.transition()
		.duration(300)
  	.ease("linear")
  	.attr('cx', d => getX(d.page));	
}

let data = data1;
draw(data);
setInterval(() => {
	data = (data === data1) ? data2 : data1;
	draw(data);
}, 2 * 1000);