aarentoft-private

@aarentoft-private·3 public vizzes

Let's make some peeps

This visualization displays a grid of stylized, marshmallow-like "peep" characters, each rendered as an SVG shape composed of a head and body. The peeps are colored to represent a proportional breakdown of a dataset, with partial characters showing transitions between categories. Built with React and D3 v7, the code uses reusable React components and SVG paths to draw each figure, while a custom function calculates the distribution of colors across a 4x5 grid to visualize the data's proportions.

Aug 14, 2023

Loading thumbnail…

Let's make a viz

This example shows how a smiley face made of two eyes and a yellow circular head is constructed using inline SVG elements. The visualization renders a static graphic directly in the browser, with the head centered at (480, 250) and two dark eye circles placed symmetrically. The code uses raw SVG `<circle>` elements with explicit attributes for position, radius, fill, and stroke, alongside minimal CSS to hide page margins and overflow. No JavaScript libraries or data processing are involved; the visualization is purely declarative markup.

Jun 9, 2023

Loading thumbnail…

Some other title

This example depicts a stylized smiling face constructed with SVG primitives. A large yellow circle forms the head, with two black circles for eyes and curved lines for eyebrows. The face is rendered using React and D3, with the mouth created using the `d3.arc` API to generate an arc path. The visualization uses radial gradients defined in SVG defs to add subtle shading to the face and eyes, rather than using an external data source.

May 21, 2023