block by kenpenn d9f1ca5f982e81ce3b9f95ee537fd5dc

D3 Gangnam Style! v4

Full Screen

D3 Gangnam Style updated to use d3 v4 and events

adapted from:

index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>d3 Gangnam Style!</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 0;
      min-height: 500px;
    }

    .btn { fill: #d8d8d8; }
    .btn-fg { fill: #777; }

    #ctrl-play.playing .play { opacity: 0; }

    #ctrl-play:not(.playing) .pause { opacity: 0; }

    #ctrl-mute:not(.muted) #circle-slash {
      opacity: 0;
    }

    #ctrl-mute.muted #circle-slash {
      opacity: 1;
    }

    #ctrl-mute:not(.muted):hover #circle-slash {
      opacity: 0.5;
    }

    line {
      stroke: orange;
      stroke-width: 2.5px;
    }
    circle.node {
      cursor: pointer;
      fill: #000;
      stroke: none;
    }

  </style>
</head>
<body>
  <svg>
    <rect id="bg" x="0" y="0" fill-opacity="0.05" stroke="none"></rect>
    <g id="floor-grp" opacity="0">
      <path id="floor" fill="#dadada" fill-rule="evenodd" stroke="none" d="M1720.11923,2 L1619.87051,2 L1635.53972,20 L1530.81408,20 L1519.62179,2 L1419.37308,2 L1426.08845,20 L1321.36282,20 L1319.12436,2 L1218.87564,2 L1216.63718,20 L1111.91155,20 L1118.62692,2 L1018.37821,2 L1007.18592,20 L902.460283,20 L918.129489,2 L817.880771,2 L797.73465,20 L693.009017,20 L719,1 L769,1 L1769,1 L1819,1 L1844.99098,20 L1740.26535,20 L1720.11923,2 Z M346.685385,423 L231.404804,526 L0.828093529,526 L141.726582,423 L346.685385,423 Z M756.602992,423 L692.558224,526 L461.981514,526 L551.644188,423 L756.602992,423 Z M1166.5206,423 L1153.71164,526 L923.134935,526 L961.561795,423 L1166.5206,423 Z M1576.4382,423 L1614.86507,526 L1384.28836,526 L1371.4794,423 L1576.4382,423 Z M1986.35581,423 L2076.01849,526 L1845.44178,526 L1781.39701,423 L1986.35581,423 Z M2396.27342,423 L2537.17191,526 L2306.5952,526 L2191.31461,423 L2396.27342,423 Z M624.003739,342 L553.693776,423 L348.734973,423 L439.191057,342 L624.003739,342 Z M993.629103,342 L963.611383,423 L758.65258,423 L808.816421,342 L993.629103,342 Z M1363.25447,342 L1373.52899,423 L1168.57019,423 L1178.44179,342 L1363.25447,342 Z M1732.87983,342 L1783.4466,423 L1578.48779,423 L1548.06715,342 L1732.87983,342 Z M2102.5052,342 L2193.3642,423 L1988.4054,423 L1917.69251,342 L2102.5052,342 Z M512.331269,275 L437.34293,342 L252.530247,342 L344.182662,275 L512.331269,275 Z M848.628483,275 L806.968294,342 L622.155612,342 L680.479876,275 L848.628483,275 Z M1184.9257,275 L1176.59366,342 L991.780977,342 L1016.77709,275 L1184.9257,275 Z M1521.22291,275 L1546.21902,342 L1361.40634,342 L1353.0743,275 L1521.22291,275 Z M1857.52012,275 L1915.84439,342 L1731.03171,342 L1689.37152,275 L1857.52012,275 Z M2193.81734,275 L2285.46975,342 L2100.65707,342 L2025.66873,275 L2193.81734,275 Z M728.358003,220 L680.479876,275 L512.331269,275 L573.888861,220 L728.358003,220 Z M1037.29629,220 L1016.77709,275 L848.628483,275 L882.827145,220 L1037.29629,220 Z M1346.23457,220 L1353.0743,275 L1184.9257,275 L1191.76543,220 L1346.23457,220 Z M1655.17285,220 L1689.37152,275 L1521.22291,275 L1500.70371,220 L1655.17285,220 Z M1964.11114,220 L2025.66873,275 L1857.52012,275 L1809.642,220 L1964.11114,220 Z M629.850308,170 L573.888861,220 L419.419719,220 L487.817043,170 L629.850308,170 Z M913.916838,170 L882.827145,220 L728.358003,220 L771.883573,170 L913.916838,170 Z M1197.98337,170 L1191.76543,220 L1037.29629,220 L1055.9501,170 L1197.98337,170 Z M1482.0499,170 L1500.70371,220 L1346.23457,220 L1340.01663,170 L1482.0499,170 Z M1766.11643,170 L1809.642,220 L1655.17285,220 L1624.08316,170 L1766.11643,170 Z M2050.18296,170 L2118.58028,220 L1964.11114,220 L1908.14969,170 L2050.18296,170 Z M803.221984,134 L770.14255,172 L627.61185,172 L670.14255,134 L803.221984,134 Z M1069.38085,134 L1055.20395,172 L912.67325,172 L936.301417,134 L1069.38085,134 Z M1335.53972,134 L1340.26535,172 L1197.73465,172 L1202.46028,134 L1335.53972,134 Z M1601.69858,134 L1625.32675,172 L1482.79605,172 L1468.61915,134 L1601.69858,134 Z M1867.85745,134 L1910.38815,172 L1767.85745,172 L1734.77802,134 L1867.85745,134 Z M708.196334,100 L670.14255,134 L537.063117,134 L583.573298,100 L708.196334,100 Z M957.442408,100 L936.301417,134 L803.221984,134 L832.819371,100 L957.442408,100 Z M1206.68848,100 L1202.46028,134 L1069.38085,134 L1082.06544,100 L1206.68848,100 Z M1455.93456,100 L1468.61915,134 L1335.53972,134 L1331.31152,100 L1455.93456,100 Z M1705.18063,100 L1734.77802,134 L1601.69858,134 L1580.55759,100 L1705.18063,100 Z M1954.4267,100 L2000.93688,134 L1867.85745,134 L1829.80367,100 L1954.4267,100 Z M860.675736,68 L832.819371,100 L708.196334,100 L744.011661,68 L860.675736,68 Z M1094.00389,68 L1082.06544,100 L957.442408,100 L977.339811,68 L1094.00389,68 Z M1327.33204,68 L1331.31152,100 L1206.68848,100 L1210.66796,68 L1327.33204,68 Z M1560.66019,68 L1580.55759,100 L1455.93456,100 L1443.99611,68 L1560.66019,68 Z M1793.98834,68 L1829.80367,100 L1705.18063,100 L1677.32426,68 L1793.98834,68 Z M771.992384,43 L744.011661,68 L627.347585,68 L661.546247,43 L771.992384,43 Z M992.884658,43 L977.339811,68 L860.675736,68 L882.438521,43 L992.884658,43 Z M1213.77693,43 L1210.66796,68 L1094.00389,68 L1103.33079,43 L1213.77693,43 Z M1434.66921,43 L1443.99611,68 L1327.33204,68 L1324.22307,43 L1434.66921,43 Z M1655.56148,43 L1677.32426,68 L1560.66019,68 L1545.11534,43 L1655.56148,43 Z M1876.45375,43 L1910.65241,68 L1793.98834,68 L1766.00762,43 L1876.45375,43 Z M902.460283,20 L882.438521,43 L771.992384,43 L797.73465,20 L902.460283,20 Z M1111.91155,20 L1103.33079,43 L992.884658,43 L1007.18592,20 L1111.91155,20 Z M1321.36282,20 L1324.22307,43 L1213.77693,43 L1216.63718,20 L1321.36282,20 Z M1530.81408,20 L1545.11534,43 L1434.66921,43 L1426.08845,20 L1530.81408,20 Z M1740.26535,20 L1766.00762,43 L1655.56148,43 L1635.53972,20 L1740.26535,20 Z"></path>
    </g>
    <g id="disco">
      <g id="lights"></g>
      <g id="props"></g>
      <g id="dancers">
          <g id="dancers-7"></g>
          <g id="dancers-5"></g>
          <g id="dancers-2"></g>
          <g id="psy"></g>
        </g>
    </g>
    <g id="ctrls" opacity="0">
      <g id="ctrl-play" class="playing" transform="translate(0, 4)">
        <rect class="btn" x="0" y="0" width="44" height="44" rx="4"></rect>
        <polygon class="btn-fg play" points="16 12 30 22 16 32"></polygon>
        <g class="btn-fg pause" transform="translate(12, 12)">
          <rect x="0" y="0" width="7" height="20"></rect>
          <rect x="13" y="0" width="7" height="20"></rect>
        </g>
      </g>
      <g id="ctrl-stop" transform="translate(54, 4)">
        <rect class="btn" x="0" y="0" width="44" height="44" rx="4"></rect>
        <rect class= "btn-fg" x="14" y="14" width="16" height="16" rx="3"></rect>
      </g>
      <g id="ctrl-mute" class="" transform="translate(108, 0)">
        <circle fill="#fff" cx="26" cy="26" r="26"></circle>
        <path id="musical-note" fill="#000" d="M19.719,30.79 L25,7 L40.164,17.69 L33.665,42.783 C33.665,42.783 30.291,46 27,46 C23.708,46 21.34,44.364 21.34,41.057 C21.34,37.749 24.387,36 27,36 C29.612,36 31.405,37.782 31.405,37.782 L34.903,24.66 L25.984,18.902 L21.712,36.385 C21.712,36.385 19.171,40.119 15,40 C10.893,40.119 9,37.38 9,34.024 C9,30.668 12.72,29.056 15,29 C17.344,29.056 19.719,30.79 19.719,30.79 L19.719,30.79 Z M26.985,15.943 L27.694,13 L36.484,19.082 L35.812,21.807 L26.985,15.943 L26.985,15.943 Z"></path>
        <path id="circle-slash" fill="crimson" fill-rule="evenodd" d="M42.9065395,11.9218876 C46.086753,15.7368753 48,20.6450063 48,26 C48,38.1502645 38.1502645,48 26,48 C20.6450063,48 15.7368753,46.086753 11.9218876,42.9065395 L42.9065395,11.9218876 Z M40.0781124,9.09346049 C36.2631247,5.91324697 31.3549937,4 26,4 C13.8497355,4 4,13.8497355 4,26 C4,31.3549937 5.91324697,36.2631247 9.09346049,40.0781124 L40.0781124,9.09346049 Z M26,52 C40.3594035,52 52,40.3594035 52,26 C52,11.6405965 40.3594035,0 26,0 C11.6405965,0 0,11.6405965 0,26 C0,40.3594035 11.6405965,52 26,52 Z"></path>
      </g>
    </g>
  </svg>
  <audio src="GangnamStyle.mp3" id="mp3" preload="auto" loop="loop" paused="paused"></audio>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.7/d3.min.js"></script>
  <!--<script src="d3.v4.min.js"></script>-->
  <script src="gangnam.js"></script>
</body>
</html>