nilimi

@nilimi·3 public vizzes

Let's Make a Face

This example displays a grid of eighteen cartoon faces, each with randomized facial features. The faces are built using React components that render SVG elements, with the mouth shape generated by a D3 arc. The `FaceContainer` establishes a group with a translated coordinate system, allowing facial components like the background circle, eyes, and mouth to be positioned relative to a center point. The data is procedurally generated using D3's `range` function and `Math.random()` calls.

Jul 5, 2020

Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of country populations using SVG rendering. The visualization maps population values to bar widths and country names to vertical bands, with axes labeled via `d3.axisLeft` and `d3.axisBottom`. The code loads data from a CSV file using `d3.csv`, scales the population figures, and appends rectangular elements with `d3.selectAll` and `.enter()`. The chart uses `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis, with the bars styled in steel blue via CSS.

Jan 15, 2020

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates a range of basic SVG shapes—circles, rectangles, lines, and paths—styled through both inline attributes and external CSS. It shows how fill colors, strokes, stroke widths, and line joins can be applied, with groups using transformations for scaling and translation. The rendering relies on raw SVG markup within an HTML page, combined with a linked stylesheet that defines classes like `.lines` for grouped styling. No JavaScript libraries are used.

Jan 5, 2020