Erik L

@eriklampo·11 public vizzes

Pagina con ChatGPT-4 e DALL-E API

This example demonstrates a web interface for generating both text and images using OpenAI’s APIs, with ChatGPT-4 handling prompt responses and DALL-E producing matching visuals. A user enters a prompt in an HTML input field, triggering a fetch request to the ChatGPT-4 completion endpoint, which stores the response text in an array and displays it as slides in a scrollable container. Simultaneously, a second fetch call to the DALL-E image API generates three images, rendered as 200x150 pixel thumbnails. The UI is styled with vanilla CSS, including a search bar, image container, and horizontal slide layout, with no external JavaScript libraries beyond the browser’s built-in fetch API.

Jul 27, 2023

Loading thumbnail…

Tazza da te

This example is an animated, interactive simulation of making a cup of tea, presented as a visual metaphor for a loading and process flow. It shows a simple progress bar filling up to represent pouring water, and uses JavaScript prompts to ask the user yes/no questions about turning on the electric kettle and adding a tea bag. The code relies on core browser APIs like `setInterval`, `setTimeout`, `prompt`, and `console.log`, with CSS transitions animating the progress bar's width. The project is built using vanilla JavaScript within an HTML page, with no external libraries, and uses a React Starter as a reference for the setup.

Feb 3, 2023

Loading thumbnail…

Untitled

This example demonstrates a minimal HTML page that outputs a test message to the browser console. The page uses JavaScript’s built-in `console.log` method to print “Questo è un output di test.” when loaded, but does not render any visual charts or graphics. The code is contained within an HTML document that imports no external libraries, relying solely on the browser’s native scripting environment. It serves as a basic scaffold rather than a full data visualization.

Feb 2, 2023

Loading thumbnail…

Range.map

This example demonstrates how to generate and transform numeric data using JavaScript’s `Range.map` pattern. It defines a `range` function that creates an array of numbers from 0 up to a specified count, then calls `.map()` on that array to convert each number into an object containing the original number and its triple. The resulting array of objects is logged to the browser console. The code uses plain JavaScript array methods within a minimal HTML page, with no external libraries or visualization framework.

Jan 31, 2023

Loading thumbnail…

random array Html

This example demonstrates a randomly shuffled array of numbers from 1 to 90 displayed as a vertical list of individual paragraph elements. The code first builds the array, then applies the Fisher-Yates shuffle algorithm using JavaScript’s `Math.random()` to permute the order. Each resulting number is rendered into a `<p>` element via the DOM API `document.createElement` and appended to a container. The page uses no external libraries, relying solely on vanilla HTML, CSS, and JavaScript within a single `index.html` file.

Jan 31, 2023

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example recreates a Sol LeWitt-inspired drawing using overlapping horizontal and vertical bands masked by circular cutouts. It shows how geometric compositions can emerge from simple repetitive elements. The code uses vanilla JavaScript and SVG, creating masks via `createElementNS` and appending 100 rectangles in each direction to the DOM. A D3 selection imports `select` from the d3 library, though the SVG construction is entirely manual, rendering at full window dimensions.

Jan 29, 2023

Loading thumbnail…

Array method

This example demonstrates a JavaScript array-shuffling algorithm. It creates an array containing the numbers 1 through 90, then randomizes the order of those elements using the Fisher–Yates shuffle technique. The shuffled array is output to the browser’s console via `console.log`. The page uses no external libraries; it relies solely on vanilla JavaScript and the native `Math.random` function for randomness. The code is embedded directly in a minimal HTML file and executes on page load, with commented-out variations showing alternate array sizes.

Jan 29, 2023

Loading thumbnail…

Fork of Sol LeWitt Reproduction

A fork of a Sol LeWitt reproduction renders a grid of horizontal and vertical stripes confined to two circular masks. The piece uses raw SVG elements created via the DOM API, with a mask containing a white circle over a black rectangle to reveal horizontal bars, and a second inverted mask to show vertical bars. Each stripe is a `rect` element positioned in a loop, with the masks applied via the `mask` attribute. The composition dynamically fills the browser window, creating a minimalist geometric interplay between line and void.

Jan 20, 2023

Loading thumbnail…

Fork of HTML Starter

This example creates an SVG mask that reveals horizontal stripes through a circular window. The code generates 100 horizontal rectangles, each masked by a circle centered on the screen, while 100 vertical rectangles overlay the full canvas without masking. All shapes are built dynamically using the SVG namespace with `document.createElementNS`, and the mask is defined with a black background rect and white circle to control visibility. The result is a simple geometric pattern combining masked and unmasked grid-like elements.

Jan 20, 2023

Loading thumbnail…

Sol lewitt

This example renders an interactive-free generative drawing inspired by Sol LeWitt, filling the browser viewport with a series of vertical bars. The artwork is created using raw SVG elements via the Document Object Model API, specifically `createElementNS` and `setAttribute`, inside a plain HTML page. A loop of 100 iterations draws rectangles with a fixed x-position and incrementing width, extending full height, producing a striped composition. The code relies solely on vanilla JavaScript and SVG, with no external libraries, and automatically adapts to the window's dimensions.

Jan 19, 2023

Loading thumbnail…

Fork of Fork of Main Viz | Protype Dev

This example presents a prototype visualization with a central radar chart surrounded by quadrant-based annotations and interactive elements. Using D3.js v5, it renders SVG graphics with linear scales for coordinate mapping, arc generators for circular segments, and custom gradient definitions to color each quadrant. The data is loaded from a CSV file of car productions, while the layout incorporates multiple side panels for supplementary content. The visualization demonstrates advanced SVG manipulation, including axis removal, custom path generation, and gradient styling through D3's selection and data-binding methods.

Jan 19, 2023