senghok789@gmail.com

@senghok510·6 public vizzes

Fork of Animated Reusable D3 Scatter Plot

This example presents an animated scatter plot of the Iris flower dataset, cycling through four measurement dimensions every three seconds. It showcases a reusable D3 chart module where data points transition smoothly between axes using d3.transition, with circles entering, updating, and exiting via D3’s data join. The visualization leverages d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom to map values, while SVG rendering and CSS styling with the Share Tech font complete the presentation. The code demonstrates animated axis updates and staggered circle movements.

Oct 3, 2025

Loading thumbnail…

Fork of D3 Scatter Plot

This visualization displays the Iris dataset as a scatter plot, plotting petal length along the x-axis against sepal length on the y-axis. Each of the 150 flowers is rendered as a fixed-radius circle in SVG. The code loads data via `d3.csv`, uses `scaleLinear` and `extent` to compute domains, and positions marks with `axisLeft` and `axisBottom` for the coordinate axes. The plot fills the entire browser window, with tick labels enlarged to 24 pixels for readability.

Oct 2, 2025

Loading thumbnail…

Fork of Vanilla D3Template

This gallery example presents a configurable scatter plot built with D3.js, mapping data dimensions from a CSV file to x, y, and color channels. The visualization loads data asynchronously via `d3.csv`, dynamically observes container dimensions, and renders an SVG with `renderScatterPlot`. It leverages the modular template’s `config` object to define field mappings and labels, and includes a hover interaction that updates state through `setHoveredColorValue`. The code demonstrates a reusable pattern for integrating data loading, dimension observation, and SVG rendering within a single visualization pipeline.

Oct 2, 2025

Loading thumbnail…

Fork of D3 Selection Exploration

Animated D3 selection exploration shows a variable number of circles moving in a sine-wave pattern across an SVG canvas. The visualization demonstrates D3's selection API, specifically the `join` operation for efficiently managing entering, updating, and exiting nodes as the data array changes over time. Using `setInterval` to update a time parameter every 200 milliseconds, the code generates new data points via `range` and applies `attr` updates for position and radius. The example forks a v3-era D3 exploration and renders with standard SVG animation.

Oct 1, 2025

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This is a generative art piece that recreates a Sol LeWitt wall drawing using SVG elements. It renders a full-screen grid of horizontal and vertical stripes, with a central circular area masked to show the horizontal lines while the surrounding area displays vertical lines. The code uses the SVG DOM API directly to create and manipulate `rect` and `circle` elements, along with `mask` definitions to control visibility. The pattern is generated programmatically across the entire canvas, with each stripe having a fixed width and height.

Sep 29, 2025

Loading thumbnail…

Fork of Episode 3: Sol LeWitt in Vanilla JavaScript version 3

This example generates a dynamic grid of vertical rectangles, each filled with a randomly selected RGB color, and animates them by translating them vertically along the y-axis. A white circle is placed at the center of the canvas, and a mask is defined with a circular shape to clip a second set of horizontal rectangles, creating a patterned circle. The code uses the SVG `rect` and `circle` elements, along with the `mask` and `defs` elements, to apply the clipping. The animation is driven by calling the `animate` method on the rectangle elements with keyframes and timing options.

Sep 29, 2025