Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
Mms744311@gmail.com
Last edited Feb 26, 2024
Created on Feb 26, 2024

This example demonstrates fundamental DOM manipulation with D3.js by rendering a static pond scene composed of SVG primitives. The visualization depicts a house, tree, ducks, lily pads, clouds, a sun, and water, each created using D3’s `select` and `append` methods to construct and style shapes like rectangles, circles, ellipses, and polygons. Positioning and visual properties such as fill colors are set via chained `.attr()` calls, while an external CSS file defines class-based styling. The scene is drawn entirely through SVG elements, with no interactivity or animation, showcasing how D3’s core API can be used for basic graphics composition.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

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

A static SVG scene depicts a pond with ducks, lily pads, a sun, clouds, a tree, and a house with a gate. Built using D3.js v5, the code demonstrates fundamental DOM manipulation by chaining `select` and `append` calls to construct the entire illustration. Each element, from the light-blue water rectangle to the yellow sun circle, is positioned with explicit `attr` values for coordinates and dimensions. The example is based entirely on hand-coded data and does not involve data joins, scales, or interactive behavior, serving as a simple introduction to creating SVG graphics programmatically.

Yynagurvali786@gmail.com
94% match
Loading thumbnail…

Fork of Create a face with d3.js!

This example builds a colorful landscape scene with a house, sun, clouds, palm trees, and fence rendered as SVG shapes using D3 v7. The code demonstrates basic selection and append operations via `d3.select`, along with data binding through `d3.line()` and `curveBasisClosed` to draw the cloud path. Each element, from the house's rects and polygons to the tree trunks and fronds represented as lines, is positioned with explicit coordinates and filled with named colors. The visualization shows how D3 can be used for static, non-data-driven illustrations.

Hharichandanamone21@gmail.com
86% match
Loading thumbnail…

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

A fork of the “Make a face with D3.js” tutorial, this example draws a cartoon duck from basic SVG shapes—ellipses, a polygon, circles, and lines—positioned around a 960×500 canvas. It demonstrates fundamental DOM manipulation with D3 v5, using `select` to target the SVG and chained `.append` and `.attr` calls to build the body, head, beak, eyes, wings, and legs. The code relies on explicit pixel coordinates and fixed dimensions rather than data binding, rendering a static, yellow duck with orange beak, wings, and thicker legs.

Aarchanagoli@my.unt.edu
86% 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
85% match
Loading thumbnail…

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

A purely CSS-driven digital scene constructs a static landscape with a sky, sun, grass, tree, flower, cat, and bird arranged through absolute positioning and styled divs. The page uses no JavaScript or data binding; instead, the HTML structure and stylesheet define each element’s shape, color, and placement, with radial gradients for the sun and rotated squares for the bird. The rendering approach is entirely declarative, relying on CSS layout properties rather than SVG, canvas, or D3.js despite the title. The example demonstrates how layered, styled HTML elements can simulate a simple animated-free environment.

Rreddysushma994@gmail.com
84% match
Loading thumbnail…

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

This example uses D3.js to compose a simple SVG scene with circles, rectangles, and paths, mixing raw shapes with grouped elements. It demonstrates styling via CSS classes, including black strokes on lines and paths with rounded joins. The code appends a circle to an existing SVG using D3’s `select` and `append` methods, while the HTML markup defines the initial geometry and coordinates. Rendering relies on the SVG DOM, with a minimal React setup noted in the README.

PPuja229
84% 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
84% match
Loading thumbnail…

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

A forked D3.js example builds a static penguin illustration using SVG shapes, including ellipses, circles, polygons, and paths, all positioned relative to a central group. The code demonstrates fundamental DOM manipulation with d3-selection, using `select` and `append` to construct the body, head, eyes, beak, legs, and wings from scratch. A gray body and orange beak and legs define the character, rendered entirely through hardcoded attributes rather than data binding or interaction. No animation or eyebrow movement is present, despite the original title referencing a moving face.

Aakshitha.rapala@gmail.com
84% match