GuruBigData

@GuruBigData·2 public vizzes

Shapes with SVG and CSS

This example displays basic SVG shapes—circles, rectangles, lines, and a path—arranged with CSS styling and SVG transforms. It shows how fill colors can be applied per shape or inherited by groups, and how stroke properties define the appearance of line elements. The code uses raw SVG markup with a `<g>` element for grouping and scaling/translating, while the external stylesheet applies stroke width and color to the `.lines` class and its path child. The rendering approach is purely SVG, with no JavaScript libraries involved.

Dec 7, 2019

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing an animated smiley face from basic SVG shapes. The face comprises a yellow circle, two eyes, and a mouth drawn as an arc path, with eyebrows that move up and down using chained `transition().duration()` calls. The code builds the face by appending circles, rectangles, and a path to the SVG, using `d3.select` and `d3.arc` from D3 v5.

Dec 6, 2019