lets make a map!

100%

lets make a map!

✓ Published2🌍 Public

Last edited Feb 27, 2019

Created on Sep 29, 2018

This example displays a simple yellow smiley face constructed entirely with SVG shapes, including eyes, a nose, and a mouth, with animated eyebrows that bounce up and down. D3 v5 selections append and style the SVG elements, while the `arc` generator creates the mouth path. The eyebrows use chained `transition` calls to repeatedly shift their vertical position. The page loads a static dataset of three cars via a simulated asynchronous `getCars` promise, though the visualization itself does not reference that data.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face rendered in SVG, with its eyebrows moving up and down in a looping animation. The face is built entirely through D3.js v5 selections, using `append` to create circle, rectangle, and path elements, and `arc()` to generate the mouth shape. Eye spacing, eyebrow dimensions, and positions are defined as constants, while the eyebrow motion is driven by chained `transition().duration()` calls that shift the group’s `transform` attribute. The code runs in a standalone HTML page with a 960x500 SVG canvas.

SShengjie-Sun

87% match

Loading thumbnail…

Let's Make a Map

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.

Ddanrhymes

87% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face rendered in SVG demonstrates fundamental D3.js DOM manipulation. The face uses D3 v5's `select` and `arc` to append a circle, eyes, and a mouth, with the mouth created via the `arc()` generator. Eyebrows, drawn as rectangles, animate upward and downward through chained `transition().duration()` calls, while the mouth also shifts position over two seconds. All elements are positioned within a centered `<g>` group, showing basic SVG construction and data-driven updates.

AAniket

87% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn as an SVG circle with animated eyebrows made of rectangles. The eyebrows transition upward and then return to their original position over two seconds each using D3's `transition()`. The face is built with D3 selections, appending elements like `circle`, `rect`, and `path`, while the mouth uses the `arc()` generator. Data is hardcoded in `index.js`, and the visualization runs entirely in the browser with D3 v5.

Ccodexmon

87% match

Loading thumbnail…

Let's make a face with D3!

This D3.js example creates a cheerful yellow smiley face using SVG shapes, with animated eyebrows that rise and fall over time. The face is composed of circles for the eyes and head, rectangles for eyebrows, and a curved path for the mouth, all positioned and transformed within a central group. The animation utilizes chained `transition().duration()` calls to move the right eyebrow, while the left stays static. The visualization demonstrates fundamental D3 v5 operations like `select`, `append`, and `attr` for building and styling vector graphics.

MMichael Todd

87% match

Loading thumbnail…

Let's Make a Face with D3.js!

A yellow smiley face is rendered in SVG, with the head as a circle, two eyes, and a mouth drawn using d3.arc. Animated eyebrows repeatedly move up and down via d3 transitions, changing their transform attribute over two seconds. The face is centered using D3 selections and attribute manipulation, with all shapes positioned relative to the SVG’s center. The visualization uses d3.select, d3.arc, and transition calls, with no external data source.

JJordan Arnold

87% match

Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face drawn in SVG, with eyebrows that animate upward and then return to their original position. The face is constructed through fundamental D3.js DOM manipulation, using `select` and `append` to build circles, rectangles, and a path. The mouth is created with the `d3.arc` generator, while eyebrow movement relies on chained `transition().duration()` calls that modify a `transform` attribute. All shapes are centered within an SVG element sized 960 by 500 pixels.

DDan Mihaila

87% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face appears in an SVG, built entirely through D3.js v5 selections and DOM manipulation. The face includes a head, two eyes, and a mouth drawn with the `d3.arc()` path generator. The eyebrows, rendered as rectangles, animate continuously via chained `transition` calls, moving up and then back over 2-second intervals. The example demonstrates fundamental SVG element creation, coordinate transforms, and data-driven attribute updates using D3's `select`, `append`, and `attr` methods.

Ssdilbaz

87% match