billzhou2005

@billzhou2005·10 public vizzes

javascript array

This example demonstrates a minimal JavaScript array manipulation workflow, showing how to generate a sequence of numbers and transform it into an array of objects with computed properties. The code defines a `range` function that pushes numbers from 0 to `n-1` into an array, then logs the initial sequence and a mapped version where each number is paired with its double. Built with plain HTML and JavaScript, it relies on native array methods like `push` and `map`, with no external libraries or frameworks. The console output serves as the primary visualization, illustrating the transformation steps directly.

Jan 7, 2023

Loading thumbnail…

Sol LeWitt-d3-shape

This example generates an abstract grid of horizontal and vertical stripes that are selectively masked by two inverted symbol shapes, using D3 v6. It renders SVG rectangles across the full viewport, with 100 horizontal bars and 100 vertical bars, each assigned a mask. The `d3.mask` API combines a white or black background rect with a large `d3.symbol` path (symbols[4], a cross) translated to the center. Two masks, one inverted, create a dynamic interplay between the geometric grid and the central symbol.

Jan 6, 2023

Loading thumbnail…

full Sol LeWitt-d3

This example displays a full-screen grid of horizontal and vertical stripes within two circular masks, creating an overlapping pattern of lines at the center of the viewport. The visualization generates 100 rectangles for each orientation using `d3.range`, appending them to SVG groups via `d3.select` and the `join` operation. Two SVG masks, one with a black background and white circle and the other inverted, control visibility of the stripes, producing a dynamic interplay of crisp bands within the circular boundaries. The rendering is built with React, uses the d3 library version 6.6.1, and outputs to SVG.

Jan 6, 2023

Loading thumbnail…

Fork of Fork of Sol LeWitt-d3-3

This example generates a grid-based abstract pattern using D3.js version 6, rendering SVG rectangles in horizontal and vertical orientations. The visualization uses the d3.select and d3.range functions to create 100 stripes of each direction, layered with SVG mask elements to create two circular cutout effects at the center of the viewport. The first mask uses a white circle on black, while the second uses a black circle on white, producing contrasting visibility through the overlapping stripes. The visualization fills the entire browser window dynamically by setting the width and height to the inner dimensions of the viewport.

Jan 6, 2023

Loading thumbnail…

Fork of Sol LeWitt-d3-2

This visualization generates a grid of horizontal and vertical bars across the full browser window, then applies circular SVG masks to reveal a bold geometric composition. Using d3 selections and `range()`, it appends 100 rectangles in each orientation, with a black-and-white mask pair creating a contrasting ring pattern at the center. The code uses D3 v6 with `select`, `range`, and `join`, rendering to SVG while dynamically sizing to the viewport. This mirrors Sol LeWitt’s minimalist wall drawings through a React-compatible, single-file example.

Jan 6, 2023

Loading thumbnail…

Sol LeWitt-d3

This example renders a full-screen SVG composed of 100 horizontal rectangles, each 10 pixels tall and spaced 20 pixels apart. The rectangles are masked by a circular pattern, creating an effect reminiscent of Sol LeWitt’s wall drawings. The visualization uses React and is built with d3.select, d3.range, and the data-join pattern via the .join('rect') method, while the SVG mask is defined in the marks array as 'url(#circle-mask)'. The code also demonstrates dynamic sizing based on the browser window dimensions.

Jan 6, 2023

Loading thumbnail…

Sol LeWitt

This example renders a generative SVG artwork inspired by Sol LeWitt. It uses raw JavaScript to create an SVG element sized to the browser window, then draws 100 vertical rectangles, each 10 pixels wide and spaced 20 pixels apart, spanning the full height of the canvas. A circular mask, defined in SVG and applied via the `mask` attribute, clips these rectangles, revealing a bold, striped disk centered on the screen. The piece demonstrates programmatic shape creation and SVG masking without any external libraries.

Jan 5, 2023

Loading thumbnail…

Fork of HTML Starter

This example shows four horizontal bars labeled A through D, each with equal length, rendered as black rectangles with white fill and a thick black stroke on the first bar. The visualization uses raw SVG elements defined directly in HTML, with CSS styling controlling the font family 'Share Tech' and the bar’s stroke properties. JavaScript is not used; the chart is static, relying on inline SVG `rect` and `text` tags within a 960x600 viewport.

Jan 4, 2023

Loading thumbnail…

Fork of HTML Starter

This example shows a simple arrangement of six black circles on a white background, rendered directly as inline SVG elements within an HTML page. The visualization uses raw SVG markup with `<circle>` and `<rect>` elements, all defined inside an `index.html` file. The SVG canvas is set to 960 by 600 pixels, and the circles vary in their x and y coordinates to create a scattered pattern. This demonstrates a minimal approach to static data visualization using only native SVG and HTML, without any JavaScript libraries or external frameworks.

Jan 4, 2023

Loading thumbnail…

SVG fundamentals

This example demonstrates fundamental SVG shapes rendered directly in an HTML page, including circles, rectangles, lines, and paths. The code specifies each shape’s geometry and styling attributes, such as coordinates, radii, fill colors, stroke colors, and stroke widths. It uses no external JavaScript libraries, relying purely on SVG’s built-in markup within the browser. The visualization shows how basic vector graphics can be assembled procedurally, with overlapping circles illustrating layering and opacity effects through fill colors.

Jan 4, 2023