Skip to main content
Log in
A

AmandineM97

@AmandineM97·4 public vizzes

Loading thumbnail…

Fork of Responding to Resize

A full-window SVG responds to browser resizing by redrawing an X-shape through two crossing lines. The `#chart` container uses fixed CSS positioning to fill the viewport, and a `resize` event listener calls a `redraw()` function that reads `clientWidth` and `clientHeight` to update the SVG dimensions. D3 v5 binds the line data to the selection, merging enter and update nodes to adjust coordinates, stroke-width, opacity, and green color. The example demonstrates a simple pattern for size-aware, responsive visualization.

Apr 13, 2022
Loading thumbnail…

Fork of Responding to Resize

A full-window SVG responds to browser resizing by redrawing an X-shape through two crossing lines. The `#chart` container uses fixed CSS positioning to fill the viewport, and a `resize` event listener calls a `redraw()` function that reads `clientWidth` and `clientHeight` to update the SVG dimensions. D3 v5 binds the line data to the selection, merging enter and update nodes to adjust coordinates, stroke-width, opacity, and green color. The example demonstrates a simple pattern for size-aware, responsive visualization.

Apr 13, 2022
Loading thumbnail…

Fork of Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building a smiley face with animated eyebrows. A yellow circle forms the head, with two eyes and a mouth drawn using an arc path. The eyebrows—rendered as rectangles—move up and down through a chained `transition().duration(2000)` sequence, shifting the transform attribute over time. The code uses D3 v5 selection methods like `append` and `attr`, plus the `arc` generator from the `d3` module, all rendered as SVG elements.

Apr 13, 2022
Loading thumbnail…

first try

This visualization is a simple smiley face drawn from SVG primitives: a yellow circle, two black eyes, and a curved mouth path. The face is centered in an SVG canvas, with all elements grouped and positioned using affine transforms. The code uses the D3 `select` API to query the SVG element and `append` to add shapes, while the mouth is generated with the `d3.arc` function, which produces an SVG path from polar coordinates. The example demonstrates basic D3 v7 SVG construction without data binding.

Apr 13, 2022