vivienho22

@vivienho22·7 public vizzes

Data Visualisation with D3 - Sol LeWitt (D3)

This example recreates a Sol LeWitt wall drawing using D3.js, rendering an SVG that fills the browser window. It uses D3 selections and method chaining to append an SVG element to the body and set its width and height based on the viewport. The artwork is built dynamically, with the D3 library loaded via a CDN and the logic imported from a separate JavaScript module. The code emphasizes the programmatic, rule-based nature of LeWitt’s work by using D3’s core APIs for element creation and attribute manipulation.

Aug 31, 2022

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 at an oversized font scale. The code imports the `select` function from D3 v7 and uses it to set the text content of the body element. The HTML loads D3 from unpkg and includes a separate bundle script, providing a starting point for building more complex visualizations.

Aug 31, 2022

Loading thumbnail…

Data Visualisation with D3 - Sol LeWitt (Vertical)

This example reproduces a Sol LeWitt wall drawing using two overlapping masks: a central white circle on a black background, and a surrounding white rectangle with a black circular hole. A loop of 100 horizontal stripes fills the circle, while a second loop of 100 vertical stripes covers the rest of the canvas. The piece uses the SVG `mask` element and `createElementNS` to generate shapes directly, with no external data source. The result is a clean, generative art piece that mimics LeWitt’s geometric instruction-based style.

Aug 31, 2022

Loading thumbnail…

Data Visualisation with D3 - Sol LeWitt

This example reproduces a Sol LeWitt wall drawing as a generative visualization. Using plain JavaScript and the SVG DOM API, it creates 100 vertical rectangular stripes that span the full height of the browser window, each with a fixed width of 10 pixels and spaced 20 pixels apart. The code dynamically appends SVG `<rect>` elements to a full-screen SVG canvas, with dimensions set to the viewport’s inner width and height. The result is a minimalist, repeating pattern that mirrors LeWitt’s instructional art, rendered entirely through `document.createElementNS` and `setAttribute` calls without external libraries.

Aug 31, 2022

Loading thumbnail…

Data Visualisation with D3 - Pseudo Charts (Bar)

A bar chart rendered as static SVG rectangles approximates a simple data visualization without scales or axes. Three black bars and one teal bar, all drawn with explicit `x`, `y`, `width`, and `height` attributes, represent categorical values labeled "A" and "B" via `<text>` elements. The example uses no D3 JavaScript APIs, relying instead on hand-coded SVG markup, inline CSS, and a Nunito font imported from Google Fonts. A white background rectangle and black strokes on the first bar define the minimal styling.

Aug 31, 2022

Loading thumbnail…

Data Visualisation with D3 - Pseudo Charts (Line)

This example shows a minimal line chart built with raw SVG, not a traditional D3.js construction. The visualization plots five data points connected by a thick black path, where the stroke width and rounded line joins visually emphasize the connecting segments. The code uses an inline SVG element with a `path` that defines the line’s geometry via `M` and `L` commands. Although the title mentions D3, no D3 library is actually loaded; instead, the implementation relies solely on native SVG properties like `stroke`, `stroke-width`, and `stroke-linejoin` to create the appearance of a line chart. The data is hardcoded as coordinates in the path definition.

Aug 31, 2022

Loading thumbnail…

Data Visualisation with D3 - Pseudo Charts

This example visualizes a scatter plot using a pseudo-chart technique, approximating the data points as black circles positioned at arbitrary coordinates. The SVG uses `<circle>` elements to render the visualization, with each circle given a random x and y coordinate to suggest a distribution. The code relies on the SVG library and the `d3` framework, though it does not explicitly use a specific D3 API for layout or rendering. The data source is not externally loaded; instead, the circle positions are hardcoded in the markup, demonstrating a minimal, stylized approach to scatter plot construction.

Aug 31, 2022