rotate text

100%

✓ Published0🌍 Public

Last edited Dec 21, 2018

Created on Dec 21, 2018

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

A single text label orbits a circular guide path in a continuous loop. A rotating line and the label itself move together, with the text flipping its anchor point and read direction at the halfway mark. The example uses D3 v4's `select` and `attr` methods within a recurring `setInterval` timer, updating an SVG group's `transform` to rotate around the circle’s center. The static SVG contains the circle, line, and text elements, and the animation demonstrates manual rotation and text-orientation handling without any data source.

11Cr18Ni9

76% 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

74% match

Loading thumbnail…

transform, scale example

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.

335degrees

74% match

Loading thumbnail…

Bar chart (rotating + highlighting)

A bar chart presents four categories—pears, apples, bread, and oranges—with values scaled by `d3.scaleLinear`. After three seconds, the entire SVG rotates 90 degrees via a `transition`, while each text label independently counter-rotates to stay upright. Then the bread bar and its label highlight orange and enlarge through chained style transitions. This D3 v4 example uses SVG elements (`rect`, `text`) with data bound by `id`, and demonstrates `transition.duration` and `attr`/`style` tweening for animation.

PPatrick Wojda

74% match

Loading thumbnail…

Alignment of text labels - 2

This example demonstrates how text labels and axis ticks can smoothly transition to new positions when the underlying scale is rescaled. The visualization shows a set of categories along a point scale, where random data values are generated and the labels animate to their new y-positions while respecting constraints: labels do not overlap vertically, remain within the frame, and shift left or right depending on available space. The code uses D3 v4 with SVG and transitions via `d3.transition()`, updating the axis with `d3.axisLeft` and repositioning label groups using `.attr("transform", ...)`. A toggle button triggers the transition between original and rescaled states.

EEE2dev

74% 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

74% match

Loading thumbnail…

block with text

This example demonstrates two labeled rectangles, one red and one blue, each with a corresponding text caption. It shows how static shapes and text can be placed side-by-side in an SVG canvas using D3.js v4. The code selects the body element, appends an SVG container, and uses `append('rect')` to draw each rectangle with explicit `x`, `y`, `width`, and `height` attributes, while `append('text')` adds monospace labels. The positions are calculated manually with variables, and styling is applied via `.style('fill', ...)`. No data loading or dynamic scales are involved, relying solely on hardcoded values.

IIgathi

72% match

Loading thumbnail…

SVG text experiment - Choreography of elements

A circular arrangement of text cards, each containing a category label and a body of related words, rotates continuously around a central statement. The central text repeatedly fades out and rewrites itself with a new sentence composed of words from the taxonomy dataset. D3.js (v5) constructs the SVG elements and performs the text transitions, while the GreenSock (GSAP) library animates the cards' rotation and the progress of text along SVG paths.

LLaurens

72% match