Rectangle
A rectangle is a planar quadrilateral with four right angles and opposite sides of equal length.
D3.js in Action, Third Edition
An SVG rect element is a rectangular graphical element defined by position, width, and height attributes.
- How it is used
- Builds chart marks, layout guides, and tooltip backgrounds in SVG, and drawn shapes in Canvas.
- How deep it goes
- Defines SVG position, dimensions, styling, rounded corners, D3 binding and updates, plus Canvas drawing commands.
- Examples
- Uses an SVG shapes gallery, a D3 survey bar, salary histogram bars, a responsive grid, a temperature tooltip, and Canvas shapes.
- What you can do after
- Build it from scratch in SVG or Canvas, then bind, size, style, and update rectangles for visualizations.
Read how D3.js in Action, Third Edition explains Rectangle →
Data Storytelling with Altair and AI
A rectangle is a four-sided graphical shape used as a visual mark to cover a region of a chart.
- How it is used
- Uses rectangles to highlight meaningful chart intervals and organize proposed actions into visual roadmaps.
- How deep it goes
- Builds rectangles from coordinate DataFrames, encodes their bounds, and extends the pattern to labeled, connected sets.
- Examples
- Uses a salmon-sales decline and a dogs-and-cats campaign roadmap as concrete rectangle examples.
- What you can do after
- Builds contextual highlights and labeled roadmaps with Python, pandas, and Altair.
Read how Data Storytelling with Altair and AI explains Rectangle →
Advanced Algorithms and Data Structures
A rectangle is a planar quadrilateral with four right angles used here as the spatial region associated with an R-tree node.
- How it is used
- Uses rectangles to bound points and child regions within an R-tree.
- How deep it goes
- Defines rectangles through coordinate extrema and smallest containment, extending the idea to axis-aligned hyper-rectangles.
- Examples
- Illustrates rectangles with city-map points, nested bounding regions, and overlapping regions on a Cartesian plane.
- What you can do after
- Evaluate R-tree regions by identifying the minimum coordinate-aligned rectangle enclosing points or child rectangles.
Read how Advanced Algorithms and Data Structures explains Rectangle →
Related concepts
- mark_rect()implemented by · mark_rect() is an Altair API method that creates rectangular marks in a chart.
- grid areaused by · A grid area is a rectangular region of one or more CSS Grid cells, optionally identified by a name for layout placement.
- box-and-whisker plotpart of · A box-and-whisker plot is a statistical graphic that summarizes a numerical distribution using quartiles, a median, and whiskers or markers indicating spread and potential outliers.
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.