Abdoulaye DIOP

@AbdoulayeDiop·3 public vizzes

Fork of Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by rendering a yellow smiley face with eyes, eyebrows, and a mouth as SVG shapes. The code uses `d3.select` to access the SVG element and `d3.arc` to define the mouth's path. Eyebrows and the right eyebrow animate upward using chained `transition().duration(2000)` calls, moving via `attr('transform', ...)`. The face is centered using a `translate` transform, with static parameters like `eyeSpacing`, `eyeRadius`, and `eyebrowHeight` controlling the layout. All shapes are drawn directly without external data sources.

May 5, 2021

Loading thumbnail…

Rotating rect

A small square rotates around a circular path within an SVG canvas, moving at a constant speed. The rotation is driven by a JavaScript loop that updates the rectangle's transform at regular intervals. The code uses the SVG `createSVGTransform` API and `setTranslate` to reposition the element, with `setTimeout` scheduling 100 incremental steps along the circle. The result is a simple, self-contained animation rendered in SVG, with no external libraries beyond plain JavaScript.

May 5, 2021

Loading thumbnail…

Cars Report

This example demonstrates a minimal "Hello VizHub!" message rendered as text on a webpage. The code loads D3 via UNPKG and imports local ES6 modules, including a custom message module. The `index.html` file contains a single `<pre>` element whose content is set through the DOM API in `index.js`. A separate `styles.css` file applies text alignment and font sizing. The example does not include any data visualization, charts, or D3-specific functions, but shows basic module imports, DOM manipulation, and external library loading.

May 5, 2021