Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, shrink-to-fit=no, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>Social Dance 2 Vis</title>


  <!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

</head>

<body>
<!-- Loading icon -->
  <div class="loading">
  
  <div>
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
    <div class="c4"></div>
  </div>
  
  <span>loading</span>

</div> <!-- closes loading icon -->
  
  
  
  <div id="wrapper">

    <!-- Sidebar -->
    <div id="sidebar-wrapper">
      <ul class="sidebar-nav">

        <li>

          <!--             MY LEGEND HTML -->
          <div class="legend-wrapper">
            <div id="legend">
              <h1>Legend</h1>
              <p>Richard Powers powers through 8 dance styles and 150+ moves in 10 weeks at Stanford. Here's a big picture look. </p>
              <div id="legend-key">
              <p>How it works: </p>

              <div class="row legend-section dance-style">

                <div class="legend-section col-sm-3 dance-style">
                  <svg class="legend-svg dance-style">
                      <circle cx="50" cy="50" r="40" />
                    </svg>
                </div>

                <div class="col-sm-9">
                  <p class="legend-text">All moves are grouped by dance style</p>
                </div>

              </div>

              <div class="row legend-section dance-sub-category">

                <div class="legend-section col-sm-3 dance-sub-category">
                  <svg class="legend-svg dance-sub-category">
                      <circle cx="50" cy="50" r="30" />
                    </svg>
                </div>

                <div class="col-sm-9">
                  <p class="legend-text">... and then into sub-categories</p>
                </div>

              </div>
              <div class="row legend-section dance-move">

                <div class="legend-section col-sm-3 dance-move">
                  <svg class="legend-svg dance-move">
                    <circle cx="50" cy="50" r="15" fill="white" />
                  </svg>
                </div>

                <div class="col-sm-9">
                  <p class="legend-text">... which hold individual dance moves.</p>

                </div>

              </div>
              </div> <!-- closes legend-key -->


              <p class="legend-text"> Click to zoom, and click dance moves for a video demo (grey circles mean there's no video).</p>
              <div class="col-sm-12">
                <button class="btn btn-default">Got it!</button>
              </div>


            </div>
          </div>
        </li>

      </ul>
    </div>
    <!-- /#sidebar-wrapper -->

    <!-- Page Content -->
    <div id="page-content-wrapper">
      <div class="container-fluid">


      </div>
      <p class="label" id="title">Social Dance II</p>
      <br>
      <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Legend</a>
      <a href="#zoom-out" class="btn btn-default" id="zoom-out">Zoom out</a>
      <br>
      <div id="traceNodeParentsWrapper">
        <div class="label" id="traceNodeParents"> Dance Figure: </div>
      </div>


      <div id="d3-vis-div"></div>

<div id="credits-footer"> Vis created by <a target="_blank" href="http://www.davidnmora.com/">David Mora</a> based off Social Dance 2 as taught by <a target="_blank" href="http://richardpowers.com">Richard Powers</a>, videos by <a target="_blank" href="http://www.libraryofdance.org">Library of Dance</a>. Data and code avaialable <a target="_blank" href="https://codepen.io/davidnmora/pen/oLQqbp"> here.</a> </div> 
<!--       closes footer -->
    </div>
    <!-- /#page-content-wrapper -->


  </div>
  <!-- /#wrapper -->


</body>

</html>
            
          
!
            
              @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,600');
body {
  font-family: 'Open Sans', sans-serif;

}

/* LEGEND CSS */
#legend {
  background: black;

  margin: auto;
  padding: 20px;
  width: 80%;
  border:  solid 2px black;
  
  color: white;
  text-indent: 0px;
  
  font-size: 24px;
  
  
}

#legend-key {
  margin-left: 25px;
  margin-right: 20px;
}

.legend-section:hover {
  background: grey;
}

.col-sm-3 svg {
  height: 100px;
  width: 100px;
}



.btn.btn-default {
  opacity: 1;
  
  background: #308CB4;
/* dark-ish blue of inner circles */
  border: none;
  color: white;
  cursor: pointer;
  font-size: 36px;
  padding: 20px 20px;
  transition: background 0.75s, color 0.75s;
}

.btn.btn-default:hover {
  background: #C0475A; 
/*   burnt pink-red */
}

#zoom-out.btn {
  background: #C0475A;
  margin-left: -3px;
}
#zoom-out.btn:hover {
  background: #308CB4;
}


/*     ____ D3 CSS  ______    */

/* COLORS- lighter: hsl(152,80%,80%), darker: hsl(228,30%,40%) */


/* disable user highlighting */
text, p, h1 {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;   
}


.node {
  cursor: pointer;
}

.node:hover {
  stroke: #000;
  stroke-width: 1.5px;
}

.node--leaf {
  fill: white;
}
.node--leaf:hover {
  fill: #C0475A; /* burnt pink-red */
}

.label {
  font: 1.4em "Existence", Helvetica, Arial, sans-serif;
  font-weight: 100;
  text-anchor: middle;
/*   text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
   */
}

.label,
.node--root,
.node--leaf,
tspan
{
  pointer-events: none;
  /* makes elemenet invisble to clicking */
}

.label.is-clickable, .node--leaf.is-clickable {
  pointer-events: all;  
}

.node--leaf.is-clickable.no-video {
  pointer-events: none;
  fill: grey;
}

/* after node has been clicked */
.node--leaf.has-been-clicked {
  opacity: 0.70;
}

#title {
  font-size: 5em;
  text-align: center;
  padding: 0px 0px 0px 0px;
  color: black
}

#traceNodeParents {
  
}

#traceNodeParentsWrapper {
  background-color: black;
  border-radius: 5px;
  position: relative;
display: inline-block;
  text-align: left;
  opacity: 1;
 padding: 10px;
  font-size: 18px;

}


/*!
 * Start Bootstrap - Simple Sidebar (https://startbootstrap.com/)
 * Copyright 2013-2016 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
 */

/* TO ADJUST SIDEBAR WIDTH: 
current-width: 501px
replace current with new desired width */

 body {
    overflow-x: hidden;
 }

/* Toggle Styles */

#wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled {
    padding-left: 501px;
}

#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    left: 501px;
    width: 0;
    height: 100%;
    margin-left: -501px;
    overflow-y: auto;
    background: #000;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}




