Interactive rota IV

<!DOCTYPE html>
<html>
	<head>
        <meta charset="utf-8">
        <meta name="description" content="Interactive rota IV"/>
        <title>Interactive rota IV</title>
		<link type="text/css" href="index.css" rel="stylesheet"/>
        <script src="https://d3js.org/d3.v3.min.js"></script>
	</head>
	<body>
        <svg height="800" width="960">
          <defs>
            <pattern id="rota_img"
              patternUnits="userSpaceOnUse"
              x="-488"
              y="-292"
              width="800"
              height="800"
              viewBox="0 0 800 800">
              <image
                xlink:href="https://wafi.iit.cnr.it/webvis/tmp/clavius/rota_4.jpg"
                x="80"
                y="0"
                height="800"
                width="800"
              />
            </pattern>
          </defs>
          <g id="zoom_group">
            <g transform="translate(488,292)">
              <rect
                fill="url(#rota_img)"
                x="-488"
                y="-292"
                width="800"
                height="800"
              />
              <g id="rota_1" class="rota">
                <circle
                  fill="url(#rota_img)"
                  cx="0"
                  cy="0"
                  r="108"
                />
                <circle
                  class="highlight"
                  cx="0"
                  cy="0"
                  r="108"
                />
              </g>
              <circle
              fill="url(#rota_img)"
              cx="0"
              cy="0"
              r="20"
            />
            </g>
          </g>
        </svg>
        
        <script src="index.js"></script>
	</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

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