Fork of D3 Starter

100%

Fork of D3 Starter

✓ Published0🌍 Public

Last edited Jan 30, 2021

Created on Jan 30, 2021

This example renders a simple animated face using D3 v6 with SVG. The code draws a yellow circle as the head, two black eyes, and a mouth created with the `d3.arc` path generator. The eyebrows, implemented as rectangles, animate up and down using `d3.interval` and chained `transition.attr` calls to shift their vertical position every 1.5 seconds. The visualization demonstrates basic D3 selection, SVG shape creation, and transition-based animation in a minimal starter template.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a simple D3.js starter project that renders a yellow smiling face using basic SVG shapes. The code creates a large circle for the face, two smaller circles for the eyes, and an arc path for the mouth, all positioned relative to the SVG's width and height attributes. It uses D3 v7 selection methods such as `svg.append` and `.attr` to build the visualization, along with the `d3.arc` function to generate the mouth's curved path. The example serves as a minimal introduction to D3's core drawing capabilities.

AadnaneAkk

92% match

Loading thumbnail…

Fork of D3 Starter

This example uses D3 v7 to render a simple yellow smiley face on an SVG canvas. The code builds the face from basic shapes: a circle for the head, two circles for eyes, rectangles for eyebrows, and a path created with the `arc()` function for the mouth. An animation sequence, driven by chained `transition()` calls with a 2000-millisecond duration, moves the eyebrows down and back up. The underlying data is positional, defined by hard-coded constants like `eyeSpacing` and `eyeRadius`, directly set as SVG attributes through D3's selection and append methods.

CChris Beaumont

91% match

Loading thumbnail…

Fork of D3 Starter

This example shows a simple yellow circle with two elliptical eyes and a black horizontal rectangle for a mouth, forming a basic smiley face. The visualization is rendered as SVG using D3 v6, with geometric shapes positioned explicitly via pixel coordinates. The code leverages D3’s `select` method to append an SVG container and then uses `circle`, `ellipse`, and `rect` elements to construct the face. No data is loaded; all shapes are hardcoded, and the styling is applied directly through attributes like `fill` and `stroke`.

EEmanuel Alvarado Perez

90% match

Loading thumbnail…

D3 Starter

This example demonstrates a simple animated face built with D3.js v7, rendered as SVG. The code uses `d3.select`, `d3.arc`, and chained `transition().duration()` calls to animate the eyebrows, mouth, and facial elements over time. A yellow circle serves as the face, with positioned eyes and rectangular eyebrows that shift vertically, while the mouth path alternates between two arc shapes. The animation is triggered on page load without user interaction, showing basic D3 data-binding and transition mechanics.

Bbilal

90% match

Loading thumbnail…

Fork of HTML Starter

This example uses D3 version 6 to render a simple face on an SVG canvas. It draws a yellow circle as the head, then adds two black eye circles and a red arc-shaped mouth using D3’s `arc` generator, which creates an SVG path based on inner/outer radii and start/end angles. The code uses `select` and `append` to build the SVG elements, with hard-coded positions and dimensions for each facial feature.

AAya

90% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates how to build a simple emoticon face using D3 version 7, rendered as SVG elements within a 900x430 canvas. It shows a yellow circle with two black eyes and a mouth, all positioned using pixel coordinates with absolute styling. The code imports `select` and `arc` from D3, though only `select` is used to append and style the SVG shapes. The face is drawn purely with static SVG primitives—circles for the eyes and a path for the mouth—with no data binding or interactive behavior, serving as a basic starter template for D3 drawing.

DDon George

90% match

Loading thumbnail…

Fork of D3 Starter

This example shows how to begin building a simple SVG visualization with D3 version 6, rendering a yellow circle as a face with two black eyes and a half-circle mouth. The code uses the `select` and `arc` functions from D3, explicitly setting attributes like radius, position, fill, and stroke on SVG circle elements. Drawing coordinates are computed from the SVG’s width and height attributes, and the mouth is generated as a path using a D3 arc generator with defined inner and outer radii. The visualization demonstrates basic composition and styling with D3’s SVG manipulation.

Mmjglsn

90% match

Loading thumbnail…

Fork of d3js

This example shows a stylized yellow face with eyes, eyebrows, and a mouth rendered as SVG shapes inside a 960-by-500 viewport. The eyebrows animate up and down using chained `transition()` calls with `duration(2000)`, while the mouth is drawn with `d3.arc()` using specified inner and outer radii and angle spans. The code imports `select` and `arc` from D3 v5, positions elements via `attr('transform')` with translations, and applies CSS styles from an external stylesheet. The face centers on a circle with black stroke, and all elements are grouped under a translated `<g>` container.

HHeisenberg

90% match