Skip to main content
Log in
Y

yankesswang

@yankesswang·13 public vizzes

Loading thumbnail…

Reusable D3 Scatter Plot

This reusable D3 scatter plot displays the Iris Dataset, plotting petal length against sepal length. The implementation uses a custom `scatterplot` function that takes configurable parameters for data, dimensions, margins, and point radius. It employs D3's `scaleLinear` for axis scaling, `scaleOrdinal` for symbol mapping, and `axisLeft`/`axisBottom` for rendering axes. The SVG visualization is generated declaratively with data-driven circles, and the code demonstrates a modular approach for creating reusable chart components with D3 7.6.1.

Nov 1, 2022
Loading thumbnail…

D3 scatter plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis. Each flower is rendered as an SVG circle using D3 v7, with positions scaled linearly via `d3.scaleLinear` and extents computed from the data. The axes are drawn using `d3.axisLeft` and `d3.axisBottom`, and the visualization fills the browser window. Data is loaded asynchronously with `d3.csv` from a remote GitHub gist, and circles are joined to the SVG using `selection.join`.

Oct 26, 2022
Loading thumbnail…

JS in HTML

This example demonstrates minimal integration of D3.js within an HTML page, illustrating basic module imports and console output. The code imports a constant value from `something.js` and the D3 `select` function, logging both to the browser console. The page itself contains no visual elements—only a hidden-overflow body and a D3 script loaded via CDN. It serves as a foundational template for understanding how D3 v7 modules interact with standard JavaScript imports in a browser environment, without rendering any charts or SVG shapes.

Oct 25, 2022
Loading thumbnail…

D3 selection

This example demonstrates a dynamic field of circles that continuously undulate across the screen, their positions and radii shifting over time. It displays a swarm of shapes moving in a wave-like pattern, driven by a sine function of time and index. The visualization uses the D3.js library’s `select` and `range` APIs to manage SVG elements, appending a full-screen SVG canvas. Through an animation loop using `setInterval`, it regenerates data at 60 frames per second, employing `selectAll` and `join` to efficiently update the existing circles’ attributes, creating a smooth, organic motion.

Oct 25, 2022
Loading thumbnail…

JS Fundamentals

This example demonstrates core JavaScript array operations implemented by hand, including range generation, filtering, sorting, mapping, and reducing. The code uses D3 v7’s `ascending` comparator within a custom `sort` function to order objects by key, then reduces an array of key-value pairs into a single object. All logic runs in the browser console, producing logged output for each step; the page itself is intentionally blank, with SVG shapes referenced only in the README. The visualization relies purely on native JavaScript methods and D3’s utility functions, with no graphical rendering.

Oct 25, 2022
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example visually recreates a Sol LeWitt wall drawing using only horizontal and vertical black lines, shaped by custom masks to form large geometric symbols. The piece uses D3.js (v6) with SVG rendering, generating 100 line groups across the canvas width and height. Two masks, one inverted, apply distinct patterns of D3’s built-in `symbols` (like circles and squares) to cut the lines, revealing positive and negative spaces. The code relies on `select`, `range`, `symbol`, and `join` from D3 to construct the composition dynamically.

Oct 23, 2022
Loading thumbnail…

Sol LeWitt Reproduction with d3

This piece reproduces a Sol LeWitt drawing using D3 and SVG renderings. Two sets of 100 thin rectangles are drawn—one horizontal and one vertical—creating a grid-like pattern. Each set of rectangles is masked by a circular region: the horizontal bars use a mask with a central white circle on black, while the vertical bars use an inverse mask with a black circle on white. The result shows a grid within a circular window, with the horizontal and vertical lines swapping visibility inside and outside the circle. The code uses `d3.select`, `d3.range`, `svg.append`, and `.join()` to build the SVG elements and masks programmatically.

Oct 23, 2022
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example renders a Sol LeWitt-inspired geometric composition using D3 v6 in an SVG container. It draws 100 horizontal and 100 vertical rectangular bands across the full viewport, each masked to reveal circular cutouts at the center. Two SVG masks (`circle-mask` and `circle-mask-2`) apply inverse fill patterns—one black with a white circle, the other white with a black circle—so the overlapping stripes form a crosshatched grid with a circular void. The visualization uses `d3.select`, `d3.range`, and data joins via `.join('rect')` to generate the marks.

Oct 23, 2022
Loading thumbnail…

JavaScript Production

This example reproduces a Sol LeWitt wall drawing using SVG and JavaScript. It generates a grid of horizontal and vertical stripes across the full browser window. The piece shows a large central circular area where both stripe orientations are visible, while the surrounding space reveals only horizontal or vertical lines. The code constructs two SVG masks, each containing a circle, to control which stripes appear in different regions. One hundred rectangles are created programmatically for each direction.

Oct 23, 2022
Loading thumbnail…

Reproduction

This example reproduces a Sol Lewitt art piece as a static SVG graphic. The sketch uses raw JavaScript to log variables, objects, functions, and loops to the browser console, demonstrating basic syntax and arrow functions like `add`. The SVG canvas is set to 960 by 500 pixels, but the code does not generate any visual geometry or data-driven marks; it only executes console output. The rendering relies on the SVG element with no external libraries or interactive behavior.

Oct 23, 2022
Loading thumbnail…

Pseudo scatter plot

A pseudo scatter plot displays five fixed circles at arbitrary positions on a blank SVG canvas, with no data mapping or interaction. Each circle has a radius of 30 pixels, and their coordinates vary along the x- and y-axes, creating a sparse arrangement. The code uses plain SVG elements (circle, svg) within an HTML page, with no JavaScript libraries or frameworks. It demonstrates a minimal, static visualization of manually placed points, representing a conceptual precursor to a data-driven scatter plot without any computed scales or axes.

Oct 22, 2022
Loading thumbnail…

SVG fundamental

This example showcases fundamental SVG shapes—a red circle, a blue-bordered rectangle, a thick navy line, and a black path—all placed on a 960 by 500 coordinate system. The code uses raw SVG elements (circle, rect, line, path) within an HTML file, augmented by the React framework for structure. It demonstrates basic vector rendering and styling through attributes like fill, stroke, and stroke-width, providing a clear starting point for building more complex data visualizations.

Oct 22, 2022
Loading thumbnail…

smile face

The smile face example displays a simple yellow circle with two smaller black circles for eyes, rendered as static SVG shapes on a 960x500 canvas. It uses React 18.2.0 through a UMD script tag, though no React components are actually defined. The visualization is built entirely with raw SVG elements—a `<circle>` for the face and two `<circle>` elements for the eyes—each with explicit coordinates for positioning. The code loads React and logs ReactDOM to the console, but relies on pure markup without any dynamic behavior or data binding.

Oct 16, 2022