Skip to main content
SimilarExport ZIP
100%

SDV_assignt_fork

✓ Published0🌍 Public
BBlueT
Last edited Mar 21, 2024
Created on Feb 26, 2024

This example shows a static nighttime seascape with a moon, clouds, an island with a tree, a star, and a fish, all composed from basic geometric shapes. Using D3.js v5’s `select` and SVG element constructors like `append` and `attr`, it draws rectangles, circles, ellipses, lines, and paths directly onto an SVG canvas. The scene is built entirely through DOM manipulation with hardcoded coordinates and fill colors, with no data-driven layout or animation.

AI-generated description

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

forked as a learnig project UNT

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
78% 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
77% match
Loading thumbnail…

Fork of D3 Starter

A minimal demonstration of SVG primitives builds a stylized landscape with an animated sky gradient and a drifting sun. Two overlapping paths create layered hills in the foreground, while a radial gradient for the sky and linear gradients for the land transition between aliceblue, steelblue, and midnightblue. The D3 v7 `select` function appends a static text label, and inline SVG `<animate>` elements drive the color and position changes over a 10-second loop, showing how raw SVG and D3 can be combined for simple animated visuals.

DDouChinn
77% match
Loading thumbnail…

Scene with d3.js!

This example showcases a simple animated scene built with D3.js, depicting a sunny landscape with a tree, a dog, and two butterflies. It demonstrates how D3’s selection and attribute methods—such as `select`, `append`, and `.attr`—construct static SVG shapes like rectangles, circles, and ellipses to form each element. The visualization renders entirely in SVG, with a sky-blue background and clearly defined shapes for each object. While no data is involved, the code highlights D3’s ability to manipulate the DOM directly, using hardcoded coordinates and dimensions to compose a cohesive scene.

Ppriyankajammigumpula@my.unt.edu
76% match
Loading thumbnail…

nature scene

This example shows a simple nature scene built with D3.js, depicting a house, trees, clouds, sun, and a fence in an SVG canvas. The code uses D3’s selection and append methods to create each shape, including rectangles for the house and door, polygons for the roof, lines for palm tree trunks and fronds, and a path with d3.curveBasisClosed for the cloud silhouette. A circle represents the sun, while a long rectangle forms the fence. The visualization renders entirely with SVG elements, using hardcoded coordinates and colors to assemble the static scene.

Ssaisathyapriya097@gmail.com
76% match
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
76% match
Loading thumbnail…

Some fun with SVG

A static SVG scene demonstrates primitive shapes without data binding. A blue outlined circle, a thick blue diagonal line, and a navy rectangle are positioned explicitly on a 1024x768 canvas. The page also uses the D3 v7 `select` API to insert the text "Hello D3@7" into the body. This example highlights hand-coded SVG markup rather than programmatic generation, with all geometry defined in the HTML file.

GGiuseppe
75% match
Loading thumbnail…

Fork of Create a face with d3.js!

This example shows an animated sunrise scene built with D3.js, transitioning the sky from light blue to orange while a sun rises over mountains. It demonstrates D3’s ability to manipulate SVG elements, using `d3.select` to append and update shapes like rectangles, circles, lines, and polygons. The animation uses `requestAnimationFrame` to move the sun and interpolate colors via `d3.interpolate`, creating a smooth gradient effect. The rendering approach is purely SVG-based, with no external data source.

Ppeddubalaji@gmail.com
75% match