Skip to main content

D3 Ellipses in SVG

✓ Published0🌍 Public
Aarcox80
Last edited Sep 23, 2017
Created on Sep 23, 2017

This example shows a diagonal series of four blue ellipses positioned incrementally across an SVG canvas. The code selects the body element, appends an SVG container with fixed width and height, and binds an array of ellipse objects containing center coordinates and radii. Using D3 v4’s data join, it creates each ellipse via `selectAll("ellipse").data().enter().append("ellipse")`, then sets the `cx`, `cy`, `rx`, and `ry` attributes from the bound data. A CSS filter targets the first child ellipse to apply a blue fill.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/jbelmont/'>jbelmont</a>'s block: <a href='http://bl.ocks.org/jbelmont/d3461d2bc771d8e2d7bac18d192b6f4a'>D3 Ellipses in SVG</a>

mit Licensed