Skip to main content
Log in
B

btlhgboy@icloud.com

@btlhgboy75·13 public vizzes

Loading thumbnail…

Fork of Fork of Sol LeWitt Reproduction with D3

This D3.js (version 7.8.5) reproduction of a Sol LeWitt art piece generates an SVG canvas filling the browser window. It draws 100 horizontal and 100 vertical bands of alternating dimensions, each masked to create a circular intersection pattern. The code uses D3’s `select`, `append`, `range`, and `data().join()` API to generate the SVG elements. Two SVG masks (`circle-mask` and `circle-mask-2`) control visibility, with the second inverting the circular mask to create complementary transparency effects.

Jan 24, 2024
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

A fork of a Sol LeWitt reproduction, this piece generates a field of 100 horizontal and 100 vertical rectangles in D3 v3. The code uses `d3.select`, `d3.range`, and SVG `mask` elements to layer the stripes. Two circular masks, one with a black background and white circle, the other with inverted colors, clip the grids to reveal intersecting patterns. The result is a dynamic geometric composition rendered at full screen size.

Jan 24, 2024
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt art piece using D3, generating a series of horizontal bars that are clipped by a circular mask. The visualization fills the entire browser window with alternating offset rectangles, creating a geometric pattern. The code uses D3's `select` and `range` functions to build SVG elements, though the mask and circle logic is present but commented out. The rendered output shows a grid of colored bands restricted to a central circular area.

Jan 24, 2024
Loading thumbnail…

Sol LeWitt Reproduction

This visualization reproduces a Sol LeWitt art piece as an SVG drawing, using a 960-by-500 canvas. The code creates a new SVG element via the DOM and appends it to the body, with the page’s CSS setting a full-bleed layout. The rendering relies solely on the SVG API and JavaScript’s `document.createElement`; no external visualization libraries are used. The artwork’s geometric composition is generated directly in the script, though the specific drawing instructions are not shown in the visible snippet.

Jan 23, 2024
Loading thumbnail…

java script base

This example reproduces a Sol LeWitt art piece as an SVG graphic. The HTML file sets up a 960 by 500 pixel canvas and uses JavaScript to define a `person` object with first and last name properties, logging it to the console. The visualization itself is static, with the code primarily demonstrating basic JavaScript syntax and object creation rather than data-driven rendering. The SVG element remains empty, with no visual output generated.

Jan 23, 2024
Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG rendering techniques for building simple data visualizations. It draws basic shapes including circles, lines, and paths, using CSS styling properties like fill and stroke. The code shows various SVG elements in combination, including a gray background rectangle, colored circles, and bezier curve paths defined with arc commands. The SVG viewBox attribute controls the coordinate system, while standard JavaScript and HTML handle the structure. The example serves as a technical reference for constructing vector graphics without relying on a visualization library.

Jan 14, 2024
Loading thumbnail…

Fork of Pseudo Slope Graph

This fork of a pseudo slope graph visualizes hypothetical changes over two points in time, mimicking a standard slope chart. It is rendered as static SVG in a single `index.html` document, with black lines connecting two vertical axes of circles. The data is represented by these fixed positions, with no interactivity or dynamic behavior. The SVG is generated from Figma, as noted in the README, and copied directly into the HTML file, using no external libraries or JavaScript APIs.

Jan 12, 2024
Loading thumbnail…

SVG Fundamentals

This example demonstrates the basic structure of an HTML page styled with CSS and driven by JavaScript, displaying the static message "Hello HTML!" centered on the screen. The CSS `font-size` and `text-align` properties control the visual presentation of the text, while the page itself contains no external libraries or data sources. It serves as a minimal starter template for web-based visualizations, showing how styling is applied directly within the document’s `<style>` block.

Jan 10, 2024
Loading thumbnail…

SVG Fundamentals

This example demonstrates the basic structure of an HTML page styled with CSS and driven by JavaScript, displaying the static message "Hello HTML!" centered on the screen. The CSS `font-size` and `text-align` properties control the visual presentation of the text, while the page itself contains no external libraries or data sources. It serves as a minimal starter template for web-based visualizations, showing how styling is applied directly within the document’s `<style>` block.

Jan 10, 2024
Loading thumbnail…

Fork of Fork of HTML Starter

This example presents a static web page that greets users with the text “Hello HTML!” centered on the screen. It demonstrates a minimalist approach to front-end development using core web technologies: HTML for structure, CSS for styling, and JavaScript for potential interactivity. The implementation relies on plain HTML elements and a CSS class to control the large, centered typography. It serves as a foundational template for projects built with the React framework, though this particular version uses no external libraries or complex rendering APIs.

Jan 10, 2024
Loading thumbnail…

Fork of HTML Starter

This is a minimal HTML page demonstrating the use of CSS for styling and JavaScript for interactivity. It displays a large, centered "Hello HTML!" message with a font size of 13em, using a `.message` class defined in the stylesheet. The page does not load external libraries or data—it is a static example of fundamental web technologies. The presentation is achieved through basic CSS properties and the HTML body structure, with no additional frameworks or APIs in use.

Jan 10, 2024
Loading thumbnail…

Fork of HTML Starter

This is a minimal HTML page demonstrating the use of CSS for styling and JavaScript for interactivity. It displays a large, centered "Hello HTML!" message with a font size of 13em, using a `.message` class defined in the stylesheet. The page does not load external libraries or data—it is a static example of fundamental web technologies. The presentation is achieved through basic CSS properties and the HTML body structure, with no additional frameworks or APIs in use.

Jan 10, 2024
Loading thumbnail…

Fork of HTML Starter

This is a minimal HTML page demonstrating the use of CSS for styling and JavaScript for interactivity. It displays a large, centered "Hello HTML!" message with a font size of 13em, using a `.message` class defined in the stylesheet. The page does not load external libraries or data—it is a static example of fundamental web technologies. The presentation is achieved through basic CSS properties and the HTML body structure, with no additional frameworks or APIs in use.

Jan 10, 2024