Abishek Amstrong

@Abishek-Amstrong·2 public vizzes

Creating face with D3

This example draws a face using D3.js v5 and SVG, constructing the features from path elements with thick, rounded strokes. The code defines the face’s outlines—such as eyes and mouth—by specifying coordinates in a path’s `d` attribute, using commands like `M` (move to) and `L` (line to) with a fixed domain. The SVG canvas is 960 by 500 pixels, and the styling applies a steelblue stroke with line joins to create a smooth, simple illustration. It demonstrates basic SVG path manipulation and D3’s selection and attribute methods for static graphics.

Dec 6, 2019

Loading thumbnail…

Shapes with SVG and CSS

This example shows how SVG shapes can be styled using both presentation attributes and CSS. The visualization contains circles, rectangles, lines, and a path, all scaled and translated within a single `<svg>` element. The code uses explicit SVG geometry and CSS rules to control visual properties: the `.lines` class applies black strokes and a 10-pixel stroke width to line elements, while the nested `.lines path` rule overrides these with a steelblue stroke and round line joins. Shapes are positioned with `cx`, `cy`, `x`, and `y` attributes, with some groups using `transform` attributes for translation and color inheritance.

Dec 5, 2019