Fork of D3 Starter

100%

Fork of D3 Starter

✓ Published0🌍 Public

Last edited Apr 9, 2022

Created on Apr 9, 2022

This example shows a simple, static smiley face drawn as vector shapes in an SVG canvas. It uses the D3.js library (v7) to select the SVG element and programmatically append a large yellow circle for the face, two smaller black circles for the eyes, and a path for the mouth. The mouth is created using the `d3.arc` API, which generates an SVG path based on specified inner and outer radii and start/end angles. The code demonstrates fundamental D3 techniques for creating and positioning graphical primitives within a coordinate system.

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 shows a simple yellow smiley face drawn as a scalable vector graphic using D3 version 6. The face consists of a large yellow circle with two black eye circles and a mouth created via the `d3.arc` path generator. The SVG is initialized in an HTML file, and all shapes are appended programmatically using D3 selection methods like `svg.append` and `.attr`. The code demonstrates basic D3 shape construction and attribute manipulation without external data.

Mmd-Junaid

95% match

Loading thumbnail…

Fork of Fork of D3 Starter

This example uses D3 v7 to draw a simple yellow smiley face in an SVG canvas. It demonstrates basic shape creation and positioning, using `d3.select` to target the SVG element and `d3.arc` to generate the mouth path with specified inner and outer radii and angles. Circles are appended for the face and eyes with fixed radii and coordinates, while the mouth is placed in a translated group. The code shows how to compose SVG primitives with D3’s selection and path-generation APIs.

Mminaadel6600

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

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

93% match

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 shows a static, hand-coded SVG smiley face composed of a yellow circle with concentric black circles for eyes and a mouth. It demonstrates a minimal starting point for D3 version 6, as described in the accompanying README. The rendered SVG is drawn directly in the HTML markup rather than being generated programmatically. The JavaScript file imports the `select` function from `d3` and writes the text "Hello D3 version 7" to the page body, illustrating a basic D3 API call.

CChukwudi Nweze

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

92% match

Loading thumbnail…

Fork of D3 Starter

This example renders a simple yellow smiley face as an SVG graphic using React and D3 v7. It shows a circle for the face, two smaller circles for eyes, and an arc for the mouth, all positioned within a 960×500 viewport. The code uses React’s `ReactDOM.render` to mount the component, while D3’s `arc` generator calculates the mouth path with specified inner and outer radii and angle ranges. The styling applies yellow fill and black stroke via CSS.

GGerard Jongerhuis

91% match