Htet Yan Oo

@timhtetyanoo·10 public vizzes

D3 scatter plot

This interactive D3 scatter plot displays the Iris dataset, mapping petal and sepal measurements to point positions while encoding species via symbol type and sepal length via color. Built with React and SVG, it animates through four variable combinations at two-second intervals, updating the x-axis scale dynamically. The implementation uses `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.extent`, `d3.axisLeft`, `d3.axisBottom`, and `d3.symbol` to generate the plot.

Apr 30, 2024

Loading thumbnail…

D3 Selection

This example demonstrates animated data-driven circles rendered as SVG elements whose positions, radii, and count oscillate in response to a continuous time variable. It shows how D3’s selection and join API incrementally updates an existing set of circles, adding or removing them as their number changes. The code uses `d3.select`, `selectAll('circle')`, and the `.join()` method to synchronize the SVG with a dynamic array, while a `setInterval` loop recomputes the dataset from trigonometric functions. Circle properties like `cx`, `cy`, and `r` are bound to each datum for smooth motion.

Feb 20, 2024

Loading thumbnail…

Javascript Array

This example demonstrates how to manipulate JavaScript arrays through map, reduce, and sort operations. It defines a custom range function to generate an array of numbers, then creates an entries array of key-value objects and applies D3’s ascending and descending comparators for sorting. The code also uses reduce to transform the entries array into a plain object, logging intermediate accumulator values to the console. It relies on D3 7.8.5 for comparator functions and runs directly in the browser console without rendering any visual output.

Feb 19, 2024

Loading thumbnail…

Fork of HTML Starter

This example is a minimal HTML page titled “JavaScript Arrays” that demonstrates a basic script execution. It shows a simple console output of the string "hello" when the page loads. The implementation uses a plain HTML document structure with an embedded `<script>` tag, relying on the browser’s native JavaScript console API to display the message. No external libraries or data sources are involved.

Feb 19, 2024

Loading thumbnail…

D3 Sol LeWitt reproduction

This example reproduces a Sol LeWitt-style geometric composition using D3 v7 and SVG. It layers two masks over intersecting grids: one mask reveals vertical stripes through alternating D3 symbols, while the other horizontally bands the canvas with a second symbol set. The code uses `d3.range`, `d3.symbols`, and `d3.symbol` to generate the mask shapes, then applies the masks via SVG `mask` attributes. The result combines generative patterns with minimalist grid structures, demonstrating mask-based compositing in a browser window.

Feb 7, 2024

Loading thumbnail…

Animated Sol LeWitt reproduction

This animated SVG reproduces the geometric style of artist Sol LeWitt using strips of vertical rectangles. Two circular masks, one inverted, move diagonally across the canvas while their radii pulse between 200 and 100 pixels. The animation is created entirely with native SVG elements, including `<mask>`, `<circle>`, and `<animate>` tags, which drive the motion of the mask centers along viewport-perimeter paths. The code constructs roughly one hundred rectangular bars via a repeated loop, with each rect filtered through the masks to reveal shifting patterned compositions.

Feb 6, 2024

Loading thumbnail…

SVG Fundamentals

A demonstration of SVG fundamentals shows a full-screen radial gradient and an animated circle descending vertically over five seconds. The gradient transitions from aliceblue to indigo via an SVG `<animate>` element on the `<stop>` color, while the circle’s `cy` attribute animates from 250px to 350px. Rendered purely as inline SVG in an HTML document, the example uses no external libraries, relying on native SVG markup and SMIL animation for its visual effect.

Jan 15, 2024

Loading thumbnail…

Fork of Hello HTML

A smiling face is drawn with SVG shapes, using a yellow circle for the face, black circles for the eyes, and D3's `arc` generator to create the mouth and eyebrow arcs. The React component sets up the viewBox and positions each element relative to the center. D3 v7's `arc()` function defines the curved paths for the mouth and brows, while React 18 renders the SVG to the DOM. The example demonstrates combining React for component structure with D3 for geometric path calculations.

Jan 14, 2024

Loading thumbnail…

Fork of Let's Make a Face Part I

A single static SVG face is drawn with yellow circular head and two empty eye circles, rendered through raw SVG markup inside an HTML document. The face is positioned centrally within a 960 by 500 pixel canvas, with the head centered at (480, 250) and stroked in black. The code uses no external libraries, relying instead on direct SVG circle elements, while the README notes the project is "Half way towards a smiley face," indicating an unfinished state. The example demonstrates basic SVG composition for geometric figure drawing.

Jan 14, 2024

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page with a large centered message. It uses plain HTML, CSS, and JavaScript to render the text "Hello HTML!" in a styled div, with an additional "tes" paragraph. The code relies on standard web technologies—CSS for styling and inline JavaScript for interactivity—rather than any external visualization or data-processing libraries.

Jan 14, 2024