First Assignment with Vue

100%

First Assignment with Vue

✓ Published0🌍 Public

Last edited Sep 20, 2020

Created on Sep 15, 2020

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.

AI-generated description

Test Editor with Vue3

MIT Licensed

Similar vizzes

Loading thumbnail…

First Assignment with Vue

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.

SSerhiy Artymovych

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

76% match

Loading thumbnail…

First Face using D3.js!

This example draws a smiling face using D3.js v5, rendered as SVG shapes within a 960x500 viewport. A red circle forms the head, while two smaller black circles serve as eyes, positioned symmetrically above the center. A mouth is created using the `d3.arc` generator with an inner and outer radius, producing a filled arc that spans a half-circle. The code imports `select` and `arc` from the D3 module, and translates a group element to the center of the SVG to position all facial features. All shapes are styled with attributes for fill and stroke, displayed against a green background.

BBilawal Ali

76% match

Loading thumbnail…

Let's make a face with D3.js!

This example builds a stylized face using D3.js, with each facial feature—eyes, nose, and mouth—composed of geometric elements arranged on an SVG canvas. The face is drawn programmatically using D3’s selection and shape APIs, such as `d3.arc` for the mouth and `d3.line` for the eyebrows, all within a React framework. The visualization demonstrates how D3’s data-binding and attribute manipulation can construct a recognizable figure from simple primitives, rendering directly to SVG via the `d3.select` and `append` methods. The face’s proportions and placement are fixed, showing a static composition rather than interactive behavior.

Nnouralkhoury

76% match

Loading thumbnail…

Let's make a face with D3.js!

A simple D3.js example assembles a face from basic SVG shapes, starting with a circle for the head and adding eyes and a mouth. The code uses D3 v5’s `select` and `append` methods to build the elements inside an SVG canvas, with the circle’s radius set to 200. Styling comes from a linked CSS file that hides overflow and removes margins. The face is constructed programmatically, demonstrating how D3’s declarative chaining can create visual compositions from scratch.

DD2552

76% match

Loading thumbnail…

First Face Using D3.js

A stylized face rendered in red on a green background uses D3.js v5 with SVG primitives. The code builds concentric circles for the head and eyes, then applies the `d3.arc` path generator to create a mouth with an inner and outer radius. All shapes are centered within an SVG of fixed dimensions using a translated group, with eye positions offset via explicit spacing values. The example demonstrates basic D3 shape generation and coordinate transforms without external data.

BBilawal Ali

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

75% match