/* ADJUST WIDTH */
#wrapper.toggled #sidebar-wrapper {
    width: 500px;
}






#page-content-wrapper {
    width: 100%;
    position: absolute;
    padding: 15px;
}

#wrapper.toggled #page-content-wrapper {
    position: absolute;
    margin-right: -501px;
}

/* Sidebar Styles */

/* TO ADJUST INTERNAL SIDEBAR */
.sidebar-nav {
    position: absolute;
    top: 0;
    width: 500px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-nav li {
    text-indent: 20px;
    line-height: 40px;
}

.sidebar-nav li a {
    display: block;
    text-decoration: none;
    color: #999999;
}

.sidebar-nav li a:hover {
    text-decoration: none;
    color: #fff;
    background: rgba(255,255,255,0.2);
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
    text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
    height: 65px;
    font-size: 18px;
    line-height: 60px;
}

.sidebar-nav > .sidebar-brand a {
    color: #999999;
}

.sidebar-nav > .sidebar-brand a:hover {
    color: #fff;
    background: none;
}

@media(min-width:768px) {
    #wrapper {
        padding-left: 501px;
    }

    #wrapper.toggled {
        padding-left: 0;
    }

    #sidebar-wrapper {
        width: 501px;
    }

    #wrapper.toggled #sidebar-wrapper {
        width: 0;
    }

    #page-content-wrapper {
        padding: 20px;
        position: relative;
    }

    #wrapper.toggled #page-content-wrapper {
        position: relative;
        margin-right: 0;
    }
}

/* VIDEO LOADING ICON AND YOUTUBE VIDEO */

.dance-video {
  z-index: 1000001; 
  position: fixed; 
  left: 50%; 
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
}

/* THE LOADING ICON CSS */


.loading {
  width: 100%;
  height: 100%;
  background: #16171d;
  opacity: 0.9;
  position: fixed;
  top: 0px;
  left: 0px;
  
  z-index: 1000000;
}

.loading > div {
  width: 60px;
  height: 60px;
  position: absolute;
  left: 50%;
  margin-left: -30px;
  top: 50%;
  margin-top: -30px;
}


.loading > div > div {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  background: #C0475A; /* burnt pink-red */;
  top: 10px;
  left: 10px;
  transform-origin: 20px 20px;
  border-radius: 8px;
  animation: spin-a 2s infinite cubic-bezier(0.5, 0, 0.5, 1);
}

.loading > div > .c2 {
  top: 10px;
  left: auto;
  right: 10px;
  transform-origin: -4px 20px;
  animation: spin-b 2s infinite cubic-bezier(0.5, 0, 0.5, 1);
}
.loading > div > .c3 {
  top: auto;
  left: auto;
  right: 10px;
  bottom: 10px;
  transform-origin: -4px -4px;
  animation: spin-c 2s infinite cubic-bezier(0.5, 0, 0.5, 1);
}
.loading > div > .c4 {
  top: auto;
  bottom: 10px;
  transform-origin: 20px -4px;
  animation: spin-d 2s infinite cubic-bezier(0.5, 0, 0.5, 1);
}

@keyframes spin-a {
  0%   { transform: rotate(90deg); }
  0%  { transform: rotate(90deg); }
  50%  { transform: rotate(180deg); }
  75%  { transform: rotate(270deg); }
  100% { transform: rotate(360deg); }
}
@keyframes spin-b {
  0%   { transform: rotate(90deg); }
  25%  { transform: rotate(90deg); }
  25%  { transform: rotate(180deg); }
  75%  { transform: rotate(270deg); }
  100% { transform: rotate(360deg); }
}
@keyframes spin-c {
  0%   { transform: rotate(90deg); }
  25%  { transform: rotate(90deg); }
  50%  { transform: rotate(180deg); }
  50%  { transform: rotate(270deg); }
  100% { transform: rotate(360deg); }
}
@keyframes spin-d {
  0%   { transform: rotate(90deg); }
  25%  { transform: rotate(90deg); }
  50%  { transform: rotate(180deg); }
  75%  { transform: rotate(270deg); }
  75% { transform: rotate(360deg); }
  100% { transform: rotate(360deg); }
}


.loading > span {
  width: 100px;
  height: 30px;
  position: absolute;
  left: 50%;
  margin-left: -50px;
  top: 50%;
  margin-top: 30px;
  color: #ff8c00;
  font-size: 12px;
  text-align: center;
}

.content { padding: 1.5em; }


            
          
!
            
              console.clear();
//d3 vis<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<


