D3 Examples - Interactive rota

Interactive rota

Jean Deckers, Tabella ad inveniendum numerum Cycli solaris quocunque anno centesimo currente - a pretty old example of interactive visualization.

Questa tavola di Deckers è formata da dischi di carta concentrici rotanti attorno ad un perno comune, uno spago che attraversa la carta al centro. Essa era probabilmente allegata ad una lettera perduta di Deckers a Clavio, il cui contenuto verteva su aspetti della cronologia cristiana. La rota doveva infatti servire per dimostrare la validità delle posizioni cronologiche sostenute da Deckers.

Credits: Roma, Archivio storico della Pontificia Università Gregoriana, ms. APUG 530, c. 61r

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="Interactive rota"/>
        <title>Interactive rota</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="-481"
              y="-330"
              width="800"
              height="800"
              viewBox="0 0 800 800">
              <image
                xlink:href="https://wafi.iit.cnr.it/webvis/tmp/clavius/rota_1.jpg"
                x="80"
                y="0"
                height="800"
                width="800"
              />
            </pattern>
          </defs>
          <g id="zoom_group">
            <g transform="translate(481,330)">
              <rect
                fill="url(#rota_img)"
                x="-481"
                y="-330"
                width="800"
                height="800"
              />
              <g id="rota_1" class="rota">
                <circle
                  fill="url(#rota_img)"
                  cx="0"
                  cy="0"
                  r="142"
                />
                <circle
                  class="highlight"
                  cx="0"
                  cy="0"
                  r="142"
                />
              </g>
              <g id="rota_2" class="rota">
                <circle
                  fill="url(#rota_img)"
                  cx="0"
                  cy="0"
                  r="112"
                />
                <circle
                  class="highlight"
                  cx="0"
                  cy="0"
                  r="112"
                />
              </g>
              <circle
              fill="url(#rota_img)"
              cx="0"
              cy="0"
              r="34"
            />
            </g>
          </g>
        </svg>
        
        <script src="index.js"></script>
    </body>
</html>
    