Sergio

Scatter Plot - Plantilla

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis against sepal length on the y-axis for individual flowers. It uses d3.csv to load the data, d3.scaleLinear to map values to screen coordinates, and d3.axisLeft and d3.axisBottom to render the axes. The plot renders circles as SVG elements, sized to fit the full browser window.

Sep 12, 2025

Episode 8 - Inicio

This visualization displays a scatter plot of the Iris dataset, mapping petal length on the x-axis against sepal length on the y-axis. Each of the 150 data points is rendered as a circle in an SVG, using scaled linear axes with margins. The code loads the data via `d3.csv`, parses numeric fields, and creates circles with `selectAll` and `join`. It appends bottom and left axes using `axisBottom` and `axisLeft`, while sizing the chart to the full browser window.

Sep 10, 2025

JS en HTML

This example demonstrates a minimal HTML page that includes D3 v7 and logs a greeting message to the browser console, showing how to mix ES modules with a classic script. The `index.js` module imports a string from `something.js` using an ES module `export` and logs it alongside a D3 selection check, while `script.js` logs a simple "Hola mundo!" message. The page loads D3 from a CDN via the `d3.min.js` script tag and relies on `d3.select` to confirm the library is available.

Sep 9, 2025

Episode 5 - Funciones y módulos - 1:40hs

This example animates a set of circles whose horizontal positions, vertical positions, and radii change over time based on a sine wave, creating an undulating, breathing pattern. The animation updates every 60 frames per second, with a time variable incrementing to drive the continuous motion. The visualization uses D3.js selection and data-joining APIs to bind the generated data to SVG circles, updating their attributes each frame. The data is created in a separate module, generating coordinates and sizes from a mathematical function of time and index.

Sep 9, 2025

Episode 5 - selecciones con D3 - update - 1:22hs

This example demonstrates dynamic data binding in D3 by continuously updating a set of circles that roam across the screen. An interval-driven animation recalculates the number and positions of circles based on a sine wave, while `selectAll` with `enter`, `merge`, and `exit` handles the creation, update, and removal of SVG elements. The code uses D3 v7’s `select`, `range`, and explicit update pattern, rendering directly to an SVG canvas sized to the viewport.

Sep 8, 2025

Episode 5 - selecciones con D3 - 00:00

A looping animation draws fifteen circles in an SVG, each repositioned horizontally and vertically every second. The circles move along a sine wave pattern, with their Y coordinates calculated from the index and a time variable. The code uses D3.js with the `select` and `range` APIs, selects all circle elements, and binds new data arrays to append them. The animation runs via `setInterval`, updating the scene continuously against the full browser window.

Sep 8, 2025

Episode 5 - 00:00

This example demonstrates a minimal data-processing snippet that sorts an array of key-value entries alphabetically by their `key` field. The code imports the `ascending` function from the D3 library (version 7.9.0), though it ultimately uses a custom comparator with `Array.sort` to order the entries. The visualization consists of an HTML page with a single `index.js` script and a `styles.css` file that defines a large centered message class, but no graphical output is rendered.

Sep 8, 2025

Sol LeWitt con D3 - Symbols

This example recreates Sol LeWitt-style geometric art using D3 v6, generating a grid of horizontal and vertical rectangles in SVG. Two masks, each containing a large D3 symbol path, cut circular holes through the intersecting lines, creating overlapping negative space. The visualization uses `d3.select`, `d3.range`, `d3.symbol`, and `d3.symbols` to construct the shapes programmatically, with masks applied via D3's selection and call methods. A third triangle symbol appears on the left, rendered with `d3.symbolTriangle`.

Sep 6, 2025

Full Sol LeWitt con D3

This example renders a grid of horizontal and vertical rectangles using D3’s `select`, `range`, and `join`. Two SVG masks, created via `append('mask')` and `attr('id')`, cut a diamond-shaped hole in the grid, with one mask inverted to show contrasting fill. The code uses `symbol` and `symbols[3]` to draw the diamond path, and `svg.call` to apply masks. It runs at full browser size with no external data, relying on D3 v6.6.1 and SVG rendering.

Sep 5, 2025

Sol LeWitt con D3 multiples símbolos

