neojournalist

@neojournalist·5 public vizzes

sol lewitt2

This example reproduces a Sol LeWitt-inspired geometric composition using D3 selections and SVG masks. It draws two intersecting sets of thin horizontal and vertical rectangles, each masked by a large circular symbol defined via `d3.symbol` and `d3.symbols`. The first mask uses a light-on-dark pattern, the second an inverted dark-on-light pattern, creating layered contrast across the full window. The code relies on `d3.select`, `range`, `symbol`, and SVG `mask` elements to generate the visual, with a hardcoded `n` of 100 for the line spacing.

Nov 14, 2022

Loading thumbnail…

Untitled

This example presents a histogram of the `price` values from a single-column CSV dataset. Built with React and D3 v4, it creates an SVG visualization with a linear x-axis and automatically binned y-axis counts. The code explicitly uses `d3.scaleLinear`, `d3.histogram`, and `d3.axisBottom`/`d3.axisLeft` to render the distribution, with bars filled in olive. Data is fetched from a remote GitHub-hosted CSV using `d3.csv`, and the histogram bins are defined by the domain and 19 ticks.

Nov 11, 2022

Loading thumbnail…

ep 2 Sol LeWitt

A web page reproduces a Sol LeWitt wall drawing using SVG, where horizontal and vertical stripes are clipped by two circular masks to create overlapping geometric forms. The page builds the composition dynamically with JavaScript, creating a full-screen SVG and adding one hundred horizontal bands intersected by one hundred vertical bands. Each band, drawn as a thin rectangle, is masked so that horizontal stripes appear within one circle and vertical stripes within another, producing the characteristic minimal, grid-like pattern. The code uses the SVG `<mask>` element and `document.createElementNS` API to assemble the artwork entirely in the browser.

Nov 11, 2022

Loading thumbnail…

SVG F2

This example demonstrates a static SVG composition featuring a large orange circle with violet rectangles positioned around its perimeter and a navy polyline connecting three points. The rendering relies on raw SVG elements—`circle`, `rect`, `line`, and `path`—defined directly in HTML without any JavaScript libraries. The `path` element draws a magenta zigzag line using absolute coordinates, while the `rect` and `line` elements use explicit `x`, `y`, and `stroke` attributes to define shapes and strokes. The SVG canvas is set to 960 by 500 pixels, and all styling is applied inline.

Nov 8, 2022

Loading thumbnail…

SVG 1

A bare SVG scene displays primitive shapes—two circles, a rectangle, a thick navy line, and a black polyline path—positioned on a 960-by-500 canvas. The example uses raw SVG markup within an HTML page, with no JavaScript or external libraries, relying on default shape styling except for explicit fill and stroke attributes. A red circle and a navy line demonstrate explicit color and stroke-width properties, while the empty rectangle shows default rendering behavior.

Nov 8, 2022