//MINIMISE ME!!!!!!!!!!!!!!!!!!!!
function getData() {
  return {

    "name": "Social Dance 2",
    "children": [

      {
        "name": "Cross-Step Waltz",
        "children": [{
          "name": "Basics",
          "children": [{
            "name": "Turning Basic",
            "size": 10,
            "videoLink": "https://www.youtube.com/watch?v=X_Y4VjsdnbM&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=1"
          }, {
                       "name": "Turning Basic (Waterfall)",
                       "size": 10,
                       "videoLink": "https://www.youtube.com/watch?v=X_Y4VjsdnbM&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=1"
                       }, {
                       "name": "Toss Across (0rbits)",
                       "size": 10,
                       "videoLink": "https://www.youtube.com/watch?v=xYGXcD4nTkw&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=26"
                       }, {
                       "name": "Jedi Waltzing (previously called Gypsy)",
                       "size": 10,
                       "videoLink": "https://www.youtube.com/watch?v=SOoUCHEZfwE&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=2"
                       }]
        }, {
                     "name": "Easy Variations",
                     "children": [{
                     "name": "Zig Zag",
                     "size": 10,
                     "videoLink": ""
                     }, {
                     "name": "Follow's Solo",
                     "children": [{
                     "name": "Follow's Solo (Sweeps Styling)",
                     "size": 10,
                     "videoLink": ""
                     }, {
                     "name": "Follow's Solo (Touches Styling)",
                     "size": 10,
                     "videoLink": ""
                     }, {
                     "name": "Follow's Solo (Kick's Styling)",
                     "size": 10,
                     "videoLink": ""
                     }]
      }, {
      "name": "Waltz Walk",
      "size": 10,
      "videoLink": ""
      }]
  }, {
    "name": "He Goes, She Goes",
    "children": [{
      "name": "He Goes, She Goes",
      "size": 10,
      "videoLink": "https://www.youtube.com/watch?v=jJfaBBSS7cg&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=59"
    }, {
                 "name": "He Goes, Free Spin (Frisbee)",
                 "size": 10,
                 "videoLink": ""
                 }, {
                 "name": "He Goes, Rollaway",
                 "size": 10,
                 "videoLink": ""
                 }, {
                 "name": "Lead's Underarm Turn (He Goes)",
                 "size": 10,
                 "videoLink": ""
                 }, {
                 "name": "He Goes, She Goes, He Goes, She Goes",
                 "size": 10,
                 "videoLink": ""
                 }]
  }, {
    "name": "Grapevines",
    "children": [{
      "name": "Grapevine Underarm Turn",
      "size": 10,
      "videoLink": "https://www.youtube.com/watch?v=hUw_Z9tf1jo&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=3"
    }, {
                 "name": "Grapevine Free Spin",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=9gttRSwExvU&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=4"
                 }, {
                 "name": "Grapevine Free Spin (Open Two Hands)",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=E8mc95hMT_s&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=5"
                 }, {
                 "name": "Six Count Grapevine to Double Outside Turn",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=LcCMQtasI2w&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=6"
                 }, {
                 "name": "Six Count Grapevine to Outside Turn Free Spin",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=r8aBXQqJjbc&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=7"
                 }, {
                 "name": "Six Count Grapevine to Inside Turn, Tuck Outside Turn",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=a3-YETGQAls&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=8"
                 }]
  }, {
    "name": "Waterfall Grapevines",
    "children": [{
      "name": "Watefall Grapevines, Inside Turn",
      "size": 10,
      "videoLink": "https://www.youtube.com/watch?v=39juCSzKSBI&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=31"
    }, {
                 "name": "Waterfall Grapevines, Outside Turn",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=DKvC8IDodUw&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=32"
                 }]
  }, {
    "name": "Inside Turns",
    "children": [{
      "name": "Inside Turn with Grapevine Recovery",
      "size": 10,
      "videoLink": ""
    }, {
                 "name": "Double Inside Turn, Double Outside Turn",
                 "size": 10,
                 "videoLink": ""
                 }, {
                 "name": "Halo Frisbee",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=nVbSWCRh3UE&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=10"
                 }, {
                 "name": "Halo Rollaway",
                 "size": 10,
                 "videoLink": ""
                 }, {
                 "name": "Double Inside Turn with Grapevine Recovery and Pivot",
                 "size": 10,
                 "videoLink": ""
                 }]
  }, {
    "name": "Cradle Position",
    "children": [{
      "name": "Cradle, Outside Turn",
      "size": 10,
      "videoLink": "https://www.youtube.com/watch?v=xRhiHZEofQs&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=13"
    }, {
                 "name": "Cradle, Outside Turn and Free Spin",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=tfhDZgVEJEc&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=15"
                 }, {
                 "name": "Cradle, Double Unwind",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=p459-itZznw&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=16"
                 }, {
                 "name": "Cradle, Deney Terrio Double Unwind",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=9Fs8N8b4vnE&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=17"
                 }, {
                 "name": "Cradle Lunge",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=QDS1UovNMCs&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=18"
                 }, {
                 "name": "Chained Inside and Outside Turns",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=sc8DZz21YHI&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=11"
                 }, {
                 "name": "Magic Wand",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=R7_32HSQYmo&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=12"
                 }]
  }, {
    "name": "Cross-Body Inside Turns",
    "children": [{
      "name": "Cross-Body Inside Turn to Pivaloop Free Spin",
      "size": 10,
      "videoLink": "https://www.youtube.com/watch?v=9IeUxmpTI24&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=19am"
    }]
  }, {
    "name": "Shadow Position",
    "children": [{
      "name": "Flip into Shadow Position",
      "size": 10,
      "videoLink": ""
    }, {
                 "name": "Shoulder Slide into Shadow Position",
                 "size": 10,
                 "videoLink": ""
                 }, {
                 "name": "He Goes into Shadow Position",
                 "size": 10,
                 "videoLink": ""
                 }, {
                 "name": "Shadow at His Right to Hammerlock at His Left",
                 "size": 10,
                 "videoLink": ""
                 }, {
                 "name": "Hammerlock at His Left to Skater's at His Left",
                 "size": 10,
                 "videoLink": ""
                 }, {
                 "name": "Skater's at His Left to Hammerlock at His Right",
                 "size": 10,
                 "videoLink": ""
                 }, {
                 "name": "Hammerlock at His Right to Skater's at His Right",
                 "size": 10,
                 "videoLink": ""
                 }, {
                 "name": "Face Loop out of Skater's at His Right",
                 "size": 10,
                 "videoLink": ""
                 }, {
                 "name": "Shadow Mixmaster",
                 "size": 10,
                 "videoLink": ""
                 }, {
                 "name": "Shadow Mixmaster (Super Speed Versioin)",
                 "size": 10,
                 "videoLink": ""
                 }, {
                 "name": "Face Loop Out of Shadow Position",
                 "size": 10,
                 "videoLink": ""
                 }, {
                 "name": "Free Spin Out of Shadow Position",
                 "size": 10,
                 "videoLink": ""
                 }]
  }, {
    "name": "Pivot",
    "children": [{
      "name": "Pivot Underarm Turn",
      "size": 10,
      "videoLink": "https://www.youtube.com/watch?v=W2zd0Dqzg-w&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=20"
    }, {
                 "name": "Pivot Free Spin",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=4NTLFKcqFL4&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=21"
                 }, {
                 "name": "Pivot Rollaway",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=zkG4dCqtIgc&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=22"
                 }, {
                 "name": "Chained Pivot Rollaways",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=0BYU8BHLsTU&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=23"
                 }, {
                 "name": "Pivot Variations Combination",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=CtRml4N8XmE&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=24"
                 }, {
                 "name": "Tripled Single Pivots",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=NEOwJr0us9c&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=25"
                 }]
  }, {
    "name": "Hesitations",
    "children": [{
      "name": "Hesitating Side Sway",
      "size": 10,
      "videoLink": "https://www.youtube.com/watch?v=c15QE0jdT6Y&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=29"
    }, {
                 "name": "Hesitating Dip",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=FtmuBsYexZo&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=30"
                 }]
  }, {
    "name": "Role Reversal",
    "children": [{
      "name": "Orbits to Role Reversal",
      "size": 10,
      "videoLink": "https://www.youtube.com/watch?v=QOdCskjwQdg&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=27"
    }, {
                 "name": "Stop and Go to Role Reversal",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=9leXXpc0XxQ&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=28"
                 }]
  }, {
    "name": "Other Timings (use any cross-step waltz variations)",
    "children": [{
      "name": "Cross-Step One Step (3 against 4)",
      "size": 10,
      "videoLink": ""
    }, {
                 "name": "Cross-Step Foxtrot (Slow, Quick, Quick)",
                 "size": 10,
                 "videoLink": ""
                 }]
  }, {
    "name": "Advanced Variations",
    "children": [{
      "name": "Waterfall Grapevines to Tripple Outside Turn",
      "size": 10,
      "videoLink": ""
    }, {
                 "name": "Inside Turn to Reverse Pivot",
                 "size": 10,
                 "videoLink": ""
                 }, {
                 "name": "Cross-Body Inside Turn to Sextuple Outside Turn",
                 "size": 10,
                 "videoLink": ""
                 }]
  }, {
    "name": "Transitions",
    "children": [{
      "name": "Transitions to and from Box Waltz",
      "size": 10,
      "videoLink": ""
    }]
  } ] //end children
}, {
  "name": "Lindy Hop",
    "children": [{
      "name": "Basic",
      "size": 10,
      "videoLink": "https://www.youtube.com/watch?v=XgTDbVxlBSQ&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=35"
    }, {
                 "name": "Double Rock Step Figures",
                 "children": [{
                 "name": "Follow's Inside Turn, Lead's Waist Slide",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=yH9tXDnf7Sg&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=61"
                 }, {
                 "name": "Follow's Inside Turn, Lead's Underarm Turn",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=YmuVK5SlOAg&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=62"
                 }, {
                 "name": "Chained Inside Turns (Loop-de-Loops)",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=7TxWYwSCZtY&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=63"
                 }, {
                 "name": "Sliding Doors, Surprise Free Spin Exit",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=8hMbYybWKmM&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=64"
                 }, {
                 "name": "Revolving Doors, Surprise Free Spin Exit",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=i5sg0PjGQLg&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=65"
                 }, {
                 "name": "Toss Across (Flip Flops)",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=cXewRTmX_Ek&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=50"
                 }] //end children 
}, {
  "name": "Sweet Lindy Figures (for Slow Songs)",
    "children": [{
      "name": "Catch and Return",
      "size": 10,
      "videoLink": "https://www.youtube.com/watch?v=SXAHW3Gf8Yg&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=66"
    }, {
                 "name": "Catch and Return, Outside Turn",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=CyRL5hciVM4&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=67"
                 }, {
                 "name": "Catch and Return, Inside  Turn",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=WpEtQ7u94T0&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=68"
                 }] //end children
}, {
  "name": "Musical Breaks",
    "children": [{
      "name": "Stop on 5",
      "size": 10,
      "videoLink": "https://www.youtube.com/watch?v=P4es9NNDGSE&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=57"
    }] //end children
}, {
  "name": "Lindy Charleston",
    "children": [{
      "name": "Basics",
      "children": [{
        "name": "Basic (Charleston Kick)",
        "size": 10,
        "videoLink": "https://www.youtube.com/watch?v=qDph0uHKEvk&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=45"
      }, {
                   "name": "Toss Across (Flip Flop)",
                   "size": 10,
                   "videoLink": "https://www.youtube.com/watch?v=cXewRTmX_Ek&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=50"
                   }] //end children
    }, {
                 "name": "Skip Up",
                 "children": [{
                 "name": "Skip Up",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=1UXgsJG99J4&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=46"
                 }, {
                 "name": "Skip Up (with Flare)",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=ELhcQ0uu2DQ&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=47"
                 }, {
                 "name": "Skip Up Flip Flops",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=yE61CIyv-fg&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=48"
                 }] //end children
}, {
  "name": "Advanced Variations",
    "children": [{
      "name": "Lift and Slide",
      "size": 10,
      "videoLink": "https://www.youtube.com/watch?v=CHN1y5HbGZ8&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=51"
    }, {
                 "name": "Cross and Lunge",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=liTFL-6frbE&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=52"
                 }, {
                 "name": "Lift and Slide to Cross and Lunge",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=I7dgV1-GySU&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=53"
                 }] //end children
}] //end children
}] //end children 
}, {
  "name": "Triple East Coast Swing",
    "children": [{
      "name": "Basic Swing Figures",
      "children": [{
        "name": "[All Four Count Swing variations can be adapted to Triple Step]",
        "size": 10,
        "videoLink": ""
      }] //end children
    }, {
                 "name": "Unique Triple Step Swing Figures",
                 "children": [{
                 "name": "Tuck Outside Turn",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=01vc4-bvhkI&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=58"
                 }, {
                 "name": "She Goes, He Goes",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=jJfaBBSS7cg&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=59"
                 }, {
                 "name": "Continuous Tuck Turns",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=pe71C89QE4Q&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=60"
                 }] //end children 
}] //end children
}, {
  "name": "Rotary Waltz",
    "children": [{
      "name": "Rotary Waltz (Right Turn Waltz)",
      "children": [{
        "name": "Turning Basic",
        "size": 10,
        "videoLink": "https://www.youtube.com/watch?v=x-NAyY1lM_k&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=70"
      }, {
                   "name": "Outside Turn",
                   "size": 10,
                   "videoLink": ""
                   }, {
                   "name": "Transition to Reverse Waltz (Follow Backing)",
                   "size": 10,
                   "videoLink": "https://www.youtube.com/watch?v=ufCk1mV-1-U&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=72"
                   }, {
                   "name": "Transition to Reverse Waltz (Lead Backing)",
                   "size": 10,
                   "videoLink": "https://www.youtube.com/watch?v=VzXg52cS1n4&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=75"
                   }] //end children
    }, {
                 "name": "Reverse Rotary Waltz (Left Turn Waltz, Viennese Waltz)",

                 "children": [{
                 "name": "Reverse Waltz Turning Basic",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=RiCLaNJrLiQ&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=71"
                 }, {
                 "name": "Reverse Waltz Inside Turn",
                 "size": 10,
                 "videoLink": ""
                 }, {
                 "name": "Transition to Rotary Waltz (Follow Backing)",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=MgqiNPs0B2s&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=73"
                 }, {
                 "name": "Transition to Rotary Waltz (Lead Backing)",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=lun3WD0beAk&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=74"
                 }] //end children 
}] //end children
}, {
  "name": "Pivots/ Schottische",

    "children": [{
      "name": "Basic Schottische Variations",
      "children": [{
        "name": "Turning Basic (Military Schottische)",
        "size": 10,
        "videoLink": "https://www.youtube.com/watch?v=StLEzWtvGus&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=77"
      }, {
                   "name": "Cast Away",
                   "size": 10,
                   "videoLink": "https://www.youtube.com/watch?v=oKdElJO6vn4&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=78"
                   }, {
                   "name": "Promenade",
                   "size": 10,
                   "videoLink": ""
                   }, {
                   "name": "Double Underarm Turn",
                   "size": 10,
                   "videoLink": "https://www.youtube.com/watch?v=QjM1Adt4j88&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=79"
                   }] //end children
    }, {
                 "name": "Vintage Schottische Variations",

                 "children": [{
                 "name": "Star Schottische",
                 "size": 10,
                 "videoLink": ""
                 }, {
                 "name": "Columbia Schottische",
                 "size": 10,
                 "videoLink": ""
                 }, {
                 "name": "Bronco Schottische",
                 "size": 10,
                 "videoLink": ""
                 }] //end children 
}] //end children***********************

}, {
  "name": "Foxtrot",
    "children": [{
      "name": "basics",
      "children": [{
        "name": "Basic (Promenade)",
        "size": 10,
        "videoLink": "https://www.youtube.com/watch?v=MiXQvNN2F00&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=85"
      }, {
                   "name": "Basic (Follow Backing)",
                   "size": 10,
                   "videoLink": "https://www.youtube.com/watch?v=DRRTwylNLrk&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=90"
                   }] //ends leaves
    }, {
                 "name": "Turns",
                 "children": [{
                 "name": "Underarm Turn",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=wEyjWkYgQG8&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=86"
                 }, {
                 "name": "Rollaway",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=LOg-mTA4HeA&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=88"
                 }, {
                 "name": "Rollaway, Underarm Turn",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=09qoCuuwd90&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=89"
                 }] //ends leaves
}, {
  "name": "Pivots",
    "children": [{
      "name": "Pivot",
      "size": 10,
      "videoLink": "https://www.youtube.com/watch?v=4NVHMDim-BI&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=91"
    }, {
                 "name": "Continuous Pivot",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=s5tMdlp4G2o&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=92"
                 }] //ends leaves
}, {
  "name": "Zig Zag (Park Avenue)",
    "children": [{
      "name": "Zig Zag (Park Avenue)",
      "size": 10,
      "videoLink": "https://www.youtube.com/watch?v=oq69hwTNOYw&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=93"
    },{
                 "name": "Zig Zag (Park Avenue) with Pivot",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=WD4mP0eGUco&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=94"
                 }, {
                 "name": "Zig Zag (Park Avenue) with Pivot and Reverse Pivot",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=cATHr23SHfQ&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=95"
                 }] //ends leaves
}, {
  "name": "Rocking Steps",
    "children": [{
      "name": "Rocking Step (Chasse Molinete)",
      "size": 10,
      "videoLink": "https://www.youtube.com/watch?v=FBJDAbamLeE&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=97"
    }] //ends leaves
}, {
  "name": "Transitions and Related Dances",
    "children": [{
      "name": "Transition from Six Count Swing",
      "size": 10,
      "videoLink": "https://www.youtube.com/watch?v=1D-LKwMxyrw&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=96"
    }, {
                 "name": "Country Two Step (Texas Two Step)",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=l70v8FTQb9s&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=98"
                 }, {
                 "name": "Cross-Step Foxtrot",
                 "size": 10,
                 "videoLink": ""
                 }] //ends leaves
}

] //ends Foxtrot children
}, {
  "name": "Club Two Step",
    "children": [{
      "name": "basic step",
      "children": [{
        "name": "Basic Step",
        "size": 10,
        "videoLink": "https://www.youtube.com/watch?v=KNCq9Qg238g&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=103"
      }, {
                   "name": "Flip-Flops",
                   "size": 10,
                   "videoLink": ""
                   }]

    }, {
                 "name": "turns",
                 "children": [{
                 "name": "Spot Turns",
                 "children": [{
                 "name": "Follow's Spot Turn",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=-yr710Qtjig&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=104"
                 }, {
                 "name": "Lead's Spot Turn",
                 "size": 10,
                 "videoLink": ""
                 }, {
                 "name": "Dishrag Sunburst",
                 "size": 10,
                 "videoLink": ""
                 }, {
                 "name": "Spot Turn to Flip Flops to Spot Turn",
                 "size": 10,
                 "videoLink": ""
                 }, {
                 "name": "Chained Spot Turns",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=EDocBoOTd2s&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=121"
                 }

                ] //end children
}, {
  "name": "Flip Turns",
    "children": [{
      "name": "Right Flip Turn (Half Turn)",
      "size": 10,
      "videoLink": "https://www.youtube.com/watch?v=I57ttnekdP4&index=107&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l"
    }, {
                 "name": "Left Flip Turn (Half Turn)",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=JtOb34Gyw8o&index=119&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l"
                 }, {
                 "name": "Right Flip Turn (Half Turn) with Outside Turn",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=JWQpLejITyU&index=108&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l"
                 }, {
                 "name": "Left Flip Turn (Half Turn) with Inside Turn",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=kBH0fqZznB4&index=120&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l"
                 }, {
                 "name": "Cross-Body Inside Turn with Pivaloop Outside Turn",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=AkbEWZ6aZls&index=134&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l"
                 }

                ] //end children

}, {
  "name": "Orbiting Turns",
    "children": [{
      "name": "Lead's Inside Turn",
      "size": 10,
      "videoLink": "https://www.youtube.com/watch?v=kd78-71kKuQ&index=110&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l"
    }, {
                 "name": "Follow's Arch Turn",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=B5n47Z03jHQ&index=122&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l"
                 }, {
                 "name": "Lead's Inside Turn to Follow's Arch Turn",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=z4WrDSAl258&index=123&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l"
                 }, {
                 "name": "Follow's Arch Turn to Lead's Inside Turn",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=WU51d_-mPUk&index=124&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l"
                 }

                ] //end children

}, {
  "name": "Lead's Cradle",
    "children": [{
      "name": "Lead's Cradle Wheel to Follow's Inside Turn (Bar 2)",
      "size": 10,
      "videoLink": ""
    }, {
                 "name": "Lead's Cradle Wheel to Follow's Inside Turn (Bar 3)",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=raFmTC0A-Jk&index=111&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l"
                 }, {
                 "name": "Lead's Cradle Wheel to Follow's Inside Turn (Bar 4)",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=feV1tGBsxL0&index=112&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l"
                 }, {
                 "name": "Lead's Cradle Wheel to Follow's Double Inside Turn",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=2Nwalq-T9V0&index=114&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l"
                 }] //end children
},

  {
    "name": "Multiple Turns",
      "children": [{
        "name": "Double Outside Turn",
        "size": 10,
        "videoLink": "https://www.youtube.com/watch?v=euQYKR473Ec&index=131&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l"
      }, {
                   "name": "Double Inside Turn",
                   "size": 10,
                   "videoLink": "https://www.youtube.com/watch?v=x8A_7doV4T8&index=118&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l"
                   }, {
                   "name": "Triple Outside Turn",
                   "size": 10,
                   "videoLink": "https://www.youtube.com/watch?v=oOBJlaAwe3I&index=132&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l"
                   }] //end children

  }, {
    "name": "Spin Turns",
      "children": [{
        "name": "Spin Turn",
        "size": 10,
        "videoLink": "https://www.youtube.com/watch?v=-tbzIYvLs7U&index=133&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l"
      }, {
                   "name": "Rotary Outside Turn",
                   "size": 10,
                   "videoLink": "https://www.youtube.com/watch?v=54Ibxtf6QUI&index=109&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l"
                   }, {
                   "name": "Swing Out (1928 Lindy)",
                   "size": 10,
                   "videoLink": ""
                   }] //end children

  }

]
}, {
  "name": "variations",
    "children": [{
      "name": "Swing Moves",
      "children": [{
        "name": "Waist Slide",
        "size": 10,
        "videoLink": ""
      }, {
                   "name": "Lead's Underarm Turn",
                   "size": 10,
                   "videoLink": ""
                   }, {
                   "name": "Follow's Inside Turn",
                   "size": 10,
                   "videoLink": ""
                   }, {
                   "name": "Follow's Inside Turn (from Two hands)",
                   "size": 10,
                   "videoLink": "https://www.youtube.com/watch?v=4Z73StAdQPQ&index=106&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l"
                   }, {
                   "name": "She Goes, He Goes",
                   "size": 10,
                   "videoLink": ""
                   }, {
                   "name": "Double Dishrag (Outside, Inside)",
                   "size": 10,
                   "videoLink": ""
                   }

                  ] //end children

    }, {
                 "name": "Around the World",
                 "children": [{
                 "name": "Around the World",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=eg2GrsJ6FYo&index=136&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l"
                 }, {
                 "name": "Around the World and Pivaloop Outisde Turn",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=osY4cBw2TmY&index=137&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l"
                 }, {
                 "name": "Around the World with Free Spin",
                 "size": 10,
                 "videoLink": ""
                 }, {
                 "name": "Around the World with Rollaway",
                 "size": 10,
                 "videoLink": ""
                 }, {
                 "name": "Around the World with Waist Slide",
                 "size": 10,
                 "videoLink": ""
                 }, {
                 "name": "Around the World with Barrel Roll",
                 "size": 10,
                 "videoLink": ""
                 }, {
                 "name": "Matador Around the World",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=Upap3Jh4-FA&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=138"
                 }, {
                 "name": "Matador Around the World with Pivaloop Outside Turn",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=7ORd-UU5hD4&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=139"
                 }

                ] //end children

}, {
  "name": "Double Rock Step Figures",
    "children": [{
      "name": "Chained Inside Turns (Loop-de-Loops)",
      "size": 10,
      "videoLink": "https://www.youtube.com/watch?v=04rDibqbcEs&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=125"
    }, {
                 "name": "Windows",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=4Z3Qb_huIsg&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=127"
                 }, {
                 "name": "Windows with Double Face loop Exit",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=5ziMxgbtPSQ&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=128"
                 }, {
                 "name": "Waist Slide to Crossed Hands (and Windows)",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=GqHFJfwgFQc&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=129"
                 }, {
                 "name": "Sweetheart with Mixmaster Exit",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=mMOEBw9_Gmw&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=141"
                 }, {
                 "name": "Shoulder Catch",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=RvCRc5blj_w&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=115"
                 }, {
                 "name": "Shoulder Catch, Inside Turn",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=zAWyFtColX8&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=116"
                 }, {
                 "name": "Shoulder Catch, Double Inside Turn",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=q3kaNgtMlPU&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=117"
                 }, {
                 "name": "Cradle bounce",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=X1x7KZUJOYE&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=126"
                 }, {
                 "name": "Cradle Bounce, Follow's Inside Turn",
                 "size": 10,
                 "videoLink": ""
                 }, {
                 "name": "Cradle Bounce, Double Dishrag (Inside, Outside)",
                 "size": 10,
                 "videoLink": ""
                 }

                ] //end children

}, {
  "name": "Pivots",
    "children": [{
      "name": "Pivots",
      "size": 10,
      "videoLink": "https://www.youtube.com/watch?v=5q1SCMYJPL0&index=83&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l"
    }, {
                 "name": "Continuous Pivots",
                 "size": 10,
                 "videoLink": ""
                 }] //end children

}, {
  "name": "Follow's Solo",
    "children": [{
      "name": "Follow's Solo with Free Spin Exit",
      "size": 10,
      "videoLink": ""
    }, {
                 "name": "Follow's Solo with Around the World Exit",
                 "size": 10,
                 "videoLink": ""
                 }] //end children

}, {
  "name": "Alternate Styling and Timing",
    "children": [{
      "name": "Rock Step First",
      "size": 10,
      "videoLink": ""
    }, {
                 "name": "Swing Waltz (Waltz Swing)",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=FbLMsSuUctw&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=130"
                 }] //end children
}, {
  "name": "Transition from Rumba",
    "size": 10,
      "videoLink": "https://www.youtube.com/watch?v=gbQ8X01or7s&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=145ustle"
}

] //end children
}

]
}, {
  "name": "Hustle",
    "children": [{
      "name": "Basics",
      "children": [{
        "name": "Release and Return",
        "size": 10,
        "videoLink": "https://www.youtube.com/watch?v=q_Wj5VkxmaU&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=161"
      }, {
                   "name": "Turning Basic",
                   "size": 10,
                   "videoLink": "https://www.youtube.com/watch?v=bmEo55RALBQ&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=170"
                   }, {
                   "name": "Butterfly",
                   "size": 10,
                   "videoLink": "https://www.youtube.com/watch?v=9LwcdJH54ik&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=159"
                   }] //end children 
    }, {
                 "name": "Basic Swing Figures",
                 "children": [{
                 "name": "[All four count swing variations can be adapted to hustle.]",
                 "size": 10,
                 "videoLink": ""
                 }] //end children 
}, {
  "name": "Unique Hustle Figures",
    "children": [{
      "name": "Outside Turn Release",
      "size": 10,
      "videoLink": "https://www.youtube.com/watch?v=S4usPh4UZbM&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=172"
    }, {
                 "name": "Inside Turn Release",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=D1jH9B-PRqg&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=171"
                 }, {
                 "name": "Inside Free Spin",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=nNo3Z0lWsoA&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=163"
                 }, {
                 "name": "Shoulder Catch",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=Gm8UxgqTacs&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=162"
                 }, {
                 "name": "Follow's Cradle Wheel",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=x7B1RDY-dGY&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=164"
                 }, {
                 "name": "Follow's Cradle Wheel with Double Turn Exit",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=OaIqtATPPZQ&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=165"
                 }, {
                 "name": "Matador Wheel",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=y26Vb4kzuA8&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=168"
                 }, {
                 "name": "Hammerlock (Wrong-Way Cradle)",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=57Dd2GsAGO8&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=173"
                 }, {
                 "name": "Grapevine",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=L1sk7F1wDlQ&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=174"
                 }, {
                 "name": "Grapevine Inside Turn",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=km42-LVrpBg&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=175"
                 }] //end children 
}, {
  "name": "Styling and Transitions",
    "children": [{
      "name": "Jedi Huslte (No Hands)",
      "size": 10,
      "videoLink": "https://www.youtube.com/watch?v=60gfJcBdOPc&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=169"
    }, {
                 "name": "Transition to and from Cross-Step Waltz",
                 "size": 10,
                 "videoLink": "https://www.youtube.com/watch?v=lTil41Y_e5g&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=176"
                 } ] //end children 
}] //end children 
}
]
//ends hustle 
}

};

