F

Francisco Ibelles

@panchoibelles·30 public vizzes

Loading thumbnail…

reusable scatter plot

A reusable scatter plot displays the classic Iris dataset, with points representing individual flowers. An animation cycles the x-axis through different measured attributes—petal width, sepal width, petal length, and sepal length—every two seconds, allowing viewers to compare correlations between features. The chart uses D3.js APIs including `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` within a custom `scatterPlot` function, which updates circles and axes via selection joins. Rendered as SVG, the visualization leverages data-driven transitions to dynamically explore multivariate relationships.

Loading thumbnail…

d3 scatter plot

This example visualizes the classic Iris dataset as a scatter plot, comparing petal length on the x-axis with sepal length on the y-axis for 150 flowers. The visualization uses D3 v7 with vanilla JavaScript to load the CSV data via `d3.csv`, parse the numeric fields, and render SVG circles positioned through `d3.scaleLinear` scales. Axes are drawn using `d3.axisLeft` and `d3.axisBottom`, while the chart fills the entire browser viewport with margins applied around the plot area.

Loading thumbnail…

js in html

This example demonstrates a minimal HTML page that imports and logs a JavaScript module. It uses ES6 module syntax with `import` and `export` to load a constant value from a separate file. The page displays the text "Hello HTML!" in a large, centered message using inline CSS styling. The code shows how to structure a basic project with separate JavaScript files and the browser's module support.

Loading thumbnail…

select_example

A set of twenty circles animates vertically in a sine-wave pattern across the screen, using color and position to create a flowing, undulating line. The visualization is built with D3.js, leveraging the `select`, `range`, and `selectAll` APIs to bind data and update the SVG elements. Each frame, the circle’s y-coordinate is recalculated based on a sine function with a phase shift, producing smooth motion at 40 frames per second. The SVG canvas fills the entire browser window, and the animation runs continuously in a loop.

Loading thumbnail…

array javascript

This example shows a minimal HTML page that sorts a JavaScript array of numbers in ascending order and logs the result to the browser console. The page relies on native JavaScript’s `Array.prototype.sort()` method with a comparator function, and outputs the sorted array using `console.dir()`. Styling is applied via a CSS rule for a large centered message, though no visual chart or WebGL rendering is present. The code demonstrates basic data manipulation with a plain array literal, but no external libraries or visualization APIs are used.

Loading thumbnail…

array javascript

This example demonstrates a minimal HTML page that uses CSS and JavaScript to display a large, centered text message. The code defines a `.message` class with a font size of 13em and text alignment, then applies it to a single `<div>` element containing the text “Hello HTML!”. It does not use any external libraries or frameworks, relying solely on plain HTML, CSS, and JavaScript. The page serves as a starting point for interactive data visualization projects.

Loading thumbnail…

Sol LeWitt reproduction with d3 (symbols)

This example recreates a Sol LeWitt-inspired drawing using D3.js by layering two perpendicular sets of striped rectangles. Horizontal bars appear only within a circular region defined by an SVG mask, while vertical bars are masked to the inverse shape, creating a clean intersection of stripes inside the circle. The code uses `d3.range`, `d3.select`, SVG `rect` elements, and `symbol` with `symbols[2]` to generate the circle mask paths. The visualization is rendered entirely in the browser with D3 v7, filling the viewport dynamically.

Loading thumbnail…

Sol LeWitt reproduction with d3

This example reproduces a Sol LeWitt–inspired geometric composition using D3 v7. It renders a grid of horizontal and vertical bars, each clipped by a circular mask to create a bold, minimalist pattern. The code uses `d3.select`, `d3.range`, and `join` to generate SVG `<rect>` elements, while two overlapping masks (`circle-mask` and `circle-mask-2`) selectively reveal or hide bars within and outside the central circle. The result is an interplay of lines and negative space, driven entirely by SVG primitives and data-driven iterations.

Loading thumbnail…

Fork of Fork of Sol LeWitt reproduction mask

This piece renders a grid of horizontal and vertical black bars that form a circular composition, visually echoing the geometric style of Sol LeWitt. The work uses a double-masking technique in SVG to create the pattern: a white circle on a black rectangle masks the horizontal bars, while a black circle on a white rectangle masks the vertical ones. The code generates the SVG directly via the DOM API, computing bar lengths and counts from the window dimensions. The result is an abstract, generative artwork that highlights the interplay of line, form, and negative space.

Loading thumbnail…

Fork of Sol LeWitt reproduction (horizontal)

This generative visualization creates a minimalist wall of evenly spaced horizontal bars that extend across the full screen width. The code calculates bar height and count dynamically based on the browser window’s dimensions, using a fixed bar length of 10 pixels with doubled padding between each band. It constructs an SVG element via the DOM API (`document.createElementNS`), sets its width and height attributes to the viewport size, and appends each rectangle sequentially. The effect is a clean, repetitive grid pattern inspired by Sol LeWitt’s geometric art, rendered purely through JavaScript without external libraries, responding directly to the viewing environment.

Loading thumbnail…

