LikhithaBodepudi@my.unt.edu

@LikhithaBodepudi·2 public vizzes

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

This example demonstrates fundamental DOM manipulation with D3.js by constructing a yellow rectangular face with eyes, eyebrows, and a mouth. The eyebrows animate upward and downward using chained `transition()` calls with a 2-second duration. The code imports `select` and `rect` from D3 v5, appends SVG shapes via method chaining, and uses an `arc()` path from D3 to render the mouth. A static SVG canvas of 960×500 pixels serves as the rendering surface, with all elements positioned relative to the center of the viewport.

Feb 28, 2024

Loading thumbnail…

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

This example demonstrates how to build a simple animated face using D3.js v5, where a green triangular face with eyes and a curved mouth is rendered as static SVG elements. The code explicitly sets the polygon points, circle positions, and path arc for the mouth, while the D3 `select` and `append` methods handle DOM creation. The visualization focuses on fundamental DOM manipulation and attribute binding, using a fixed data-driven approach with no external data sources. The rendering relies on SVG shapes inside a centered group, with dimensions derived from the SVG element’s attributes.

Feb 28, 2024