trongan765@gmail.com

@nAgnorT·5 public vizzes

QuytD3

This example shows how a single-page SVG visualization responds to user clicks by adding red circles at the click coordinates on an HTML page. The code uses D3.js version 7.8.5 to select the SVG container and bind a click event to the document body. Upon each click, the application appends a circle element with a fixed radius of 20 pixels, positioning it at the client X and Y coordinates of the mouse event. The implementation relies on d3.select and d3.event, with no external data source, and the page is written in Vietnamese.

Mar 4, 2024

Loading thumbnail…

D3 Scatter Plot

This example visualizes the Iris flower dataset as a scatter plot, mapping petal length to the horizontal axis and sepal length to the vertical axis. Each flower is rendered as a circle in an SVG canvas. The code loads CSV data using `d3.csv`, parses numeric fields, and applies linear scales via `d3.scaleLinear` with domains derived from `d3.extent`. Circles are joined to the data with `selectAll().data().join()`, sized with a fixed radius of 5 pixels, and positioned using the scaled coordinates.

Jan 30, 2024

Loading thumbnail…

Quyt-Study

This example displays a centered cyan circle on a full-screen SVG. It demonstrates the minimal setup for a D3 visualization within a React environment, using `d3.select` to append the `<svg>` element and then attaching the circle with `svg.append`. The circle’s position is set to the center of the viewport using `innerWidth` and `innerHeight`, and its fill is specified via the `attr` method. The code relies on the D3 library (version 7.8.5) and the `select` API, with the rendering handled entirely by SVG.

Jan 20, 2024

Loading thumbnail…

Quyt-D3-Selection

This animated D3 visualization demonstrates a dynamic selection and update pattern for SVG circles. Using `d3.select` and `d3.range`, it generates a time-varying dataset with positional and radius values calculated from sine waves. The `vizData` function applies a data join to a circle selection, updating `cx`, `cy`, and `r` attributes at 60 frames per second. The example shows how D3’s modern selection API can efficiently manage a growing and shrinking set of visual elements while the underlying data changes continuously.

Jan 20, 2024

Loading thumbnail…

SVG-Quyt

This example generates a geometric composition of 100 horizontal and 100 vertical bars that form a grid. It uses two circular SVG masks to create a lens effect: the horizontal bars appear only inside a central white circle, while the vertical bars are visible everywhere except that same circle, leaving a circular cutout. The piece is rendered entirely with SVG elements, built using D3’s `select`, `range`, and `join` methods to populate the rectangles.

Jan 19, 2024