Sol LeWitt reproduction

This example reproduces a Sol LeWitt-inspired drawing using only native browser APIs, with no external libraries. It creates a vertical striped pattern by generating a series of SVG `<rect>` elements, each 20 pixels wide, spaced evenly across the full viewport width and height. The code computes the number of rectangles needed based on `window.innerWidth` and a fixed padding of twice the bar length, then appends them to the document body using the SVG namespace (`http://www.w3.org/2000/svg`). The result is a minimalist, monochromatic composition that fills the entire screen, adapting automatically to any window size.

Loading thumbnail…

barchar

This bar chart displays the frequency distribution of categorical data across twenty-six groups labeled A through Z. The y-axis measures frequency on a scale from 0.00 to 0.12, with each bar’s height proportional to its value. Rendered as an SVG using Observable Plot’s mark-based API, the chart includes a labeled y-axis for frequency and discreet x-axis tick marks for each category, presented in a minimal, clean style.

Loading thumbnail…

SVG fundamentals

This example demonstrates fundamental SVG shapes, including circles, rectangles, lines, and paths, rendered directly in an HTML document. The code uses the native SVG API with elements such as `<circle>`, `<rect>`, `<line>`, and `<path>`, showing attributes like fill, stroke, stroke-width, and path commands (M, L, H, A). A commented-out rectangle and path illustrate alternative configurations, while the visible paths show open and closed contours with varying coordinate systems. The rendering is purely vector-based, requiring no external libraries or data sources.

Loading thumbnail…

animation cirlce of Reusable for scatter plot with Menu

This interactive scatter plot visualizes the Iris dataset, allowing users to compare different quantitative and categorical measurements through dropdown menus that select the X and Y axes. The visualization implements a reusable chart pattern using D3 v7, with smooth 3-second transitions animating circles to their new positions via `transition()`. The chart adapts its scales—using `scaleLinear` for quantitative data and `scalePoint` for categorical species—while updating axes and labels through D3's `axisLeft` and `axisBottom`.

Loading thumbnail…

Fork of text, animation cirlce of Reusable for scatter plot animation

This example animates the Iris Dataset through a reusable scatter plot that cycles through different column pairs, colors, and axis labels every ten seconds. The visualization uses D3 v7 with SVG rendering, employing scaleLinear for axes, axisLeft and axisBottom for ticks, and transition with duration and delay parameters to animate circle positions and fills between updates. The reusable chart pattern via scatterPlot() allows dynamic reconfiguration of xValue, yValue, color, and text properties. Data loads from a CSV URL with type coercion, and the animation loop updates the plot parameters continuously.

Loading thumbnail…

animation cirlce of Reusable for scatter plot animation

This example demonstrates a reusable scatter plot that cycles through the Iris dataset, rotating between the four measurement columns for the x- and y-axes while also shifting the point color through a sequence. The animation, built with D3.js v7, uses the `transition` API to smoothly interpolate the positions and colors of the SVG circles over 3-second intervals. The `scatterPlot` custom component separates chart configuration from rendering, and the code loads data from a CSV file hosted in a GitHub Gist, with axes and circles re-rendered on each update.

Loading thumbnail…

Fork of Reusable for scatter plot animation

This interactive scatter plot animates the classic Iris Dataset, cycling through different feature pairs (petal width, petal length, sepal width, sepal length) every two seconds with a matching color change. Built using a reusable D3 module, it leverages d3.scaleLinear for axes, d3.extent for domains, and d3.axisLeft/axisBottom for rendering. The SVG circles are updated via a setInterval that reconfigures the scatterPlot function’s x-value and color accessors, while a join pattern handles the transitions. The data is loaded from a remote CSV using d3.csv.

Loading thumbnail…

Reusable for scatter plot

This reusable scatter plot visualizes the Iris Dataset, mapping petal length against sepal length with color-coded circular marks. Built with D3 v7, it demonstrates a modular chart factory pattern where configuration methods like `.width()`, `.data()`, and `.radius()` are chained to customize the visualization. The code uses `d3.scaleLinear` for coordinate mapping, `d3.axisBottom` and `d3.axisLeft` for axes, and renders SVG circles and groups. Data loads from a remote CSV file and is parsed with type coercion for numeric columns.

Loading thumbnail…

Fork of D3 Scatter Plot Vanilla Javascript (simple_example)

This example shows a scatter plot of ice cream prices against temperatures, with twelve data points plotted on a fixed 10–26°C x-axis and 0–700 price y-axis. The visualization uses d3.v7’s `scaleLinear`, `axisLeft`, `axisBottom`, and SVG circle rendering through the `join` method. Data is hard-coded in JavaScript arrays `xVal` and `yVal`, and the chart includes gridlines via tick marks and a title. The SVG output is generated entirely in vanilla JavaScript without external datasets.

Loading thumbnail…

D3 Scatter Plot Vanilla Javascript

