Mthandazo Ndhlovu

@Mthandazo42·3 public vizzes

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS styling can be combined to render simple geometric elements and paths. The visualization shows a horizontal line and a polyline path with rounded corners and caps, drawn on a 960x500 canvas using embedded SVG markup. The code uses plain SVG elements (`<line>`, `<path>`, and `<g>`) within an HTML structure, with CSS rules in `styles.css` controlling stroke color, width, and line joins. The rendering approach is purely static, showing basic vector graphics without any JavaScript libraries.

Nov 11, 2020

Loading thumbnail…

Forest Plot

This forest plot visualizes odds ratios with confidence intervals, displaying effect sizes from PCSK9 data across categorical groups including quartiles and a reference category. The React-based example uses D3 v6’s `scaleLinear`, `axisBottom`, and selection methods to render SVG elements. Each row shows a marker square positioned by the effect value, with horizontal lines spanning confidence bounds, and a reference line. The code computes the scale from data extents and supports SD-based intervals.

Nov 10, 2020

Loading thumbnail…

Lets make a face with with D3.JS

This example shows how to draw a simple smiley face using D3.js and SVG. It renders a yellow circular head with two black eyes and a curved mouth, all positioned within an SVG canvas that is 960 pixels wide and 500 pixels tall. The code uses D3 selections and the `arc` generator from `d3` to create the mouth shape, while other elements are drawn with basic SVG `circle` primitives. The example demonstrates coordinate manipulation with hardcoded offsets and demonstrates D3’s ability to generate complex paths with relative ease.

Nov 10, 2020