block by kenpenn 9476266

d3 gangnam style

Full Screen

A work in progress. A force-directed graph using transforms to move nodes, point-along-path interpolation to move nodes in ellipses, etc.

index.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>d3 Gangnam Style!</title>
    <style>
        .cover-box {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
        }

        .psy-svg-box {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }

        /* svg styles */

        line {
          stroke: goldenrod;
          stroke-width: 1.5px;
        }

        circle.node {
          cursor: pointer;
          fill: #000;
          stroke: none;
        }

    </style>
</head>
<body>
    <div class="cover-box">
        <div class="psy-svg-box">
            <svg></svg>
        </div>
    </div>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.9/d3.min.js'></script>
    <script src="gangnam.js"></script>
</body>
</html>