People

100%

✓ Published3🌍 Public

Last edited Feb 25, 2024

Created on Feb 25, 2024

Forked from Fly

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.

AI-generated description

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

Similar vizzes

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

77% match

Loading thumbnail…

People Dancing

Three stylized people, each composed of simple SVG shapes—a head, body, eyes, smiling mouth, arms, and legs—stand in a row and animate in a coordinated dance. The D3.js v6 code binds an array of three data objects to group elements and uses `selection.append` to draw each body part. Legs swing back and forth while arms wave repeatedly through chained `transition` calls with rotation transforms, creating a looping, cheerful motion.

AAsrar Al Qassem

77% match

Loading thumbnail…

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.

Aaarentoft-private

75% match

Loading thumbnail…

let's make a face with D3.js

This example builds a playful human face using D3.js v5, rendered as an SVG composed of circles, ellipses, and curved paths. It demonstrates how to assemble facial features—eyes, pupils, a mouth, and eyebrows—through declarative SVG shape elements positioned with computed coordinates. The code uses D3 selections and scale functions to map data values to visual attributes like position and size, with a static, interaction-free layout. The result shows how raw geometric primitives can be orchestrated into a recognizable character using only standard D3 utilities and inline styling.

CClement Yan

74% match

Loading thumbnail…

Data Visualization

This example renders a smiling face in SVG using React and D3.js, with geometric shapes for the head, eyes, irises, nose, and mouth. The code constructs the mouth and nose as arcs via `d3.arc`, while the remaining features are simple circles. All elements are positioned relative to the center of a 960×500 viewport using SVG’s `transform` attribute, and React drives the component structure. The result is a static, stylized character built entirely from vector primitives and filled with solid colors.

FFutileGameDev

73% match

Loading thumbnail…

Data Visualization

This example generates a grid of identical cartoon faces using React and D3 v7, rendered as SVG. Each face combines a yellow circle, two eyes, and an arch-shaped mouth built with D3’s `arc` generator. The `FaceContainer` wraps the SVG and applies a translation to center the components. The code uses React’s `createElement` pattern via JSX, with all faces produced by mapping over a `range(6*3)` array from D3 to create 18 repeated copies.

Belay Birhanu Gibina

73% match

Loading thumbnail…

Untitled

This example uses D3.js to draw a human face from scratch, constructing each facial feature with a series of SVG paths generated from data arrays. The visualization builds the face procedurally, showing how individual shapes—eyes, nose, mouth, and hair—combine into a recognizable portrait. The code relies on D3’s selection and data-join methods to append and style these paths, with coordinates defined directly in the script. The result is a static, data-driven illustration that demonstrates how fine-grained geometry can be controlled through D3’s scalable vector graphics pipeline.

JJamesHop31

73% match

Loading thumbnail…

Part III Assignment

This visualization displays a stylized cartoon face built from basic geometric shapes. It shows a yellow circular head with ears, eyes, brows, a nose, and a mouth rendered as SVG elements. The code uses React to structure the component and d3’s `arc` generator to create the curved mouth and nose paths. A radial gradient fills the inner ear details, while explicit ellipse, circle, rect, and line elements define the remaining facial features, all centered via a `g` transform.

PPakapone Supavarn

73% match