Let's Make a Map

100%

Let's Make a Map

✓ Published0🌍 Public

Last edited Jan 23, 2020

Created on Jan 23, 2020

Forked from Let's Make a Face with D3.js

A cheerful smiley face rendered in SVG uses D3 v5 to draw a yellow circle as the head, two smaller circles for eyes, and an arc path for the mouth. The code imports `select` and `arc` from D3, positions the elements relative to the SVG’s width and height, and applies transforms to center the group. Eye spacing and radius are defined as constants, while the mouth uses an arc generator with fixed inner and outer radii and angle ranges. The example demonstrates basic D3 shape generation and SVG manipulation with no external data source.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3

A smiling face is drawn entirely with SVG shapes, rendered as a yellow circle with a black stroke, two eyes, and an arc-based mouth. The code uses D3 v5 selections to append elements to an SVG canvas, importing `select` and `arc` from the D3 module. The `arc` generator creates the mouth with specified inner and outer radii and start/end angles. All shapes are centered using a group translation, with eye positions calculated from fixed offsets.

Hhairibung

89% match

Loading thumbnail…

Let's make a face with D3

This example renders a simple smiley face as an SVG graphic. It draws a yellow circle for the head, two black circles for the eyes, and a half-arc path for the mouth, all positioned using the SVG `width` and `height` attributes. The code uses D3 v6’s `select`, `arc`, and `append` APIs to create and transform the shapes, with the mouth arc defined by inner and outer radii and start/end angles.

Tthebeef5

89% match

Loading thumbnail…

Let's make a face!

A bright yellow smiley face is drawn in SVG using D3 v5. The code selects an SVG element and builds the face by appending a circle for the head, two black circles for the eyes, and a path for the mouth. The mouth path is generated with the D3 `arc` generator, using an outer radius and angles to create a half-circle shape. The face is centered via a group transform, with eye spacing and vertical offsets applied to position the features.

UUGarCil

89% match

Loading thumbnail…

Let's make a face with D3

This example uses D3 v5 to render a simple yellow smiley face in SVG, with black circular eyes and a mouth drawn as an arc. The code demonstrates core D3 selection and joining through `select`, chained `.attr()` methods for styling, and the `arc()` generator to create the mouth path. It sets up a group element (`g`) translated to the center of a 960×500 SVG canvas, positions elements with explicit pixel coordinates, and relies on `d3.min.js` from unpkg. The face is static, showing SVG primitives without data binding or interactivity.

AAnuj Saboo

88% match

Loading thumbnail…

Lets make a face with D3

This example uses D3 v5 to draw a simple smiling face entirely in SVG. It appends a yellow circle for the head, two black circles for eyes, and a mouth path created with the `d3.arc` generator, using inner and outer radii with specified start and end angles. The `select` function targets the SVG element, and attribute values like height and width are read directly from the markup. No external data is loaded; all shapes are positioned based on the SVG’s dimensions and fixed pixel offsets.

Rrpadron8

88% match

Loading thumbnail…

Let's make a face with D3 new

This example displays a cheerful cartoon face constructed from SVG primitives: a yellow circle for the head, two smaller circles for eyes, a rectangle for an eyebrow, and an arc-based path for the mouth. Built with D3 v5, the code uses `select` to target the SVG element and `attr` to position shapes, while the `arc` generator computes the mouth’s path geometry. The face is centered via a translated group, and all elements are drawn directly to the SVG canvas with fixed dimensions.

Mmirna981

88% match

Loading thumbnail…

Let's make a face

This example uses SVG shapes to draw a simple smiley face. The code constructs a yellow circle for the head, two black circles for the eyes, and a mouth created with an arc path, all positioned relative to the SVG’s width and height. It demonstrates basic SVG attributes and the `d3.arc` generator from D3 v6 to define the mouth’s curved shape, with static styling applied via CSS.

AApurva

87% match

Loading thumbnail…

Let's make a face

A smiling face rendered in SVG uses D3's `select` and `arc` APIs to compose a yellow circle head, two black eye circles, and a mouth path formed by a donut-like arc with an inner radius of 150 and an outer radius of 170. The eyes are positioned symmetrically around the center, offset by 100 pixels horizontally and 70 pixels vertically. All elements are drawn directly via D3 selections, with the head and mouth grouped inside a translated `<g>` element, while the eyes are appended to the root SVG.

CCornelia

87% match