anandamayeemodak

@anandamayeemodak·4 public vizzes

Fork of Shapes with SVG and CSS

This example displays two SVG arc paths on a dark background, rendered with thick lime strokes. Using JavaScript’s `setAttribute` method, the code dynamically assigns a path description generated by the `describeArc` function, which calculates arc coordinates from center, radius, and start/end angles. The CSS styles the SVG canvas at 500 by 500 pixels and sets the stroke width and color, while the HTML document initially contains empty path elements that are populated by the script. The result is a minimal geometric composition with rounded line joins.

Feb 9, 2021

Loading thumbnail…

Fork of Fork of Shapes and Colors with SVG and CSS1

A yellow circle face with SVG ellipses for eyes and a red smile is drawn over a red heart-shaped path. The code uses D3 v6 selections to append and style the circle, eyes, pupils, smile, and two smaller red heart ellipses as cheek decorations. The SVG template path provides the background heart shape, while d3.arc is imported but not used, with all rendering handled directly through SVG attributes in an HTML file.

Feb 4, 2021

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS1

This example displays a static SVG canvas filled with a teal background, created by setting the `svg` element’s `style` property to `#41b7bf`. Using D3 v6, the code selects the `<svg>` node and applies the background color via `d3.select`. The page loads D3 from a CDN and includes a minimal CSS file that removes body margins and hides overflow, resulting in a clean, full-viewport visual with no additional shapes or interactive behavior.

Feb 4, 2021

Loading thumbnail…

Fork of D3 Starter 1

This example demonstrates a minimal setup for D3 version 6, rendering a single SVG circle with a radius of 40 pixels on a 960 by 500 canvas. The code uses the `d3.select` API to target the body element and displays the text "Hello D3 version 6" directly in the page. The visualization relies on the D3 library imported from the official CDN, with the SVG markup defined inline in the HTML and supplementary JavaScript in a separate `bundle.js` file.

Feb 4, 2021