Sinasirousnejad

@Sinasirousnejad·6 public vizzes

java script arrays

This example visualizes a set of 15 circles arranged in an SVG canvas that fills the browser window. It demonstrates basic data binding in D3 version 6.6.2 by creating a data array with the `range` function and mapping it to circle elements. The code uses the `select` method to target the body element and appends an SVG container, then applies the data to create circles via `selectAll` and the `.data` method. The circles are rendered using SVG, with the viewport dimensions taken from the browser window properties.

Oct 3, 2023

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3 setup by rendering the text “Hello D3 version 7” in the center of the page. It uses the D3 v7 library, imported via `select` from the ES module bundle, to target the body element and set its text content. The page’s large font size is defined in CSS, while the D3 script loads from a CDN and an external `bundle.js` file contains the main logic. No data or complex visualizations are involved; the focus is solely on initializing a D3 project.

Oct 3, 2023

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt-inspired geometric composition using D3 version 6. It displays a grid of alternating horizontal and vertical black rectangles, masked to reveal a central white circle against a dark background, creating a cross-hatched circular motif. The code uses `d3.select`, `range`, and data joins (`.join()`) to generate SVG `<rect>` elements dynamically. Two SVG masks (`circle-mask` and `circle-mask-2`) with white and black circles, respectively, control which parts of the overlapping stroke pattern remain visible. The rendering is entirely SVG-based, with dimensions set to the full browser window.

Sep 12, 2023

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

Two intersecting sets of thin rectangular bars—one horizontal, one vertical—form a dense grid across the full browser window. A large diamond-shaped mask cuts through the center, inverting the visibility of each set so that the pattern appears to swap between foreground and background. Built with D3 v6, the visualization uses `range`, `select`, and `join` to generate the bars, while custom SVG `mask` elements, created with `symbol` and `symbols`, apply the inverted diamond cutout. The result is a dynamic, screen-filling reinterpretation of a Sol LeWitt geometric piece.

Sep 11, 2023

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt–inspired wall drawing as a series of horizontal SVG bars, each masked by a circular clip path. Built with D3 v7 and React, the code uses `select` to append an SVG and `range` to generate 100 marks with increasing y positions. The bars stretch across the full viewport width, creating a striped pattern that is visually cropped into a circle by the mask reference. The rendering approach relies on SVG mask elements rather than geometric clipping, demonstrating a simple, grid-based generative composition.

Sep 10, 2023

Loading thumbnail…

Untitled

This example demonstrates VizHub’s ability to load D3 via UNPKG and use ES6 modules locally. It imports the `select` function from D3 and a custom `message` constant from `./myMessage`, then sets the text of a `#message` div to display “Hello VizHub!”. The page is styled with centered, large text via `styles.css`, while the HTML shell loads a bundled script. It serves as a minimal template for combining external libraries with modular JavaScript in a VizHub environment.

Nov 28, 2022