This example generates a grid of horizontal and vertical rectangles using D3.js and applies two SVG masks to create a Sol LeWitt-inspired pattern. The masks are built with the `symbol` and `symbols` APIs, rendering each of D3’s predefined symbol shapes (like circles, crosses, and diamonds) at a large size. One mask uses inverted colors to alternate the visible pattern, while the other uses standard masking. The code leverages `select`, `range`, and `join` to efficiently create the 100 rectangles per direction, all rendered as SVG on a full-window canvas.

Sep 4, 2025

Fork of Fork of Chapter 3 - D3 - uso de group

This example generates a Sol Lewitt-inspired geometric composition using D3 v6 and SVG. It draws 100 horizontal and vertical rectangles across the full viewport, then applies two complementary circle masks to cut out circular voids and reveal the grid within. The code uses D3 selections, `range`, and `join` to create the rect elements, while `append('mask')` constructs custom mask definitions that alternate black and white fills to control visibility.

Fork of Chapter 3 - D3 - uso clases

This example creates an abstract Sol LeWitt-inspired drawing using SVG masks. It renders a grid of alternating horizontal and vertical rectangles that are partially revealed through two circular masks, producing an interplay of visible and hidden stripes. The code uses D3's `select`, `range`, and `join` API to generate the rectangles and construct the masks. The visualization is built with a Vue-based D3 version (v3), rendering to SVG, with the masks defined as `mask` elements containing `rect` and `circle` shapes.

Chapter 3 - D3 - opcion range

A wall of alternating horizontal and vertical striped rectangles is clipped by two circular masks, creating an interplay of opaque and transparent regions. Rendered as an SVG using Vue and D3 v6, the visualization uses `d3.range` to generate 100 equally spaced values for positioning the bars. Two masks are defined: one with a black background and white circle to show the bars only inside the circle, and another with the inverse to hide them there. The code leverages D3's `select` and `append` methods to construct the SVG and mask elements.

Chapter 3 - D3

A full-screen compositional drawing uses horizontal bands with an SVG mask to reveal a circular window into the stripes. The code generates 100 rectangles via `d3.range` and data joins, then applies a mask defined with a circle element to clip the view. Built with D3 v6 and Vue, the SVG is rendered directly to the browser window, demonstrating simple geometric pattern-making through data-driven shape generation.

Ejercicio clase 3

An abstract, generative composition uses two SVG masks to reveal intersecting rectangular grids. The first mask, defined with a `<rect>`, limits a series of horizontal strips to a central vertical band, while the second mask combines a white background with a black `<rect>` to define a complementary area for vertical strips. The resulting visual, created with 100 elements per axis, produces a woven or striped pattern using only white and black. The code demonstrates dynamic SVG creation and mask application without any external libraries.

Sol LeWitt dos mascaras

This example generates a dynamic, Sol LeWitt-inspired abstract composition using an SVG mask API. Two masks invert visibility: the first reveals a circle of horizontal stripes, while the second displays vertical stripes within a donut-shaped region. The code uses pure JavaScript and the Document Object Model (DOM) to create SVG elements, including `<mask>`, `<circle>`, and `<rect>` tags, without any external libraries. Rendering relies on the viewport’s width and height to size the artwork, which appears as an interplay of masked rectangular stripes.

Sol LeWitt mascara circular

A circular area in the center of a web page displays a pattern of 30 horizontal white bars, while the surrounding space remains black. The effect is achieved using Scalable Vector Graphics (SVG) masking, where a white circle reveals the bars inside, and a black background rectangle hides them outside. Built with Vue.js, the code dynamically creates the SVG elements using the JavaScript DOM API.

Sol LeWitt lineas horizontales

This example recreates Sol LeWitt’s horizontal line wall drawing using 30 overlapping black rectangles that fill the entire browser window. The SVG is created dynamically via the Document Object Model (DOM) API, with rectangle elements positioned at fixed vertical intervals and sized to the viewport’s width. The code uses `createElementNS` and `setAttribute` to generate the vector graphics, producing a minimalist, generative composition that mirrors the artist’s geometric style. No external libraries are required.

Sol LeWitt lineas verticales

This example generates a static, full-window SVG visualization of vertical lines, inspired by Sol LeWitt's minimalist wall drawings. It shows one hundred narrow rectangles arranged evenly across the screen, each with a fixed width and height matching the viewport, creating a rhythmic pattern of alternating line and gap. The code uses the plain Document API with `createElementNS` and `appendChild` to construct SVG `<rect>` elements dynamically in a loop. The dimensions derive from `window.innerWidth` and `window.innerHeight`, and the styling comes from a linked stylesheet, though no external rendering library is used.

