Skip to main content
SimilarExport ZIP
100%

Fork of Let's make a face with D3.js!

✓ Published0🌍 Public
UuwFengyuan
Last edited Jan 31, 2023
Created on Jan 31, 2023

This example shows a static SVG face created with D3.js v7. The code selects an SVG element using `d3.select` and reads its width and height attributes to establish the canvas dimensions. It defines a `makeFruit` function that returns objects with a type property, and creates an array containing a single apple fruit object. The sketch appears to be a starting point that sets up a face-like composition framework, though no actual facial features are drawn in the visible code. The HTML file links the D3 library and applies a monospace font to the page.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js

A playful SVG face built from five apples, each represented as a circle with fixed facial features, demonstrates basic D3.js shape creation and data binding. The code uses `d3.select` and `d3.range` to generate an array of fruit objects, then renders them inside a static 960×500 SVG canvas. The face’s layout is hardcoded through SVG attributes rather than a force simulation or scales, and the styling relies on an external Ubuntu font and dark background. This example highlights how D3 v5 can manage simple data-to-element mappings without interactive transitions.

GGeolffrey S Mena
89% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

This example demonstrates how to construct an animated face using SVG elements and D3.js v5. The visualization builds a face from basic geometric shapes, applying custom styling through CSS classes that define stroke colors and line properties. The code initializes an SVG canvas with fixed dimensions and relies on D3’s selection and data-binding methods to render the face components. The design emphasizes round line joins and caps for a smooth, illustrated appearance, with a compact layout that avoids page scrolling.

CChromosin13
87% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

This example creates a grey-background SVG face using D3.js v5, with the `select` API targeting the page’s `<svg>` element. It renders a simple face composition using SVG paths, with purple-styled lines defined in CSS classes and rounded stroke joins and caps applied via the `.lines path` rule. The code imports `select` from the D3 library, constructs the drawing in an `index.js` file, and styles everything through an external stylesheet. The result is a static, vector-based face illustration built entirely with SVG elements and D3’s selection methods, without interactivity or data binding.

CChromosin13
87% match
Loading thumbnail…

Fork of Lets make a face with D3.js!

This example draws a simple face using D3.js, with a large yellow circle for the head, two black eyes, and an orange mouth. The rendering renders directly to an SVG canvas, with the face elements positioned relative to the center of the 960 by 500 viewport. The code uses `d3.select` and `d3.arc` from the D3 v6 library, along with `d3.line` to define the mouth’s path, applying fills and strokes to the shapes.

Ppangaotata
87% match
Loading thumbnail…

Fork of Lets make a face with D3.js!

This example shows a simple yellow face built entirely with D3.js v6 SVG primitives. The code uses `d3.select` to target the SVG element, then appends circles for the eyes and a face outline, with a mouth drawn using the `d3.arc()` path generator. Coordinates are centered via a translation transform, and eye spacing and offsets are set as constants. The face is static, with no interaction or data binding, rendered directly in the browser through the bundled index.js file.

Nnajeebgdds
86% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

This example draws a stylized, smiling face in an SVG canvas using D3.js v7. It centers a yellow circle for the head, adds two dark eyes and rectangular eyebrows positioned above them, and finishes with a curved path for the mouth created via the `arc` function. The code uses `d3.select` to target the SVG element, applies geometric transformations to center the face, and defines all visual properties like radius, spacing, and offsets as numeric constants. All shapes are rendered as SVG primitives—circles, rectangles, and a path—within a single group element.

Ffkukcha
86% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

A fork of "Let's make a face with D3.js!" demonstrates DOM manipulation by rendering five maroon circles as apples across an SVG canvas. The example shows how d3-select appends circles with fixed radii and positions using iterator indices. It uses D3 v5's `select` and `range` APIs to generate data, then applies `join` to bind circle elements, and finally removes exiting circles with `.exit().remove()`. The code illustrates basic data joins and enter/exit updates, though the initial face animation is not present in this version.

SSam Creasey
86% match
Loading thumbnail…

Fork of Let's make a face with D3.js

A D3.js face is drawn with SVG shapes, featuring black circular eyes, a red mouth created with an arc generator, and eyebrows rendered as rectangles. The animated eyebrows shift downward and return via chained `transition()...duration()` calls, demonstrating movement within the SVG canvas. Built with D3 v6 selections, the code uses `d3.arc()` for the mouth path and manipulates SVG attributes like `cx`, `r`, and `transform` to position elements relative to the viewport center.

AAvonlea Fisher
86% match