MirekBXL

@MirekBXL·10 public vizzes

Mirek - D3 Scatter Plot

This example shows a scatter plot of the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis. It uses the d3.csv loader to fetch data from a remote gist URL, then applies d3.scaleLinear with d3.extent to derive continuous scales for each axis. The plot is rendered as an SVG via d3.select and append, with circles positioned through data marks and axes drawn using d3.axisLeft and d3.axisBottom. The chart fills the entire browser window, with margins applied around the plot area.

Mar 24, 2023

Loading thumbnail…

Mirek - D3

Animated circles move vertically and pulse in size along a horizontal line, creating a wave-like rhythm. The visualization updates at 60 frames per second using a `setInterval` loop that increments a time variable. Each frame, the `prepData` function generates new positions and radii from sine functions, while the `vizData` function renders them as SVG circles via D3's data join. The code uses D3 v6 modules `select`, `range`, and the `.join()` pattern.

Mar 23, 2023

Loading thumbnail…

Mirek - JavaScript

This example displays a large, centered “Hello HTML!” message in the browser, with the page styled through a simple CSS rule. Beneath the text, JavaScript constructs an array of ten integers using a custom `range` function and logs each number to the console via a `forEach` loop and `console.log`. No external libraries or visualization APIs are used; the piece relies solely on vanilla JavaScript, HTML, and CSS, providing a minimal demonstration of array generation and iteration within a web page.

Mar 22, 2023

Loading thumbnail…

Mirek - Full Sol LeWitt Reproduction w/ D3

This reproduction of a Sol LeWitt wall drawing uses D3.js to render a grid of intersecting black and white lines. The visualization shows 100 horizontal and 100 vertical rectangles, each masked by a large geometric symbol. The piece uses `select`, `range`, `symbols`, and `symbol` from D3 to generate SVG output. Two masks, one inverted, apply distinct shapes to the horizontal and vertical line groups, creating a layered, patterned effect across the full browser window.

Mar 22, 2023

Loading thumbnail…

Mirek - Sol LeWitt Reproduction w/ D3

This example reproduces a Sol LeWitt art piece using D3 version 6 and SVG rendering. It displays two sets of overlapping thin rectangles—horizontal and vertical stripes—each masked to reveal a circular region in the center. The code uses `d3.select`, `d3.range`, and SVG `mask` elements with black-and-white circles to create the cutout effect, with the second mask inverting the visibility to alternate layer patterns across the full window size.

Mar 22, 2023

Loading thumbnail…

Mirek - Sol LeWitt Reproduction

A Sol LeWitt-inspired generative drawing uses overlapping horizontal and vertical black stripes that appear only within a central circular region, created with SVG masks. Two mask definitions (`circle-mask` and `circle-mask-2`) isolate the stripe layers, producing a checkerboard-like grid inside the circle while leaving the surrounding canvas empty. The code builds 100 horizontal and 100 vertical rectangle elements with alternating dimensions, applying each mask to control visibility. This pure JavaScript example constructs the SVG document programmatically via `createElementNS` and `appendChild`, with no external libraries or data source.

Mar 21, 2023

Loading thumbnail…

Mirek - Sol LeWitt Reproduction Vertical

A full-screen SVG reproduction of a Sol LeWitt drawing displays a grid of vertical stripes overlaid with horizontal bands visible only through a circular mask, creating a stark contrast between masked and unmasked areas. The code builds the scene using the SVG namespace, generating 100 horizontal rectangles and 100 vertical rectangles, with a masked circle centered on the canvas revealing a 200-pixel radius region. The mask element, defined with a black rectangle and white circle, controls which horizontal bars appear, while the vertical bars remain fully visible across the entire viewport.

Mar 20, 2023

Loading thumbnail…

Mirek - Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-style minimalist drawing using raw SVG elements created via the DOM API. It displays a series of one hundred thin vertical black rectangles, each ten pixels wide, evenly spaced across the full viewport height and horizontally offset by twenty pixels. The rendering relies on `document.createElementNS` to generate each `rect` element and appends them to an SVG container sized to the browser window. No external libraries or data sources are used; the pattern is procedurally generated in a simple loop.

Mar 20, 2023

Loading thumbnail…

Mirek SVG Fundamentals

A demonstration of basic SVG shapes and animation, this example shows a stylized green leaf drawn with a path and paired with two light-gray circles. The entire shape group moves horizontally across a 960-by-500 canvas via an SVG `<animateMotion>` element, which follows a linear path from left to right over ten seconds. The drawing uses raw SVG elements—`<circle>`, `<path>`, and `<g>`—with attributes for fill, stroke, and transforms, relying purely on browser-native SVG rendering without any external JavaScript libraries.

Mar 20, 2023

Loading thumbnail…

MIREK SVG Fundamentals

This example demonstrates fundamental SVG shapes and attributes in a static 960×500 canvas. It shows overlapping red and green circles, a thick navy diagonal line, a horizontal path with rounded corners, and a black angular polyline. The code uses raw SVG elements—`circle`, `line`, and `path`—with inline fill, stroke, and stroke-width styling. Rendering relies on the browser’s native SVG support via the `svg` tag, with no external JavaScript libraries or data sources.

Mar 19, 2023