var margin = 20,
    diameter = 960;

var color = d3.scale.linear()
.domain([-1, 5])
.range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"])
.interpolate(d3.interpolateHcl);

//SET UP LEGEND: color legend's svg cirlces, set to select corrosponding svg cirlces in viv on hover
//lighter: hsl(152,80%,80%), darker: hsl(228,30%,40%)
d3.select(".dance-style > circle")
  .attr("fill",function(){return color(2);});
d3.select(".dance-style")
  .on("mouseover", function(d){
  svg.selectAll(".node")
    .filter(function(d){
    return d.depth != 1;
  })
    .transition()
    .duration(500)
    .style("opacity",0)
})
  .on("mouseleave", function(d){
  svg.selectAll(".node")
    .transition()
    .duration(500)
    .style("opacity",1)
})

d3.select(".dance-sub-category > circle")
  .attr("fill",function(){return color(4);});
d3.select(".dance-sub-category")
  .on("mouseover", function(d){
  svg.selectAll(".node")
    .filter(function(d){

    return d3.select(this).classed("node--leaf") || (d.depth != 2 && d.depth != 3);
  })
    .transition()
    .duration(500)
    .style("opacity",0)
})
  .on("mouseleave", function(d){
  svg.selectAll(".node")
    .transition()
    .duration(500)
    .style("opacity",1)
})

