Translation
A translation is a geometric transformation that moves every point by the same displacement without changing an object’s shape or orientation.
D3.js in Action, Third Edition
A translation is a coordinate transformation that shifts every point by the same horizontal or vertical offset.
- How it is used
- Positions SVG chart groups, inner plotting areas, repeated visualizations, and projected maps.
- How deep it goes
- Explains group-level displacement, local coordinate systems, scale-based placement, and responsive row-column calculations.
- Examples
- Uses margin-convention line charts, year-based donut charts, responsive small-multiple grids, and geographic projections.
- What you can do after
- Apply it via SVG transform attributes and D3 scales to position chart elements and responsive visualization groups.
Read how D3.js in Action, Third Edition explains translation →
Geometry for Programmers
A translation is a geometric transformation that shifts every point by the same distance in the same direction.
- How it is used
- Defines the simplest geometric transformation for moving points and models through space.
- How deep it goes
- Explains coordinate equations, vector addition, and parametric motion, while deferring matrix generalization to broader transformation treatment.
- Examples
- Uses translated unit squares, a time-dependent circular path, and point-vector models as concrete examples.
- What you can do after
- Apply coordinate formulas or vector addition to translate points, models, and time-dependent shapes.
Everyday Data Visualization
Symmetry in which repeated elements are shifted by regular intervals while retaining the same orientation.
- How it is used
- Uses repeated charts and typographic styles to help viewers compare categories and recognize hierarchy.
- How deep it goes
- Defines the symmetry, explains its perceptual rationale, and gives visualization and typography applications, but stops short of mathematical formalism.
- Examples
- Uses small-multiples graphs, a gender-disparities visualization, and consistently styled pay-gap chart labels.
- What you can do after
- Apply it to repeat chart structures and typography so users can compare instances and recognize relative importance.
Related concepts
- compositionused by · Composition is a technique for combining simpler functions, components, or operations into a larger structure or behavior.
- linear transformationcontrasts with · A linear transformation is a mapping between vector spaces that preserves vector addition and scalar multiplication.
- transform attributeconfigured by · The SVG transform attribute specifies geometric transformations such as translation, rotation, scaling, or skewing for an element and its descendants.
- symmetrykind of · Symmetry is the preservation of relevant structure or properties under a specified transformation, such as reflection, exchange, or reversal.
- geometric transformationkind of · A geometric transformation is a mapping or operation that changes or expresses the position, orientation, scale, shape, or coordinate representation of geometric objects.
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.