Circle
A circle is a plane curve consisting of points at a fixed distance from a common center.
D3.js in Action, Third Edition
An SVG circle is a circle element defined by a center point and a uniform radius.
- How it is used
- Uses circles as basic SVG marks, proportional map symbols, and backgrounds for radial small multiples.
- How deep it goes
- Defines SVG center and radius attributes, then develops responsive positioning, scaled radii, and Canvas arc drawing.
- Examples
- Demonstrates an outlined SVG circle, laureate birth-city circles, and responsive background circles with month axes.
- What you can do after
- Build it from scratch as an SVG circle or a complete Canvas arc, then position and style it.
Math for Web Design
A circle is the set of points in a plane at a fixed distance from a central point.
- How it is used
- Uses circles to position elements along curved paths and support circular layouts, radial menus, arcs, and movement calculations.
- How deep it goes
- Derives circle coordinates from sine, cosine, radius, center, and angle, with supporting degree-radian conversion.
- Examples
- Uses a unit-circle table, coordinate formulas, circular element arrangements, and curved paths as concrete examples.
- What you can do after
- Apply it via CSS and JavaScript to arrange elements along circles and calculate positions on curved paths.
Related concepts
- circumscribed circleincludes · A circumscribed circle is a circle that passes through all vertices of a polygon.
- border-radiusconfigured by · The CSS border-radius property specifies the radii of an element’s corners, producing rounded corners.
- implicit equationuses · An implicit equation defines a geometric object as the set of points satisfying a relation among its variables.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.