Presentational attribute

As explained in D3.js in Action, Third Edition

A presentational attribute is an SVG attribute that specifies visual properties such as an element's size, position, color, or opacity.

Presentational attributes are SVG element attributes that control how a shape looks and where it appears. In a visualization, changing attributes such as coordinates, dimensions, fill, stroke, and stroke width turns SVG elements into visible marks. section 1.2.2

Use attributes to control common SVG properties:

• Position and size: a line uses x1, y1, x2, and y2; rectangles use x, y, width, and height; circles use cx, cy, and r. section 1.2.2
• Appearance: fill sets an interior color, while stroke and stroke-width draw and size an outline. section 1.2.2
• Shape and alignment: rx and ry round rectangle corners, and text-anchor aligns text from its start, middle, or end. section 1.2.2

Style a rectangle

This rectangle is positioned at (260, 25), sized to 120 by 60 units, and filled blue: <rect x="260" y="25" width="120" height="60" fill="#6ba5d7" /> section 1.2.2

Figure 1.8 Gallery of fundamental SVG shapes that we’ll build in this section

Compare the fundamental SVG shapes to see how each uses a different set of presentational attributes. section 1.2.2

How D3.js in Action, Third Edition covers it

How deep it goes

Explains attributes through positioned and styled lines, rectangles, circles, ellipses, paths, and text.

Examples

Demonstrates an SVG shape gallery with lines, rectangles, circles, ellipses, paths, text, and grouped labels.

What it assumes

Teaches SVG from zero while encouraging hands-on coding before later D3 work.

What you can do after

Builds basic SVG graphics by applying positioning, sizing, fill, stroke, and text-alignment attributes.

How it connects

Connects SVG attributes with D3, DOM manipulation, coordinate systems, viewBox, groups, and transforms.

liveBookmanning.com

Read D3.js in Action, Third Edition on liveBook Get the book at manning.com

Related concepts

• fill aestheticincludes · A fill aesthetic specifies the interior paint, color, or other visual treatment applied to a graphical shape or element.
• style attributealternative to · The style attribute is an HTML or SVG attribute whose value contains CSS declarations applied directly to that element.

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.