transform, scale example

100%

transform, scale example

✓ Published0🌍 Public

Last edited Jun 20, 2017

Created on Jun 20, 2017

This example demonstrates how SVG transform chaining applies scale and rotation to a text element relative to a fixed coordinate system. The code renders a single text label ("that's the way") positioned at the center of a canvas, with a green crosshair polyline marking the reference point. Using D3 v4, the script selects the body, appends an SVG container, and applies a transform attribute combining translate, scale, and rotate operations. The visual result shows the text enlarged and tilted around its anchor, while the polyline highlights the origin. The example relies on D3's selection and attribute methods, with SVG elements styled via CSS classes.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/35degrees/'>35degrees</a>'s block: <a href='http://bl.ocks.org/35degrees/696596b6cf8a7932884ad0ef72928f16'>text example</a>

forked from <a href='http://bl.ocks.org/35degrees/'>35degrees</a>'s block: <a href='http://bl.ocks.org/35degrees/8a2bcd867fccf7394c5c149e53b0d9e2'>transform, translate example</a>

forked from <a href='http://bl.ocks.org/35degrees/'>35degrees</a>'s block: <a href='http://bl.ocks.org/35degrees/e2fc6c90c9d38cc6ae19f6dda8759310'>transform, scale example</a>

forked from <a href='http://bl.ocks.org/35degrees/'>35degrees</a>'s block: <a href='http://bl.ocks.org/35degrees/87187327885c9f235217daa23e2f7a57'>transform, scale example</a>

mit Licensed

Similar vizzes

Loading thumbnail…

transform, scale example

This example demonstrates how D3’s `transform` attribute applies scaling and rotation to SVG text. The text "that's the way" is positioned at (200,200), scaled by a factor of 3, and rotated 20 degrees, all within an SVG canvas. Two reference polylines cross at the text’s origin to highlight the transformation’s effect. The code uses D3 v4 to append the SVG, set attributes like `transform`, and style elements via CSS classes. Hover interactions on `.dot` elements are defined but unused here. The rendering is purely SVG, with no external data source.

335degrees

92% match

Loading thumbnail…

Scale & translate

A short, looping D3.js v4 animation demonstrates the interplay of SVG transform operations. It starts with four circles, one red at (100,100) and three at the origin, and then sequentially applies `translate` and `scale` transforms via `transition()` calls. The example highlights how `scale()` scales the coordinate system, not just the element, showing that a subsequent `translate` must compensate for the scaling factor to maintain a desired position. The circles use SVG attributes and fill-opacity styling.

PPatrick Wojda

80% match

Loading thumbnail…

transform, scale example

This example demonstrates how the SVG `transform` attribute’s `scale` function modifies a circle’s size without altering its explicit radius. A single circle, positioned at (100, 100) with a radius of 50, is scaled by a factor of 2, effectively doubling its rendered dimensions while the original radius remains unchanged in the code. The visualization uses D3 v4 to append the circle and two reference polylines that mark the original center lines at x=100 and y=100. Styled with CSS classes for fill and stroke, the hover effect changes the circle’s radius and stroke width. The rendering relies on D3’s selection and attribute methods, outputting SVG.

335degrees

80% match

Loading thumbnail…

transform, translate example

This example demonstrates how the SVG `transform` attribute with `translate` repositions a graphical element relative to its original coordinates. It shows a single red ellipse with a green outline that is shifted by 50 pixels horizontally and 100 pixels vertically from its initial center at (200,200). The visualization also includes two blue reference lines—a vertical and a horizontal polyline—that intersect at the ellipse’s original, untransformed center, making the translation visually explicit. Built with D3 v4, the code selects the `body`, appends an SVG container, and uses D3’s selection methods like `append`, `attr`, and `style` to create the shapes and apply the transform.

335degrees

79% match

Loading thumbnail…

text example

This example demonstrates basic SVG text placement and shape rendering using D3 v4. It positions three text elements with different anchor alignments (start, middle, end) along a horizontal line, showing how the `dx` and `text-anchor` attributes affect text positioning. A polyline traces a jagged path across the canvas, and a circular dot with a lime-green stroke and Indian Red fill uses CSS hover effects to expand its radius and stroke width. The visualization uses D3's selection methods to append elements to an SVG container, with styling applied through inline attributes and CSS classes.

335degrees

78% match

Loading thumbnail…

text example

This example demonstrates how SVG text elements can be positioned and anchored in different ways within a D3 v4 visualization. It shows three text strings placed at the same x-coordinate but with distinct text-anchor values (start, middle, end) and dx offsets, illustrating how alignment affects placement relative to the anchor point. The code also includes a simple circle with a CSS class that applies a hover effect, increasing its radius and stroke width. Using D3's selection and append methods, the visualization creates an SVG canvas and populates it with static text and a single interactive dot.

335degrees

76% match

Loading thumbnail…

rotate text

Four labeled data points display in red text across an SVG canvas, each with a small circle marking its bounding-box center. After a two-second delay, the text labels rotate 90 degrees around those center points over two seconds. The example uses d3.v4 with a linear scale for x-axis positioning, `getBBox()` to compute label dimensions, and the `transition()` API to animate the rotation. Data is a hardcoded array of objects with `id`, `total`, and `text` properties.

PPatrick Wojda

74% match

Loading thumbnail…

textLength, spacingandglyphs example

This example demonstrates how SVG text can be stretched to a specified width using the `textLength` and `lengthAdjust` attributes, with `spacingAndGlyphs` adjusting both spacing and glyph shapes. A single line of text is rendered inside an SVG canvas and positioned via a `transform` that combines translation, scaling, and rotation. Two polylines cross at the origin to mark the reference point. The code uses D3 v4 to select the body, append the SVG, and add the text element, while the polylines are drawn with standard SVG attributes. The text is styled with a CSS class, though the hover effect on dots is not triggered here.

335degrees

73% match