pursho1999

@pursho1999·3 public vizzes

Fork of Smily to Sad Face

A yellow smiley face with black facial features animates its eyebrows up and down, shifting between a smiling and sad expression. The example demonstrates fundamental SVG manipulation with D3.js, using `d3.select` and `d3.arc` to construct the head and mouth. Eyebrow movement is achieved through chained `transition` calls with a 2000-millisecond duration, while circles and rectangles form the eyes and brows within nested groups. The rendering relies on an SVG container and D3 v5.

Oct 9, 2023

Loading thumbnail…

Equilateral Triangle Inscribed in a Rotated Circle

This visualization shows an equilateral triangle inscribed within a circle that has been rotated 30 degrees. The circle is divided into three equal sectors using SVG path elements, with each sector filled with a distinct hue from the HSL color space. The triangle is drawn as a semi-transparent yellow polygon over these sectors, while the circle itself remains unfilled with a black stroke. The code uses vanilla JavaScript to create SVG elements dynamically, calculating vertex positions with trigonometric functions based on the triangle’s geometric properties.

Oct 5, 2023

Loading thumbnail…

Smily to Sad Face

A yellow smiley face rendered in SVG with D3 v5 animates its eyebrows to shift between smiling and sad expressions. The face is built from circles for the eyes, rectangles for the eyebrows, and a path generated with the d3 `arc` helper for the mouth. A chained `transition().duration(2000)` moves the eyebrow group vertically over two seconds, then returns it, creating a looping mood change. The code uses `select`, `attr`, and `append` utilities for DOM manipulation.

Oct 5, 2023