aeroplane

100%

✓ Published0🌍 Public

Last edited Feb 28, 2024

Created on Feb 28, 2024

The visualization depicts a simple airplane flying in a sky-blue scene with a yellow sun in the top-right corner. It shows the aircraft’s gray body, two triangular wings (one above and one below the fuselage), and a tail fin, all composed of basic shapes. The code uses D3.js v6 to append SVG elements—specifically `d3.select` to target the `svg` container, then `.append` for `rect`, `circle`, and `polygon` shapes. The rendering is entirely SVG-based, with no external data source; the scene is constructed programmatically from hardcoded coordinates and dimensions.

AI-generated description

MIT Licensed

Similar vizzes

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

69% match

Loading thumbnail…

Simple Flight Animation

A simple flight animation shows a white airplane moving along a curved route between Shanghai, Tokyo, and Hawaii over a green world map set against a steel-blue ocean. The map renders from world-continents.json using `topojson.feature` and `d3.geoMercator` with `d3.geoPath`. The plane follows a LineString with a 2-second `transition.attrTween` that calculates positions via `getPointAtLength` along the SVG path. Black circles mark each city’s projected coordinates.

GGerardoFurtado

68% match

Loading thumbnail…

FAAACE

A simple yellow smiling face is drawn in SVG with D3.js v5, animated by raising the eyebrows independently over two seconds. The face consists of a yellow circle, two black eyes, a mouth arc, and two rectangular eyebrows positioned with rotations. The code builds the face using d3 selections, then applies transitions with `.transition().duration()` to animate the eyebrow positions, demonstrating basic SVG shape creation and sequential animation with D3.

Vvladvaculin

67% match

Loading thumbnail…

Fly

Three birds rendered as simplified SVG shapes—a grey circle for the body and two black paths for wings—flap in place within an 800-by-600 viewport. D3 transitions with `transition.attrTween` and `d3.interpolateString` alternate wing rotation between -45 and 45 degrees in a continuous loop, triggered recursively via the `on('end')` listener. The animation runs directly from a plain HTML file using D3 v6 and raw JavaScript, with no external data source; the birds are positioned at fixed coordinates (200,200), (400,300), and (400,150) and flap independently.

AAsrar Al Qassem

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

67% match

Loading thumbnail…

Progress Map ES6

This interactive visualization displays the assembly progress of an aircraft, where each component is colored on a red-yellow-green scale based on its percentage of completion. Users can manually adjust each part’s progress through sliders or text inputs, or randomize all values, while a legend maps colors to percentages. Built with D3 v5, it renders the aircraft as SVG paths from a structured data file, includes zoom and pan via `d3.zoom`, and animates updates with `transition().duration()`. The color scale uses `d3.interpolateRdYlGn`.

Mmaxime-plantard

66% match

Loading thumbnail…

Fork of Fork of Fork of Circles with D3 - FLYING

A small D3.js scene animates a stylized butterfly against a light blue background. The SVG graphic consists of an orange body circle, two yellow elliptical wings, and antennae-like details. Using D3 transitions with a sine-in-out easing, the wings rotate back and forth in a looping flapping motion, triggered by the `transition.attrTween` callback chain. The code selects the HTML container and appends an SVG element with fixed dimensions, managing the animation recursively through the `.on("end")` event.

66264kusuma@gmail.com

65% match

Loading thumbnail…

Sailing

A serene sea scene rendered with SVG and animated using D3.js v6. The visualization depicts a sailboat with a brown hull, green triangular sail, and mast, floating on a deep blue ocean with white wave circles oscillating vertically via chained transitions with sinusoidal easing. Clouds drift horizontally across the sky using linear transitions, while simple black bird shapes flap through the air. The code constructs the scene procedurally, generating wave data with `d3.range` and `Math.sin`, and animates all elements using D3 transitions with recursive callbacks for infinite looping.

AAsrar Al Qassem

64% match