Pen Settings

HTML

CSS

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

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div ng-app="app" ng-controller="ClusterWheelCtrl">
  <div class="content animated fadeIn" resize>
      <!-- animated slideInUp  -->
      <div id="sequence"></div>
      <h1 id="PuzzleWheel">Puzzle Wheel</h1>
      <nvd3 options="options" data="data" class="with-3d-shadow with-transitions"></nvd3>
      <div class="details">{{details}}</div>
  </div>
</div>
              
            
!

CSS

              
                body {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: 400;
  background-color: #fff;
  width: 960px;
  height: 700px;
  margin-top: 10px;
}
#main {
  float: left;
  width: 750px;
}
#sidebar {
  float: right;
  width: 100px;
}
#sequence {
  width: 600px;
  height: 70px;
}
#legend {
  padding: 10px 0 0 3px;
}
#sequence text, #legend text {
  font-weight: 600;
  fill: #fff;
}
#chart {
  position: relative;
}
#chart path {
  stroke: #fff;
}
#explanation {
  position: absolute;
  top: 260px;
  left: 305px;
  width: 140px;
  text-align: center;
  color: #666;
  z-index: -1;
}
#percentage {
  font-size: 2.5em;
}
#PuzzleWheel {
  color: green;
  background-color: lightblue;
  text-align: center;
  padding: 2rem;
}
.details {
  height: 50px;
  min-height: 50px;
  color: black;
  background-color: lightblue;
  text-align: center;
  padding: 2rem;
}
              
            
!

JS

              
                'use strict';

    var app = angular.module('app',['nvd3'] )
    
    app.controller('ClusterWheelCtrl', ['$scope', function($scope){
      
        // Breadcrumb dimensions: width, height, spacing, width of tip/tail.
        $scope.details='';
        $scope.breadcrumbs='';
        $scope.data = {"name": ""};
        $scope.elementObjects = {"name": ""};

        $scope.options = {
            chart: {
                type: 'sunburstChart',
                height: 450,
                color: d3.scale.category20(),  // see https://github.com/mbostock/d3/wiki/Ordinal-Scales#category20
                transitionDuration: 250,
                sunburst: {
                    dispatch: {
                        chartClick: function(dt) {       
                          console.log(dt)
                          updateBreadcrumbs($scope.data.reverse(), '');
                          updateDetails($scope.data.reverse());
                        },
                        elementMouseover: function (e) {
                            function getElementNames(obj) {
                                var result = [obj];
                                if (obj.parent) {
                                    result = result.concat(getElementNames(obj.parent));
                                }
                                return result;
                            }
                            var sequenceArray = getElementNames(e.data);
                            $scope.data = sequenceArray;
                        }
                    }
                }
            }
        };

        // Breadcrumb dimensions: width, height, spacing, width of tip/tail.
        var b = { w: 470, h: 30, s: 3, t: 10 };
initializeBreadcrumbTrail()
function initializeBreadcrumbTrail() {
  // Add the svg area.
  var trail = d3.select("#sequence").append("svg:svg")
      .attr("width", 980)
      .attr("height", 50)
      .attr("id", "trail");
  // Add the label at the end, for the percentage.
  trail.append("svg:text")
    .attr("id", "endlabel")
    .style("fill", "#333");
}

// Generate a string that describes the points of a breadcrumb polygon.
function breadcrumbPoints(d, i) {
  var points = [];
  points.push("0,0");
  points.push(b.w + ",0");
  points.push(b.w + b.t + "," + (b.h / 2));
  points.push(b.w + "," + b.h);
  points.push("0," + b.h);
  if (i > 0) { // Leftmost breadcrumb; don't include 6th vertex.
    points.push(b.t + "," + (b.h / 2));
  }
  return points.join(" ");
}

// Update the breadcrumb trail to show the current sequence and percentage.
function updateBreadcrumbs(nodeArray, percentageString) {

  // Data join; key function combines name and depth (= position in sequence).
  var g = d3.select("#trail")
      .selectAll("g")
      .data(nodeArray, function(d) { return d.name + d.depth; });

  // Add breadcrumb and label for entering nodes.
  var entering = g.enter().append("svg:g");

  entering.append("svg:polygon")
      .attr("points", breadcrumbPoints)
      .style("fill", function(d) { return 'red'; });

  entering.append("svg:a")
  // wrap text node in 'a' node      
      .attr("text-anchor", "middle")
      .attr("xlink:href", function(d){return d.url;})   // put here the right 'url' field (here url is defined for a few items)
      .append("svg:text")
      .attr("x", (b.w + b.t) / 2)
      .attr("x", (b.w + b.t) / 2)
      .attr("y", b.h / 2)
      .attr("dy", "0.35em")
      .attr("text-anchor", "middle")
      .text(function(d) { return d.name; });
  
  // Set position for entering and updating nodes.
  g.attr("transform", function(d, i) {
    return "translate(" + i * (b.w + b.s) + ", 0)";
  });

  // Remove exiting nodes.
  g.exit().remove();

  // Now move and update the percentage at the end.
  d3.select("#trail").select("#endlabel")
      .attr("x", (nodeArray.length + 0.5) * (b.w + b.s))
      .attr("y", b.h / 2)
      .attr("dy", "0.35em")
      .attr("text-anchor", "middle")
      .text(percentageString);

  // Make the breadcrumb trail visible, if it's hidden.
  d3.select("#trail")
      .style("visibility", "");

}
      
        
  function updateDetails(dt) {
    console.log('updateDetails:',dt);
    $scope.details = dt[0].name;
    var html = '<h3>'+$scope.details+'</h3>';
    if (dt[0].url) {
       html += '<div class="link"><a href="'+dt[0].url+'">Link to Khan Academy chapter</div>';
    }
    var g = d3.select(".details")
      .html(html);
    
  }


        $scope.data = [{
            "name": "Introduction to Trigonometry by Khan Academy",
            "children": [
                {
                    "name": "Trigonometry with right triangles",
                    "url": "https://www.khanacademy.org/math/trigonometry/trigonometry-right-triangles",
                    "children": [
                        {
                          "name": "Introduction to the trigonometric ratios",
                          "url": "https://www.khanacademy.org/math/trigonometry/trigonometry-right-triangles/intro-to-the-trig-ratios/v/basic-trigonometry",
                          "children": [
                                {"name": "Opposite, adjacent, and hypotenuse (sides of right triangles)", "size": 15},
                                {"name": "Introduction to the trigonometric ratios", "size": 0},
                                {"name": "Finding trig ratios in right triangles", "size": 55},
                                {"name": "How to find trigonometric ratios in a right triangle (examples)"},

{"name": "Find trigonometric ratios in right triangles", "size": 15}
                            ]
                        },
                        {
                            "name": "Solving for a side in a right triangle using the trigonometric ratios",
                            "children": [
                                {"name": "Finding an unknown side in a right triangle using trigonometry", "size": 3534},
                                {"name": "How to find missing sides in a right triangle using trigonometry (example)", "size": 5731},
                                {"name": "Solve for a side in a right triangle", "size": 7840}
                            ]
                        },
                        {
                            "name": "Solving for an angle in a right triangle using the trigonometric ratios",
                            "children": [
                                {"name": "Inverse trig functions introduction", "size": 7074},
{"name": "Solve for an angle in a right triangle"}
                            ]
                        },
{"name": "Modeling with Right Triangles",
"children": [
  {"name": "How to solve a right triangle word problem with a missing angle (example)"},
  {"name": "Angles of elevation and depression"},
  {"name": "Right triangle word problems"}
]
},
{"name": "Trigonometric Ratios and Similarities",
"children": [
  {"name": "Triangle similarity and the trigonometric ratios"},
  {"name": "Challenge problem: Verify identities"},
  {"name": "Challenge problem: Match trigonometric values and side ratios"}
]
},
{"name": "Sine and Cosine of Complementary Angles",
"children": [
  {"name": "The sine and cosine of complementary example"},
  {"name": "Using the relationship between sine and cosine of complementary angles to solve a geometry problem"},
  {"name": "Using the relationship between sine and cosine of complementary angles to solve a real-world problem"}
]
},
{"name": "Trigonometric Ratios of Special Triangles",
"children": [
  {"name": "Trig ratios of special triangles"}
]
},
{"name": "Introduction to the Pythagorean Trigonometric Identity",
"children": [
  {"name": "Introduction to the Pythagorean trigonometric identity"}
]
},
{"name": "The reciprocal Trig Ratios",
"children": [
  {"name": "Reciprocal trig ratios (cosecant, secant, and cotangent)"},
  {"name": "How to find the reciprocal trigonometric ratios of an angle (example)"},
  {"name": "How to use cotangent in order to solve for a side in a right triangle (example)"},
  {"name": "Sine, cosine, and cofunctions"}
]
}
                    ]
                },
                {
                    "name": "Trigonometry with General Triangles",
                    "children": [
                        {"name": "The Law of Sines", "size": 17010,
                        "children": [
                        {"name": "How to find a missing side length using the law of sines (example)"},
                        {"name": "How to find a missing angle measure using the law of sines (example)"},
                        {"name": "Solve triangles using the law of sines"},
                        {"name": "Proof of the law of sines"}
                        ]
                        },
                        {"name": "The Law of Cosines", "size": 5842,
                        "children": [
                        {"name": "How to find a missing side length using the law of cosines (example)"},
                        {"name": "How to find a missing angle measure using the law of cosines (example)"},
                        {"name": "Solve triangles using the law of cosines"},
                        {"name": "Proof of the law of cosines"}
                        ]
                        },
                        {
                            "name": "Solving General Triangles",
                            "children": [
                                {"name": "Word problem: Solving for a side length in a general triangle (example)", "size": 1983},
                                {"name": "General triangle word problems", "size": 2047}
                            ]
                        }
                    ]
                },
                {
                    "name": "The unit circle definition of sine, cosine, and tangent",
                    "children": [
                        {
                            "name": "Introduction to Radians",
                            "children": [
                                {"name": "Introduction to radians", "size": 721},
                                {"name": "Converting between radians and degrees", "size": 4294},
                                {"name": "How to convert from degrees to radians (example)", "size": 9800},
                                {"name": "How to convert from radians to degrees (example)", "size": 1314},
                                {"name": "Convert between degrees and radians", "size": 2220},
                              
{"name": "Rotation by radians and quadrants"}
                            ]
                        },
                        {"name": "The Unit Circle Definition of Sine, Cosine and Tangent", "size": 1759,
                        "children": [
                        {"name": "The unit circle definition of sine, cosine, and tangent"},
                        {"name": "How to find trigonometric values using the unit circle definition (example)"},
                        {"name": "Find trig values using the unit circle definition"},
                        {"name": "Matching the SOH CAH TOA and the unit circle definitions of the trigonometric functions"}
                        ]
                        },
                        {"name": "The graphs of Sine, Cosine and Tangent", "size": 2165,
                        "children": [
                        {"name": "The graph of the sine function"},
                        {"name": "The graph of the tangent function"},
                        {"name": "Finding the intersection points of the graphs of sine and cosine"}
                        ]
                        },
                        {"name": "Basic Trigonometric Identities", "size": 586,
                        "children": [
                        {"name": "Sine and cosine identities that arise from the symmetry of the unit circle"},
                        {"name": "Tangent identities that arise from the symmetry of the unit circle"},
                        {"name": "Sine and cosine identities that arise from angle rotations on the unit circle"},
                        {"name": "Identity that arises from the periodicity of the tangent function"}
                        ]
                        },
                        {"name": "Trigonometric Values of Special Angles", "size": 3331,
                        "children": [
                        {"name": "Finding the trigonometric values of a special angle in the unit circle"},
                        {"name": "Find the trigonometric values of special angles"}
                        ]
                        },
                        {"name": "The Pythagorean Identity", "size": 772,
                        "children": [
                        {"name": "Proof of the Pythagorean trigonometric identity"},
                        {"name": "How to find a trig value of an angle given another trig value of the angle (example)"},
                        {"name": "Use the Pythagorean identity"}
                        ]
                        },
                        {"name": "Love live Tau", "size": 3322,
                        "children": [
                        {"name": "Tau versus Pi"},
                        {"name": "Pi is (still) wrong"}
                        ]
                        }
                    ]
                },
                {
                    "name": "Graphs of trigonometric functions",
                    "children": [
                        {"name": "The graphs of sine, cosine, and tangent", "size": 8833,
                        "children": [
                        {"name": "The graph of the sine function"},
                        {"name": "The graph of the tangent function"},
                        {"name": "Finding the intersection points of the graphs of sine and cosine"}
                        ]
                        },
                        {"name": "Introduction to amplitude, midline, and extrema of sinusoidal functions", "size": 1732,
                        "children": [
                        {"name": "Midline, amplitude and period of a sinusoidal function"},
                        {"name": "Find the midline of sinusoidal functions from their graph"},
                        {"name": "Find the amplitude of sinusoidal functions from their graph"}
                        ]
                        },
                        {"name": "Finding amplitude and midline of sinusoidal functions from their formulas", "size": 3623,
                        "children": [
                        {"name": "Find the midline of a sinusoidal function from its formula"},
                        {"name": "How to find the amplitude and period of a sinusoidal functions from its formula (example)"},
                        {"name": "Find the amplitude of a sinusoidal function from its formula"}
                        ]
                        },
                        {"name": "Period of sinusoidal functions", "size": 10066,
                        "children": [
                        {"name": "Find the period of sinusoidal functions from their graph"},
                        {"name": "How to find the amplitude and period of a sinusoidal functions from its formula (example)"},
                        {"name": "Find the period of a sinusoidal function from its formula"}
                        ]
                        },
                        {"name": "Graphing sinusoidal functions", "size": 10066,
                        "children": [
                        {"name": "Graph of a sinusoidal function with vertical stretch and horizontal reflection"},
                        {"name": "Graph of a sinusoidal function with vertical and horizontal stretches"},
                        {"name": "Graph sinusoidal functions"},
                        {"name": "Graph sinusoidal functions (including phase shift)"}
                        ]
                        },
                        {"name": "Constructing sinusoidal functions", "size": 10066,
                        "children": [
                        {"name": "How to construct a sinusoidal function from its graph"},
                        {"name": "Construct sinusoidal functions"},
                        {"name": "Word problem: Constructing a sinusoidal model using sine"},
                        {"name": "Word problem: Constructing a sinusoidal model using cosine"},
                        {"name": "Model situations with sinusoidal functions"},
                        {"name": "Word problem: Constructing a sinusoidal model with phase shift"},
                        {"name": "Model situations with sinusoidal functions (including phase shift)"}
                        ]
                        }
                    ]
                },
                {
                    "name": "Trigonometric equations and identities",
                    "children": [
                        {"name": "The inverse trigonometric functions", "size": 4116,
                        "children": [
                          {"name": "Introduction to arcsine"},
                          {"name": "Introduction to arctangent"},
                          {"name": "Introduction to arccosine"},
                          {"name": "Evaluate inverse trigonometric functions"},
                          {"name": "How to restrict the domain of a function to make it invertible (example)"},
                          {"name": "Restricting the domain of a tangent function to make it invertible"},
                          {"name": "How to find an angle given its tangent using a calculator (example)"}
                        ]
                        },
                      {"name": "Solving basic sinusoidal equations", "size": 4116,
                      "children": [
                        {"name": "How to find all solutions to an equation of the form sin(x)=d (example)"},
                        {"name": "Solving cos(θ)=1 and cos(θ)=-1"},
                        {"name": "Solve basic sinusoidal equations"}
                      ]
                      },
                      {"name": "Solving advanced sinusoidal equations", "size": 4116,
                      "children": [
                        {"name": "Solve advanced sinusoidal equations"}
                      ]
                      },
                      {"name": "Solving sinusoidal models", "size": 4116,
                      "children": [
                       {"name": "Word problem: Solving a sinusoidal modeling function"},
                        {"name": "Solve sinusodial modeling functions"}
                       ]
                      },
                      {"name": "Introduction to the trigonometric angle addition identities", "size": 4116,
                      "children": [
                        {"name": "Review of the trigonometric angle addition identities"},
                        {"name": "How to use the cosine angle addition identity (example)"},
                        {"name": "How to use the cosine double-angle identity (example)"},
                        {"name": "Practice using the trigonometric angle addition identities"},
                        {"name": "Proof of the sine angle addition identity"},
                        {"name": "Proof of the cosine angle addition identity"}
                      ]
                      },
                      {"name": "Using trigonometric identities to solve problems", "size": 4116,
                       "children": [
                       {"name": "How to find trigonometric values using the angle addition formulas (example)"},
                       {"name": "Use angle addition formulas to find trig values"},
                       {"name": "How to find a side length using the trig angle addition identities (example)"},
                       {"name": "How to manipulate expressions using the trig angle addition formulas (example)"},
                       {"name": "Rewriting trigonometric expressions using trigonometric identities"}
                       ]
                      
                      },
                      {"name": "Challenging trigonometry problems",
                      "children": [
                        {"name": "Challenge problem: Find the area of a triangle"},
                        {"name": "Challenge problem: Find the area of a hexagon"},
                        {"name": "Challenge problem: Find cosine of sum of angles given their cosines"},
                        {"name": "Challenge problem: Rewrite a trigonometric equation of angles in arithmetic progression"},
                        {"name": "Challenge problem: Find the maximum value of a trigonometric expression"},
                        {"name": "Challenge problem: System of trigonometric equations"},
                        {"name": "Challenge problem: Conditions on angle for a system of equation having a solution"}
                      ]
                      }
                    ]
                },
                {
                    "name": "Miscellaneous",
                    "children": [
                        {"name": "Trigonometry readiness warmup", "size": 1082,
                        "children": [
                          {"name": "Trigonometry Warmup"}
                          ]
                        }
                    ]
                },
                {
                    "name": "Old Content",
                    "children": [
                        {"name": "Trigonometry 0.5", "size": 1616},
                        {"name": "Trigonometry  1.5", "size": 1027},
                        {"name": "Reciprocal Trig Functions", "size": 3891},
                        {"name": "Trigonometric functions and side ratios in right triangles", "size": 891},
                        {"name": "Non-right Triangle Proofs", "size": 2893},
                        {"name": "Radians on the unit circle", "size": 5103},
                        {"name": "Radians and arc length", "size": 3677},
                        {"name": "Unit circle trigonometry", "size": 781},
                        {"name": "Symmetry and periodicity of trigonometric functions", "size": 4141},
                        {"name": "Understanding inverse trig functions", "size": 933},
                        {"name": "Understanding angle addition formulas", "size": 5130},
                        {"name": "Manipulating trig expressions with pythagorean identities", "size": 3617}                    ]
                }
            ]
        }];      
    }]);



              
            
!
999px

Console