szhang99

@szhang99·4 public vizzes

Fork of Animated Reusable D3 Scatter Plot

This example shows an animated scatter plot of the Iris dataset, cycling through different combinations of sepal and petal measurements every three seconds. The chart is built with d3.v6, using `scaleLinear`, `axisLeft`, `axisBottom`, and `selection.join` to handle enter, update, and exit transitions. Circles grow from radius zero on entry, smoothly reposition with staggered delays during updates, and the axes animate alongside using `transition`. Data loads as CSV from a gist, and the SVG renders full-screen with a custom font.

Jun 16, 2023

Loading thumbnail…

test1

This example demonstrates basic JavaScript array manipulation and object reduction, with output visible only in the browser console. The code uses standard array methods including `sort`, `map`, and `reduce` to square numbers, create transformed objects, compute a cumulative division, and convert an array of key-value pairs into a single object. No D3-specific APIs are called; the page merely includes D3 v7 via CDN and renders an empty body with large text styling. The visualization is limited to a blank screen, with all behavior occurring through console logging.

Jun 3, 2023

Loading thumbnail…

Fork of SVG shapes and animation sandbox

This example is a colorful, animated SVG scene showing layered sky bands, drifting clouds, and a stylized pink flower. The visualization uses raw SVG elements—including rectangles, circles, ellipses, and paths—to construct the imagery. Cloud movement is driven by the `animateMotion` API, which follows predefined curved paths at varying speeds. The scene relies entirely on static SVG markup and SMIL animations, with no JavaScript libraries or data sources involved.

Jun 3, 2023

Loading thumbnail…

SVGFundamentals

This example demonstrates the fundamental building blocks of SVG graphics within a React application, rendering a single black circle positioned at the center of an SVG canvas. The code uses plain SVG elements and CSS styling to create a minimalist visualization, with the circle’s coordinates and radius set explicitly via the `cx`, `cy`, and `r` attributes. The `.message` CSS class defines a large font size for potential text, though no text is currently displayed. The visualization serves as a bare-bones introduction to SVG markup and styling, with no external data or interaction.

Jun 2, 2023