The avatar for @harrystevens
Harry Stevens
News and graphics at @ClimateLab, a project of @PostGraphics.
Published
Math
Edited
Jul 28, 2020
1 star
Math
Kaprekar's constantBayes’ TheoremDiscovering Pi With Monte CarloPaper FoldingHyperbolic & Inverse Hyperbolic FunctionsQuadratic FormulaSecant & Tangent Lines on a Power FunctionRoundHeron's FormulaCompleting The SquareCircles, Angles and Right Triangles
Sin, Cosine, and Tangent of an Angle
FactorialZ Score TableBinominal Probability FormulaStatsLog AnimationCircular Segment with Chart of h-k RelationshipVisualizing vector additionFactor FunctionsFunction iteratorApproaching Euler's NumberSine WavePythagorean Triples
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
tanbound = 2;
Insert cell
xmin = -180;
Insert cell
xmax = 180;
Insert cell
xstep = 1;
Insert cell
data = {
const out = [];
for (let angle = xmin; angle <= xmax; angle += xstep) {
const rad = geometric.angleToRadians(angle),
cos = Math.cos(rad),
sin = Math.sin(rad),
tan = Math.tan(rad);

out.push({angle, fn: "cos", value: cos});
out.push({angle, fn: "sin", value: sin});
out.push({angle, fn: "tan", value: tan});
}
return out;
}
Insert cell
lineData = ["cos", "sin", "tan"].map(fn => {
return {
fn,
data: data.filter(d => d.fn === fn)
}
})
Insert cell
Insert cell
margin = ({left: 10, right: 10, top: 10, bottom: 10});
Insert cell
size = Math.min(width, 600);
Insert cell
chartWidth = size - margin.left - margin.right;
Insert cell
chartHeight = size - margin.top - margin.bottom;
Insert cell
Insert cell
x = d3.scaleLinear()
.domain([xmin, xmax])
.range([0, chartWidth]);
Insert cell
y = d3.scaleLinear()
.domain([-tanbound, tanbound])
.range([chartHeight, 0]);
Insert cell
Insert cell
line = d3.line()
.x(d => x(d.angle))
.y(d => y(d.value))
.defined(d => d.value <= tanbound && d.value >= -tanbound)
Insert cell
legend = lineLegend()
.entries(lineData)
.key(d => d.fn);
Insert cell
voronoi = lineVoronoi()
.key(d => d.fn)
.x(d => x(d.angle))
.y(d => y(d.value))
.size([chartWidth, chartHeight]);
Insert cell
Insert cell
style = `
.line {
fill: none;
}
`
Insert cell
Insert cell
d3 = require("d3-axis@1", "d3-array@2", "d3-delaunay@5", "d3-shape@1", "d3-scale@3", "d3-scale-chromatic@1", "d3-selection@1");
Insert cell
geometric = require("geometric@2");
Insert cell
import { drawAxes } from "@harrystevens/linear-algebra";
Insert cell
import { toc } from "@harrystevens/toc";
Insert cell
import { lineLegend, lineVoronoi } from "@harrystevens/line-functions";
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more