HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

In CodePen, whatever you write in the HTML editor is what goes within the `<body>`

tags in a basic HTML5 template. So you don't have access to higher-up elements like the `<html>`

tag. If you want to add classes there that can affect the whole document, this is the place to do it.

In CodePen, whatever you write in the HTML editor is what goes within the `<body>`

tags in a basic HTML5 template. If you need things in the `<head>`

of the document, put that code here.

!
##### Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose **Neither** and nothing will be applied.

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance `-webkit-`

or `-moz-`

.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

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.

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

If the stylesheet you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

+ add another resource

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Babel includes JSX processing.

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.

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

+ add another resource

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.

Using packages here is powered by Skypack, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ES6 `import`

usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

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

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

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

Visit your global Editor Settings.

` ````
<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>
</div>
```

` ````
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;
}
```

` ````
'use strict';
var app = angular.module('app',['nvd3'] )
app.controller('ClusterWheelCtrl', ['$scope', function($scope){
// Breadcrumb dimensions: width, height, spacing, width of tip/tail.
$scope.breadcrumbs='';
$scope.data = {"name": ""};
$scope.elementObjects = {"name": ""};
$scope.options = {
chart: {
type: 'sunburstChart',
height: 450,
color: d3.scale.category20c(),
transitionDuration: 250,
sunburst: {
dispatch: {
chartClick: function(e) {
console.log($scope.data)
updateBreadcrumbs($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: 625, h: 30, s: 3, t: 10 };
initializeBreadcrumbTrail()
function initializeBreadcrumbTrail() {
// Add the svg area.
var trail = d3.select("#sequence").append("svg:svg")
.attr("width", 1150)
.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 'deepskyblue'; });
entering.append("svg:text")
.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", "");
}
$scope.data = [{
"name": "Introduction to Trigonometry by Khan Academy",
"children": [
{
"name": "Trigonometry with right triangles",
"children": [
{
"name": "Introduction to the trigonometric ratios",
"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

Also see: Tab Triggers