Tuto 2

100%

✓ Published2🌍 Public

Last edited Jun 11, 2020

Created on May 28, 2020

Forked from Tuto

A stylized biological cell is drawn in SVG with D3 v5, showing a green microvillus, a red cytoplasmic region, a yellow nucleus, and a partially outlined cell body constructed from rectangles and an arc path. The code uses `d3.arc` to compute the curved top of the cell and `d3.select` to append shapes to an SVG canvas. Animated commented-out sections suggest past experiments with `transition.attr` for moving eyes and altering a mouth shape, though the visible result is a static diagram.

AI-generated description

My first step with d3.

MIT Licensed

Similar vizzes

Loading thumbnail…

Using SVG and D3

This example uses SVG and D3 to draw a simple, static face composed of a yellow circle, two eyes, two animated eyebrows, and a mouth arc. The right eyebrow moves up and down via chained transition calls, each lasting two seconds. The code selects the SVG element with `d3.select`, appends and positions shapes with `.attr`, and constructs the mouth using D3’s `arc` generator. The scene is centered by translating a group element, and the SVG background is set to red through the D3 style method.

JJokerhan88

73% match

Loading thumbnail…

demo of D3

This example shows a simple yellow face with two eyes and an open mouth, rendered as SVG shapes and animated with D3 transitions. The code uses D3 v7's `select` and `arc` functions to build the shape, with a circle for the head, two circles for eyes, and an arc path for the mouth. One eye animates vertically up and down using chained `transition()` calls with `attr` updates over 1000ms durations, while the other eye and mouth remain static. The SVG canvas is 800 by 400 pixels, and the drawing is centered via a `g` element transform.

Lliu981101

73% match

Loading thumbnail…

Trying stuff out

A smiling face rendered in SVG animates through a looping sequence of color, eye, and mouth changes. The yellow circle transitions to red, while the eyes shift side to side and the mouth alters its arc shape using D3 transitions. Built with D3 v5, the example uses `select`, `arc`, and transition chains to demonstrate basic animation and attribute interpolation on SVG shapes.

NNathanGBIM

72% match

Loading thumbnail…

Lets make a face with D3

This example draws a stylized face in SVG using D3 v5, compositing a yellow circle for the head, two eyes, animated eyebrows, and a mouth path. The eyebrows are rectangles that toggle between two vertical positions over two seconds using D3's `transition` API, creating a subtle blinking or winking effect. The mouth is created with `d3.arc` to generate a crescent-shaped path. All geometry is positioned relative to the center of a 960×500 canvas, with coordinates computed from width and height attributes. The rendering relies on SVG elements and animation via chained transitions.

Aaruba-haroon

72% match

Loading thumbnail…

lets make a face

A yellow circular face with black outlines is drawn using SVG shapes. Two eyes are represented as simple circles, while two rectangular eyebrows are animated with a timed vertical bounce using chained `.transition().duration()` calls, moving downward then returning. A mouth is formed using an `arc()` path with specified inner and outer radii and angled start/end points. The example demonstrates basic SVG composition and animation within a D3 v5 context, using the `select`, `append`, and `attr` APIs.

Sstefichim

72% match

Loading thumbnail…

Intro to D3

This example demonstrates how to build a simple face using basic SVG shapes in D3, with a lime circle for the head, black circles for eyes, and an arc-based mouth. The left eye remains static while the right eye animates horizontally through chained `transition().duration()` calls. All elements are created using D3 selections and the `arc` generator from the d3-shape API, rendered as SVG within a 960x500 viewport.

FFhouston17

72% match

Loading thumbnail…

D3 test

This example shows a simple yellow face built from SVG shapes, with eyes that blink through a repeating eyebrow animation and a smiling arc-shaped mouth. The code uses D3 v6 selections to append circles, rectangles, and a path to an SVG canvas, while the mouth is drawn with the `d3.arc` helper. A two-stage `transition` chain animates the eyebrows downward and back, demonstrating chained timing. The face is centered using an SVG transform, and static styling comes from the included stylesheet.

Vvmoharir

72% match

Loading thumbnail…

Lets make a face with D3.js

This example uses D3.js to draw a simple cartoon face with SVG shapes. A yellow circle forms the head, with two smaller circles for eyes and rectangles for eyebrows, all positioned relative to the center of the SVG canvas. A mouth is created using the `d3.arc` helper to generate a curved path. The eyebrows animate with `transition.duration`, moving down and back up over two seconds, demonstrating basic SVG rendering and animation capabilities in D3 v5.

TTikiWayne

72% match