Skip to main content
SimilarExport ZIP
100%

First Assignment with Vue

✓ Published1🌍 Public
SSerhiy Artymovych
Last edited Feb 10, 2020
Created on Feb 6, 2020
Forked from HTML Starter

A cartoon face built from SVG shapes uses Vue.js to bind eye-lash positions and dynamically generate mouth arcs with D3. The visualization renders a static portrait with hair, eyes, eyebrows, nose, and cheeks, while the mouth incorporates D3's `arc` generator to create curved lips. Vue's `v-for` directive iterates over eyelash coordinate arrays, and inline template literals construct path strings. The example demonstrates hybrid SVG rendering where D3 generates geometry and Vue manages DOM updates.

AI-generated description

Test Editor with Vue

MIT Licensed

Similar vizzes

Loading thumbnail…

First Assignment with Vue

A first attempt at combining Vue 3 with D3 to draw a stylized face. The SVG composition uses D3’s `arc()` generator within a Vue method to construct the lips, while Vue’s `v-for` directive iterates over arrays to place eyelashes. The illustration is rendered entirely in SVG, with hard-coded coordinates for facial features and gradients for cheeks.

Tt829702
93% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses Vue.js and D3.js v5 to draw a smiling face composed of basic SVG shapes. The face consists of a dark orange circle for the head, black circles for the eyes, and a mouth created with the `d3.arc` path generator. SVG groups with `translate` transformations position the eyes relative to the face center, while the arc’s `innerRadius` and `outerRadius` define the smile’s thickness. The code demonstrates integrating D3 selections with Vue’s reactive data model to manage dimensions and shape attributes.

Kkchat001
80% match
Loading thumbnail…

first viz

This example renders a simple face on an SVG canvas using D3.js. A large circle forms the head, and an arc path creates the mouth, which animates downward in two sequential transitions, each lasting two seconds. The visualization uses D3’s `arc` generator, `select`, `append`, and `transition` methods, applying transforms to shift the mouth’s position over time. The SVG background is set to a muted olive color via D3’s style method, with no external data source.

GGuitong Li
77% match
Loading thumbnail…

Let's make a face with D3

A face made of SVG shapes—a circle head, elliptical eyes, rectangular eyebrows, and an arc-based mouth—is drawn in the center of a 960×500 viewport using D3 v5 selections and the `arc` generator. The face is statically rendered with fixed pixel positions and colors, while the eyebrows animate upward and back down over four seconds via chained `transition().duration(2000)` calls, demonstrating D3's built-in animation for SVG attribute interpolation.

Aannadehtiarova
76% match
Loading thumbnail…

Let's make a face with D3.js!

This example creates a cartoon face using D3.js v5, rendering circles for the head, eyes, and eyebrows, and an SVG path for the mouth. It demonstrates basic SVG shape generation with `d3.select` and the `d3.arc` API for the mouth’s curved path. The face is positioned using a group transform, with fixed pixel offsets for eye spacing and radius. The visualization shows how to compose multiple SVG elements programmatically with D3, using static attributes rather than data binding.

EE.D.M.
76% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js to construct a cartoon face from basic SVG shapes—circles for eyes, rectangles for eyebrows, and a path for the mouth. The face is centered within a 960x500 SVG canvas, and the code animates the eyebrows by chaining `transition()` calls over two seconds to move them up and down. It imports `select` and `arc` from D3, using the `arc` API to generate the mouth's inner and outer radius path. The result is a simple, playful demonstration of D3’s shape creation and animation capabilities.

Lloisasy
76% match
Loading thumbnail…

Let's make a face with D3.js!

The example constructs a cartoon face from simple geometric shapes using D3.js v5 and SVG rendering. It employs `d3.select` to append circles and paths directly to an SVG container, with `d3.scaleOrdinal` mapping color values for facial features. The face is composed entirely of static elements—no animation or interaction—and the code relies on basic D3 utilities like `d3.arc` for the mouth shape. Styling is handled via an external stylesheet that resets margins and hides overflow. The visual result demonstrates how D3's declarative DOM manipulation can build complex illustrations from primitive SVG components.

Jjesramyep1263
76% match
Loading thumbnail…

Let's make a face with D3.js!

The example constructs a cartoon face from simple geometric shapes using D3.js v5 and SVG rendering. It employs `d3.select` to append circles and paths directly to an SVG container, with `d3.scaleOrdinal` mapping color values for facial features. The face is composed entirely of static elements—no animation or interaction—and the code relies on basic D3 utilities like `d3.arc` for the mouth shape. Styling is handled via an external stylesheet that resets margins and hides overflow. The visual result demonstrates how D3's declarative DOM manipulation can build complex illustrations from primitive SVG components.

Jjesramyep1263
76% match