centem

@centem·3 public vizzes

Let's make a face with D3.js!

A D3.js example demonstrates fundamental DOM manipulation by constructing a yellow smiley face with animated eyebrows from SVG shapes. The code appends circles, rectangles, and an arc path to an SVG group, using D3’s selection API and the `arc` generator for the mouth. The right eyebrow transitions downward over two seconds via `transition().duration(2000)`, while all elements are positioned with static attributes. The example showcases basic data-driven document manipulation with D3 v5, using inline SVG rendering and no external data source.

Jul 29, 2020

Loading thumbnail…

Customizing Axes

This interactive bar chart ranks the top 10 most populous countries using 2018 United Nations population estimates, with values converted to thousands. The visualization demonstrates advanced axis customization in D3 v5, including tick formatting that abbreviates numbers (e.g., “1.41B”), gridlines extending across the plot, and removal of default axis domains. Using `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, the chart also features custom styling for tick labels, axis labels, and the title via CSS.

Jul 29, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to build a smiley face whose eyebrows move using fundamental D3.js DOM manipulation. The code selects SVG elements and binds data to them with `d3.select` and `data()`, then applies updates via `enter` and `merge` selections. It uses `d3.interval` to drive the animation, adjusting eyebrow positions through `attr` calls on the `cx` and `cy` properties. Rendering occurs in an SVG container created in the HTML, with styles defined in an external stylesheet. The face itself is composed of circles and ellipse shapes, while the script runs a continuous loop to shift the eyebrows in and out.

Jul 28, 2020