liveBook · Manning

Cosine function

As explained in D3.js in Action, Third Edition

Cosine is a trigonometric function that gives the ratio of the adjacent side to the hypotenuse in a right triangle.

The cosine function relates an angle in a right triangle to the adjacent side and hypotenuse. In a radial visualization, it converts an angle and radius into a vertical coordinate: y = radius × cos(θ). Because the SVG coordinate system points downward, the implementation multiplies the result by −1. section 14.5.1

Positioning month axes

A circle assigns each month an angle from 0 to nearly 2π. For every month, an SVG line starts at (0, 0), while its endpoint uses x = radius × sin(θ) and y = −radius × cos(θ). January begins at twelve o’clock, and the remaining axes spread around the circle. section 14.5.1

How D3.js in Action, Third Edition covers it

How deep it goes
Defines the right-triangle ratio and works through coordinate equations, without developing broader trigonometric theory.
Examples
Uses a circle with twelve month axes, angle calculations, and SVG line endpoints as concrete artifacts.
What it assumes
Assumes familiarity with angles and right triangles while explaining the needed cosine relationship from the coordinate problem.
What you can do after
Build radial SVG axes by converting angles and radii into vertical endpoint coordinates.
How it connects
Links cosine with sine, trigonometric functions, right triangles, radial axes, and SVG coordinates.

Also explained in

Compare how 3 books explain cosine function →

Related concepts

This explainer was generated by Manning's knowledge graph from the text of D3.js in Action, Third Edition. The section links point to the parts of the book it draws on.