Skip to main content
100%

transform, scale example

✓ Published0🌍 Public
335degrees
Last edited Jun 20, 2017
Created on Jun 20, 2017

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.

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>

mit Licensed

Similar vizzes