This scatter plot visualizes the relationship between petal length and sepal length using the classic Iris dataset, loaded from a GitHub gist via `d3.csv`. The chart maps each flower’s measurements to x and y positions using `d3.scaleLinear` and `d3.extent`, rendering circles as SVG marks. It includes axes generated with `d3.axisLeft` and `d3.axisBottom`, plus a title, all drawn with D3 v7 in vanilla JavaScript. The plot fills the browser window, with points sized at a fixed radius.

Loading thumbnail…

Fork of select d3 functions

This example demonstrates an animated sine wave generated from a dynamic dataset, rendered as a set of circles that move vertically across the screen. The number of points fluctuates over time, creating a breathing effect. The visualization uses D3’s `select` and `selectAll` APIs to manage an SVG canvas, updating circle positions via the data join. Data is produced by `makeData.js`, while a 60Hz interval drives the animation, and `vizData` handles the rendering. The code relies on the `d3.range` function for data generation and D3’s SVG circle elements for display.

Loading thumbnail…

select d3

A wave of circles animates across the screen, with each circle’s vertical position following a sine function that changes over time. The number of visible circles also fluctuates as the wave’s frequency shifts. Built with React, the visualization uses d3.select to append an SVG filling the viewport, then d3.range to generate data points updated with a setInterval loop. D3’s data join (`selectAll().data().join()`) binds the new array to existing circle elements, smoothly adjusting their `cx` and `cy` attributes each frame.

Loading thumbnail…

Fork of Full Sol Lewitt whit D3 reduce code

This visualization reproduces a Sol LeWitt wall drawing as a grid of horizontal and vertical bars, intersected by a central circular symbol. It uses the D3 library (v7.8.5) to generate SVG masks that reveal or hide alternating bar orientations. The code defines two masks, one for each direction, applying a path built from D3’s `symbol` API to create the geometric cutout. The artwork is generated procedurally with `range`, `select`, and `append` calls, rendering abstract geometric forms without external data.

Loading thumbnail…

Full Sol Lewitt whit D3

This example reproduces a Sol LeWitt wall drawing using D3.js. It shows a grid of horizontal and vertical bars intersecting to form a circular emblem at the center, created by masking the bars with a geometric symbol path. The SVG rendering uses `d3.select`, `d3.range`, `d3.symbol`, and `d3.symbols` to generate and mask the rectangular bar elements. Two separate mask groups define the circular shape, with one mask inverting the fill to combine the bars into a single composed form.

Loading thumbnail…

Sol Lewitt whit D3

This example generates a geometric composition inspired by Sol LeWitt using D3.js. It shows a grid of intersecting horizontal and vertical bars that are visible only within two overlapping circular regions. The artwork uses SVG masks to reveal the bar patterns, with one mask showing the horizontal bars in a circle and the other showing the vertical bars in an inverse circle. The code creates 100 bars in each direction and applies the masks via `svg.append('mask')` and the `attr('mask', ...)` method.

Loading thumbnail…

Fork of Sol Lewitt Vertical

This example reproduces Sol LeWitt’s *Vertical* art piece using two SVG masks to interleave horizontal and vertical black bars. A circular mask reveals the horizontal bars inside the circle while hiding them outside, and a complementary mask reveals the vertical bars only outside the circle. The code builds the SVG directly with the Document Object Model (DOM) API, creating 100 rectangles at 20-pixel intervals across a 600×500 canvas. The result is a clean, geometric pattern that contrasts dense line grids with an empty circular void.

Loading thumbnail…

Sol Lewitt picture

This example reproduces a Sol LeWitt-inspired geometric composition using raw SVG. The visualization shows a series of one hundred vertical rectangles evenly spaced across the full width of the browser window, each with a fixed width of 10 pixels and extending the entire height of the viewport. The code generates the SVG elements directly via the Document Object Model (DOM) API, using `document.createElementNS` and `setAttribute` to position and size each rectangle. The rendering relies on the browser’s native SVG support, with no external libraries or data sources involved.

Loading thumbnail…

seudo-bar

A seudo-bar chart displays four categorical bars labeled A through D, each with a distinct color and height encoded directly via SVG rectangles. The example uses raw SVG elements in an HTML file without any JavaScript libraries, setting bar dimensions explicitly through x, y, width, and height attributes. Text labels beneath the bars identify the categories, with styling applied via inline CSS for font size and weight. The rendering approach is static SVG, with bars positioned from a white background rect, and no interaction or data-binding logic present.

Loading thumbnail…

Fork of HTML Starter

This example displays the text "Hello HTML!" centered on the page at a very large font size. It uses a simple CSS class to set the font size and text alignment, and renders the message directly in the HTML body without any JavaScript or data processing. The page is a minimal demonstration of combining HTML, CSS, and JavaScript in a single file.

Loading thumbnail…

SVG fundamentals

This example visualizes seven data points as a pseudo scatterplot using raw SVG elements. The code manually positions each circle via absolute `cx` and `cy` coordinates, creating a diagonal trend downward from the top-right to the bottom-left. It uses the SVG API directly within an HTML document, setting a white background rectangle and rendering seven circles with a fixed radius. No external libraries or a specific data source are required, as the visualization is built entirely from static SVG markup.