Skip to content

Instantly share code, notes, and snippets.

@tomhaymore

tomhaymore/index.html

Created September 29, 2011 22:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tomhaymore/1252132 to your computer and use it in GitHub Desktop.
Save tomhaymore/1252132 to your computer and use it in GitHub Desktop.
Download ZIP
Indented Tree Concept for CK12
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.27.2"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.27.2"></script>
<style>
rect {
cursor: pointer;
fill: #fff;
stroke: steelblue;
stroke-width: 1.5px;
}
text {
cursor:pointer;
font-size:13px;
}
path.link {
fill: none;
stroke: #ccc;
stroke-width: 1.5px;
}
</style>
</head>
<body>
<div id="chart"></div>
<script type="text/javascript">
var w = 960,
h = 3500,
i = 0,
barHeight = 35,
barWidth = w * .6,
duration = 400,
root;
var tree = d3.layout.tree()
.size([h, 100]);
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });
var vis = d3.select("#chart").append("svg:svg")
.attr("width", w)
.attr("height", h)
.append("svg:g")
.attr("transform", "translate(20,30)");
d3.json("math_map_compact.json", function(json) {
json.x0 = 0;
json.y0 = 0;
update(root = json);
});
function update(source) {
// Compute the flattened node list. TODO use d3.layout.hierarchy.
var nodes = tree.nodes(root);
// Compute the "layout".
nodes.forEach(function(n, i) {
n.x = i * barHeight;
});
// Update the nodes…
var node = vis.selectAll("g.node")
.data(nodes, function(d) { return d.id || (d.id = ++i); });
var nodeEnter = node.enter().append("svg:g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
.style("opacity", 1e-6);
// Enter any new nodes at the parent's previous position.
nodeEnter.append("svg:rect")
.attr("y", -barHeight / 2)
.attr("height", barHeight)
.attr("width", barWidth)
.attr("rx",2)
.attr("ry",2)
.style("fill", color)
.on("click", click);
nodeEnter.append("svg:a")
.attr("xlink:href","http://www.ck12.org")
.append("svg:text")
.attr("x",10)
.attr("dy", 3.5)
.attr("dx", 10)
.attr("fill","#000")
//.attr("fill",function(d) {return (d.children) ? "#000" : "#ccc";})
//.attr("stroke", function(d) {return (d.children) ? "#000" : "#ccc";})
.text(function(d) { return d.name; });
//.on("click",follow);
// Transition nodes to their new position.
nodeEnter.transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
.style("opacity", 1);
node.transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
.style("opacity", 1)
.select("rect")
.style("fill", color);
// Transition exiting nodes to the parent's new position.
node.exit().transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
.style("opacity", 1e-6)
.remove();
// Update the links…
var link = vis.selectAll("path.link")
.data(tree.links(nodes), function(d) { return d.target.id; });
// Enter any new links at the parent's previous position.
link.enter().insert("svg:path", "g")
.attr("class", "link")
.attr("d", function(d) {
var o = {x: source.x0, y: source.y0};
return diagonal({source: o, target: o});
})
.transition()
.duration(duration)
.attr("d", diagonal);
// Transition links to their new position.
link.transition()
.duration(duration)
.attr("d", diagonal);
// Transition exiting nodes to the parent's new position.
link.exit().transition()
.duration(duration)
.attr("d", function(d) {
var o = {x: source.x, y: source.y};
return diagonal({source: o, target: o});
})
.remove();
// Stash the old positions for transition.
nodes.forEach(function(d) {
d.x0 = d.x;
d.y0 = d.y;
});
}
// Toggle children on click.
function click(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update(d);
}
function color(d) {
return d._children ? "#3182bd" : d.children ? "#c6dbef" : "#fd8d3c";
}
</script>
</body>
</html>
Raw
math_map_compact.json
{
"name": "Arithmetic",
"children": [
{
"name": "Trigonometry",
"children": [
{
"name": "Right Triangles and an Introduction to Trigonometry",
"children": [
{
"name": "The Pythagorean Theorem"
},
{
"name": "Special Right Triangles"
},
{
"name": "Basic Trigonometric Functions"
},
{
"name": "Solving Right Triangles"
},
{
"name": "Measuring Rotation"
},
{
"name": "Applying Trig Functions to Angles of Rotation"
},
{
"name": "Trigonometric Functions of Any Angle"
}
]
},
{
"name": "Graphing Trigonometric Functions - 2nd edition",
"children": [
{
"name": "Relating Trigonometric Functions"
},
{
"name": "Radian Measure"
},
{
"name": "Applications of Radian Measure"
},
{
"name": "Circular Functions of Real Numbers"
},
{
"name": "Translating Sine and Cosine Functions"
},
{
"name": "Amplitude, Period and Frequency"
},
{
"name": "General Sinusoidal Graphs"
}
]
},
{
"name": "Trigonometric Identities and Equations - 2nd edition",
"children": [
{
"name": "Graphing Tangent, Cotangent, Secant, and Cosecant"
},
{
"name": "Fundamental Identities"
},
{
"name": "Proving Identities"
},
{
"name": "Solving Trigonometric Equations"
},
{
"name": "Sum and Difference Identities"
},
{
"name": "Double Angle Identities"
},
{
"name": "Half-Angle Identities"
}
]
},
{
"name": "Inverse Trigonometric Functions - 2nd edition",
"children": [
{
"name": "Products, Sums, Linear Combinations, and Applications"
},
{
"name": "Basic Inverse Trigonometric Functions"
},
{
"name": "Graphing Inverse Trigonometric Functions"
},
{
"name": "Inverse Trigonometric Properties"
}
]
},
{
"name": "Triangles and Vectors",
"children": [
{
"name": "Applications & Models"
},
{
"name": "The Law of Cosines"
},
{
"name": "Area of a Triangle"
},
{
"name": "The Law of Sines"
},
{
"name": "The Ambiguous Case"
},
{
"name": "General Solutions of Triangles"
},
{
"name": "Vectors"
}
]
}
]
},
{
"name": "Algebra",
"children": [
{
"name": "Equations and Functions",
"children": [
{
"name": "Variable Expressions"
},
{
"name": "Order of Operations"
},
{
"name": "Patterns and Equations"
},
{
"name": "Equations and Inequalities"
},
{
"name": "Functions as Rules and Tables"
},
{
"name": "Functions as Graphs"
},
{
"name": "Problem-Solving Plan"
}
]
},
{
"name": "Real Numbers",
"children": [
{
"name": "Problem-Solving Strategies: Make a Table and Look for a Pattern"
},
{
"name": "Integers and Rational Numbers"
},
{
"name": "Adding and Subtracting Rational Numbers"
},
{
"name": "Multiplying and Dividing Rational Numbers"
},
{
"name": "The Distributive Property"
},
{
"name": "Square Roots and Real Numbers"
}
]
},
{
"name": "Equations of Lines",
"children": [
{
"name": "Problem-Solving Strategies: Guess and Check, Work Backward"
},
{
"name": "One-Step Equations"
},
{
"name": "Two-Step Equations"
},
{
"name": "Multi-Step Equations"
},
{
"name": "Equations with Variables on Both Sides"
},
{
"name": "Ratios and Proportions"
}
]
},
{
"name": "Graphs of Equations and Functions",
"children": [
{
"name": "Percent Problems"
},
{
"name": "The Coordinate Plane"
},
{
"name": "Graphs of Linear Equations"
},
{
"name": "Graphing Using Intercepts"
},
{
"name": "Slope and Rate of Change"
},
{
"name": "Graphs Using Slope-Intercept Form"
},
{
"name": "Direct Variation Models"
},
{
"name": "Linear Function Graphs"
}
]
},
{
"name": "Writing Linear Equations",
"children": [
{
"name": "Problem-Solving Strategies - Graphs"
},
{
"name": "Forms of Linear Equations"
},
{
"name": "Equations of Parallel and Perpendicular Lines"
},
{
"name": "Fitting a Line to Data"
}
]
},
{
"name": "Linear Inequalities",
"children": [
{
"name": "Predicting with Linear Models"
},
{
"name": "Solving Inequalities"
},
{
"name": "Using Inequalities"
},
{
"name": "Compound Inequalities"
},
{
"name": "Absolute Value Equations and Inequalities"
}
]
},
{
"name": "Solving Systems of Equations and Inequalities",
"children": [
{
"name": "Linear Inequalities in Two Variables"
},
{
"name": "Linear Systems by Graphing"
},
{
"name": "Solving Linear Systems by Substitution"
},
{
"name": "Solving Linear Systems by Elimination"
},
{
"name": "Special Types of Linear Systems"
}
]
},
{
"name": "Exponential Functions",
"children": [
{
"name": "Systems of Linear Inequalities"
},
{
"name": "Exponent Properties Involving Products"
},
{
"name": "Exponent Properties Involving Quotients"
},
{
"name": "Zero, Negative, and Fractional Exponents"
},
{
"name": "Scientific Notation"
},
{
"name": "Geometric Sequences"
},
{
"name": "Exponential Functions"
}
]
},
{
"name": "Polynomials",
"children": [
{
"name": "Applications of Exponential Functions"
},
{
"name": "Addition and Subtraction of Polynomials"
},
{
"name": "Multiplication of Polynomials"
},
{
"name": "Special Products of Polynomials"
},
{
"name": "Polynomial Equations in Factored Form"
},
{
"name": "Factoring Quadratic Expressions"
},
{
"name": "Factoring Special Products"
}
]
},
{
"name": "Quadratic Equations and Quadratic Functions",
"children": [
{
"name": "Factoring Polynomials Completely"
},
{
"name": "Graphs of Quadratic Functions"
},
{
"name": "Quadratic Equations by Graphing"
},
{
"name": "Quadratic Equations by Square Roots"
},
{
"name": "Solving Quadratic Equations by Completing the Square"
},
{
"name": "Solving Quadratic Equations by the Quadratic Formula"
},
{
"name": "The Discriminant"
}
]
},
{
"name": "Algebra and Geometry Connections",
"children": [
{
"name": "Linear, Exponential and Quadratic Models"
},
{
"name": "Graphs of Square Root Functions"
},
{
"name": "Radical Expressions"
},
{
"name": "Radical Equations"
},
{
"name": "The Pythagorean Theorem and Its Converse"
}
]
}
]
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment