Skip to main content
SimilarExport ZIP
100%

lets make a face

✓ Published4🌍 Public
PPeter S
Last edited Sep 25, 2019
Created on Jul 28, 2019
Forked from Hello VizHub

A cartoon face built from SVG shapes animates its right eyebrow while displaying a filtered car report. Yellow face circle, eyes, and an arc-based mouth are constructed with D3 selections, with transitions driving the eyebrow motion. A hardcoded JSON dataset of used cars loads asynchronously, and a report listing affordable cars is generated and rendered in a `<pre>` element.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

lets make a shape

This example constructs a simple face from basic SVG shapes, including a yellow circle head, eyes, eyebrows, nose, and a mouth. The eyebrows animate, moving up and down over time, while the data used comes from a hardcoded JavaScript array of car objects. The visualization uses D3 v5 for SVG manipulation and transitions, with the shape built by appending elements to an SVG group. The code also includes a car-report generator that filters and formats car data asynchronously.

SShane Carey
84% match
Loading thumbnail…

HTML Cars Report

A yellow smiley face is drawn in SVG within a fixed 960x500 viewport, with animated eyebrows that move up and down over two seconds. The code uses D3 v5 selections to append circles for the eyes and a path generated by `d3.arc` for the mouth, while chained `transition` calls animate the eyebrow group's transform. The visualization is a React-based HTML report that demonstrates basic D3 shape generation and animation without any external data source.

NNita
84% match
Loading thumbnail…

Cars Report

This example renders a stylized face using the D3.js version 6 API within an SVG canvas. The visualization depicts a yellow circle for the head, two eyes, eyebrows, and an arc-shaped mouth, constructed from basic SVG shapes. The code uses D3’s `select`, `append`, and `attr` methods to build the scene, and the `arc` generator to create the mouth path with specified inner and outer radii and angular ranges. The styling is managed by an external CSS file, and the layout is fixed to a 960 by 500 pixel coordinate system.

WWilliam
84% match
Loading thumbnail…

HTML Cars Report

This example renders a large yellow circle as a face with two eyes and a curved mouth, all drawn in SVG. The eyebrows animate upward and downward over two seconds each, creating a simple, expressive motion. The visualization uses D3 v5’s selection and transition APIs, along with the `arc` generator for the mouth path, all within a React framework. The code imports `select` and `arc` from D3 and manipulates SVG attributes directly, with the animation driven by chained `transition().duration()` calls.

AAndy Zhang
83% match
Loading thumbnail…

HTML Cars Report

This example renders a large yellow circle as a face with two eyes and a curved mouth, all drawn in SVG. The eyebrows animate upward and downward over two seconds each, creating a simple, expressive motion. The visualization uses D3 v5’s selection and transition APIs, along with the `arc` generator for the mouth path, all within a React framework. The code imports `select` and `arc` from D3 and manipulates SVG attributes directly, with the animation driven by chained `transition().duration()` calls.

AAndy Zhang
83% match
Loading thumbnail…

Cars report

A yellow, smiling face with red eyelashes (rendered as arcs) is drawn as an SVG. The eyes are black circles with red lash arcs above them, built using `d3.arc`. The lashes animate vertically via chained `transition().duration()` calls, moving up and down. The face is centered using a `g` element transform, with the data visualization code in React, using d3.v5 to select the SVG and append shapes.

MMuhammad Usman
83% match
Loading thumbnail…

lets make a map!

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.

SShane Carey
83% match
Loading thumbnail…

Making a Face with D3.js

This example uses D3.js v5 within a React framework to render a static SVG visualization. It imports car data from a local JSON file, formats each entry with a helper function, and filters the dataset to generate a text report of vehicles under a specified price. The visualization colors the entire SVG background red using D3’s selection API, while the report is displayed as plain text. The code demonstrates data parsing, asynchronous promise-based data retrieval, and SVG styling, but does not include any interactive or animated face-drawing behavior.

MMichelle Mac
82% match