Let's make some peeps

100%

Let's make some peeps

✓ Published0🌍 Public

Last edited Aug 14, 2023

Created on Jun 9, 2023

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

People

This visualization uses D3.js v6 to render simple stick figures representing people in an SVG container. Each person is constructed from basic geometric shapes: a peachpuff circle for the head, a skyblue rectangle for the body, and lines for arms and legs. The code binds an array of x,y coordinates via `selectAll().data().enter()` and appends a group per person, translating each group to its position. It demonstrates fundamental D3 data joins and SVG shape creation with hardcoded sample data rather than an external source.

AAsrar Al Qassem

75% match

Loading thumbnail…

Let's Make a Face Part V

A grid of eighteen smiley faces, each with a yellow circular background, black outline, two eyes, and a curved mouth, is rendered as a single React application. Each face uses randomized eye radii, making them subtly distinct. The visualization is built with React components and D3’s `arc` API for the mouth shape, all rendered as SVG within a fixed 150 by 150 pixel viewport per face.

PPakapone Supavarn

74% match

Loading thumbnail…

Data viz

A grid of 18 randomly generated cartoon faces fills the SVG canvas, each face composed of a yellow circle, two eyes, and a d3 arc-based mouth. The React components `Face`, `BackgroundCircle`, `EyeCircles`, `Mouth`, and `FaceContainer` render each face with randomized stroke widths, eye offsets, eye radii, and mouth dimensions. The visualization uses d3.v7’s `arc` generator to draw the mouth path and the `range` function to create the face array. Each render produces a unique arrangement of facial features.

NNenad Jovanovic

72% match

Loading thumbnail…

Hello HTML

A grid of thirty smiling faces, each rendered as a yellow circle with eyes and an arc-shaped mouth, demonstrates composable React components. The faces are generated from an array using `d3.range` and given randomized properties like stroke width, eye offset, and mouth radius. The visualization uses React components to structure SVG elements, with the mouth path calculated using `d3.arc`. Each face is independently styled, creating a playful pattern while highlighting how React and D3 can work together for declarative SVG rendering.

MMatias Conde

72% match

Loading thumbnail…

Fork of Colorful Faces

A grid of colorful stylized faces is rendered using React, where each face is composed of SVG shapes defined by reusable components for the background circle, eyes, and mouth. The faces are generated by mapping over a range of 20 values, and each iteration uses random parameters for eye offset, eye radius, mouth radius, and mouth width, while selecting a color from a list of five. The mouth is drawn using a D3 arc generator (`d3.arc`), and all elements are positioned within an SVG container that translates to a central point. The visualization shows the power of combining React components with D3 for declarative, data-driven SVG generation.

HHalcyonWjr

72% match

Loading thumbnail…

Data Visualization

This visualization presents a custom SVG drawing of two stylized human figures, composed of black outlined paths, white lines, and colorful ellipses representing facial features and body shapes. The figures are set against a light gray background, with a design that uses a darken blend mode and background blur filters on the paths. The SVG is generated within an HTML page that uses D3.js to load a Netflix dataset from a GitHub gist, displaying the data's size in kilobytes, row count, and column count. The page also includes a separate decorative SVG with colorful shapes and lines.

Hharika-1929

72% match

Loading thumbnail…

Let's Make a Face

This example displays a grid of 80 yellow smiley faces, each rendered as an SVG using React components. The faces are constructed from separate reusable parts—a background circle, two eyes, and a mouth created with D3’s `arc` generator for the curved smile. Each face uses randomized eye radius values to introduce slight variation, while all other dimensions like eye offset and mouth width remain fixed. The code combines React’s component composition with D3 v7’s shape utilities, embedding the SVG elements through a `FaceContainer` that centers the drawing within the viewport.

AAndrea Picciau

72% match

Loading thumbnail…

PRT6_Face_Part 6

A grid of small, yellow cartoon faces, each with randomized eye placement, eye size, and mouth dimensions, fills the viewport. The faces are rendered as SVG shapes composed of a `BackgroundCircle`, two `Eyes` circles, and a `Mouth` path. Built with React and D3 v5, the app generates the random parameters per face, while the `d3.arc` API constructs the mouth’s arc path.

Ggujjapooja7@gmail.com

72% match