Skip to main content
Log in
S

Stephen HC Lin

@linhc130·4 public vizzes

Loading thumbnail…

Fork of Zoomable Circles with D3-Zoom

This example shows a zoomable bubble chart of six colored circles of varying sizes and positions. It demonstrates how to add pan and zoom interactions to a visualization using the D3.js library. The code uses `d3.zoom` to handle user input and applies the zoom transform to a group element containing the circles. Data is hardcoded as an array of objects with x, y, radius, and fill color properties. The visualization updates its state with the current transform, allowing for smooth interactive exploration of the circular layout.

Mar 22, 2024
Loading thumbnail…

Fork of Zoomable Circles with D3-Zoom

This example shows a zoomable bubble chart of six colored circles of varying sizes and positions. It demonstrates how to add pan and zoom interactions to a visualization using the D3.js library. The code uses `d3.zoom` to handle user input and applies the zoom transform to a group element containing the circles. Data is hardcoded as an array of objects with x, y, radius, and fill color properties. The visualization updates its state with the current transform, allowing for smooth interactive exploration of the circular layout.

Mar 22, 2024
Loading thumbnail…

Fork of Parallel Coordinates with Brushing

This interactive parallel coordinates plot uses D3.js to visualize the Iris Dataset across four quantitative dimensions and one categorical species attribute. Brushing on any axis filters the data across all dimensions, with brushed intervals tracked in the state for responsive updates. The visualization demonstrates object constancy through data IDs, ensuring smooth transitions during brushing. It also serves as a test case for exporting VizHub code to Vite projects, featuring responsive resizing and color-coded lines that shift hues for aesthetic distinction.

Mar 22, 2024
Loading thumbnail…

Circles with D3

A D3.js visualization renders seven semi-transparent circles on an SVG canvas, each positioned by x/y coordinates with varying radii and bright fill colors against a pale green background. The code demonstrates the General Update Pattern by joining data to SVG circle elements, setting attributes for position, size, and fill via chained `.attr()` methods. It uses `select` from D3 to handle the container element, measuring its dimensions with `clientWidth` and `clientHeight` to size the responsive SVG, while the `opacity` attribute creates an overlapping effect between the colorful bubbles.

Mar 21, 2024