giulius540

@giulius540·3 public vizzes

Fork of Responding to Resize

This example demonstrates how to create a D3.js visualization that responds to browser resizing. The code uses the `d3.select` API to append an SVG element to a fixed-position `#chart` div. On every resize event, the `redraw` function extracts the calculated `clientWidth` and `clientHeight` from the container, then adjusts the SVG's attributes and re-renders two intersecting lines into a green X mark. This approach uses CSS for layout sizing while relying on JavaScript event handling and the `merge` API for simple data updates.

Apr 30, 2021

Loading thumbnail…

Fork of Double Harmonic

This example shows a double pendulum animation, drawing a small ball as the endpoint of two connected, rotating line segments. The code uses d3.js v6 with a time-driven `setInterval` loop to update the pendulum's position based on a constant time step and a phase-shift ratio (`psi`). It renders the scene as SVG, creating the arm lines, a moving ball, and a large hollow circle marker at the endpoint. The visualization demonstrates the harmonic motion of the two-segment system.

Apr 30, 2021

Loading thumbnail…

Fork of HTML Starter

This example shows a minimal HTML page with SVG shapes that respond to hover interactions. A red circle and a blue-bordered rounded rectangle are positioned on a light yellow background, with the rectangle’s fill and stroke animating smoothly via CSS `transition` on hover. The page includes a `console.log` statement to demonstrate JavaScript execution, using plain HTML, CSS, and inline SVG without external libraries or data sources.

Apr 30, 2021