Dea Bardhoshi

@DeaBardhoshi·4 public vizzes

Fork of D3 Starter

This example demonstrates a minimal D3 starter template that renders a collection of rectangles in an SVG. The code uses D3’s `select` and `selectAll` with the data-join pattern to bind an array of generated objects (each with height and width properties) to SVG `rect` elements, positioning them at the origin. It relies on D3 v7, loaded via a CDN, and a `bundle.js` file, while the page also includes an embedded YouTube tutorial. No scales, axes, or interactions are present; it simply shows foundational data-binding and element creation.

Jun 19, 2023

Loading thumbnail…

Fork of Episode 4: Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using an SVG canvas. Four equal quadrants display distinct generative line patterns: horizontal bands in the top left, vertical lines in the top right, diagonal hatching in the bottom left, and a rotated diagonal grid in the bottom right, each confined by rectangular masks. The work uses D3 v6 to generate repeated rectangles via `selectAll("rect").join("rect")`, applying spatial transformations like `rotate(45)` and `translate(-100, 0)` to create geometric variations. The full browser window serves as the drawing surface, with each pattern built from 100 iterated shapes.

Jun 19, 2023

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a simple D3.js starter template that creates a vertical series of 100 rectangular bars across the full width of the viewport. The visualization uses D3’s selection and data-join API (`select`, `selectAll`, and `join`) to generate SVG rectangles positioned by their `y` attribute, with each bar spaced 20 pixels apart. The code initializes an empty SVG element within the page body and relies on D3 version 7.8.2, loaded via CDN, to construct the graphic without any external data source.

Jun 19, 2023

Loading thumbnail…

SVG Day One

A single static SVG circle centered at coordinates (100, 100) with a radius of 50 is drawn on a 960-by-500 canvas. The page’s body text is replaced with the phrase “Hello D3 version 7” using D3’s `select` API, imported from the `d3` module. The example demonstrates basic SVG shape creation alongside D3’s DOM manipulation, with the SVG markup written directly in the HTML and the text update performed via JavaScript.

Jun 8, 2023