d3.select(".dance-move > circle")
  .attr("fill","white");
d3.select(".dance-move")
  .on("mouseover", function(d){
  svg.selectAll(".node--root, .node--branch")
    .transition()
    .duration(500)
    .style("opacity",0)
})
  .on("mouseleave", function(d){
  svg.selectAll(".node--root, .node--branch")
    .transition()
    .duration(500)
    .style("opacity",1)
})



var pack = d3.layout.pack()
.padding(2)
.size([diameter - margin, diameter - margin])
.value(function(d) {
  return d.size;
})

var svg = d3.select("#d3-vis-div").append("svg")
.attr("width", diameter+400) //extra space on left keeps vis from looking "boxed in" when zooming
.attr("height", diameter)
.append("g")
.attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");

//stores entire data structure in "root"
var root = getData(),
    //stores reference to data structure in "root" in "focus" CRITICAL NOTE: upon every zoom, "root" is updated to be the data level that was zoomed to
    focus = root,
    //initialize layout from data, stores layout in "nodes"
    nodes = pack.nodes(root), 
    view;

//creates a visible circle for each node in data structure, assigns class based on position in data structure, sets click lister to call zoom
var circle = svg.selectAll("circle")
.data(nodes)
.enter().append("circle")
.attr("class", function(d) {  
  return d.parent ? d.children ? "node node--branch" : "node node--leaf" : "node node--root";
})
.each(function(d){
  d.videoLink == "" ? d3.select(this).classed("no-video", true) : null;
})
//sets darkening color gradient baesd off depth (0 is root, n is furthest leaf)
.style("fill", function(d) {
  return d.children ? color(d.depth) : null;
})
//zooms only when clicked "d" isn't the entire data set (aka only when you're NOT already on the root of the tree, that is, seeing the entire vis)
.on("click", function(d) {
  d3.selectAll("#traceNodeParents span").remove();
  //traces up data structure from node toward root
  traceNodeParents(d);
  //stops click event from being registered ("propagatin") on the  other DOM elements closer to the root
  if (focus !== d) {
    d3.event.stopPropagation();
    d3.select(d3.event.target).classed(".is-clickable")  ? null : zoom(d); 

  }
});



