What is "Responsive"?

The components of a site can:

• Automatically resize or hide to take up just enough of the available screen space.
• Adapt view optimized for many screen dimensions (including mobile phone)

Demonstration

Responsive visualizations using Angular directives

How to achieve?

"Watch" directive's width and height changes

var w = 0;
var h = 0;
scope.$watch(function(){
  w = el.clientWidth;
  h = el.clientHeight;
  return w * h;
}, resize);

Check changes for every time the window resizes

angular.element($window).on('resize', function() { $scope.$apply() });

Good place of the code is somewhere in main controller because it only needs to be called once

Ignore any content inside the element that goes beyond the element itself

scatter {
  display: block;
  overflow: hidden;
}

• Set size of directive using CSS percentages

.scatter-1 {
  width: 50%;
  height: 400px;
}