Sirisha

100%

✓ Published1🌍 Public

Last edited Feb 28, 2024

Created on Feb 28, 2024

Forked from Face

This example draws a cheerful beach scene with a smiling sun, a palm tree, fish, and ocean waves using D3 v7. It demonstrates basic SVG shape generation with `select`, `append`, and attribute setters like `attr`, constructing elements from hard-coded coordinates. The visualization includes a sky, ocean, sand, and two fish with fins and bubbles, all built programmatically. It shows how to compose a static illustration without data binding, using simple geometric primitives and loops for repeated elements like palm leaves.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

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

74% match

Loading thumbnail…

Tagore Reddy

This example renders a static nature scene of a sky, ocean, sun, palm tree, sandy island, and a stylized fish. It demonstrates loading D3 via UNPKG in an HTML file and using the `select` function from the imported `d3` module to append SVG shapes. The visualization builds the image by directly manipulating SVG elements such as `rect`, `circle`, `ellipse`, and `polygon` objects, with a loop for the palm leaves.

Cchilukuritagore1427@gmail.com

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

74% match

Loading thumbnail…

jayasaireddy santimalla

This example shows a simple landscape scene rendered as an SVG graphic, including a sky, sun, mountain, river, trees, and birds. The visualization demonstrates basic D3.js v6 selection and shape-drawing methods, such as `select`, `append`, and `attr`, to construct geometric primitives like rectangles, circles, polygons, and paths. Data is hardcoded within the script rather than loaded from an external source. The code also defines reusable functions to draw repeated elements, such as trees and birds, illustrating a modular approach to building static vector illustrations with D3.

JJayaSaiReddySantimalla@my.unt.edu

74% match

Loading thumbnail…

SDV_assignt_fork

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.

BBlueT

72% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shape rendering within an HTML page, showing a green circle, a navy line, and an empty path element. The visualization uses the SVG specification directly in the markup rather than generating shapes programmatically. The accompanying JavaScript imports the `select` function from D3 version 7 and writes "Hello D3 version 7" into the document body, illustrating simple DOM manipulation. The code serves as an introductory template for combining static SVG graphics with the D3 library's selection API.

FFouzia A.

71% match

Loading thumbnail…

Fork of jayasaireddy santimalla

This example shows a landscape scene with a sky, sun, mountain, river, trees, and birds, all rendered as SVG shapes. The D3.js library v6 is loaded via UNPKG, and the code uses D3 methods like `select` to target the SVG element and `append` with `.attr` to add and style the shapes. It draws the sun as a circle, the mountain as a polygon, and the river as a path with a quadratic Bezier curve, while trees and birds are generated by custom functions.

JJayaSaiReddySantimalla@my.unt.edu

71% match

Loading thumbnail…

SVG Fundamentals :)

This example creates a playful, abstract composition using raw SVG shapes. It depicts a pink circle as a rising sun, a small white circle, a brown trunk, and four green branches forming a stylized tree, with a large orange circle layered in the background. The code uses the SVG API within an `index.html` file to define elements like `circle` and `line`. The page also includes a minimal `index.js` file that calls `d3.select` from the D3 library to write "Hello D3 version 7" to the page body, though the static SVG shapes do not rely on D3 for rendering.

KKatieHuc

71% match