Skip to main content
SimilarExport ZIP
100%

car report

✓ Published0🌍 Public
Nnttssv
Last edited Sep 9, 2019
Created on Sep 8, 2019

This interactive smiley face uses D3.js v5 to animate its eyebrows in response to DOM events. The visualization is built with SVG elements, manipulated through D3’s selection and attribute methods. The `index.html` file loads D3 from the unpkg CDN, while `bundle.js` contains the JavaScript logic, which directly manipulates SVG shape properties to create the moving eyebrow effect. The data source is not external; all geometry and animation parameters are hardcoded in the script.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

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
88% match
Loading thumbnail…

Cars Report

Despite its title, this visualization is an animated smiley face drawn with SVG. D3.js v5 appends circles for the eyes and a path for the mouth to a central group, using a yellow circle with a black stroke as the face. The eyebrows are rectangles animated via chained `transition().duration()` calls, which move them up and down over two seconds each, demonstrating basic DOM manipulation and animation with the D3 selection API.

Kkirkdebaets
85% match
Loading thumbnail…

HTML Cars report

This visualization displays a cheerful yellow smiley face rendered as an SVG graphic. The face includes a circular head, two black eyes, and a curved mouth created using D3's arc generator. The code builds the composition using D3 v7 selections and shape primitives, with the SVG canvas set to 1000 by 1000 pixels. The smiley is centered via a group translation, while the mouth and left eyebrow are drawn using the `d3.arc()` path generator with specified angles.

SSampras Dsouza
83% match
Loading thumbnail…

lets make a face

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.

PPeter S
82% match
Loading thumbnail…

data viz

This example demonstrates fundamental DOM manipulation with D3.js by creating a smiley face whose eyebrows move. The visualization uses D3 v5 selections and the `arc` generator to draw the face’s features, while the interactive animation is driven by data-driven updates. The SVG element is selected and sized from its attributes, with a CSV file providing the underlying data. The code illustrates how D3 binds data to visual elements and transitions them, resulting in a simple yet effective demonstration of dynamic SVG rendering.

Nnawbx1
82% match
Loading thumbnail…

Cars report

A yellow smiley face rendered as an SVG displays a large circle for the head, two black circles for eyes, and a curved path for the mouth defined by an annular arc. The visualization uses D3 v5’s `select`, `append`, and `arc` APIs to construct the static composition within a 400 by 400 viewport. The data originates from a source labeled `v3`, and the React-based code explicitly sets pixel coordinates and radius values for each shape.

MMuhammad Usman
82% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building a smiley face whose eyebrows animate. The visualization loads population data from a CSV file using `d3.csv`, though the data itself does not drive the face’s rendering. The face is drawn entirely with SVG elements selected and appended via `d3.select` and standard DOM methods. The eyebrows move through D3’s selection and transition APIs, highlighting how D3 can directly manipulate existing SVG nodes without data joins or scales. The page uses D3 v5 and renders all graphics in a single SVG container.

TTheRoadSign
81% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building a smiley face whose eyebrows animate. The visualization loads population data from a CSV file using `d3.csv`, though the data itself does not drive the face’s rendering. The face is drawn entirely with SVG elements selected and appended via `d3.select` and standard DOM methods. The eyebrows move through D3’s selection and transition APIs, highlighting how D3 can directly manipulate existing SVG nodes without data joins or scales. The page uses D3 v5 and renders all graphics in a single SVG container.

TTheRoadSign
81% match