ainhoadieruiz@gmail.com

@a10ruiz·12 public vizzes

Ruesable D3 Scatter Plot

This D3.js scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis with fixed-radius green circles. It uses `d3.csv` to load the data, `d3.scaleLinear` for both axes, and `d3.axisLeft`/`d3.axisBottom` for axis ticks. The SVG canvas fills the browser window, with circles drawn via `d3.select` and `.join` for efficient rendering. Axis labels are added as SVG text elements.

Jan 23, 2024

Loading thumbnail…

2. Reusable D3 Scatter Plot

This reusable D3.js scatter plot visualizes the Iris dataset, plotting petal length on the x-axis against sepal length on the y-axis for individual flower samples. Built with d3 v6, it loads CSV data via `d3.csv` with a custom `parseRow` function to convert numeric columns, then renders circles using the `join` API. The chart uses `d3.scaleLinear` for both axes, includes axis labels, and creates a full-window SVG with fixed margins of 20 pixels on top and 30 on the bottom.

Jan 16, 2024

Loading thumbnail…

D3 Scatter Plot

This D3 scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis. The SVG rendering uses d3.scaleLinear to transform raw CSV values into pixel coordinates, with d3.min and d3.max defining the domains. Circles represent individual flowers, colored in a teal tone, while d3.axisLeft and d3.axisBottom generate labeled axes. The code loads data via d3.csv and appends text labels for both axes, using a full-window responsive layout with fixed margins.

Dec 10, 2023

Loading thumbnail…

HTML Starter

This minimal HTML page demonstrates a bare-bones web setup using inline styles, a separate JavaScript file, and the D3 library loaded via CDN. It logs the D3 object to the browser console, verifying that the library has loaded successfully. The example serves as a starting point for building more complex visualizations, showing how to structure an HTML document with linked CSS and JavaScript, while relying on D3 v6 for future data-driven graphics.

Dec 6, 2023

Loading thumbnail…

D3 Selection Exploration

This example demonstrates animated data binding in D3.js, showing how SVG circles are dynamically added, removed, and updated as the dataset changes in real time. The visualization uses D3's `selectAll` and `join` methods within a custom `vizData` function to manage circle elements, while a `setInterval` loop drives the animation at 60 frames per second. Data is generated procedurally using `d3.range` and `scaleLinear`, with each circle's position and radius varying based on sine functions of time and index. The source code imports from the D3 v6 module and renders directly to an SVG canvas in the browser.

Dec 3, 2023

Loading thumbnail…

JS Arrays

This example demonstrates the basic concept of JavaScript arrays. It shows how to create an empty array and how to add elements to the end of the list using the `push` method, as well as how to check the number of elements with the `length` property. The code is plain JavaScript executed in the browser without any external libraries or data sources, serving as a simple educational snippet for array manipulation.

Dec 3, 2023

Loading thumbnail…

Full Sol LeWitt with D3

A grid of alternating horizontal and vertical rectangles creates a full-screen Sol LeWitt–style composition, masked by two large diamond shapes. The D3 code uses `select` and `range` to generate 100 rectangles in each orientation, applying SVG `mask` elements to reveal or hide strokes. It leverages D3’s `symbol` and `symbols` APIs to draw the diamond masks, with `translate` positioning them at the center. The rendering is SVG-based, sized to the window with `innerWidth` and `innerHeight`.

Dec 2, 2023

Loading thumbnail…

Sol LeWitt with D3

This example reproduces a Sol LeWitt-style drawing using D3.js, rendering two sets of horizontal and vertical striped rectangles that intersect within circular masks on an SVG canvas. The code generates 100 of each rectangle type, with the first mask revealing a solid circle and the second inverting the pattern, creating a layered geometric contrast. It uses D3’s `select` and `range` functions from version 6.6.1 to build the SVG dynamically, positioning elements based on window dimensions.

Dec 1, 2023

Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-inspired drawing using only browser-native SVG and JavaScript. It shows a field of thin blue horizontal lines covering the full viewport, overlaid with a row of concentric white circles, and one fully filled white circle at the center. The code creates these shapes imperatively via the SVG DOM API, appending `rect` and `circle` elements inside a loop. It uses `document.createElementNS` for SVG namespace creation and `setAttribute` for geometry, with dimensions tied to `window.innerWidth` and `innerHeight`.

Nov 30, 2023

Loading thumbnail…

Sol LeWitt exercise

A reproduction of a Sol LeWitt wall drawing renders hundreds of thin blue horizontal lines across a full-screen SVG canvas. The piece generates 300 rectangles, each two pixels tall, stacked vertically to fill the viewport. It uses raw JavaScript to create SVG elements via `document.createElementNS`, setting `width`, `height`, and `y` attributes dynamically. There is no data input; the visual is algorithmic, derived from a loop with a fixed count. The result emphasizes repetition and systematic variation characteristic of LeWitt’s conceptual art, mirroring his instructions for generative line work.

Nov 30, 2023

Loading thumbnail…

Sol LeWitt

This example reproduces a Sol LeWitt drawing using SVG. It renders a grid of horizontal and vertical stripes, with a circular mask creating the illusion of layered bands across the canvas. The stripes are generated programmatically in JavaScript, using `document.createElementNS` to build SVG `rect` elements. Two complementary masks (`circle-mask` and `circle-mask-2`) alternate which stripe orientation is visible, producing a clean geometric composition that adapts to the full browser window size.

Nov 30, 2023

Loading thumbnail…

Pseudo barchart

A pseudo barchart displays ten vertical bars with varying heights, each rendered as an SVG `<rect>`. The bars use linear gradients that fade from red at the top to transparent at the bottom, creating a soft, non-standard visual style. The chart is built with static SVG elements defined in HTML, using `linearGradient` definitions to apply color transitions. No JavaScript libraries or data binding are involved; the visualization is purely declarative, with the Roboto font loaded from Google Fonts for any text styling.

Nov 22, 2023