Sol LeWitt Reproduction

This visualization reproduces a Sol LeWitt-style geometric drawing using layered horizontal and vertical bands that appear only within a central circular region. The piece shows a grid of striped rectangles intersecting with a circular cutout, creating the illusion of masked lines across the canvas. Built with vanilla JavaScript and the SVG API, the code constructs two mask elements—one revealing the horizontal stripes and another inverting the vertical ones—to clip the shapes. The rendering uses dynamic width and height values from the window, ensuring the composition scales to the full viewport.

Chapter 3 Sol Lewitt

This example reproduces a Sol LeWitt-inspired drawing by rendering 100 vertical rectangles in a loop, using the SVG API to create and append elements directly to the page. The code sets the canvas to the full window size and places each rectangle with a fixed width of 10 pixels and a horizontal spacing of 20 pixels, extending each shape to the full height of the viewport. The visualization demonstrates a minimalist, grid-like composition driven entirely by JavaScript and native SVG methods, with no external libraries or data sources.

pseudo grafico de barras

This pseudo bar chart displays four labeled categories (A, B, C, D) with black horizontal bars of varying widths. Each row pairs a text label on the left with a SVG `rect` element on the right, where the `width` attribute encodes the value. The static SVG markup uses literal numeric dimensions for bars, with labels styled via the Share Tech webfont. The chart has no axes, gridlines, or interactivity; it relies purely on proportional rectangle lengths for comparison.

primeros pasos

This example shows four black vertical bars of varying heights arranged across a 600-by-500 SVG canvas, creating a simple ranking or categorical comparison. No JavaScript libraries are used; the visualization consists solely of static SVG `<rect>` elements defined directly in the HTML markup. Each rectangle has an explicit `x`, `y`, `width`, and `height` attribute, with heights descending from left to right. The data source is embedded in the markup itself, and the rendering relies on the browser’s native SVG support without any interaction or animation.

Fork of Exercise 1: SVG Fundamentals

This animated SVG scene depicts a surreal landscape with a gradient sky and layered terrain. The visualization uses native SVG elements, including radial and linear gradients for the sky and landmasses, and a circle that moves vertically to represent the sun. The code employs SVG animation features, specifically the `animate` attribute for color cycling and the circle's `cy` property, to create a slow, looping cycle. It is a static HTML page with embedded SVG, styled by a minimal CSS file, and serves as a fundamental exercise in vector graphics.

Fork of SVG Animations using CSS transitions

A single SVG canvas displays two red rectangles with black borders. One rectangle is large and centered, while the other is small and placed in the corner. The visualization demonstrates CSS transitions applied to SVG elements, where the `transition: all 3000ms` rule animates any property changes over three seconds. When the mouse hovers over a rectangle, the `rect:hover` pseudo-class triggers a change in fill color to green and increases the stroke-width to 150 pixels.

Fork of Blank Slate with Hot Reloading

This example displays the text "Hola mundo!" at a large, adjustable font size using plain HTML and inline CSS within a container. The code sets a fixed pixel font size with a left text alignment, and the interactive aspect—allowing users to change the number via Alt-drag—comes from the hosting environment. It does not use any external visualization libraries, instead relying on the `container.innerHTML` property to inject the rendered markup directly.

Sep 1, 2025

mask test

A generative art piece reproduces a Sol LeWitt-style composition using an SVG mask. The page creates a circular mask centered on the screen, filled with a black circle over a white rectangle. One hundred horizontal stripes, each 10 pixels tall, are drawn across the full viewport width and clipped by this mask, revealing the pattern only within the circle. The code uses native `document.createElementNS` to construct SVG elements, setting the `mask` attribute on each rectangle and a `circle-mask` definition.

Aug 18, 2025

Sol LeWitt Reproduction Vertical

This piece recreates a Sol LeWitt-inspired drawing as a dynamic, full-screen SVG. The visualization shows a series of 100 horizontal black bars, each 10 pixels tall, confined to a circular aperture centered on the screen. The code generates the artwork procedurally, using JavaScript to build the SVG structure and the `mask` element to clip the rectangles into the circle. The result is a clean, generative geometric composition that responds directly to the browser window's dimensions.

Aug 18, 2025