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

100%

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

✓ Published1🌍 Public

Last edited Feb 26, 2024

Created on Feb 26, 2024

Forked from Let's make a face with D3.js!

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.

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!

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.

Mms744311@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

84% match

Loading thumbnail…

Fork of Fork of Create a face with d3.js!

This example uses D3.js version 7 to draw a simple still-life scene composed of a house, mountains, a bike, and a television. The code imports `select` and `arc` from the d3 module, though only `select` is used to append SVG shapes like rectangles, polygons, and circles. Each object is placed inside its own `<g>` group element with a translation transform, and shapes are styled with static fill and stroke attributes. The visualization demonstrates basic SVG rendering with D3 without any interactive or data-driven behavior.

Rreddysushma994@gmail.com

84% match

Loading thumbnail…

Fork of creaing a flower with d3.js

This example creates a illustrated house scene using D3.js, showing a brown house with a roof, door, windows, sun, clouds, fence, and palm trees rendered as SVG shapes. The code uses D3 v7 selection methods and attributes to build each element individually, including a d3.line path with curveBasisClosed for cloud shapes and appended SVG primitives like rect, polygon, circle, and line elements. It demonstrates importing D3 from UNPKG and styling the scene with a separate CSS file.

Mmogantirudhrani@gmail.com

82% 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

82% 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

82% 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

81% match