Abdulafeez-okewunmi

@okewunmi·5 public vizzes

js

This example displays the text “Hello D3 version 7” centered on a blank page. The visualization uses the `d3.select` API from D3 v7 to target the HTML `body` element and set its text content. The styling is applied via a CSS rule in the embedded `<style>` tag, which sets the font size to 13em and centers the text. The code loads D3 from a CDN and runs the `bundle.js` script to execute the selection and text assignment.

Jun 2, 2023

Loading thumbnail…

Fork of D3-Sol-LeWitt--2

This visualization creates an abstract geometric composition by layering two sets of grid lines—horizontal and vertical rectangles—each masked by distinct symbolic shapes. It renders 100 evenly spaced bars in each direction, using SVG masks to reveal the underlying grid only within the paths of predefined symbols. The piece is built with React and D3.js, leveraging the `symbols` and `symbol` functions to generate complex path data, and the `selectAll`/`join` API to efficiently manage SVG elements. The code directly responds to the browser window size, scaling the entire artwork to fill the viewport.

Jun 2, 2023

Loading thumbnail…

D3-Sol-LeWitt--1

This example generates an abstract geometric composition inspired by Sol LeWitt, rendered as SVG. It creates a grid of horizontal and vertical stripes across the full window, then applies two circular masks with a star-shaped symbol from the d3 library. The masks use boolean-like inversion, alternating black and white fills to create contrast between the masked regions. The code uses d3’s `select`, `range`, `symbol`, and `symbols` APIs, and builds the visualization procedurally with no external data source.

Jun 2, 2023

Loading thumbnail…

D3-Sol-LeWitt

This example pays homage to Sol LeWitt by using D3.js to generate a grid of horizontal and vertical rectangles, which are only visible within the intersection of two circular masks. The visualization renders 100 stripes in each direction, with the SVG `mask` elements defining a central circle that reveals the grid against a contrasting background. The code uses D3’s `select` and `range` to create the rectangles and applies the masks for a layered, geometric effect.

Jun 1, 2023

Loading thumbnail…

SVG fundamentals

This example demonstrates fundamental SVG rendering by displaying a filled circle and a red polyline with a thick stroke on an empty 900-by-500 pixel canvas. The page uses raw SVG markup inside an HTML document, with JavaScript and CSS linked externally but not shown in the included code. The circle is defined by its center coordinates and radius, while the path uses the SVG `d` attribute to specify its line segments and `stroke-width` for thickness.

May 27, 2023