martina.dallamico.1@studenti.unipd.it

@martinaamico·6 public vizzes

Fork of D3 v5 Zoomable Sunburst

This D3 v5 zoomable sunburst visualizes the hierarchical structure of the Flare dataset, displaying classic ring segments that expand and contract with click interactions. Built with the `d3.partition` layout and rendered as SVG, the visualization uses `d3.scaleOrdinal` with interpolated rainbow colors to differentiate top-level categories. Animated transitions are handled through `d3.transition` and `transition.attrTween`, interpolating arc geometries and label transformations in 750-millisecond sequences. The example demonstrates the modern D3 API style, including the `join` method for efficient path and text element creation from hierarchical data.

Oct 29, 2024

Loading thumbnail…

Fork of D3 Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis and sepal length on the y-axis. Each of the 150 flowers appears as a circle, with axes scaled linearly and labeled using d3.axisLeft and d3.axisBottom. The visualization uses d3.scaleLinear for coordinate mapping and d3.extent to derive the domain from the data. Built with d3.v6, the SVG is created via d3.select and rendered directly in the browser, with plot dimensions filling the entire window.

Oct 29, 2024

Loading thumbnail…

D3

This example shows a grid of alternating horizontal and vertical white rectangles on a black background, with two circular cutouts that create a cross-like overlapping pattern. It uses the Document Object Model (DOM) API to create SVG elements programmatically, including `document.createElementNS` for `svg`, `rect`, and `circle` nodes. Two SVG masks, `circle-mask` and `circle-mask2`, use contrasting fill colors to reveal or hide the rectangles. The code generates 100 horizontal rectangles and 100 vertical rectangles with fixed spacing, applying the masks to produce the final geometric composition.

Oct 22, 2024

Loading thumbnail…

Fork of Fork of solLewitt orizzontale

This example presents a generative composition of horizontal and vertical stripes on a full-screen SVG canvas. The artwork employs two SVG masks—one with a white circle on a black background and another with a black circle on white—to selectively reveal the rectangular bars. One hundred horizontal bars and one hundred vertical bars are created via JavaScript, with each set masked by a separate circle region. The code manipulates the Document Object Model using `document.createElementNS` and sets attributes like `width`, `height`, and `mask` to construct the visual, producing geometric intersections.

Oct 22, 2024

Loading thumbnail…

Fork of solLewitt

This example shows a generative, full-screen SVG composition of vertical rectangles. The visualization fills the browser viewport with 100 evenly spaced bars, each 10 pixels wide, that stretch from the top to the bottom of the window. The code uses the JavaScript DOM API to create SVG elements via `document.createElementNS` and sets the `width` and `height` attributes of the container based on the window's `innerWidth` and `innerHeight`. Each rectangle’s `x` position is calculated mathematically as a multiple of 20 pixels, producing a regular, rhythmic pattern. This is a straightforward reproduction of a Sol LeWitt-inspired drawing, relying solely on native SVG and no external libraries.

Oct 22, 2024

Loading thumbnail…

solLewitt

This example reproduces a Sol LeWitt-inspired drawing using raw SVG, creating a static geometric composition within a 960 by 500 pixel canvas. The code relies on the SVG API directly to render shapes, though the current script only includes JavaScript fundamentals and does not generate any visible artwork on the page. The SVG element is the primary rendering surface, with the body styled to hide overflow. The source material is a simple HTML file with embedded script, and no external visualization libraries are used.

Oct 22, 2024