Nick Dyson

@Qwoxa·3 public vizzes

Responding to Resize

This example demonstrates how a visualization can respond dynamically to browser resizing. It uses a full-page chart container defined with CSS and renders an SVG element whose width and height are updated on every resize event. The SVG draws two diagonal green lines forming an X, using data joins to update the line coordinates based on the container’s current client dimensions. The code relies on the D3 v5 library and the window’s resize event listener to trigger the redraw function.

Nov 30, 2019

Loading thumbnail…

Making a barchart

This example demonstrates a responsive SVG barchart that fills the browser window using CSS. It initially renders two green diagonal lines forming an X, which visually confirm the chart’s dimensions. The code uses D3.js v5 to select the chart container, append an SVG element, and dynamically set its width and height based on the container’s client dimensions. A redraw function is triggered on window resize, using D3’s selection merge methods to update the lines’ coordinates. The chart has no data source, focusing instead on sizing and rendering mechanics.

Nov 30, 2019

Loading thumbnail…

Let's make a face with D3.js!

This D3.js example builds a smiling cartoon face from scratch using SVG primitives. A yellow circle forms the head, while two circles with animated rectangular eyebrows and an arc-shaped mouth are positioned to create the expression. The right eyebrow repeatedly moves up and down via chained `transition().duration(2000)` calls, demonstrating D3's animation capabilities. All elements are scaled and centered using the `select` and `append` API from d3 v5.

Nov 30, 2019