xani

@AlexandreXavier·6 public vizzes

Fork of Fork of Double Harmonic Black and white

A web document displays a black-and-white composition of fifteen circles, all centered on a large, static canvas and rendered with an SVG. The circles are overlaid at the same center point, each with a fixed radius, creating a layered, harmonic pattern inspired by a double pendulum. The code uses d3.select to append an SVG element, d3.range to generate the data, and d3.enter to create the circle elements, with dimensions based on window.innerWidth and window.innerHeight.

May 19, 2021

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3 v6 starter template, rendering a set of 15 circles arranged sequentially in an SVG canvas. The visualization shows how to select an HTML body element, append an SVG, and bind an array of data to circle elements using the data join pattern. The code uses d3.select, d3.range, and the `.enter()` method to create circles with a fixed radius of 100 pixels. The SVG dimensions are set to match the browser window, though the variable name `h` and the attribute method contain typos that would prevent the chart from displaying correctly.

May 19, 2021

Loading thumbnail…

D3 vanila

This example demonstrates sorting an array of objects by their `key` property using plain JavaScript within an HTML page styled with CSS. The code defines three entries with keys A, C, and B, then applies the `Array.sort()` method with a comparison function that returns -1 or 1 based on ascending order. It relies on the `d3` library, specifically importing the `ascending` function from version 6.6.1, though the visible sort logic implements the comparison manually. The result is logged to the browser console, showing the reordered entries B, C, A.

May 19, 2021

Loading thumbnail…

Fork of Episode 4: Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt geometric artwork using D3.js v6 to generate a square divided into four quadrants, each filled with distinct linear patterns. The visualization uses SVG rendering with `d3.select` and `d3.range` to create hundreds of thin rectangular shapes, while SVG `<mask>` elements define the boundaries of each quadrant. Horizontal, vertical, and rotated line patterns are clipped within the masks, recreating LeWitt’s systematic, rule-based aesthetic. The code defines all layout parameters manually, including square positions and rotation transforms, producing a static, procedural homage to the original piece.

May 16, 2021

Loading thumbnail…

My Sol LeWitt

The visualization displays a series of 60 thin vertical rectangles, spaced evenly across the entire width of the browser window, each extending the full height of the viewport. This creates a striped pattern reminiscent of Sol LeWitt’s minimalist wall drawings. Built with the SVG API, the code dynamically creates the viewport-sized canvas and appends each rectangle using `createElementNS` and `setAttribute`, adjusting both the x-position and width based on the window’s dimensions.

May 14, 2021

Loading thumbnail…

start vizhub

This example renders a simple SVG rectangle positioned near the top-left of the browser window. The code uses the raw `document.createElementNS` API to generate SVG elements and sets their attributes directly, with dimensions based on the window’s inner width and height. Although the script references `window.innertWidth` (a misspelling of `innerWidth`), the drawing itself consists of a single rectangle with fixed x and width values. The page is a minimal demonstration of creating SVG graphics through vanilla JavaScript without any external libraries or frameworks.

May 14, 2021