//recursively traces parent nodes, displays them 
function traceNodeParents(datum) {
  d3.select("#traceNodeParents")
  //add name of parent <span> before most recently added
    .insert("span",":first-child") 
    .html(" > " + datum.name)
    .style("background", function() {
    return datum.children ? color(datum.depth) : null;
  });
  if(datum.depth > 1) {
    traceNodeParents(datum.parent);
  } 
}

//create text
var text = svg.selectAll("text")
.data(nodes)
.enter().append("text")
.attr("class", "label")
.call(wrap,  120)
.style("fill-opacity", function(d) {
  return d.parent === root ? 1 : 0;
})
.style("display", function(d) {
  return d.parent === root ? null : "none";
})

//creates svg text line-breaks via tspans
function wrap(text, width) {
  text.each(function() {
    var text = d3.select(this);

    var words = text.datum().name.split(/\s+/).reverse(),
        word,
        line = [],
        lineNumber = 0,
        lineHeight = 1.1, // ems
        y = 0,
        //dy centers the text elements by sliding them up
        dy = -1.30,
        tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
    while (word = words.pop()) {
      line.push(word);
      tspan.text(line.join(" "));
      if (tspan.node().getComputedTextLength() > width) {
        line.pop();
        tspan.text(line.join(" "));
        line = [word];
        tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
      }
    }
  });
}



