thatsbipasha

@thatsbipasha·3 public vizzes

Fork of Create a face with d3.js!

This example demonstrates how to build a simple cartoon face using D3.js, showing the organization of SVG elements and the use of transitions to animate facial features. The code creates a yellow circular head with eyes, eyebrows, and a mouth using `circle`, `rect`, and `path` elements positioned through attributes like `cx`, `cy`, and a generated arc path via the `d3.arc` API. A chained `transition` with a two-second duration moves the eyebrows up and down, emphasizing D3’s ability to animate SVG attribute changes smoothly. The visualization is rendered entirely as SVG within a standalone HTML page, with styling handled by external CSS.

Oct 3, 2023

Loading thumbnail…

Fork of Sad smiley face with D3.js

This example shows a simple sad smiley face rendered as a yellow circle with black stroke, two eyes, and a downward-curving mouth created using an SVG arc path. The face is centered in a 960×500 SVG canvas using a group translation. The code uses D3 v5’s `select` and `arc` APIs to build the shapes, with static numeric constants controlling eye offsets, radii, and mouth angles. All elements are drawn directly as SVG nodes, with styling handled by an external stylesheet. The visualization is purely declarative with no data binding or interaction.

Oct 3, 2023

Loading thumbnail…

Fork of Create a face with d3.js!

This example draws a yellow cartoon face with two eyes and an open mouth using D3 v7. The code selects the SVG element, applies a centered group transform, and builds the face with circle and path shapes. It uses `d3.select` to choose elements, the `d3.arc` generator to compute the mouth’s curved path, and inline `attr` calls to set positions and radii based on the SVG’s width and height. The face is rendered entirely in SVG.

Oct 3, 2023