Skip to main content
Log in
S

sakthi1001

@sakthi1001·3 public vizzes

Loading thumbnail…

svg practice

This example demonstrates a minimal SVG visualization: a single red text element reading “label” centered on a yellow background. The SVG canvas is 960 by 500 pixels, with the text positioned at coordinates (480, 250). The code uses D3.js v6 for SVG creation, though the actual rendering relies on native SVG elements and CSS styling. The stylesheet applies a bold, sans-serif font sized at 20vw and sets the body background to yellow. This serves as a basic practice for combining HTML, CSS, and SVG in a React-ready setup.

Dec 9, 2020
Loading thumbnail…

Smiley

This visualization displays a simple smiley face constructed entirely with SVG shapes. A large yellow circle forms the face, with two smaller black circles for eyes and a black arc for the mouth, all positioned against a cyan background. The code uses d3.select to target the SVG element and appends circles and a path for the mouth. The path is created using the d3.arc function, which defines the inner and outer radii and the start and end angles of the arc.

Dec 9, 2020
Loading thumbnail…

Smiley

This visualization displays a simple smiley face constructed entirely with SVG shapes. A large yellow circle forms the face, with two smaller black circles for eyes and a black arc for the mouth, all positioned against a cyan background. The code uses d3.select to target the SVG element and appends circles and a path for the mouth. The path is created using the d3.arc function, which defines the inner and outer radii and the start and end angles of the arc.

Nov 6, 2020