//store circles and text in "node"
var node = svg.selectAll("circle,text");
//zooms completely out to "root" (entire data structure) when body is clicked
//NOTE: because the "root--node" is un-clickable as defined in the css (pointer-events: none), the BODY is clicked (technicaly) when you try to click the outside, root circle
d3.select("body")
  .style("background", color(-1))
  .on("click", function() {
  console.log("body clicked, friend!");
  console.log(d3.event.target)
  if(!d3.select(d3.event.target).classed("is-clickable") && !d3.select(d3.event.target).classed("loading") && !d3.select(d3.event.target).classed("no-video")) zoom(root);
  //removes previous text about location in structure
  d3.selectAll("#traceNodeParents span").remove();
});

//sets up initial full zoomed out view
zoomTo([root.x, root.y, root.r * 2 + margin]);

//zooms in by: updating focus based on clicked data point, transitioning to new focus
function zoom(d) {
  //stores previous focus before updating
  var focus0 = focus;
  //FOCUS UPDATED to current zoom level
  focus = d;

  //re-ads "zoom out" button when zoomed in, removes when zoomed out
  focus !== root ? $("#zoom-out").show() : $("#zoom-out").hide();

  var transition = d3.transition()
  .duration(750)
  .tween("zoom", function(d) {
    var i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2 + margin]);
    return function(t) {
      zoomTo(i(t));
    };
  });


  transition.selectAll("text")
  //keeps text ONLY if it's the layer in focus (ie one depth below entire set stored in "focus") OR if the 
    .filter(function(d) {
    //NOTE: "this" refers to the <text> svg element corrosponding to "d"
    return d.parent === focus || this.style.display === "inline";
  })
    .style("fill-opacity", function(d) {
    return d.parent === focus ? 1 : 0;
  })
    .each("start", function(d) {
    d3.selectAll(".is-clickable")
      .classed("is-clickable",false);
    if (d.parent === focus) this.style.display = "inline";
  })
    .each("end", function(d) {

    //keeps non-focus text from being visible
    if (d.parent !== focus) {
      this.style.display = "none";
      //makes focused text+node clickable if a node--root
    } else if(d.children == undefined)  {
      //makes all leaf--node text svg's clickable
      d3.select(this).classed("is-clickable",true);
      //makes all node--root's clickable
      d3.selectAll(".node--leaf")
        .filter(function(dOfNode){
        return dOfNode == d;
      })
        .classed("is-clickable",true);
      //   .on("click", function(){
      //   d3.event.stopPropagation();
      // })
    }
  });
}

