Main object recognizer

This examples extends the previous one by including two viewports:

the first one, depicted in blue, is used for filtering objects when outside the blue viewport. By zooming in it is possible to see that the DOM is continuosly updated by adding and removing the object inside and outside the viewport;
the second one, depicted in red, is used for recognizing which is the object the user is interested in. Once a certain level of zoom is reached the interested object is colored in red.

The algorithm for calculating the intersect area between two rectangles has been taken from this Math Stackexchange discussion.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script>
  <link rel="stylesheet" href="index.css">
  <title>Main object recognizer</title>
</head>
<body>
  <svg></svg>
  <script src="index.js"></script>
</body>
</html>
    

https://d3js.org/d3.v4.min.js

https://d3js.org/d3-selection-multi.v0.4.min.js