EL MAHI Moncef

@melmahi·3 public vizzes

Let's make a face with D3.js!

D3.js constructs an animated smiley face by manipulating SVG shapes. A yellow circle forms the head, with two static eyes and a mouth drawn using the `arc` path generator. The eyebrows, rendered as rectangles, animate upward and downward over two seconds using chained `transition().duration()` calls on the SVG group, demonstrating fundamental DOM selection and attribute mutation. The code uses the `select` API to target the root SVG element.

Mar 28, 2019

Loading thumbnail…

General Update Pattern for Nested Items

This example demonstrates the general update pattern for nested items using a bar chart of top population data from the United Nations’ 2017 World Population Prospects. The visualization uses D3 v5 with SVG rendering, where each bar represents a country’s population, and the update pattern dynamically handles entering, updating, and exiting elements. The code leverages D3 selections with data joins (enter, update, exit) and smooth transitions to reflect changes in the dataset. The bars are styled with steelblue fills, and the chart includes a data.csv file with product and service revenue figures, though the primary visualization focuses on population values.

Feb 7, 2019

Loading thumbnail…

Let's make a face with D3.js!

This example builds a cheerful yellow smiley face using D3.js v5, rendered as SVG elements. The face is composed of circles for the head and eyes, rectangles for eyebrows, and an arc-generated path for the mouth. The code demonstrates fundamental DOM manipulation with `d3.select` and `d3.append`, while `d3.arc` creates the mouth shape. An animation driven by chained `transition` and `attr` methods moves the eyebrows up and down over a four-second cycle, showcasing how D3 transitions can animate SVG attributes.

Feb 7, 2019