//takes in the vector v = [x,y, diam+margin]
function zoomTo(v) {
  var k = diameter / v[2];
  view = v;
  node.attr("transform", function(d) {
    return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")";
  });
  circle.attr("r", function(d) {
    return d.r * k;
  });
}

d3.select(self.frameElement).style("height", diameter + "px");


// >>>LEGEND<<<<<<<<<<<<<<<<<<<<<<<
//Legend hide/reveal button
var legendDisplayed;
$("#menu-toggle, button").click(function(e) {
  e.preventDefault();       
  zoom(getData());
  $("#wrapper").toggleClass("toggled");

});

$("#zoom-out").click(function(e){
  zoom(root);
})
  .hide();

// >>>VIDEO LOADER ICON AND YOUTUBE VIDEO<<<<<<<<<<<
//hide loading icon initially
$(".loading").hide();

//on click, show() loader. When background clicked, hide() loader and remove() youtube video
d3.selectAll(".node--leaf, .label")
  .filter(function(d){
  return !d3.select(this).classed("no-video");
})
  .on("click", function(d){
  d3.select(this).classed("has-been-clicked",true);
  $('.loading').show().click(function(){
    $(".loading").hide();
    $(".dance-video").remove();
  });

  //   var d = {
  //   videoLink: "https://www.youtube.com/watch?v=X_Y4VjsdnbM&list=PLBP2Ersubpy_Zcb3lqOlUav-T8Uo9zK_l&index=1"
  // };
  var videoLink = d.videoLink; //retrieve string from data 
  //2. reconstruct link for embed, rather than playlist
  var splitLink = videoLink.split("watch?v=");
  var firstHalf = splitLink[0] + "embed/";
  var secondHalf = splitLink[1].split("&")[0] + "?rel=0&amp;showinfo=0";
  videoLink = firstHalf + secondHalf;

  //append div with iPhrame inside
  d3.select("body").append("div")
    .attr("id","dance-video-wrapper")
    .attr("class","dance-video")
    .html('<iframe width="853" height="480" src="'+ videoLink + '" frameborder="0" allowfullscreen></iframe>');
});


// PLAN OF ADVENTURE
/*


5. find efficient workflow for adding youtube videos (pre-setup with sublime?). add.
6. TROUBLESHOOT:  resolve "transitions" label in Cross-step waltz. etc

FINALIZING
change color of loading icon
link to social dance website; 
link to any data sources on gitHub; 
send to Richard Powers
NON-ESSENTIAL
-entering transitions
-"Dance Figure: " bar is also a search bar w/ auto-complete
*/
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console