Skip to main content
Log in
K

Kyuhyun

@kyuhyunhan·7 public vizzes

Loading thumbnail…

Reusable D3 Scatter Plot

This visualization presents a reusable D3 scatter plot of the Iris Dataset, showing petal length against sepal length for individual flowers. The code builds a custom `scatterPlot` function with configurable accessors, dimensions, and margins, using D3's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for axes. Data is loaded via `csv` from a Gist, with points rendered as animated SVG circles. The plot updates on a fixed interval, demonstrating the function’s modularity for different data mappings and sizes.

Jun 7, 2022
Loading thumbnail…

D3 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis against sepal length on the y-axis. Each flower observation is rendered as a circle using SVG, with axes generated via `d3.axisLeft` and `d3.axisBottom`. The code loads CSV data with `d3.csv`, scales positions using `d3.scaleLinear` with `d3.extent` for domains, and appends circles via `selection.join`. The visualization fills the browser window using `window.innerWidth` and `window.innerHeight`, with tick labels styled at 24 pixels in plain CSS.

Jun 2, 2022
Loading thumbnail…

D3 Selection Exploration

This example demonstrates animated SVG circles in a wave-like pattern, updating every five seconds. It uses D3’s `select` and `range` to generate data and the `data().join()` pattern to handle circle enter and update states. The code appends circles to the body, setting their `cx` and `cy` attributes based on a sine function, with the animation driven by a JavaScript `setInterval` that increments time and re-renders the positions. The visualization shows how D3’s selection and data-binding APIs work with React-style vanilla JavaScript, rendering in full-screen SVG.

Jun 2, 2022
Loading thumbnail…

Fork of Sol LeWitt Reproduction width d3

This visualization reproduces a Sol LeWitt art piece using a grid of horizontal and vertical rectangles, each masked by repeating SVG symbols. The piece shows an interplay between geometric lines and symbolic shapes, where the masks reveal or hide portions of the grid based on symbol placement. Built with D3 v6, the code uses `select`, `range`, `symbol`, and `symbols` APIs to generate the SVG elements and masks. Two masks are rendered, one inverted, to create contrasting visual effects across the 100-line grid that fills the browser viewport.

Jun 2, 2022
Loading thumbnail…

Sol Lewitt reproduction

This example reproduces a Sol LeWitt-style artwork using an SVG mask to reveal a series of horizontal stripes inside a central circle. The visualization creates 100 rectangles, each 10 pixels tall, spanning the full width of the viewport, while a circular mask restricts their visibility to a 200-pixel-radius disc at the center of the screen. The code constructs the SVG dynamically via the DOM API, appending elements with methods like `createElementNS` and `setAttribute`, without relying on external libraries. The result is a clean, generative geometric composition that highlights the interplay between simple shapes and masking.

Jun 2, 2022
Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes using a simple static composition: a filled circle and a navy diagonal line. The circle is centered at coordinates (50, 50) with a radius of 50, while the line spans from the top-left to the bottom-right of the viewport. Rendered directly in the browser via inline SVG markup within an HTML document, it highlights basic attributes such as `cx`, `cy`, `r`, `x1`, `y1`, `x2`, and `y2`. No external libraries are used; the visualization relies solely on native SVG elements to illustrate core geometric primitives.

May 31, 2022
Loading thumbnail…

Let's make a face with D3.js!

This example builds a smiling face using D3.js v5 and SVG primitives. A yellow circle forms the head, with two black circles positioned as eyes and a mouth drawn as a path generated by D3’s `arc` function. The face is centered by translating a group element to the middle of the SVG canvas, with eye spacing and offsets set as constants. The code demonstrates basic D3 selections, attribute assignment, and arc path generation for simple geometric compositions.

Dec 22, 2020