Juan David Contreras (@juandavidcr), VizHub

Let's make a face with D3.js!

A yellow smiley face with circular eyes, rectangular eyebrows, and an arc-shaped mouth is rendered as SVG elements. The eyebrows animate upward and back down using chained `transition` calls. D3 v5’s `select`, `attr`, and `append` methods construct the face, while the path for the mouth uses the `arc` generator with specified inner and outer radii and start and end angles.

Oct 21, 2019

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with circular eyes, rectangular eyebrows, and an arc-shaped mouth is rendered as SVG elements. The eyebrows animate upward and back down using chained `transition` calls. D3 v5’s `select`, `attr`, and `append` methods construct the face, while the path for the mouth uses the `arc` generator with specified inner and outer radii and start and end angles.

Oct 21, 2019

Loading thumbnail…

Responding to Resize

This example demonstrates how a visualization can dynamically adjust to its container's size. It uses CSS to make a chart div fill the entire browser window, then extracts the `clientWidth` and `clientHeight` properties on every window resize event. The D3.js v5 code redraws an SVG element to match these dimensions, rendering a large, translucent green X across the full width and height. This simple pattern illustrates a responsive resizing strategy without inventing any complex data transformations or interactions.

Oct 21, 2019